@charset "UTF-8";
/* CSS Document mimic the  http://www.apple.com/macbookair/ */


     
     @font-face {
    font-family:HelveNeuLig;
    src: url(fonts/HelveticaNeueLight.ttf);
   }
   
 
   
        @font-face {
    font-family:HelveNeuMed;
    src: url(fonts/HelveticaNeueMedium.ttf);
   }



/*personally, I just love helvetica. They are beuatiful. */



html, body{
margin:0;
padding:0;	
display:block;
width:100%;
height:100%;
font-family:HelveNeuMed;
 background: #F2F2F2 url(http://images.apple.com/v/macbookair/a/images/body_bg.png) repeat-x ;
 font-size:14px;
  }


h1,h2,h3,h4{
display:inline;
}

.lightfont{
font-family:HelveNeuLig;
display:inline;
color:#666;
font-weight:100;
}


a{
text-decoration:none;
font-family:HelveNeuLig;
}





#frame{
width:980px;	
height:100%;
margin-left:auto;
margin-right:auto;	

}


#navigation{
width:980px;
height:40px;
/*to make a rounded border */
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
border :1px solid #999;
/*to make the menus that are on the edge to be cut off and follow the rounded border navigation */
overflow:hidden;
/*to give space between top and bottom */
margin-top:20px;
margin-bottom:20px;

}

.clearboth{
clear:both;	
}

.menu{
float:left;
width:194px;
height:30px;
padding-top:10px;
background-color:#333;
text-transform:uppercase;
color:#fff;
text-align:center;
margin-left:2px;
font-family:HelveNeuLig;
font-size:14px;


/*this is to add gradient. Use websites to generate it. http://css3generator.com/   */
background-image: linear-gradient(bottom, rgb(112,112,112) 8%, rgb(97,97,97) 40%, rgb(189,189,189) 95%);
background-image: -o-linear-gradient(bottom, rgb(112,112,112) 8%, rgb(97,97,97) 40%, rgb(189,189,189) 95%);
background-image: -moz-linear-gradient(bottom, rgb(112,112,112) 8%, rgb(97,97,97) 40%, rgb(189,189,189) 95%);
background-image: -webkit-linear-gradient(bottom, rgb(112,112,112) 8%, rgb(97,97,97) 40%, rgb(189,189,189) 95%);
background-image: -ms-linear-gradient(bottom, rgb(112,112,112) 8%, rgb(97,97,97) 40%, rgb(189,189,189) 95%);

background-image: -webkit-gradient(
	linear,
	left bottom,
	left top,
	color-stop(0.08, rgb(112,112,112)),
	color-stop(0.4, rgb(97,97,97)),
	color-stop(0.95, rgb(189,189,189))
);





 

}

#navigation a .menu:hover  {
background-image: linear-gradient(bottom, rgb(152,152,152) 8%, rgb(127,127,127) 40%, rgb(189,189,189) 95%);
background-image: -o-linear-gradient(bottom, rgb(152,152,152) 8%, rgb(127,127,127) 40%, rgb(189,189,189) 95%);
background-image: -moz-linear-gradient(bottom, rgb(152,152,152) 8%, rgb(127,127,127) 40%, rgb(189,189,189) 95%);
background-image: -webkit-linear-gradient(bottom, rgb(152,152,152) 8%, rgb(127,127,127) 40%, rgb(189,189,189) 95%);
background-image: -ms-linear-gradient(bottom, rgb(152,152,152) 8%, rgb(127,127,127) 40%, rgb(189,189,189) 95%);

background-image: -webkit-gradient(
	linear,
	left bottom,
	left top,
	color-stop(0.08, rgb(152,152,152)),
	color-stop(0.4, rgb(127,127,127)),
	color-stop(0.95, rgb(189,189,189))
);
}


#submenu ul{
 float:right;
 display:inline-block;
 list-style:none;
 }
 
#submenu ul li{
display:inline-block;
color:#333;
font-size:13px;
margin:0px 0px 0px 20px; 
}


#submenu a li:hover{
color:#448ccb;
}


#submenu .button{
overflow:hidden;
background-color:#fff;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;

color:#fff;
width:100px;height:15px;
padding:4px;
background-color:#448ccb;
text-align:center;
display:inline-block;

/*inline-block has it shown as a block 
(meaning that it will fill the full size that I want, as width and height, 
and will still stay as a same line having the inline attribute. 
Normally, it will not fill full size but just the size of the content (text) */
}


#submenu a .button:hover{
background-color:#7da7d9;
color:#ccc;
}

#contents{
overflow:hidden;
height:565px;

width:100%;
/*100%of its mother-frame ->will be 980px */

background-color:#fff;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;


-webkit-box-shadow: 0px 0px 2px 2px rgba(100, 100, 100, 0.2);
-moz-box-shadow: 0px 0px 2px 2px rgba(100, 100, 100, 0.2);
box-shadow: 0px 0px 2px 2px rgba(100, 100, 100, 0.2); 
}


#contents img{
position:relative;
left:-300px;

	-webkit-transition:all 1.0s ease-in-out;
	-moz-transition:all 1.0s ease-in-out;
	-o-transition:all 1.0s ease-in-out;
	-ms-transition:all 1.0s ease-in-out;	
	transition:all 1.0s ease-in-out;
	
}

#contents img:hover{
left:0px;
	-webkit-transition:all 1.0s ease-in-out;
	-moz-transition:all 1.0s ease-in-out;
	-o-transition:all 1.0s ease-in-out;
	-ms-transition:all 1.0s ease-in-out;	
	transition:all 1.0s ease-in-out;
}



#subcontents{
 width:1000px;
}

.contentsbox{
width:440px;
height:160px;
padding:20px;
margin:10px 10px 0px 0px;

float:left;


background-color:#ebebeb;
border:3px solid #fff;

-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;

-webkit-box-shadow: 0px 0px 2px 2px rgba(100, 100, 100, 0.2);
-moz-box-shadow: 0px 0px 2px 2px rgba(100, 100, 100, 0.2);
box-shadow: 0px 0px 2px 2px rgba(100, 100, 100, 0.2);
}


.contentsbox span{
font-family:HelveNeuLig;
margin-top:10px;
width:300px;
display:inline-block;
}

.contentsbox span a{
font-weight:bold;
color:#448ccb;
}

.contentsbox span a:hover{
 text-decoration:underline;
}

.contentsbox img{
float:right;
}


#footer{
/*margin top and bottom is 20px / margin left and right are 0px*/
margin:20px 0px;
color:#666;
font-size:12px;
padding-bottom:40px;
}

#footer #footermenu{
width:960px;
height:10px;
padding:10px;
margin-top:20px;
border:1px solid #ccc;

-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
}

#footer #footermenu  li{
list-style:none;
float:left;
display:inline;
border-left:1px solid #777;
padding:0px 10px;
}