/*------------------- Global Design -------------------*/

body {
display: block;
text-align: center;
background-color: #fff;

background-repeat: repeat-x;
margin: 0px;
font-family:'HelveticaNeue-Regular','Helvetica Neue Light','Helvetica Neue','Helvetica','Lucida Grande',Verdana,Arial,Sans-Serif;
min-width: 1200px;

font-weight: 300;
letter-spacing: .4px;
background-image: url(/static/imgs/Edge1c.png);
}

/* body **
//background-color: #000;
//line-height: 20px;
//bdbdbd
// afafaf 
// background-image: url(/static/imgs/Edge4.png);*/


#page {
display: block;
width: 981px;
text-align: center;

background-color: transparent;

margin-left: 168px;

height: auto;
margin:0 auto;
min-width:981px;
margin-bottom: 50px;

}
/*
//background-color: #fff;
//background-image: url(/static/imgs/edgeMe3.png);
*/

/* "Bookman Old Style", */

h1, h2, h3 {
font-family:'HelveticaNeue-Regular','Helvetica Neue Light','Helvetica Neue','Helvetica','Trebuchet MS','Lucida Grande',Verdana,Arial,Sans-Serif;
}

#header {
display: block;
background-color: #000;
margin-bottom: 0px;
height: 180px;
text-align:center;
width: auto;
}
/*nice blue 4885e5*/

#branding {

color: #fff;
text-align: center;

width: auto;
background-position: center;

background-repeat: no-repeat;
background-color: #000;
height:140px;
margin-bottom: 0px;
text-align: center;
border-bottom: #fff thin solid;
}
/*
//padding-left: 965px;
*/

img {
border:none;
}

/* for #branding
background-image: url(/static/imgs/Me-Heading-5.png);
*/

/*------------------- Global Navigation -------------------*/

#navigation {
overflow:hidden; 
text-align: center;
height: 30px;
width:961px;
margin-bottom: 0px;
margin:0 auto;
padding-left: 1px;
border-left: #fff thin solid;
}

/*for navigation
// margin-left: 180px;*/

#navigation ul{
text-align: center;
margin: 0px;
padding: 0px;
}
/* for navigation ul
// padding-left: 0px;*/

#navlist{
margin: 0px;
padding: 0px;
vertical-align: middle;
text-align: center;
display: inline;
}

/*
for navlist 
border-left: #fff thin solid;
border-right: #fff thin solid;*/

#navlist ul{
margin: 0px;
vertical-align: middle;
text-align: center;
padding-left:0px;
}

#navlist li{
float:left;
display:inline-block;

color: #fff;
width: 159px;
height: 30px;
border-right: #fff thin solid;

vertical-align: middle;
padding:0px;
margin: 0px;
text-align: center
}

/* for navlist li
border-left: #fff thin solid; */


ul#navlist li a
{
display: block;
width: 159px;
height: 30px;
}

ul#navlist li a:hover
{
background: #181818;
}

ul#navlist li a.selected
{
color: rgb(0,174,239);
background: #181818;
}
/*
color: #d0b240;
*/

/*
for navlist li
padding-top: 5px;
border:1px solid;
border-color:#f3f3f3 #bbb #bbb #f3f3f3;
margin:0px;
padding:10px;*/

#navlist a{
text-decoration: none;
color: #fff;
margin-top: 0px;
}

/*Tried to add the selected class, but it didn't work!!
li#nav_work a.selected{
background-color: #191919;
text-decoration: none;
color: #54a443;
margin-top: 0px;
}

#navlist.selected{
background-color: #191919;
}
*/
ul#localnavlist li a.selected{
color: rgb(0,174,239);
}
/*
color: #d0b240;
*/


/*
#nav_about li{
padding:0px;
margin: 0px;
}

#nav_edu li{
padding:0px;
margin: 0px;
}

ul#nav_work li{
width:80px;
}


#navlist li a{
border:medium none;
color:#FFF;
display:block;
font-size:12px;
font-weight:300;
height:24px;
letter-spacing:1px;
margin:0;
padding-left:10px;
padding-top:5px;
text-decoration:none;
width:180px;
text-align: center
}
*/

/*------------------- Global Detailed Navigation -------------------*/

#extndbox {
background-color: #191919;
height:6px;
width:auto;
border-top: #fff thin solid;
border-bottom: #fff thin solid;
}
/*for extndbox
background-image: url(tryhorz2.png);
margin: auto;*/

#extndnav {
background-image: url(/static/imgs/tryhorz3.png);
height:6px;
width:961px;
margin: auto;
}
/* for extndnav
// border-right: #fff 1px solid;
// border-left: #fff 1px solid;*/

/*for extndnav
margin-left: 87px;*/

#init_extnd {
height: 10px;
width: 961px;
background-color: #000;
margin:auto;
}
/* for init_extnd
// border-left: #fff 1px solid;
// border-right: #fff 1px solid;// remove white vs color
// border-bottom: #fff thin solid;
// float:left;
// position: fixed;
// left:100px
// top:200px;
*/


#init_toextnd {
height: 80px;
width: 961px;
background-color: #000;
position: relative;
}
/* for init_toextnd
// margin-left: 1px;
// border-left: #fff 1px solid;// remove white vs color
// border-right: #fff 1px solid;// remove white vs color
// border-bottom: #fff thin solid;
// margin-top: -60px;
// float:left;
// left:400px
// top:800px;
*/

