/* Import these three basement css*/
@import "lib/reset.css";
@import "lib/typography.css";
@import "lib/form.css";

/* Set the container into the middle */
#container{ max-width:900px; margin:0 auto; position:relative; }

/* Extend Css for future using if it is necessary */
#page{ margin:0; padding:0; }

/* The wrapper is wrapping the distance between two big boxes */
.wrapper{ margin:1% 0 1% 0; width:100%;}

/*In order to resizing the images*/
.source-image { width: 100%; position:absolute; height:100%; top:0;left:0;}

/*Shadow*/
.shadow1 { -moz-box-shadow: 0 0 10px 10px rgba(68,68,68,0.8);
           -webkit-box-shadow: 0 0 10px 10px rgba(68,68,68,0.8);
           box-shadow: 0 0 10px 10px rgba(68,68,68,0.8);
           behavior: url();
           /*filter: progid:DXImageTransform.Microsoft.Blur(PixelRadius=3,MakeShadow=true,ShadowOpacity=0.80);
           -ms-filter: "progid:DXImageTransform.Microsoft.Blur(PixelRadius=3,MakeShadow=true,ShadowOpacity=0.80)";
           zoom: 1;*/}
           
.roundcorner { -webkit-border-radius: 10px;
               -moz-border-radius: 10px;
               border-radius: 10px;
             }     

.shadow2 { 
           /*filter: progid:DXImageTransform.Microsoft.Blur(PixelRadius=3,MakeShadow=true,ShadowOpacity=0.80);
           -ms-filter: "progid:DXImageTransform.Microsoft.Blur(PixelRadius=3,MakeShadow=true,ShadowOpacity=0.80)";
           zoom: 1; */}    

/* Setup the header and set up the logo can be resizable and it will also support blind people to read the site logo 
   In order to making sure when the stylesheet was off, the information architecture is still logical and readable.
*/

#header {width:100%; padding:0; margin:0; height:6em;}
#header h1 {background:transparent url(../assets/xialei_logo.jpg) no-repeat; height:6em; width:8.62em;}
#header h1 a{color:transparent; text-indent:-9999em;}

#hd_img { width:115px; float:left;}
 
#navigation {background:rgb(184,205,213); width:65%; overflow: hidden; padding:0; margin:4em 0 0 0; float:right;}
#navigation ul {}
#navigation ul li {float:left; padding:0.8em 1.6em;}
#navigation ul li a {padding:1em; color:#1F2D40;}
#navigation ul li a:hover {background:#1F2D40; color:#F15A24;}

#content {margin:9em 0 0 0; padding:0; width:100%; overflow:auto;}
#content .divProfiles {float:left; width:30%;}
#content .divResume {width: 60%; background: rgb(21,20,16); padding:2em; overflow: hidden; float:right; 
                     /*-webkit-box-shadow: 10px 10px 10px rgba(68, 68, 68, 0.4);
                     -moz-box-shadow: 10px 10px 10px rgba(68, 68, 68, 0.4);
                     box-shadow: 10px 10px 10px rgba(68, 68, 68, 0.4);*/ 
                     -webkit-border-radius: 10px;
                     -moz-border-radius: 10px;
                     border-radius: 10px;}
#content .divResume p {line-height: 2em; border-bottom: 1px dotted;}
#content .divResume li {line-height: 2em; border-bottom: 1px dotted;}

#content .divPhotos {width:100%; background:#F2F2F2; padding:0; margin:0; overflow:auto;}
#content .divPhotos ul #ltphoto {padding:0; margin:0;}
#content .divPhotos ul li {float:left; padding:0.4em 0.5em 0.4em 0.5em;}

/*Login*/
#content .login {background:rgb(21,20,16); padding:2em;}

/*Dairy add form*/
#content .year {background:#272A13; width:10%; padding:0.6em; float:right;}
#content .dcontent {width:100%; overflow:auto; padding:2em 0; margin:0;}
#content .dcontent .ldcontent {width:10%; float:left;}
#content .dcontent .ldcontent h3 {color:#F15A24;}
#content .dcontent .rdcontent {float:right; width:70%; border-left:1px solid #BDCCD4; padding:0 1em 1em;}

.adminonly {padding:1em; margin:2em 0 0 0; background:rgb(21,20,16); overflow:auto;}
.addairy {width:10%; float:left; color:#4C5766; padding:2em; font-weight:bold;}
.dform {float:right; width:70%;}
.dform label, .dform input[type='submit'] {display:block; margin:1em 0;}
.dform input[type='text'],.dform input.topic {display:block; background:#BDCCD4; border:none; width:60%; height:2em; line-height:2em;}
.dform textarea {width:90%; margin:0.4em 0; height:6em;}
.dform .dt,.dform .comms {font-size:70%; color:#b3b3b3;}
.dform .error {background:rgb(255,202,222); color:red; border:1px solid red; width:60%; padding:1em;}

#footer {text-align:center; margin:2em 0; border-top:1px solid #c0c0c0;}