@charset "utf-8";
*{
margin:0;
padding:0;
}

/* body */
body{
background-color:#f2f2f2;
font-family:Verdana, 'Trebuchet MS', Arial, sans-serif;
}
a{
margin:0 2px;
}
/* container */
#container{
width:912px;
margin:0 auto 31px auto;
background:url(../img/layout_main.png) 0 0 repeat-y;
}

/* header */
#header{
padding:19px 19px 0 19px;
}
#header h1 a{
width:168px;
height:30px;
display:block;
margin:0 0 19px 12px;
background:url(../img/flatlabs.png) 0 0 no-repeat;
text-indent:-9999px;
overflow:hidden;
}
#header #navigation{
width:874px;
height:49px;
background:url(../img/layout_bar.png) 0 0 no-repeat;
}
#header #navigation ul li{
float:left;
list-style:none;
}
#header #navigation ul li a{
height:33px;
display:block;

background:url(../img/navigation.png) 0 0 no-repeat;
text-indent:-9999px;
overflow:hidden;
}

#header #navigation ul li#home a{
width:85px;
background-position:-11px -49px;
}
#header #navigation ul li#blog a{
width:81px;
background-position:-96px -49px;
}
#header #navigation ul li#service a{
width:92px;
background-position:-177px -49px;
}
#header #navigation ul li#contact a{
width:103px;
background-position:-269px -49px;
}

#header #navigation ul li#homeBack a{
width:84px;
background-position:-11px -49px;
}
#header #navigation ul li#blogBack a{
width:80px;
background-position:-96px -49px;
}
#header #navigation ul li#serviceBack a{
width:91px;
background-position:-177px -49px;
}

#header #navigation ul li#home a:hover,
#header #navigation ul li#homeBack a:hover{
background-position:-11px -9px;
}
#header #navigation ul li#blog a:hover,
#header #navigation ul li#blogBack a:hover{
background-position:-96px -9px;
}
#header #navigation ul li#service a:hover,
#header #navigation ul li#serviceBack a:hover{
background-position:-177px -9px;
}
#header #navigation ul li#contact a:hover{
background-position:-269px -9px;
}

#header #navigation ul li#homeOpen a{
width:85px;
height:38px;
background-position:-11px -91px;
}
#header #navigation ul li#blogOpen a{
width:82px;
height:38px;
background-position:-96px -91px;
}
#header #navigation ul li#serviceOpen a{
width:93px;
height:38px;
background-position:-177px -91px;
}
#header #navigation ul li#contactOpen a{
width:104px;
height:38px;
background-position:-269px -91px;
}

#header #navigation p.naviTitle{
height:33px;
margin:2px 12px 0 0;
float:right;

background:url(../img/navi_title.png) 0 0 no-repeat;
text-indent:-9999px;
}
#header #navigation p#naviHome{
width:133px;
background-position:-4px 0;
}
#header #navigation p#naviBlog{
width:37px;
background-position:-159px 0;
}
#header #navigation p#naviService{
width:58px;
background-position:-203px 0;
}
#header #navigation p#naviContact{
width:62px;
background-position:-268px 0;
}

/* mainContainer */
#mainContainer{
clear:both;
margin:0 19px;
}
#mainContainer #leftContainer{
width:556px;
float:left;
}
#mainContainer #rightContainer{
width:300px;
float:right;
}
#mainContainer  h2.subtitle{
padding:12px;
font-size:0.75em;
font-weight:normal;
line-height:19px;
letter-spacing:0.1em;
background:url(../img/contact_info_line.png) 0 bottom repeat-x;
}


/* footer */
#container #footer{
clear:both;
padding:19px;
background:url(../img/layout_btm.png) 0 bottom no-repeat;
}
#container #footerContainer{
padding:12px;
border-top:1px solid #d9d9d9;
}
#container #footerContainer #copyright{
font-size:0.75em;
line-height:19px;
text-align:center;
color:#666666;
}