#extnd-des {
background-image: url(/static/imgs/tryhorz2.png);
height:6px;
width:961px;
position: absolute;
bottom:0px;
border-bottom: #fff thin solid;/* remove white vs color*/
}
/* for extnd-des
// padding-right: 2px;
// margin-top:20px;
// border-left: #fff thin solid;
// border-bottom: #fff thin solid;
// border-right: #fff thin solid;// remove white vs color
*/

.init-extnd-boolean {
display: none;
overflow: hidden;
}

.init-extndact {
display: none;
overflow: hidden;
}

#extndact {
text-align: left;
margin-bottom: 10px;
margin-left: 2px;
font-size: small;
width:800px;
overflow:hidden;
min-height: 30px;
}
/*for extndact
// margin-top: 2px;
*/

.extnd_icn {
margin-right:4px;
border:none;
vertical-align:middle;
}

#extndact a.extnd_href{
text-decoration: none;
color: transparent;
text-align: center;
}
/* for extndact a.extnd_href
// display: block;
// color: #8f8f8f;
// margin-right: 90px;
// padding: 0px;
// float:left;
// width:140px;
//font-weight:bold;
*/

#extndact a.extnd_href:hover{
color: rgb(0,174,239);
background: url(/static/imgs/PullDown3-0.png) no-repeat;
height: 30px;
}
/* for extndact a.extnd_href:hover
// color: #54a443;
// color: #e0e0e0;
*/

.extnd_href{
background: url(/static/imgs/PullDown2-1.png) bottom left no-repeat;
text-decoration: none;
color: #000;
margin-right: 82px;
padding: 0px;
float:left;
width:100px;
height: 20px;
margin-top:0px;
}
/* for extnd_href
// display: block;
//height: 15px;
//color: #000;
*/

#mp_backlinks {
padding-top: 5px;
width: 590px;
float: left;
font-size: 12pt;
margin-top: 10px;
border-bottom: thin #000 solid;
height: 30px;
padding-left: 10px;
color: rgb(0,174,239);
}
/*
color: #d0b240;
//background-color: #c9e5ff;
//background: url(/static/imgs/BreadCrumb.png) no-repeat;
*/

#mp_backlinks a{
text-decoration: none;
color: #000;
}
/* for mp_backlinks a
//color: #4885e5;
// color: #54a443;
*/

#mp_backlinks a:hover{
color: rgb(0,174,239);
}
/*
color: #d0b240;
used to be 4885e5
*/

.dnav_h {
background-color: #181818;
}

.dnav_u a{
border-bottom: rgb(0,174,239) thin dotted;
color: rgb(0,174,239);
}
/*
border-bottom: #d0b240 thin dotted;
color: #d0b240;
*/

#dnav_abut{
width: 160px;
height:80px;
float: left;
}

#dnav_educ{
width: 160px;
height:80px;
float: left;
}

#dnav_work{
width: 160px;
height:80px;
float: left;
}

#dnav_prtf{
width: 160px;
height:80px;
float: left;
}

#dnav_blog{
width: 160px;
height:80px;
float: left;
}

#dnav_else{
width: 159px;
height:80px;
float: left;
}

#dnav_babut{
width: 160px;
height:80px;
float: left;
}

#dnav_beduc{
width: 160px;
height:80px;
float: left;
}

#dnav_bwork{
width: 160px;
height:80px;
float: left;
}

#dnav_bprtf{
width: 160px;
height:80px;
float: left;
}

#dnav_bblog{
width: 160px;
height:80px;
float: left;
}

#dnav_belse{
width: 159px;
height:80px;
float: left;
}


.dnav_list{
font-size: small;
list-style: url(/static/imgs/arrow.gif);
text-align: left;
vertical-align: top;
margin-top: 0px;
padding-left: 30px;
color:#000;
}

.dnav_list a{
text-decoration: none;
color: gray;
}

.dnav_list a:hover{
border-bottom: rgb(0,174,239) thin dotted;
color: rgb(0,174,239);
}
/*
border-bottom: rgb(0,174,239)#d0b240 thin dotted;
color: rgb(0,174,239)#d0b240;

*/



/*------------------- Global Container -------------------*/

#bodycontainer {
margin-left: 178px;
display: block;
text-align: center;
overflow: hidden;
height: auto;

margin:auto;
min-width:960px;
width:961px;

padding-bottom: 100px;
}
/* for bodycontainer
//background-color: #fff;
//margin-bottom: 50px;
// margin-top: auto;
// padding-top: 20px;
// border-left: #000 1px solid;
// border-right: #000 1px solid;
// border-bottom: #000 medium solid;
*/

#bottomCC {
height: 30px;
width: 961px;
margin-left: auto;
margin-right: auto;

background-image: url(/static/imgs/LiteCC_WebID3.png);
background-repeat: no-repeat;
background-position: center;
}
/*
//background-color: #8b8b8b;
//background-image: url(/static/imgs/BottomCC.png);
//background-image: url(/static/imgs/LiteCC_WebIDsideBoxT4d.png);
*/

#bottomCC p{
padding-top:8px;
margin: 0;
color: #030305;
font-size: 10pt;
font-weight: bold;
text-align: center;
}


#bottomEdge {
height: 11px;
min-width:981px;
//background-image: url(/static/imgs/EdgeBottom4.png);
}


/*for bodycontainer
border-top: #000 medium solid;*/

/*------------------- Index Page Design -------------------*/

#bodycontent {

display: block;
width: 778px;
text-align: center;
overflow: hidden;
float: left;
}

#bodycontent h2{
margin-top: 0;
}

#overview {
width:720px;
height:300px;
margin-left: auto;
margin-right: auto;
background-color: #000;
margin-bottom: 40px;
position: relative;
}

