/* 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:1008px; 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*/
img.source-image { width: 100%; position: relative;}

/* 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{position:relative; width:100%;}
#header h1{ width:8.62em; height:4.375em; text-indent:-1000em; }
#header h1 a{ display:block; width:8.62em; height:4.375em; background:#000 url(../assets/xialei_logo.jpg) no-repeat scroll;}

#header #login{}

#navigation {background: #515151 url(../assets/bg_head_bar.jpg) repeat-x; width:100%; margin:1.6em 0em; padding:0; height:3.5em; -moz-border-radius:0.2em; -webkit-border-radius:0.2em; border-radius:0.2em;}
ul#navbar {margin:0 0 0 40%; padding:0; line-height: 3.5em; white-space:nowrap;}
#navbar li {display:inline; font-weight:bold;}
#navbar li a {padding:0.8em 1.6em;}
#navbar li a:hover {background: #FFF; -moz-border-radius:0.6em; border-radius:0.6em; -webkit-border-radius:0.6em;}

#content {display:block; width:100%; position:relative;}
#content .divPhotoes {width:80%; margin:0 auto; position:relative;}
#content .divPhotoes ul {padding:0; margin:0; position:relative; list-style:none;}
#content .divPhotoes li.photo { display:inline-block; padding:1% 1% 1% 0; margin:0; width:23.222%;}
* html #content .divPhotoes li.photo { display:inline; }  /* for IE 6 */
* + html #content .divPhotoes li.photo { display:inline; }  /* for IE 7 */
#content .divPhotoes li.photo p.img {width:100%;}
#content .divPhotoes li.photo p.description {text-align:center; font-weight:200; color:white;}

#footer{ width:100%; text-align:center;}
#footer{ border-top: 1px solid rgb(241,90,36);}
#footer p{ color:white; font-size:0.8em; }