@charset "utf-8";

/*###################################################################

some global styles
 
###################################################################*/

body {
	font: 16px "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;
	background: url(images/bg_body.gif) top center repeat-x #FFFFFF;
	margin: 0;
	padding: 0;
	text-align: center; 
	color: #000000;
}

#container {
	position:relative;
	width: 780px;  
	background: url(images/bg_content.gif) top center repeat-y #FFFFFF;
	margin: 0 auto; 
	text-align: left; 
}


/*###################################################################

Navigation styles
 
###################################################################*/

ul.menu {
position:absolute;
top:174px;
left:100px;
z-index:1;
margin:0;
padding:0;
}

ul.menu li {
float:left;
list-style:none;
padding:0;
margin:0;
}

a.about {
list-style:none;
display:block;
text-indent:-2000px;
height:29px;
width:114px;
background:url(images/bg_navAbout.gif) top center no-repeat;
}

a.about:hover, a.about#active {
display:block;
text-indent:-2000px;
height:29px;
width:114px;
background:url(images/bg_navAbout.gif) bottom center no-repeat;
}

a.example {
list-style:none;
display:block;
text-indent:-2000px;
height:29px;
width:207px;
background:url(images/bg_navExamples.gif) top center no-repeat;
}

a.example:hover, a.example#active {
display:block;
text-indent:-2000px;
height:29px;
width:207px;
background:url(images/bg_navExamples.gif) bottom center no-repeat;
}

a.contact {
list-style:none;
display:block;
text-indent:-2000px;
height:29px;
width:130px;
background:url(images/bg_navContact.gif) top center no-repeat;
}

a.contact:hover, a.contact#active {
display:block;
text-indent:-2000px;
height:29px;
width:130px;
background:url(images/bg_navContact.gif) bottom center no-repeat;
}


.notVis {
position:relative;
top:0;
left:25px;
padding:0 15px;
max-width:450px;
border-bottom:1px solid #f4f4f4;
visibility:hidden;
}

.vis {
position:relative;
top:0;
left:25px;
padding:0 15px;
max-width:450px;
visibility:visible;
border-bottom:1px solid #f4f4f4;}

.vis a {text-decoration:none;}
.vis a:hover {text-decoration:underline;}

/*###################################################################

Content area stuff
 
###################################################################*/


#mainContent {
width:500px;
padding:30px 0 50px 40px; 
background:none;
}

#mainContent a {text-decoration:none;}
#mainContent a:hover {text-decoration:underline;}

p.highlight {
padding:15px;
background-color:#dedede;
border:1px solid #cdcdcd;
font-size:14px;
line-height:18px;
}

/*###################################################################

Login box styles
 
###################################################################*/

#loginBox {
width:200px;
height:240px;
background:url(images/bg_loginBox.gif) top left no-repeat;
float:right;
margin:20px 20px 0 0;
}

form.login {
margin:60px 0 0 25px;
}

form.login input {
margin:3px 0 6px;
width:145px;
}

/*###################################################################

'examples of work' container stuff
 
###################################################################*/

ul.featured{
margin:0px auto;
list-style-type:none;
width:98%;
padding:11px;
position:relative;
overflow:auto;
text-align:left;
}
ul.featured li{
margin:0px 0 10px 0px;
padding:1px 0px;
background:#f5f8fc;
display:block;
text-align:left;
overflow:hidden;
border:1px solid #f5f8fc;
}

ul.featured li a{
display:block;
position:relative;
text-decoration:none;
padding:15px;
font:normal 9pt Arial, Helvetica, sans-serif;
color:#000000;
height:100%;
line-height:13pt;
overflow:auto;
border:1px solid #f5f8fc;

}
ul.featured li a strong{
font-weight:normal;
color:#1b69e9;
text-decoration:underline;
}
ul.featured li a span{
font:normal 14pt Verdana, Arial, Helvetica, sans-serif;
color:#830f0f;
text-decoration:none;
}
ul.featured li a img{
margin: 0 10px 0 0;
float:left;
padding:0px;
border:1px solid #cccccc;
}
ul.featured li a:hover{
background:#dedede;
border:1px solid #cccccc;
}


/*###################################################################

the footer stuff
 
###################################################################*/


#footer {
background:url(images/bg_footer.gif) bottom center no-repeat #b42725;
padding:0;
width:100%;
margin:0 auto;
}

#footer p {
text-align:center;
font:10px Verdana, Arial, Helvetica, sans-serif;
color:#FFFFFF;
margin:0; 
padding:0;
}