#overview-ctrl{
color: red;
background-color: transparent;
width:100px;
position: absolute;
bottom: 0;
left:0;
z-index:1000000;
}
/* for overview-ctrl
// margin-bottom: 50px;
// padding-left: 5px;
// margin-left: auto;
// margin-right: auto;
*/

/*------------------- Index Events -------------------*/

#events {
width:178px;
height:460px;
background-color: #fff;
overflow: hidden;
float:left;
border-right: #a82f2f thin dotted;
}
/* for events
// margin-left: auto;
// margin-right: auto;
// border-right: #000 thin dotted;
*/

#eventsheader {
margin: 0px;
margin-bottom: 20px;
padding-bottom: 5px;
width:80px;
font-size: 16pt;
border-bottom: #5da3ea medium solid;
margin-left:auto; 
margin-right:auto;
color: #000;
}

.events_block {
width:140px;
height: 100px;
margin-left: auto;
margin-right: auto;
}
/* for events_block
// border-bottom: #000 thin dotted;
// margin-bottom: 20px;
// padding-bottom: 20px;
*/

.events_date {
width:40px;
height: 80px;
overflow: hidden;
float: left;
font-size: small;
background-color: #dfefff;
}
/* for events_date
// border-right: #5da3ea thin solid;
*/

.events_info {
width:96px;
height: 80px;
padding-left: 2px;
float: left;
font-size: x-small;
}
/* for events_info
// background-color: #dfefff;
*/

/*------------------- Index Updates -------------------*/

#updates {
width:598px;
height:480px;
margin-left: auto;
margin-right: auto;
background-color: #fff;
float:right
}

#updatesheader {
margin: 0px;
margin-bottom: 20px;
padding-bottom: 5px;
width:360px;
font-size: 16pt;
border-bottom: #a82f2f medium solid;
text-align: left;
margin-left: 10px;
color: #000;
}
/* for updatesheader
// margin-left:auto; 
// margin-right:auto;
*/

.updates_block:hover{
background-color: #f8f8f8;
border-left: #a82f2f 10px solid;
}
/* for updates_block:hover
// cursor:pointer;
*/

.updates_block {
width:554px;
height: 120px;
border-left: #fff 10px solid;
margin-bottom: 20px;
}
/* for updates_block
// border-bottom: #000 thin dotted;
// border-left: #fff 10px solid;
// margin-left: auto;
// margin-right: auto;
// padding-bottom: 20px;
*/

.updates_img {
width:120px;
height: 120px;
margin-left: 10px;
background-color: #fff;
overflow: hidden;
float: left;
}
/* for updates_img
// border-right: #000 thin solid;
*/

.updates_info {
width:400px;
height: 120px;
margin-left: 10px;
margin-right: 10px;
float: left;
font-size: medium;
text-align: left;
vertical-align: top;
}

.updates_info p{
margin-top:0px;
font-size: small;
}

.updates_info a{
font-style: italic;
color:blue;
}

#updates h3{
margin: 0px;
margin-bottom: 10px;
padding: 0px;
text-decoration: none;
font-size: medium;
}

.seclink {
display: block;
float: right;
font-style: italic;
font-size: 10pt;
color: #a82f2f;
}

.j_hunt{
color:#eadf30;
font-style: italic;
font-size: 16pt;
}

/*------------------- Index Sidelinks -------------------*/

#sidelinks {
float: right;
width:180px;
height: 800px;

}
/* for sidelinks
//background-color: #fefdff;
// border-left: #000 thin dotted;
*/

#sideheader {
margin: 0px;
margin-bottom: 40px;
padding-bottom: 5px;
width:140px;
font-size: 16pt;
border-bottom: #54a443 medium solid;
margin-left:auto; 
margin-right:auto;
}

.extrnl_news {
width:140px;
height: 100px;
border-bottom: #000 thin dotted;
margin-left: auto;
margin-right: auto;
margin-bottom: 40px;
padding-bottom: 20px;
}

.extrnl_img {
width:140px;
height: 60px;
margin-bottom: 10px;
margin-right: auto;
margin-left:auto;
background-color: black;
}

.extrnl_link {
font-size: x-small;
}


#twitter_div{
background-color: transparent;
}

.sidebar-title{
margin: 0px;
margin-bottom: 20px;
padding-bottom: 5px;
width:140px;
font-size: 16pt;
border-bottom: #54a443 medium solid;
margin-left:auto; 
margin-right:auto;
color: #000;
background-color: transparent;
}

#twitter_update_list li{
display: block;

border-left:2px #54a443 solid;
list-style: none;
font-size: 12pt;
margin-bottom: 10px;
margin-left: 0px;
padding: 0px 5px 5px 5px;
background-color: transparent;
}
/*
//background-color: #ffffff;
*/

#twitter_update_list{
text-align: left;
margin-left: 0px;
padding-left: 0px;
margin-right: 5px;
background-color: transparent;
}

ul#twitter_update_list a{
text-decoration: none;
color: #54a443;

overflow: visible;
display: block;
margin-top: 10px;
margin-bottom: 10px;
text-align: right;
}
/* for ul#twitter_update_list a
// float: left;
*/


ul#twitter_update_list a:hover{
color: #a0f74b;
}
/* for ul#twitter_update_list a:hover
// 4885e5;
*/

#twitter_update_list span a{
margin-left: 0px;
text-decoration: none;
color: rgb(204,0,102);

display: inline;
margin: 0px;
float: none;
text-align: left;
}
/*
54a443
color: #4885e5;
*/

