#logo{
    /*display: none;*/

} 

#mufti{
    width: 43%;
    text-align:left;

    
}

#abdulrahman{
    margin-right:2%;
    text-align: right;
    width: 43%;
}

#CV{
    text-align: center;
    /*width: 30%;*/
}

#image {
    width: 177px;

}

#logo_table{
    width: 100%;
    margin-top:0px;

}

#logo_table_family{
    width: 100%;
    margin-top:0px;

}

.content_table{
    width: 100%;

}

#footer_table{
    /*display:none;*/
}

#footer{
    text-align:center;
    font-family: 'Quicksand';
    font-size: 15px;
}


h1{
    font-size:40px;
}

h2{
   font-weight: normal;
}



@font-face{
    font-family:"Letter Gothic Std";
    src:url(LetterGothicStd.otf);
}

@font-face{
    font-family:"PrintBold";
    src:url(PrintBold.otf);
}

@font-face{
    font-family:"PrintClearly";
    src:url(PrintClearly.otf);
}

/*
b{
    font-family:"PrintBold";
}*/

body
{
    margin: 0;
    background-color:white;
    font-family: 'Quicksand';
    font-size: 20px;
}


#summary {
    /*display:none;*/
    font-family: 'Quicksand' , "Letter Gothic Std";
    color: black;
    font-size: 16px;
    text-align: center;
    width:73%;
}

/*
#line {
    border-top-style:solid;
    height:1px;
    border-color:#d0d0ce;
    width:90%;
    margin-right:5%;
    margin-left:5%;
    border-width:1px;	
}
    */



#social_column {
    /*display:none;*/
  text-align: center;
  text-decoration: none;
}

#selected{
    color: #f4d750;
}

#home_button{
    color:#4e4e4e;
    font-size: 21px;
  text-decoration: none;
}

#home_button a:hover{
    color:#f4d750;  
}

#resume_button{
    color:#4e4e4e;
    font-size: 21px;
  text-decoration: none;
}

#resume_button a:hover{
    color:#f4d750;
}

#projects_button{
    color:#4e4e4e;
    font-size: 21px;
  text-decoration: none;
}

#projects_button a:hover{
    color:#f4d750;
}



.social{
  color:#4e4e4e;
/*font-size: 21px;*/
    font-weight: bold;
  text-decoration: none;
}

a.social:hover{
    color: #f4d750 ;
}


a.nav{
    font-size: 20px;
    color:#4e4e4e;
    text-decoration: none;
}

a.nav:hover{
    color: #4e4e4e ;
    font-weight: bold;
}

a.nav#selected{
    color: #4e4e4e;
    font-weight: bold;
}

.carleton{
    color: black;
    font-weight: bold;
    text-decoration: none;
}


a.carleton:visited{
    font-weight: bold;
    color: black;
   text-decoration-color: black;

}

a.carleton:hover{
    color: #f4d750 ;
}

a.carleton:active{
    color: #f4d750 ;
}


#CV{
    text-align: center;
    font-size:40px;
    /*width: 30%;*/
}

#CV-2{
    text-align: center;
    vertical-align: top;
}

#line {
    /*display: none;*/
    border-right-style:solid;
    height:110px;
    border-color:black;
    width:0px;
    border-width:2px;	
    margin: auto;
}

.vertLine{
        text-align: center;
        vertical-align: top;
        width: 5%
}

.left{
    width: 46%;
    height: 70px;
  text-align: right;
  vertical-align: top;
  font-family:"Quicksand";
  font-size: 21px;
}

.right{
    width: 47.5%;
    height: 70px;
    text-align: left;
    vertical-align: top;
    font-family:"Quicksand";
    font-size: 21px;
}

.link{
    color: black;
    font-weight: bold;
    text-decoration: none;
    cursor: pointer;
}


a.link:visited{
    font-weight: bold;
    color: black;
   text-decoration-color: black;

}

a.link:hover{
    color: #f4d750 ;
}

a.link:active{
    color: #f4d750 ;
}

.family_link{
    color: black;
    text-decoration: none;
    cursor: pointer;

}

a.family_link:visited{
    color: black;
   text-decoration-color: black;

}

a.family_link:hover{
    color: #f4d750 ;
}

a.family_link:active{
    color: #f4d750 ;
}

tr.resume_items{
        /*display: none;*/

}

#resume_button, #home_button,  #projects_button{
    cursor: pointer;
}

#pdf{
    font-size:10px;
}

#date{
    color: #7C7C7C;
    font-size: 16px;
    /*font-weight: bold; */

}

#resume_page{
    margin-top:10px;
  font-family:"Quicksand";
}

#projects_page {
    /*display:none;*/
    font-family: 'Quicksand' , "Letter Gothic Std";
    color: black;
    font-size: 20px;
  text-align: center;

}

#ML{
    font-size: 14px;
    display:none;
}

#ML_button{
    cursor: pointer;
}

#AI{
    font-size: 14px;
    display:none;
}

