@charset "UTF-8";
/* CSS Document */

html, body {
	padding:0;
	margin:0;
	width:100%;
	height:100%;
	font-family:Tahoma, Verdana, Arial, Helvetica;
	font-size:12px;
	color:#868686;
	position:relative;
	
}



/*------------------------------------------------------------------------------
	layout
------------------------------------------------------------------------------*/

#top {
	height:155px;
	background:url(../images/layout/top_bg.png) top repeat-x;
	
}
	#glare {
		height:155px;
		background:url(../images/layout/top_glare.png) top no-repeat;
		text-align:center;
	}
	#logo{
		height:94px;
		width:744px;
		text-align:left;
		position: relative;
		margin: auto;
		padding-top: 8px;
	}

#page-wrap{
	width:100%;
	height:100%;
	height:auto !important;
	min-height:100%;
	position:relative;
}

#content-wrap {
	height:100%;
	background:#f5f5f5;
	padding-bottom:300px;
}
	#content {
		width:1000px;
		margin:auto;
		overflow:hidden;
	}
	#float-wrap {
		width:100%;
		height:100&;
		margin:auto;
		overflow:hidden;
	}
#box{
	width:350px;
	height:125px;
	margin:5px 0 5px 0;
	padding:0 0 0 25px;
	background:url(../images/layout/box.png)center center no-repeat;
}
#boxStatus{
	width:350px;
	margin:0 0 10px 0;
	padding:156px 0 0 5px;
	background:url(../images/layout/available.png)top left no-repeat;
}
	
/*------------------------------------------------------------------------------
	banners
------------------------------------------------------------------------------*/

#banner {
	height:285px;
	background:url(../images/layout/banner_bg.png) #e7e7e7 bottom repeat-x;
}
	#ban-web {
		height:285px;
		width:1000px;
		margin:auto;
		background:url(../images/banner/website.png) center center no-repeat;
	}
	#ban-works {
		height:285px;
		width:1000px;
		margin:auto;
		background:url(../images/banner/works.png) center center no-repeat;
	}
	#ban-about {
		height:285px;
		width:1000px;
		margin:auto;
		background:url(../images/banner/about.png) center center no-repeat;
	}
	#ban-contacts {
		height:285px;
		width:1000px;
		margin:auto;
		background:url(../images/banner/contacts.png) center center no-repeat;
	}
	#ban-services {
		height:285px;
		width:1000px;
		margin:auto;
		background:url(../images/banner/services.png) center center no-repeat;
	}
	#ban-home {
		height:285px;
		width:1000px;
		margin:auto;
		background:url(../images/banner/home.png) center center no-repeat;
	}
	#ban-none {
		height:285px;
		width:1000px;
		margin:auto;
		text-align: center;
	}
	#ban-text {
		width:300px;
		height:185px;
		padding:50px 25px 50px 25px;
	}

/*------------------------------------------------------------------------------
	footer
------------------------------------------------------------------------------*/
	
#footer {
	width:100%;
	min-height:272px;
	position:absolute;
	bottom:0 !important;
	bottom:-1px;
	background:url(../images/layout/footer_bg.png) top repeat-x #96bb02;
}
	#footer ul{
		padding-left:25px;
	}

/*------------------------------------------------------------------------------
	navegation
------------------------------------------------------------------------------*/

#nav {
	width:744px;
	margin:auto;
}