#twitter_update_list span a:hover{
color: rgb(204,0,102);
}
/*
color: #4885e5;
*/

#twitter-link {
float: right;
margin-right:5px;
display:block;
text-align: center;
text-decoration: none;
color: #54a443;
font-weight: bold;
}

a:hover#twitter-link{
color: #a0f74b;
}
/* for a:hover#twitter-link
// 4885e5;
*/

/*------------------- Local Pages Design -------------------*/

#bodycontent-local {
display: block;
width: 961px;
text-align: center;
overflow: hidden;
margin-top: 2px;
}

.sidelink_about{
margin-top:10px;
margin-right: auto;
margin-left: auto;
text-decoration: none;
}


/*------------------- About -------------------*/

.about_actv {
width:140px;
height: auto;
margin-bottom: 20px;
float:left;
padding-left: 30px;
}
/* for extrnl_news
//border-bottom: #000 thin dotted;
//margin-left: auto;
//margin-right: auto;
//margin-left:30px;
//margin-top:30px;
*/

.about_actv h2{
display: block;
height: 60px;
margin-bottom:10px;
color:green;
}

.about_actv_img {
width:140px;
height: 100px;
margin-bottom: 10px;
margin-right: auto;
margin-left:auto;
}

.about_actv_link p{
font-size: 10pt;
}


/*------------------- Education -------------------*/

#edu {
width:598px;
margin-left: auto;
margin-right: auto;
background-color: #fff;
float:right
}

#edu_p {
padding-bottom:30px;
text-align:center;
}
/*
#updatesheader {
margin: 0px;
margin-bottom: 20px;
padding-bottom: 5px;
width:360px;
font-size: 16pt;
border-bottom: #54a443 medium solid;
// margin-left:auto; 
// margin-right:auto;
text-align: left;
margin-left: 10px;
}
*/
.edu_block {
width:594px;
height: 160px;
border-top: #000 thin dotted;
margin-left: auto;
margin-right: auto;
margin-top: 10px;
padding-top:20px;
padding-bottom: 20px;
padding-left: 5px;
padding-right: 5px;
z-index: 0;

}

.edu_block:hover{
background-color: #f8f8f8;
cursor:pointer;
border-left: rgb(0,174,239) 10px solid;
}
/*
border-left: #4885e5 10px solid;
*/

.edu_kfupm_logo {
background-image: url(/static/imgs/KFUPM_logo.jpg);
width:120px;
height: 120px;
margin-left: 15px;
margin-right: 15px;
background-color: black;
overflow: hidden;
float: left;
}
/* for edu_kfupm_logo
// border-right: #000 thin solid;
*/

.edu_um_logo {
background-image: url(/static/imgs/UM_logo.jpg);
width:120px;
height: 75px;
margin-left: 15px;
margin-right: 15px;
margin-top: 5px;
background-color: black;
overflow: hidden;
float: left;
}
/* for edu_um_logo
// border-right: #000 thin solid;
*/

.edu_info {
width:420px;
height: 120px;
margin-left: 10px;
margin-right: 10px;
float: left;
font-size: medium;
text-align: left;
vertical-align: top;
}

.edu_info p{
margin-top:0px;
font-size: small;
}

/* .edu_info a{
// font-style: italic;
// color:blue;
}*/

.edu_info a{
color:#181818;
text-decoration:none;
}

.edu_info a:hover{
color:rgb(204,0,102);
}
/*
color:#4885e5;
*/

#edu h3{
margin: 0px;
margin-bottom: 10px;
padding: 0px;
text-decoration: none;
font-size: medium;
}

.edulink2 {
font-style: italic;
font-size: 10pt;

}

.edulink2 a{
text-decoration:none;
color: blue;
}
/* for edulink2 a
// 4885e5
*/

.edulink2 a:hover{
text-decoration:none;
color: #080808;
}

/* ---------- */

.edu_main_des h2{
border-bottom:2px black dotted;
padding-bottom:15px;
}

.edu_main_about_s{
text-align:center;
border-bottom: 2px black dotted;
}

.edu_main_about_m{
text-align:left;
border-bottom:2px black dotted;
margin-bottom:20px;
}

.edu_main_about_s h1{
font-size: 18pt;
}

.edu_main_about_s h2{
border-bottom:none;
font-weight: lighter;
font-size: 16pt;
padding-bottom:0px;
}

.edu_main_about_s h3{
font-size: 14pt;
}

.edu_main_about_m h3{
display:block;
float:left;
}

.edu_main_about_m p{
display:block;
float:right;
}

.edu_main_about_m_parts{
width: 600px;
height:40px;
margin-bottom:20px;
margin-top:20px;
}
/*
//overflow:visible;
//text-align:left;
//clear:none;
*/

.um_color{
color:#000066;
}
/*
//#487F48
*/

.kfupm_color{
color:#336633;
}
/*
//Yellow #F6D565
//Blue #000066
*/


.edu_main_about_m_parts h3{
padding-top: 5px;
padding-bottom: 0px;
margin-bottom:0px;
margin-top:0px;
height:40px;
width:200px;
}

.edu_main_about_m_parts p{
padding-top: 5px;
padding-bottom: 0px;
margin-bottom:0px;
margin-top:0px;
height:40px;
width:400px;
}

/* ---------- */

#edu_crs_l{
text-align: center;
margin-top: 40px;
margin-bottom: 20px;
width:600px;
}
/*
//height:1000px;
*/

#edu_crs_l h3{
text-align: left;
background-color:navy;
color:#ffffff;
padding-left:4px;
}
/* for edu_crs_l h3
// margin-top: 40px;
*/