#AI_button{
    cursor: pointer;
}


.user_info{
    background: #FEF7DB;
    border: solid #F6E181 1px;
    border-radius: 4px;
    margin-left: 30%;
    margin-right: 30%;
    margin-bottom: 20px;
    text-align: center;

}

.user_note{
    background: #E6F2FF;
    border: solid #94B6D8 1px;
    border-radius: 4px;
    margin-left: 30%;
    margin-right: 30%;
    margin-bottom: 20px;
    text-align: center;

}

.left-recipes{
    float: left;
    width: 200px;
    height: 100%;
    background: #FEF7DB;
    border: solid #F6E181 1px;
    border-radius: 4px;
    margin-top: 15px;
    margin-left: 30px;
    margin-right: 20px;
    margin-bottom: 20px;
    text-align: center;
    padding: 6px;
}

hr{
    border: 0;
    height: 0;
    border: 1px solid #F6E181;   
}



.wrapper {
    width: 100%;
   /* border: 1px solid black;*/
    overflow: hidden; /* will contain if #first is longer than #second */
}

.second {
    border-top: solid #F6E181 1px;
    height: 100%;
    overflow: hidden; /* if you don't want #second to wrap below #first */
    margin-top: 15px;
    margin-left: 30px;
    margin-right: 20px;
    margin-bottom: 20px;
    padding: 6px;
    overflow-y:auto;
}

.recipe_step {
    border: solid #FFB870 1px;
    background: #FEEEDB;
    max-width: 60%;
    overflow: hidden; /* if you don't want #second to wrap below #first */
    margin-top: 10px;
    margin-right: 20px;
    margin-bottom: 10px;
    border-radius: 4px;
    padding: 3px;
}

.table_form{
    vertical-align: text-top;

}


button.blue {
    border: 2px solid #297ACC;
    background: #5CADFF;
    height: 37px;
    /*width: 90px;*/
    color: White;
    cursor: pointer;
    border-radius: 3px;
    margin-right:3px;
    margin-bottom:3px;
    font-size: 15px;
}
button.blue:hover{
  background: #297ACC;

}
button.blue:active{
  background: #7DBDFF;
}





.shobak_link{
    color: #432f13;
    /*font-weight: bold;*/
    text-decoration: none;
    cursor: pointer;
    font-size: 32px;

}

a.shobak_link:visited{
    /*font-weight: bold;*/
    color: #432f13;
    text-decoration-color: #432f13;

}

a.shobak_link:hover{
    color: #fb5e00 ;
}

a.shobak_link:active{
    color: #fb5e00 ;
}

.shobak_menu{
    font-size: 32px;
    color: #432f13;

}

.title_shobak{
    text-align: center;
    font-size: 50px;
    color: #432f13;
    margin-bottom: 10px;
}

#title_shobak{
    text-align: center;
    font-size: 50px;
    color: #432f13;
    margin-bottom: 10px;
}

#main_shobak{
    /*min-height: 400px;*/
    width: 98%;
    height: 100%;
    background: #fdf3d1;
    /*border: solid #F6E181 1px;*/
    border-radius: 10px;
    margin-top: 10px;
    margin-left: 10px;
    margin-right: 10px;
    margin-bottom: 20px;
    text-align: center;
    padding: 6px;
    padding-bottom: 40px;
}

.inside_items_shobak{
    background: white;
    border-radius: 15px;
    /*width:600px;*/
    color: #432f13;
    display: inline-block;
    padding-bottom: 15px;
    margin-right: 5px;
    margin-left: 5px;
}

.pie_img{
    width:140px;
    height:140px;
    margin-top: 20px;
    /*
    margin-left: 10px;
    margin-right: 10px;*/
    margin-bottom: 10px;
    cursor: pointer;
}

.pie_open_img{
    width:160px;
    height:160px;
    margin-top: 20px;
    /*
    margin-left: 10px;
    margin-right: 10px;*/
    margin-bottom: 10px;
    cursor: pointer;
}

.pie_closed_img{
    width:160px;
    height:auto;
    margin-top: 20px;
    /*
    margin-left: 10px;
    margin-right: 10px;
    margin-bottom: 10px;*/
    cursor: pointer;
}

.olives_img{
    width:160px; /* you can use % */
    height: auto;
    margin: 0px;
    margin-bottom:30px;
}

.img_div{  
    display: inline-block;
    /*width: 120px;*/
    margin-right: 15px;
    margin-left:15px;
}

.title{
    display: inline-block;
    font-family: 'Quicksand';
    font-size: 30px;
    margin-bottom: 10px;
    font-weight: normal;
    color: #404040;
}

.price{
    font-size:11px;
    font-weight: bold;
    /*font-family: Arial;*/
}

.margin{
    margin-top: 26px;
}

.item_description{
    font-size:14px;
    color: #fb5e00;
    width: 190px;
    height:48px;
    vertical-align: text-top;
}