#nav ul{
	margin:0;
	list-style:none;
	padding:0;
	position:absolute;
	top:112px;
	
}
#nav li{
	text-indent: -9999px;
}
#nav li a{
	display:block;
	height:100%;
	width:100%;
}
	/*home*/
	#nav li#home{
		background:url(../images/nav/home_nav.png) top center no-repeat;
		width:124px;
		height:43px;
		list-style:none;
		float:left;
	}
	#nav li#home a{
		background:url(../images/nav/home_nav.png) bottom center no-repeat;
		width:124px;
		height:43px;
		list-style:none;
		float:left;
	}

	#nav li#home a:hover{
		background:url(../images/nav/home_nav.png) center center no-repeat;
		width:124px;
		height:43px;
		list-style:none;
		float:left;
	}
	/*contacts*/
	#nav li#contacts{
		background:url(../images/nav/contacts_nav.png) top center no-repeat;
		width:124px;
		height:43px;
		list-style:none;
		float:left;
	}
	#nav li#contacts a{
		background:url(../images/nav/contacts_nav.png) bottom center no-repeat;
		width:124px;
		height:43px;
		list-style:none;
		float:left;
	}

	#nav li#contacts a:hover{
		background:url(../images/nav/contacts_nav.png) center center no-repeat;
		width:124px;
		height:43px;
		list-style:none;
		float:left;
	}
	/*about*/
	#nav li#about{
		background:url(../images/nav/about_nav.png) top center no-repeat;
		width:124px;
		height:43px;
		list-style:none;
		float:left;
	}
	#nav li#about a{
		background:url(../images/nav/about_nav.png) bottom center no-repeat;
		width:124px;
		height:43px;
		list-style:none;
		float:left;
	}

	#nav li#about a:hover{
		background:url(../images/nav/about_nav.png) center center no-repeat;
		width:124px;
		height:43px;
		list-style:none;
		float:left;
	}
	/*works*/
	#nav li#works{
		background:url(../images/nav/works_nav.png) top center no-repeat;
		width:124px;
		height:43px;
		list-style:none;
		float:left;
	}
	#nav li#works a{
		background:url(../images/nav/works_nav.png) bottom center no-repeat;
		width:124px;
		height:43px;
		list-style:none;
		float:left;
	}

	#nav li#works a:hover{
		background:url(../images/nav/works_nav.png) center center no-repeat;
		width:124px;
		height:43px;
		list-style:none;
		float:left;
	}
	/*services*/
	#nav li#services{
		background:url(../images/nav/services_nav.png) top center no-repeat;
		width:124px;
		height:43px;
		list-style:none;
		float:left;
	}
	#nav li#services a{
		background:url(../images/nav/services_nav.png) bottom center no-repeat;
		width:124px;
		height:43px;
		list-style:none;
		float:left;
	}

	#nav li#services a:hover{
		background:url(../images/nav/services_nav.png) center center no-repeat;
		width:124px;
		height:43px;
		list-style:none;
		float:left;
	}
	/*web design*/
	#nav li#web{
		background:url(../images/nav/web_nav.png) top center no-repeat;
		width:124px;
		height:43px;
		list-style:none;
		float:left;
	}
	#nav li#web a{
		background:url(../images/nav/web_nav.png) bottom center no-repeat;
		width:124px;
		height:43px;
		list-style:none;
		float:left;
	}

	#nav li#web a:hover{
		background:url(../images/nav/web_nav.png) center center no-repeat;
		width:124px;
		height:43px;
		list-style:none;
		float:left;
	}
	/*client login*/
	#login-wrap{
		width:81px;
		height:44px;
		position: absolute;
		top:0;
		right:-10px;
		text-align: center;
	}
	#login-wrap p{
		margin:0;
		padding:0;
		color:#deef9b;
		font-size: 11px;
	}
	#login-wrap a{
		height:100%;
		width:100%;
		display: block;
	}

		#login{
			width:22px;
			height:22px;
			background:url(../images/buttons/login.png) top center no-repeat;
			margin: auto;
		}
		#login:hover{
			width:22px;
			height:22px;
			background:url(../images/buttons/login.png) bottom center no-repeat;
			margin: auto;
		}
	
	
/*------------------------------------------------------------------------------
	floats
------------------------------------------------------------------------------*/


.fl{
	float:left;
}
.fr{
	float:right;
}
#float25{
	width:47%;
	padding:0 5px 0 5px;
}
#float48{
	width:48%;
	padding:0 5px 0 5px;
}
#devider{
	width:6px;
}
div#content #left-side {
	width:450px;
	padding:15px 25px 15px 25px;
	min-height:375px;
	
}
div#content #right-side {
	width:450px;
	padding:15px 25px 15px 25px;
	min-height:375px;
	background:url(../images/layout/div_grey340.png) top left no-repeat;
}

div#content #left-side650 {
	width:650px;
	padding:15px 25px 15px 25px;
	min-height:375px;
	
}
div#content #right-side170 {
	width:170px;
	padding:15px 25px 15px 25px;
	min-height:375px;
	background:url(../images/layout/div_grey170.png) top left no-repeat;
}

div#footer #left-side {
	width:450px;
	padding:15px 25px 15px 25px;
	min-height:242px;
	
}
div#footer #right-side {
	width:450px;
	padding:15px 25px 15px 25px;
	min-height:242px;
	background:url(../images/layout/div_green.png) top left no-repeat;
}



/*------------------------------------------------------------------------------
	gallery-portfolio
------------------------------------------------------------------------------*/

#folioimg{
	width:100%;
	position:relative;
}
	#folioimg h2{
		position:absolute;
		right:61px;
		bottom:9px;
		font-size:12px;
		text-align:center;
	}
	#folioimg h2 a{
		font-weight:100;
		text-decoration:none;
		color:#999999;
	}
	#folioimg h2 a:hover{
		font-weight:100;
		text-decoration:none;
		color:#96BB02;
	}
	

/*------------------------------------------------------------------------------
	twitter
------------------------------------------------------------------------------*/

#twitter_div { 
	width: 350px; 
}

ul#twitter_update_list { 
	font-size: 12px;
	list-style: none;
	margin:0px;
	padding:0px;
}