#edu_crs_l h2{
margin-bottom: 40px;
vertical-align: bottom;
}

.edu_crs_l_wrap{
height: 320px;
width:600px;
margin-bottom:20px;
}
/* for edu_crs_l_wrap
// margin-bottom: 20px;
*/

.kfupm_des_l h4{
color:#336633;
}

.um_des_l h4{
color:#000066;
}

.edu_crs_l_lt{
text-align: left;
float:left;
width: 300px;
}
/*
//height: 220px;
*/

.edu_crs_l_lt ul li:hover{
background-color: navy;
cursor: pointer;
}

.edu_crs_l_rt ul li:hover{
background-color: blue;
cursor: pointer;
}

.edu_crs_l_rt{
text-align: left;
float: right;
width: 300px;
}
/*
//height: 220px;
*/

#edu_crs_d{
float: left;
margin-top: 100px;
text-align: left;
}

#edu_crs_d h2{
color:green;
}

#edu_crs_d h2.edu_crs_d_l3{
color:navy;
}

/* ---------- */
.kfupm_des_l{
height:2450px;
border-bottom: 2px #336633 dotted;
}

.kfupm_des_l h2{
text-align:left;
color:green;
}
.crs_l_wrap_short{
height:160px;
}

.kfupm_des_l ul li{
height:50px;
list-style:none;
padding-left:4px;
}

.kfupm_des_l ul li:hover{
background-color:#336633;
color:#ffffff;
}

.kfupm_des_l ul li.no_link:hover {
background-color:#ffffff;
color:#000000;
cursor:default;
}

.kfupm_des_d h3{
color:#336633;
}

/* ---------- */
.um_des_l{
height:1250px;
border-bottom: 2px #000066 dotted;
}

.um_des_l h2{
text-align:left;
color:green;
}

.um_des_l ul li{
height:50px;
list-style:none;
padding-left:4px;
}

.um_des_l ul li:hover{
background-color:#F6D565;
color:#000066;
}

.um_des_l ul li.no_link:hover {
background-color:#ffffff;
color:#000000;
cursor:default;
}

.um_des_d h3{
color:#F6D565;
}

/*------------------- Work -------------------*/

#wrk {
width:598px;
margin-left: auto;
margin-right: auto;
background-color: #fff;
float:right
}

.wrk_block:hover{
background-color: #f8f8f8;
cursor:pointer;
border-left: rgb(0,174,239) 10px solid;
}
/*
border-left: #4885e5 10px solid;
*/

#wrk_p {
padding-bottom:30px;
text-align:center;
}
/*
#updatesheader {
margin: 0px;
margin-bottom: 20px;
padding-bottom: 5px;
width:360px;
font-size: 16pt;
border-bottom: #54a443 medium solid;
// margin-left:auto; 
// margin-right:auto;
text-align: left;
margin-left: 10px;
}
*/

.wrk_block {
width:584px;
height: 220px;
border-top: #000 thin dotted;
padding-top:20px;
padding-left: 5px;
}
/* for wrk_block
// margin-left: auto;
// margin-right: auto;
// margin-top: 10px;
// padding-bottom: 20px;
*/

.wrk_logo {
background-color: #000;
width:120px;
height: 120px;
background-color: black;
float: left;
}
/* for wrk_logo
// margin-left: 15px;
// margin-right: 15px;
// border-right: #000 thin solid;
// overflow: hidden;
*/

.wrk_info {
width:382px;
height: 120px;
margin-left: 15px;
float: left;
font-size: medium;
text-align: left;
vertical-align: middle;
font-size: 12pt;
}
/* for wrk_info
// margin-right: 10px;
// padding-top: 0 auto;
// padding-bottom: 0 auto;
*/

.wrk_catg{
width:62px;
height: 120px;
float: right;
font-style: italic;
font-weight: normal;
font-size: 10pt;
color: green;
text-align: left;
margin-right: 5px;
}

.wrk_info p{
margin-top:0px;
font-size: small;
}

.wrk_desc {
float: left;
text-align: left;
}
/* for wrk_desc
// background-image: url(/static/imgs/KFUPM_logo.jpg);
// border-right: #000 thin solid;
// overflow: hidden;
*/

.wrk_a2_logo {
background-image: url(/static/imgs/UM_logo.jpg);
width:120px;
height: 75px;
margin-left: 15px;
margin-right: 15px;
margin-top: 5px;
background-color: black;
overflow: hidden;
float: left;
}
/* for wrk_a2_logo
// border-right: #000 thin solid;
*/

.wrk_titl{
font-size: 12pt;
font-style: italic;
font-weight: normal;
}

.wrk_info h4{
font-weight: normal;
font-size: 10pt;
}
/* .edu_info a{
// font-style: italic;
// color:blue;
}*/

.wrk_info a{
color:#181818;
text-decoration:none;
}

.wrk_info a:hover{
color:rgb(204,0,102);
}
/*
color:#4885e5;
*/

#wrk h3{
margin: 0px;
margin-bottom: 10px;
padding: 0px;
text-decoration: none;
font-size: medium;
}

.wrklink2 {
font-style: italic;
font-size: 10pt;

}

.wrklink2 a{
text-decoration:none;
color: blue;
}
/* for wrklink2 a
// 4885e5
*/

.wrklink2 a:hover{
text-decoration:none;
color: #080808;
}


/*------------------- Portfolio -------------------*/

#toc{
text-align: left;
border-top: 2px #f0f0f0 dotted;
border-bottom: 2px #f0f0f0 dotted;
padding-top:8px;
padding-bottom:8px;
}

