﻿
html {
height: 100%;
}

body {
    /* The page background, font, font size and color. */
    background: #EEEEEE url("images/bkg.jpg") repeat-x;
	height: 100%; /* needed for container min-height */
	overflow: inherit; /* triggers 100% height in Opera 9.5 */
	margin: 0 auto;
	padding: 0px;
	text-align: center;
}

img {border: 0;} 

#cont {
    /* The following values will place this div in the middle, and since we put every div inside the container it will render the whole page in the middle of the page.*/
    position: relative;
	width: 100%;
	height: auto !important; /* real browsers */
	height: 100%; /* IE6: treaded as min-height*/
	min-height: 100%; /* real browsers */
}


#wrapper {
    /* The following values will place this div in the middle, and since we put every div inside the container it will render the whole page in the middle of the page.*/
	position: relative;
	width: 966px;
	margin: 0 auto;
	height: auto !important; /* real browsers */
	height: 100%; /* IE6: treaded as min-height*/
	min-height: 100%; /* real browsers */
}

#header {
    background: url("images/header-bkg.jpg") no-repeat;
    width: 966px; 
    height: 206px; 
    z-index: 4; 
}
#logo {
    background: url("images/logo.png") no-repeat;
    position: absolute; 
    width: 297px; 
    height: 66px; 
    z-index: 1; 
	left: 30px;
    top: 21px; 

}
#topnav {
    background: url("images/topnav.png") no-repeat;
    position: absolute; 
    width: 378px; 
    height: 37px; 
    z-index: 1; 
    left: 404px; 
    top: 82px; 
    text-align: left;
    padding: 8px 0 0 15px;
	font-weight: 700;
}

#topnav a {
color: #006699;
text-decoration: none;
	font-family: Arial;
	font-size: 13px;
	padding: 0px 10px 0px 10px;
}

#topnav a:hover {
text-decoration: underline;
	color: #FFFFFF;
	font-family: Arial;
	font-size: 13px;
	padding: 0px 10px 0px 10px;
}


table {
padding: 0;
border-spacing: 0;
border-collapse: collapse;
}
table tr th {
border: 0px solid black;
}


table tr td {
border: 0px solid black;
}


#postit {
    background: url("images/postit.png") no-repeat;
    position: absolute; 
    width: 245px; 
    height: 170px; 
    z-index: 6; 
    left: 763px; 
    top: -1px; 

}


#maincontent {
display: block;
    width: 966px;
    z-index: 6;
    text-align: left;
    top: 120px;
}

#maincontent2 {
display: block;
    width: 966px;
    z-index: 6;
    text-align: left;
    top: 120px;
}


#mainnav {
    background: url("images/main-nav.png") no-repeat;
    position: absolute; 
    width: 949px; 
    height: 37px; 
    z-index: 20; 
    left: 10px; 
    top: 9px; 
    padding: 10px 0 0 20px;
	color: #FFFFFF;
	font-family: Arial;
	font-size: 13px;
}

#graybox {
    background:  url("images/gray-box.jpg") no-repeat;
    position: absolute; 
    width: 949px; 
    height: 320px; 
    z-index: 4; 
    left: 9px; 
    top: 57px;

}

#graybox2 {
position: absolute;
    background:  #EEEEEE;
    width: 949px; 
    height: 450px; 
    z-index: 4; 
    left: 9px; 
    top: 70px;

}

#graybox3 { 
postion: relative;
    width: 949px;  
    z-index: 40; 
    left: 0px; 
    top: 0px;

}



#contentbox1 {
position: absolute;
    background: url("images/content-box1.jpg") no-repeat; 
    width: 966px; 
    height: 616px;
    z-index: 2; 
    left: 0px; 
    top: 115px; 
}

#contentbox122 {
position: absolute;
    background: url("images/content-box1.jpg") no-repeat; 
    width: 966px; 
    height: 290px;
    z-index: 2; 
    left: 0px; 
    top: 115px; 
}

