/*=====
SITE: http://www.techsourceall.com
FILE: layout.css
CREATED: 3/3/2008
MODIFIED:5/22/2008
AUTHOR: Patty Rosol (patty[at]renderingeffects.com)


/*  BODY (Used for general page styles)
==============================================================*/
* {margin:0; padding:0; border:0;
	text-decoration:none;
	outline-style: none;}
   	
html{
	height: 100%;}
	
body {
	height:100%;
	background-color:#434742;
	background-image:url(../images/bg.png);
	background-position:top left;
	background-repeat:repeat-x;
	font:12px Arial, Helvetica, sans-serif;
	line-height:21px;}

div#shiv {
	width: 100%; height: 50%;                                                                  
	margin-top: -293px;                                   
	float: left;}

div#container {
	width:800px; height:600px;
	clear:both;
	margin:0px auto;
    text-align:left;
	position:relative;
	top:-293px;
	/* IE4ever Hack: Hide from IE4 **/
		position:static;
	/** end hack */	}

div#wrap_container {
	width:100%; height:600px;
	clear:both;
	margin:0px auto;
	position:relative;
	top:-293px;
	/* IE4ever Hack: Hide from IE4 **/
		position:static;
	/** end hack */	}

.content{
	width:750px;
	clear:both;
	float:left;
	background:#fff url(../images/bottom_bg.gif) no-repeat;
	background-position:bottom left;
	margin-top:-3px;
	padding:0 25px 30px 25px;}
.clearer { height:0.1em; clear:both;}
 
a:link, a:visited, a:hover, a:active {color:#999;}

img {display:block;}

.red{
	font:15px Arial, Helvetica, sans-serif;
	color:#ff0000;
	text-align:center;}		


/*  HEADER (Logo)
==============================================================*/
#header{
	width:800px; height:62px;
	position:relative;
	margin:0 auto;
	background-position:top left;
	background-repeat:repeat-x;}
#header h1{
	width:197px; height:153px;
	display:block;
	position:absolute;
	left:8px; top:0px;
	background:url(../images/logo.png) no-repeat;
	text-indent:-9999px;}
#header h1 a{
	width:197px; height:153px;
	display:block;
	text-indent:-9999px;}
h2{
	font:20px bolder Arial, Helvetica, sans-serif;
	color:#241a63;
	margin:10px 0;}
h3{
	font:16px Arial, Helvetica, sans-serif;
	color:#241a63;
	margin:5px 0;}
h4{
	font:15px Arial, Helvetica, sans-serif;
	color:#241a63;}	
	
.image {
    background-image:url(../images/image_background.jpg);}


/*  NAVIGATION (Menu)
==============================================================*/
#nav{
	width:100%; height:24px;
	position:absolute;
	top:0px; right:10px;
	list-style:none;}
#nav li{
	float:right;
	display:inline;
	margin:20px 0 0 20px;}
a#nav-home, a#nav-about, a#nav-services, a#nav-support, a#nav-contact, a#nav-faq{
	height:24px;
	display:block;
	text-indent:-9999px;}
a#nav-home:hover, a#nav-about:hover, a#nav-services:hover, a#nav-support:hover, a#nav-contact:hover, a#nav-faq:hover{
	background-position:0 -24px;}


a#nav-home{
	width:50px;
	background:url(../images/home.png) no-repeat;}
a#nav-about{
	width:80px;
	background:url(../images/about.png) no-repeat;}
a#nav-services{
	width:80px;
	background:url(../images/services.png) no-repeat;}
a#nav-support{
	width:75px;
	background:url(../images/support.png) no-repeat;}
a#nav-contact{
	width:100px;
	background:url(../images/contact.png) no-repeat;}
a#nav-faq{
	width:30px;
	background:url(../images/faq.png) no-repeat;}

#home a#nav-home, #about a#nav-about, #services a#nav-services, #support a#nav-support, #contact a#nav-contact, #faq a#nav-faq{
	background-position:0 -24px;}


/*  HOME
==============================================================*/
.feature1{
	width: 235px;
	float: left;
	display: inline;
	margin:30px 20px 30px 0;
	border-right: 1px solid #cac7c4;}
#title_feature1{
	width:200px; height:70px;	
background:url(../images/services_off.png) no-repeat;
background-position:top left;
	position:relative;
	display:block;
	margin:auto;
	overflow:hidden;
	text-indent:-9999px;}
#title_feature1 a:hover{
background:url(../images/services_on.png) no-repeat;
background-position:top left;
margin:auto;}

	
.feature2{
	width:235px;
	float:left;
	display:inline;
	margin:30px 20px 30px 0;
	border-right:1px solid #cac7c4;}
#title_feature2{
	width:160px; height:70px;	
background:url(../images/about_off.png) no-repeat;
background-position:top left;
	position:relative;
	display:block;
	margin:auto;
	overflow:hidden;
	text-indent:-9999px;}