#toc:hover{
border-color:black;
}

/*
//4885e5 d0b240 other links color
*/

#toc li{
list-style: none;
}

#toc a{
display: block;
text-decoration: none;
height: 20px;
}



#toc ul li{
margin-bottom:4px;
}

#toc ul li.more{
}

#toc ul li a{
color:black;
padding-left:4px;
border-left:72px #f0f0f0 solid;
border-right: 8px green solid;
}

#toc ul li.more a{
border-right: 8px green solid;
}

#toc ul li a:hover{
color: green;
border-left-color: green;
background-color: #f0f0f0;
border-right: 36px green solid;
font-weight: bold;
}

#toc ul li.more a:hover{
color: green;
border-left-color: green;
background-color: #f0f0f0;
border-right: 36px green solid;
font-weight: bold; opacity:1;
}

#toc ul ul li{
margin-bottom:4px;
margin-left:-40px;
}

#toc ul ul li a{
color:black;
padding-left:4px;
border-left:36px #f0f0f0 solid;
border-right: 4px navy solid
}

#toc ul ul li a:hover{
color: navy;
border-left-color: navy;
background-color: #f0f0f0;
border-right: 72px navy solid;
font-weight: bold;
}



.lborder_wimg{
width:400px;
display:block;
}


.lborder_red{
text-align: left;
padding-left:8px;
margin-top:60px;
}

div.lborder_red h2{
text-align: left;
color:red;
}


.lborder_green{
text-align: left;
padding-left:8px;
margin-top:60px;
position: relative;
}

div.lborder_green h2{
clear:both;
text-align: left;
color:green;
}

div.lborder_green img{
position: absolute;
right:0;
top:0;
}


.lborder_navy{
text-align: left;
padding-left:8px;
margin-top:60px;
}

div.lborder_navy h2{
text-align: left;
color:navy;
}

.rborder_navy{
text-align: left;
border-right:4px navy solid;
padding-right:8px;
}




 
#proj_cont_des{
text-align: left;
}

#localcontent p a{
text-decoration:none;
color:rgb(204,0,102);
}
/*
color:#4885e5;
*/

#proj_cont_des div{
overflow: hidden;
}

#proj_cont_des p{
display:inline;
overflow: hidden;
float:right;
padding-left:8px;
width: 380px;
}

#proj_cont_des p.my_quote{
text-align:center;
color:navy;
font-weight:lighter;
font-style:italic;
}

#proj_cont_des.proj_des_622 p{
width:380px;
}

#proj_cont_des h3{
float:left;
display:block;
text-align:right;
color:navy;
height:150px;
width:200px;
border-right:4px navy solid;
padding-right:8px;
}

#proj_cont_des.proj_des_622 h3{
height:300px;
}

#proj_cont_des.proj_des_501 h3{
height:200px;
}

#proj_cont_des.proj_des_485 h3{
height:200px;
}

#proj_cont_des.proj_des_658 h3{
height:200px;
}

#proj_cont_des.proj_des_bit678 h3{
height:200px;
}

#proj_cont_des.proj_des_485 h3.short_485_h3{
height:150px;
}

#proj_cont_des.proj_des_501 h3.long_501_h3{
height:250px;
}

#proj_cont_des.proj_des_658 h3.long_658_h3{
height:350px;
}

#proj_cont_des.proj_des_bit678 h3.long_bit678_h3{
height:300px;
}

#proj_cont_des.proj_des_501 h3.longer_501_h3{
height:300px;
}

#proj_cont_des.proj_des_622 h3.short_622_h3{
height:250px;
}

#proj_cont_des.proj_des_622 h3.shorter_622_h3{
height:200px;
}

#proj_cont_des h3 img{
margin:0 auto;
margin-top:10px;
margin-right:15px;
}

#proj_cont_des.proj_des_622 h3 img{
margin-right: 20px;
margin-top: 30px;
}

a:hover img.gotop{
background-image: url("/static/imgs/portfolio/content/go_to_top_h.png");
}

a img.gotop{
float:right;
}

h1.award_title{
font-size:20pt;
font-family:cursive;
}

.not_active{
opacity:0.15;
}

#proj_cont_des.proj_des_658 ol li{
margin-left:210px;
}

#proj_cont_des.proj_des_bit678 ul li{
margin-left:210px;
}

/*--------- Bread Crumbs Navigation ---------*/
#breadcrmp {
font-size: small;
width:620px;
margin-left: 30px;
float:right;
}
/* for breadcrumb
// border-bottom: #000 thin solid;
// border-left: #000 20px solid;
// border-right: #000 thin solid;
// background-color: #181818;
// padding-left:2px;
*/

/*
.mp_backlinks {
overflow: hidden;
float: left;
color:green;
top:180px;
left:400px;
}

.mp_backlinks a{
position: relative;
text-decoration: none;
}
*/


/*Fat Erik's Breadcrumbs*/
#bclist
{
list-style: none;
padding: 0;
margin: 0;
}

#bclist li
{
display: inline;
padding: 0;
margin: 0;
}

/* #bclist li:before { content: "> "; }*/

#bclist li:before{
content: ""
}
#bclist li:first-child:before { content: ""; }

/*IE workaround*/
/*All IE browsers*/
* html #bclist li
{
background-image: url("images/gt.gif");
background-repeat: no-repeat;
background-position: 0 50%;
padding: 0 0.5em 0 1em;
margin: 0 1em 0 -1em;
}

/*Win IE browsers - hide from Mac IE\*/
* html #bclist { height: 1%; }

* html #bclist li
{
display: block;
float: left;
}