ul#twitter_update_list li { 
	margin-bottom: 5px;
	padding: 10px;
	color:#475801;
	background: url(../images/layout/twitter_bg.png) top center repeat-x;
	text-align: left;
	font-family: Arial, Helvetica, sans-serif;
}
ul#twitter_update_list li a{
	color:#fff;
	text-decoration:underline;
}
/*home*/

#twitter_div .home { 
	width: 350px; 
}

.home ul#twitter_update_list li { 
	margin-bottom: 5px;
	padding: 10px;
	color:#868686;
	background: url(../images/layout/twitter_bg02.png) top center repeat-x;
	text-align: left;
	font-family: Arial, Helvetica, sans-serif;
}
.home ul#twitter_update_list li a{
	color:#96BB02;
	text-decoration:none;
}
.home ul#twitter_update_list li a:hover{
	color:#475801;
	text-decoration:none;
}
/*------------------------------------------------------------------------------
	fonts
------------------------------------------------------------------------------*/

.title{
	font-family:Arial, Helvetica, sans-serif;
	font-weight:bold;
	font-size: 13px;
	color:#666;
}

.footer{
	font-family:Arial, Helvetica, sans-serif;
	font-size:11px;
	color: #deef9b;
	}
	
.vcard{
	font-family:Times, Helvetica, sans-serif;
	font-size:10px;
	}
h3{
	margin:5px;
	color:#666;
}
h4{
	margin:0;
	color:#666;
}
#qod-quote{
	width:85%;
	margin:0;
	padding:0;
	font-size: 18px;
	font-family: Georgia, serif;
	color:#ccc;
}



/*------------------------------------------------------------------------------
	links
------------------------------------------------------------------------------*/

#footer{
	color:#475801;
}

#footer a{
	color:#FFFFFF;
	text-decoration:none;
}
#footer a:hover{
	color:#475801;
}

a {
	color:#96BB02;
	text-decoration: none;
}
a:hover {
	color:#475801;
	text-decoration: none;
}


.thumbs a{
	color:#868686;
	text-decoration:none;
}
.thumbs a:hover{
	color:#FFF;
	background:url(../images/layout/folio_menu_bg.png) left repeat-y;
	width:200px;
	text-decoration:none;
}
.thumbs-none a{
	color:#868686;
	text-decoration:none;
}
.thumbs-none a:hover{
	color:#FFF;
	background:url(../images/layout/folio_menu_bg.png) left repeat-y;
	width:200px;
	text-decoration:none;
}
#faq .message_head h4:hover{
	color:#96BB02;
}
#social img{
	border:solid 1px #fff;
	margin:2px;
}
#social img:hover{
	border:double 1px #ccc;
}
#qod-quote a{
	padding: 0 10% 0 0 ;
	margin-top:0px;
	color:#ccc;
	font-size: 12px;
	float: right;
	clear:both;
}

/*------------------------------------------------------------------------------
	accordian-slider
------------------------------------------------------------------------------*/

.message_list {
	list-style: none;
	margin: 0;
	padding: 0;
	width: 383px;
}
.message_list li {
	padding: 0;
	margin: 0;
}
.message_head {
	padding:0;
	cursor: pointer;
	position: relative;
}
	#faq .message_head {
	padding:0 0 6px 0;
	cursor: pointer;
	position: relative;
	margin-bottom:2px 0 2px 0;
	background: url(../images/layout/devider.png) bottom repeat-x;
}
.message_body {
	padding:0;
}
	#faq .message_body {
	padding:0;
	padding-bottom:2px;
}
.show_all_message {
	padding-right: 12px;
}
.collapse_all_message {
	padding-right: 12px;
}
.collapse-btn{
	text-align:right;
	padding-top:5px;
	width:100%;
}
.collapse-btn a{
	font-size: 10px;
	color:#868686;
	text-decoration:none;
}
.collapse-btn a:hover{
	color:#96BB02;
	width:200px;
	text-decoration:none;
}

/*------------------------------------------------------------------------------
	forms
------------------------------------------------------------------------------*/

#myForm{
width:340px;
margin-left:10px;
}
.formbox{
	width:100%;
	border:solid 1px #fff;
	background:#ededed;
	padding:4px;
	margin:4px 0 4px 0;
	color:#475801;
}
.formbox:hover{
	width:100%;
	border:solid 1px #475801;
	background:#ededed;
}
.formbox:focus{
	width:100%;
	border:solid 1px #475801;
	background:#ededed;
}
#button{
	width:100%;
	text-align: right;
}

/*------------------------------------------------------------------------------
	clear image
------------------------------------------------------------------------------*/

#clear-image img{
	width:1px;
	height:1px;
	position: absolute;
	left:-25px;
	bottom:-25px;
}