#contentbox123 {
position: absolute;
    background: url("images/content-box1.jpg") no-repeat; 
    width: 966px; 
    height: 60px;
    z-index: 2; 
    left: 0px; 
    top: 115px; 
}

#contentbox11 {

position: absolute;
background: #FFFFFF; 
    width: 966px; 
    z-index: 2; 
    left: 0px;
    top: 115px; 
}

#contentbox111 {

	width: 687px; 
    z-index: 2; 
    left: 0px;
    margin: 60px 0 10px 0;
    padding: 0 0 10px 0; 
}

#contentbox111 p {
	color: #000000;
	font-family: Arial;
	font-size: 14px;
	padding: 0px 10px 0px 10px;
}

#contentbox111 h1{font-family: Arial;font-size: 20px;color: #000033;padding: 0px 10px 0px 10px;
}
#contentbox111 h2{font-family: Arial;font-size: 16px;color:#000099;padding: 0px 10px 0px 10px;
}
#contentbox111 h3{font-family: Arial;font-size: 14px;color:#000099;padding: 0px 10px 0px 10px;
}

#contentbox111right {
 float: right;
 width: 267px;
     margin: 60px 0 10px 0;
    padding: 0 0 10px 0; 
}

#contentboxtop {
position: absolute;
top: 731px;
    width: 966px;
    z-index: 6;
    left: 0px; 
    margin: 10px 0px 0px 0px;

}



#contentbox {
position: absolute;
top: 731px;
    width: 966px;
    z-index: 6; 
    left: 0px; 
    margin: 10px 0px 0px 0px;

}

#contentbox2 {
display: block;
    background: #FFFFFF;
    width: 966px; 
    z-index: 6; 
    left: 0px; 
    margin: 0px 0px 10px 0px;
    background-image: url(dot2.gif);
background-repeat: repeat-y;
background-position: 670px 0px;
padding: 10px 0px 0px 0px;
}

#contentbox322 {
position: absolute;
top: 405px;
    width: 966px;
    z-index: 6; 
    left: 0px; 
    margin: 10px 0px 0px 0px;

}

#contentbox345 {
position: absolute;
top: 160px;
    width: 966px;
    z-index: 1; 
    left: 0px; 
    margin: 10px 0px 0px 0px;

}

#contentbox2 p {
	color: #000000;
	font-family: Arial;
	font-size: 14px;
	padding: 0px 10px 0px 10px;
}

#contentbox2 h1{font-family: Arial;font-size: 20px;color: #000033;padding: 0px 10px 0px 10px;
}
#contentbox2 h2{font-family: Arial;font-size: 16px;color:#000099;padding: 0px 10px 0px 10px;
}
#contentbox2 h3{font-family: Arial;font-size: 14px;color:#000099;padding: 0px 10px 0px 10px;
}

#contentbox22 {
    background: #FFFFFF;
    width: 966px; 
    z-index: 6; 
    left: 0px; 
    margin: 0px 0px 10px 0px;
    background-image: url(dot.gif);
background-repeat: repeat-y;
background-position: 670px 0px;
padding: 10px 0px 0px 0px;


}

#contentbox22 p {
	color: #000000;
	font-family: Arial;
	font-size: 14px;
	padding: 0px 10px 0px 10px;
}

#contentbox22 h1{font-family: Arial;font-size: 20px;color: #000033;padding: 0px 10px 0px 10px;
}
#contentbox22 h2{font-family: Arial;font-size: 16px;color:#000099;padding: 0px 10px 0px 10px;
}
#contentbox22 h3{font-family: Arial;font-size: 14px;color:#000099;padding: 0px 10px 0px 10px;
}


.left{float:left;}





#bluecontainer {
    position: absolute;
    float: left; 
    z-index: 5; 
    left: 8px; 
    top: 392px;
    width: 950px; 

}

#blue1 {
    background: url("images/blue1.jpg") no-repeat;
    float: left;
    width: 306px; 
    height: 212px; 
    z-index: 1; 
    left: 0px; 
    top: 0px; 
}