/*End hide*/
/*Mac IE 5*/
* html #bclist li:first-child { background-image: none; }

/*-------------------------------------------*/



/*--------- Local Navigation ---------*/

#localnav {
width:149px;
height:auto;
background-color: #fff;
overflow: hidden;
float:left;
display: block;
margin-right: 30px;
margin-top: 80px;
}
/* for localnav
// margin-left: auto;
// margin-right: auto;
// border-bottom: 1px solid gray;
// border-right: #000 thin dotted;
*/

#localnavlist
{
padding-left: 0;
margin-left: 0;
border-bottom: 1px solid gray;
width: 180px;
margin-top: 0px;
}

#localnavlist li
{
list-style: none;
margin: 0;
padding: 0.25em;
border-top: 1px solid gray;
text-align: left;
padding-left: 20px;
}

#localnavlist li ul li
{
padding-left: 0px;
border-top: none;
}

#localnavlist li a {
text-decoration: none;
color: #000;
}

ul#localnavlist li a:hover
{
color: rgb(0,174,239);
}

/*
color: #d0b240;
used to be 4885e5
*/

/*
ul#localnavlist
{
width: 158px;
\width: 160px;
w\idth: 158px;
padding: 0px;
border: 1px solid #808080;
border-top: 0px;
margin: 0px;
font: bold 12px verdana,helvetica,arial,sans-serif;
background: #808080;
}

ul#localnavlist li
{
list-style: none;
margin: 0px;
border: 0px;
border-top: 1px solid #808080;
}

ul#localnavlist li a
{
display: block;
width: 122px;
\width: 158px;
w\idth: 122px;
padding: 4px 8px 4px 8px;
border: 0px;
border-left: 20px solid #aaaabb;
background: #ccccdd;
text-decoration: none;
text-align: right;
}

ul#localnavlist li a:link { color: #666677; }
div#localnav li a:visited { color: #666677; }

ul#localnavlist li a:hover
{
border-color: #ff9000;
color: #ffffff;
background: #000d33;
}
*/

/*------------------------------------*/


/*--------- Local Contents Area ---------*/

#localcontent{
width:600px;
height:auto;
margin-left: auto;
margin-right: auto;

float:left
}
/*
//background-color: #fff;
*/

#localcontentheader {
margin: 0px;
margin-bottom: 20px;
padding-bottom: 5px;
width:240px;
font-size: medium;
border-bottom: #54a443 medium solid;
text-align: left;
}
/* for localcontentheader
// margin-left:auto; 
// margin-right:auto;
// margin-left: 10px;
*/

/*---------------------------------------*/


/*--------- Local Sidelinks Area ---------*/

#localsidelinks a{
color:rgb(204,0,102);
text-decoration:none;
}
/*
color:#4885e5;
*/

#localsidelinks {
float: right;
width:179px;
height: auto;
//background-color: #fbfcfd;
}
/* for localsidelinks
// border-left: #000 thin dotted;
*/

#localsideheader {
margin: 0px;
margin-bottom: 40px;
padding-bottom: 5px;
width:140px;
font-size: small;
border-bottom: #54a443 medium solid;
margin-left:auto; 
margin-right:auto;
}

.localsideBoxT {
background-image: url(/static/imgs/sideBoxT4a.png);
width:170px;
height: 20px;
margin-left:auto; 
margin-right:auto;
margin-bottom: 0px;
font-size: medium;
text-align: center;
vertical-align: bottom;
font-weight: normal;
}
/* for localsideBoxT
// padding-bottom: 10px;
*/

.localsideBoxM {
height: auto;
width:170px;
font-size: small;
margin-left:auto; 
margin-right:auto;
margin-top: 10px;
}
/* for localsideBoxM
// background-image: url(/static/imgs/sideBoxM2.png);
// margin-bottom: 10px;
*/

.localsideBoxB {
width:160px;
height: 8px;
padding-top: 10px;
margin-left:auto; 
margin-right:auto;
margin-bottom: 20px;
display: block;
}
/* for localsideBoxB
// background-image: url(/static/imgs/sideBoxB2.png);
// border-top: #000 2px solid;
*/

/*----------------------------------------*/


h2#localsideheader {
text-align: left;
}

p#localcontent {
overflow: hidden;
}

img#localcontent {
overflow: hidden;
}

#localcontent {
overflow: hidden;
}

.tr {
overflow: hidden;
float:left;
width:180px;
margin-right: 20px;
}

#sideheader {
margin: 0px;
margin-bottom: 40px;
padding-bottom: 5px;
width:140px;
font-size: 16pt;
border-bottom: #54a443 medium solid;
margin-left:auto; 
margin-right:auto;
}

.extrnl_news {
width:140px;
height: 100px;
border-bottom: #000 thin dotted;
margin-left: auto;
margin-right: auto;
margin-bottom: 40px;
padding-bottom: 20px;
}

.extrnl_img {
width:140px;
height: 60px;
margin-bottom: 10px;
margin-right: auto;
margin-left:auto;
background-color: black;
}

.extrnl_link {
font-size: x-small;
}








/*
	List Expander 
*/

/*.listexpander{width:100%;}
.listexpander, .listexpander ul, .listexpander li{
	margin:0;
	padding:0;
	list-style:none;
}
*/

/*Uncomment this if you want to initially hide the child lists. 
	If you do, Javascript disabled and CSS enabled browsers will not be able to use this list.*/
	
.listexpander ul{
	
	display:none;
	
}
/*.listexpander li{
	line-height:200%;
	margin-top:1px;
	cursor:default;
	text-indent:30px;
	font-weight:bold;
	width:100%;
}*/