.salad{
    width: 220px;
    height: 260px;
    padding-bottom: 10px;
}

.salad_img{
    width: 160px;
    height: 160px;
    
}

.no_margin{
    margin:0px;
}

.items_shobak{
    width: 100%;
}

.shobak_logo{
    width: 340px; 
    height: automatic;
}


table.inside_items td {
    text-align: center;
    padding-right:15px;
    padding-left:15px;
    padding-top:0px;
    padding-bottom: 0px;
    /*border: black 1px solid;*/
}
table.inside_items{
    margin-left:auto;
    margin-right:auto
}
td{
    text-align: center;
    /*border: black 1px solid;*/
}



#lightbox {
    position:fixed; /* keeps the lightbox window in the current viewport */
    top:0; 
    left:0; 
    width:100%; 
    height:100%; 
    /*background:url(family/shobak/overlay.png) repeat; */
    background-color:rgba(0, 0, 0, 0.6);
    text-align:center;
}

#lightbox p {
    text-align:right; 
    color:#fff; 
    margin-right:20px; 
    font-size:12px; 
}
/*
#lightbox img {
    box-shadow:0 0 25px #111;
    -webkit-box-shadow:0 0 25px #111;
    -moz-box-shadow:0 0 25px #111;
    max-width:940px;
}
*/

#content{
    background: white;
    border-radius: 15px;
    height: auto;
    width: 0 auto;
    margin:0 auto;
    padding: 10px;
    padding-right: 40px;
    padding-left: 40px;
    box-shadow:0 0 25px #111;
    -webkit-box-shadow:0 0 25px #111;
    -moz-box-shadow:0 0 25px #111;
    display: inline-block;
    margin-top: 20px;
    max-height:80%;
    overflow-y:auto;
}


#content td{
    padding: 0;
    font-size: 15px;
    padding-right: 20px;
    padding-left: 20px;
    vertical-align: top;
}


#content .item_description{
    font-size:14px;
    color: #fb5e00;
    width : auto;
    height: auto;
    padding-bottom: 10px;
    vertical-align: text-top;
}


td.orders{
    min-width: 300px;
    
}

.shobak_button {
    border: 2px solid #ffe179;
    background: #fdf3d1;
    height: 37px;
    /*width: 90px;*/
    color: #826e52;
    cursor: pointer;
    border-radius: 3px;
    margin-right:3px;
    margin-bottom:3px;
    font-size: 15px;
}
.shobak_button:hover{
  background: #ffe179;

}
.shobak_button:active{
  background: #fff7db;
}

button.blue {
    /*border: 2px solid #297ACC;*/
    border: 0px;
    background: #5CADFF;
    height: 30px;
    color: White;
    cursor: pointer;
    border-radius: 2px;
    margin-right:3px;
    margin-bottom:3px;
    width: 140px;
    font-size:15px;
}
button.blue:hover{
  background: #297ACC;

}
button.blue:active{
  background: #7DBDFF;
}

button.green , .green{
    /*border: 2px solid #7EB370;*/
    border:0px;
    background: #9FDF8C;
    height: 30px;
    color: White;
    cursor: pointer;
    border-radius: 2px;
    margin-right:3px;
    margin-bottom:3px;
    width:140px;
    font-size:15px;
    
}
button.green:hover, .green:hover{
  background: #7EB370;

}
button.green:active, .green:active{
  background: #BFF3B0;
}

.logo{
  width: 350px;
}



table.list_container{
    background-color: white;
    /*padding: 10px;*/
    width: 80%;
    
    margin-left: 10%;
    margin-right: 10%;
    
    border-collapse: separate;
    border-spacing: 0px 10px;
}

tr.list_item {
    height: 200px;
    width: 100%;
    background-color: white;
}

tr.list_item .right_list_item{
    padding:15px;
    border-top-right-radius: 15px;
    border-bottom-right-radius: 15px;
    text-align: left;
}

tr.list_item .left_list_item{
    width: 35%;
    min-width: 100px;
    max-width: 300px;
    padding: 15px;
    
    border-top-left-radius: 15px;
    border-bottom-left-radius: 15px;
    
    border-right-color: #d9d9d9;
    border-right-style: solid;
    border-right-width: 1px;
}
/*
tr.list_item.odd .left_list_item{
    border-right-color: #f2f2f2;
}
*/

tr.list_item td.left_list_item img{
    width: 100%;
    height: auto;

}



td.vertical_sep{
    border-bottom-color: #d9d9d9;
    border-bottom-style: solid;
    border-bottom-width: 1px;
    padding: 0px;
}

#profile_pic{
    width: 130px;
    height: 130px;
    border-radius: 69px;
    border-color: #cccccc;
    border-width: 4px;
    border-style: solid;
}


table.logo_navBar{
    width: 100%;
    margin-bottom: 20px;

}

img.appicon{
    max-height:110px;
    max-width:110px;
}

img#appleStoreLogo{
    width:150px;
}