#title_feature2 a:hover{
background:url(../images/about_on.png) no-repeat;
background-position:top left;
margin:auto;}	


.feature3{
	width:230px;
	float:left;
	margin:30px 0 30px 0;
	display:inline;}
#title_feature3{
	width:200px; height:70px;	
background:url(../images/work_off.png) no-repeat;
background-position:top left;
	position:relative;
	display:block;
	margin:auto;
	overflow:hidden;
	text-indent:-9999px;}
#title_feature3 a:hover{
background:url(../images/work_on.png) no-repeat;
background-position:top left;
margin:auto;}

.feature1 p, .feature2 p, .feature3 p{
	width:225px;
	text-align:center;}
#title_feature1 a, #title_feature2 a,#title_feature3 a{
	width:200px; height:40px;
	position:relative;
	display:block;
	/*  IE 5 Hack \*/
	overflow:hidden;
	/* end hack */}

	
/*  CONTACT
==============================================================*/
.left {
	width:420px;
	position:relative;
	float:left;
	display:inline;
	margin:0 25px 0 0;
	padding:0;}
.right {
	width:300px;
	position:relative;
	float:left;
	margin:0;
	padding:0;}
.rightblock {
	width:150px;
	position:absolute;
	right:5px; top:105px;
	float:right;
	margin:0;
	padding:0;}
	
	
/*  SERVICES
==============================================================*/
#services #tabs{width:100%;}
#services #tabs ul{
	width:100%;
	text-align:center;
	border-bottom:1px solid #cac7c4;
	list-style:none;}
#services #tabs li{
	display:inline;
	font-size:11pt; font-weight:bold;
	margin:0 10px 0 10px;}
#services #tabs a{
	color:#241a63;
	background:#888d77;
	padding:2px 5px;}
#services #tabs a:hover{background:#4e4c8b;}

#services .accordian{
	width:100%; float:left;}
#services .accordian h1{
	width:100%;
	font:normal 18px Arial, Helvetica, sans-serif;
	color:#241a63;
	padding:10px 0 3px 10px;}

#services .foto{
	width:auto; float:left;}
#services .foto p{
	margin-left:10px;}
#services .foto img{
	margin:10px 20px 0 0;
	border:solid #03015d 2px;}

#services .infoh{
	width:370px;
	float:left;
	padding-left:20px;
	border-left:1px dotted #cac7c4;}
#services .infov{
	width:480px;
	float:left;
	padding-left:20px;
	margin-left:20px;
	border-left:1px dotted #cac7c4;}
#services .infov p, #services .infoh p{
	margin:7px 0;
	text-indent:10px;}
#services .infov li, #services .infoh li{
	text-indent:20px;
	background:url(../images/dot.gif) 0 2px no-repeat;}
	
#services .testimonial{
	color:#5c6156;
	line-height:1em;
	font-style:italic;}
#services .testimonial li{
	text-align:right;
	background:none}


/*  FORMS
==============================================================*/
label{
	width:17%;
	display:block; float:left;
	color:#150b55;
	text-align:left;
	margin:0;}

fieldset{
	width:400px;
	border:1px solid #cac7c4;
	margin-bottom:20px;
	padding:5px 0 5px 8px;}
.required input, fieldset .required textarea, fieldset .required select{border:1px solid #ff0000;}
	
input, textarea{
	width:77%; height:15px;
	background-color:#eee;
	font:12px Verdana, Arial, Helvetica, sans-serif;
	color:#000;
	margin-bottom:10px;
	padding:5px;}
input:focus{
	background-color:#8087b5;}	
textarea{
	width:94%; height:100px;
	overflow:auto;}
textarea:focus{
	background:#8087b5;}
input#button{
	width:60px; height:20px;
	background:url(../images/submit_button.png) no-repeat;
	display:block; float:right;
	font:0px Verdana, Arial, Helvetica, sans-serif;
	color:#fff;
	text-indent:-9999px;
	margin-right:12px;
	cursor:pointer;}
input#button:hover{
	background-position:0 -20px;}
	
.hidden {display:none; visibility:hidden;}


/*  LEGAL (Footer)
==============================================================*/
#legal{
	width:100%;
    clear:both;
	float:left;
    text-align:right;
    font-size:11px; color:#999999;
	margin-bottom:40px; margin-top:0px;}
#legal a{
	color:#999;
	border-bottom:1px dotted #999;}
#legal a:hover{
	color:#fff;}
#legal p{
	margin:0px; padding:0px;
	line-height:30px;}