#blue2 {
    background: url("images/blue2.jpg") no-repeat;
    float: left;
    width: 306px; 
    height: 212px; 
    z-index: 1; 
    top: 0px; 
    margin: 0 0 0 15px;


}

#blue3 {
    background: url("images/blue3.jpg") no-repeat;
    float: left;
    width: 306px; 
    height: 212px; 
    z-index: 1; 
    top: 0px;
    margin: 0 0 0 15px;
}


#bluecontainer2 {
    position: absolute;
    float: left; 
    z-index: 5; 
    left: 8px; 
    top: 68px;
    width: 950px; 

}

#blue12 {
    background: url("images/blue1.jpg") no-repeat;
    float: left;
    width: 306px; 
    height: 212px; 
    z-index: 1; 
    left: 0px; 
    top: 0px; 
}



#blue22 {
    background: url("images/blue2.jpg") no-repeat;
    float: left;
    width: 306px; 
    height: 212px; 
    z-index: 1; 
    top: 0px; 
    margin: 0 0 0 15px;


}

#blue32 {
    background: url("images/blue3.jpg") no-repeat;
    float: left;
    width: 306px; 
    height: 212px; 
    z-index: 1; 
    top: 0px;
    margin: 0 0 0 15px;
}


#seoblue1 {
    background: url("images/seo1.jpg") no-repeat;
    float: left;
    width: 306px; 
    height: 212px; 
    z-index: 1; 
    left: 0px; 
    top: 0px; 
}



#seoblue2 {
    background: url("images/seo2.jpg") no-repeat;
    float: left;
    width: 306px; 
    height: 212px; 
    z-index: 1; 
    top: 0px; 
    margin: 0 0 0 15px;


}

#seoblue3 {
    background: url("images/seo3.jpg") no-repeat;
    float: left;
    width: 306px; 
    height: 212px; 
    z-index: 1; 
    top: 0px;
    margin: 0 0 0 15px;
}

#graphicdesign1 {
    background: url("images/graphicdesign1.jpg") no-repeat;
    float: left;
    width: 306px; 
    height: 212px; 
    z-index: 1; 
    left: 0px; 
    top: 0px; 
}



#graphicdesign2 {
    background: url("images/graphicdesign2.jpg") no-repeat;
    float: left;
    width: 306px; 
    height: 212px; 
    z-index: 1; 
    top: 0px; 
    margin: 0 0 0 15px;


}

#graphicdesign3 {
    background: url("images/graphicdesign3.jpg") no-repeat;
    float: left;
    width: 306px; 
    height: 212px; 
    z-index: 1; 
    top: 0px;
    margin: 0 0 0 15px;
}

#host1 {
    background: url("images/host1.jpg") no-repeat;
    float: left;
    width: 306px; 
    height: 212px; 
    z-index: 1; 
    left: 0px; 
    top: 0px; 
}



#host2 {
    background: url("images/host2.jpg") no-repeat;
    float: left;
    width: 306px; 
    height: 212px; 
    z-index: 1; 
    top: 0px; 
    margin: 0 0 0 15px;


}

#host3 {
    background: url("images/host3.jpg") no-repeat;
    float: left;
    width: 306px; 
    height: 212px; 
    z-index: 1; 
    top: 0px;
    margin: 0 0 0 15px;
}


#footer {
	background: url("images/footer.png") no-repeat; 
	bottom: 0; /* stick to bottom */
    width:966px;
    height: 203px;
    padding: 0px 0px 0px 0px;

	
}

#footer3 {
	background: url("images/footer.png") no-repeat; 
	bottom: 0; /* stick to bottom */
    width:966px;
    height: 203px;
    padding: 0px 0px 0px 0px;

	
}

#footernav {
	float: right; 
	width: 460px; 
	padding: 10px 5px 10px 5px;
	}
	
#footernav h3{
	font-family: Arial;font-size: 14px;color: #FFFFFF;padding: 2px 10px 2px 10px;
	}
	
#footernav a{
	font-family: Arial;font-size: 12px;color: #FFFFFF;
	}
	