.listexpander li.collapsed, .listexpander li.expanded{cursor:pointer;} 

/* first level */ /*color was #eee*/

.listexpander li, .listexpander li.collapsed{background:#fff url(/static/imgs/collapsed.gif) no-repeat 5px .4em;} 
.listexpander li.expanded{background:#fff url(/static/imgs/expanded.gif) no-repeat 5px .4em;}


/* second level */

.listexpander li ul, .listexpander li li{background:#f8f8f8;font-weight:normal;}
.listexpander li li.collapsed{background:#f8f8f8 url(/static/imgs/collapsed.gif) no-repeat 5px .4em;} 
.listexpander li li.expanded{background:#f8f8f8 url(/static/imgs/expanded.gif) no-repeat 5px .4em;}

/* third level */

.listexpander li li ul, .listexpander li li li{background:#fff;}
.listexpander li li li.collapsed{background:#fff url(/static/imgs/collapsed.gif) no-repeat 5px .4em;} 
.listexpander li li li.expanded{background:#fff url(/static/imgs/expanded.gif) no-repeat 5px .4em;}

/* fourth level */

.listexpander li li li li{text-indent:0;margin-left:30px;width:auto;}

/* etc. */

/* buttons */
/*
p.listexpander{
	height:1.5em;
	margin:1em 0;
}
p.listexpander a{
	float:left;
	height:1.5em;
	line-height:1.5em;
	padding:0 10px;
	border:1px solid #eee;
	margin-right:5px;
	cursor:pointer;
}
p.listexpander a:hover{
	background:#f8f8f8;
}
*/

/* float fix */
.listexpander li:after{
    content: "."; 
    display: block; 
    height: 0; 
    clear: both; 
    visibility: hidden;
}
.listexpander li{
	display: inline-block;
}
/* Hides from IE-mac \*/
* html .listexpander li{
	height: 1%;
}
.listexpander li{
	display: block;
}
/* End hide from IE-mac */
/* end float fix */



/*-------------- Button ------------------*/

.clear { /* generic container (i.e. div) for floating buttons */
    overflow: hidden;
    width: 100%;
}

a.button {
    background: transparent url(/static/imgs/bg_button_a.gif) no-repeat scroll top right;
    color: #444;
    display: block;
    float: left;
    font: normal 12px arial, sans-serif;
    height: 24px;
    margin-right: 6px;
    padding-right: 18px; /* sliding doors padding */
    text-decoration: none;
    z-index: 1;
}

a.button span {
    background: transparent url(/static/imgs/bg_button_span.gif) no-repeat;
    display: block;
    line-height: 14px;
    padding: 5px 0 5px 18px;
    z-index: 1000;
}

a.button:active {
    background-position: bottom right;
    color: #000;
    outline: none; /* hide dotted outline in Firefox */
    z-index: 1;
}

a.button:active span {
    background-position: bottom left;
    padding: 6px 0 4px 18px; /* push text down 1px */
    z-index: 1;
}

.button{
z-index: 1;
}



/*------------- Slide Show --------------*/

#slideshow {
list-style:none;
color:#fff;
}

#slideshow span {
display:none
}

#wrapper {
width:506px;
margin:50px auto;
display:none;


height:600px;
}

#wrapper * {
margin:0;
padding:0
}

#fullsize {
position:relative;
width:500px;
height:300px;
padding:2px;
border:1px solid #ccc;
background:#000;
float: left;
margin-top: 15px;
}

#information {
margin-left: auto;
margin-right: auto;

bottom:0;
width:504px;
background:#000;
color:#fff;
float: left;
z-index:200;
text-align: left;
opacity:.7;
}
/*filter:alpha(opacity=70);*/
/* for information
//overflow:hidden;
//font: verdana;
// position:absolute;
//height:200px;
*/


#information h3 {
padding:4px 8px 3px;
font-size:14px;
}

#information p {
padding:0 8px 8px
}

#image {
width:500px
position:absolute;
float: left;
}

#image img {
position:absolute;
z-index:25;
width:auto
}

.imgnav {
position:absolute;
width:25%;
height:306px;
cursor:pointer;
z-index:150
}

#imgprev {
left:0;
background:url(/static/imgs/left.gif) left center no-repeat
}

#imgnext {
right:0; 
background:url(/static/imgs/right.gif) right center no-repeat
}

#imglink {
position:absolute;
height:306px;
width:100%;
z-index:100;
opacity:.4;
}
/*filter:alpha(opacity=40);*/

.linkhover {
background:url(/static/imgs/link.gif) center center no-repeat
}

#thumbnails {
margin-top:15px;

}

#slideleft {
float:left;
width:20px;
height:81px;
background:url(/static/imgs/scroll-left.gif) center center no-repeat;
}
/* for slideleft
// background-color:#222
*/

#slideleft:hover {
background-color:#333
}

#slideright {
float:right;
width:20px; 
height:81px;
background:url(/static/imgs/scroll-right.gif) center center no-repeat
}

#slideright:hover {
background-color:#333;
}

#slidearea {
float:left;
position:relative;
width:456px;
margin-left:5px;
height:81px;
overflow:hidden;
background-color:#fff;
}

#slider {
position:absolute;
left:0;
height:81px
}

#slider img {
cursor:pointer;
border-left:8px solid #000 ;
border-bottom:4px solid #000 ;
border-right:8px solid #000 ;
border-top:4px solid #000 ;
}
/* for slider img
// border:4px solid #000;
// padding:2px;
*/