#footernav a:hover{
	text-decoration: none; font-family: Arial;font-size: 12px;color: #FFFFFF;
	}

#footernav p{
	padding: 0px 5px 0px 10px;
	}
	
#footernav3 {
	float: right; 
	width: 460px; 
	padding: 10px 5px 10px 5px;
	}
	
#footernav3 h3{
	font-family: Arial;font-size: 14px;color: #FFFFFF;padding: 2px 10px 2px 10px;
	}
	
#footernav3 a{
	font-family: Arial;font-size: 12px;color: #FFFFFF;
	}
	
#footernav3 a:hover{
	text-decoration: none; font-family: Arial;font-size: 12px;color: #FFFFFF;
	}

#footernav3 p{
	padding: 0px 5px 0px 10px;
	}

#footerimage {
	position: absolute;
    background: url("images/footerimage.png") no-repeat; 
	bottom: 0px; /* stick to bottom */
    width: 320px; 
    height: 274px; 
    z-index: 2; 
	left: 0px;
}


#footerimage2 {
	position: absolute;
    background: url("images/pencils.png") no-repeat; 
    bottom: 0px; /* stick to bottom */
    width: 250px; 
    height: 260px; 
    z-index: 2; 
    margin: 0px;
	left: 0px;
}

#footerimage3 {
	position: absolute;
    background: url("images/footerimage.png") no-repeat; 
	bottom: 0px; /* stick to bottom */
    width: 320px; 
    height: 274px; 
    z-index: 2; 
	left: 0px;
}

#copyright {
	color: #000000;
	font-family: Arial;
	font-size: 12px;
	text-align: right;

}

.button2 { 
	float:right;
	width:150px;
	height:50px;
	line-height:50px;
	text-align:center;
	color:#333;
	text-decoration:none;
	text-transform:uppercase;
	background:url(images/button.gif) no-repeat left top;
	padding: 0 70px 0 0;
}
	.button2:hover {
		color:#000;
		text-decoration:underline;
		text-transform:uppercase;
	}

.works1 {
font-family: Arial;
	font-size: 14px;
	padding: 10px 20px 10px 10px;
	}
	
.works {
	float: left; padding: 50px 10px 10px 10px;color: #000000;
	font-family: Arial;
	font-size: 14px;
}

.workslogo {
	float: left; padding: 10px 3px 3px 3px;color: #000000;
	font-family: Arial;
	font-size: 14px;
}

.worksident {
	float: left; padding: 0px 10px 3px 120px;color: #000000;
	font-family: Arial;
	font-size: 14px;
}
	
#workscontainer {
    width: 949px; position:absolute; top: 60px; left: 10px; 
}

#workscontainer p {
	color: #000000;
	font-family: Arial;
	font-size: 14px;
	padding: 0px 10px 0px 10px;
}

#workscontainer h1{font-family: Arial;font-size: 20px;color: #000033;padding: 0px 10px 0px 10px;
}
#workscontainer h2{font-family: Arial;font-size: 16px;color:#000099;padding: 0px 10px 0px 10px;
}


.form_div{width:256px; height:200px;  background-image:url('form_bg.jpg');
overflow:hidden;
	text-align: center
}
#info_right_input_div input{margin-bottom:5px;}
.ad_div{width:255px; height:195px; margin-top:3px;float:left;}
#expert_hd {
	font-weight: 700;
	font-family: Arial, Helvetica, sans-serif;
	text-align: center;
	color: #FFFFFF;
	font-size: 16px;
}

#expert_hd p {
	font-weight: 700;
	font-family: Arial, Helvetica, sans-serif;
	text-align: center;
	color: #FFFFFF;
	font-size: 12px;
}

.info_left_h1{font-size: 20px;color: #000033;}
.info_left_h2{font-size: 18px;color:#000099;}



.clearfix {
    display: inline-block;
}
/* Hides from IE-mac \*/
* html .clearfix {
    height: 1%;
}
.clearfix {
    display: block;
}
/* End hide from IE-mac */