/* 
    Name: webtecharea.com 
    Date: august 2009
    Description: main screen css
    Version: 0.5
    Author: Luca Di Bella
    Autor URI: http://www.webtecharea.it
*/  

/*	COLORS:
	
	dark blue: 		#0066CC
	medium blue:	#0099CC
	light blue:		#99CCFF
	
	very light blue: #EFF7FF
	
	muted blue:		#263340
	
	fluo green:		#66CC00
	fluo pink:		#FC51B5
*/

/*--------------------------------
	General Styles
--------------------------------*/
body	{ background: #EFF7FF url('images/floral-bkg.jpg') no-repeat fixed 20% 100%; }
/*body	{ background: url('images/wind-bkg.jpg') no-repeat fixed center center; }*/
/*body	{ background: url('images/europe-bkg.jpg') no-repeat fixed center center; }*/
/*body	{ background: url('images/mossy-bkg.jpg') no-repeat fixed center center; }*/
a 		{ font-weight: bold; color: #66CC00; }
a img 	{ border: none; }

code 	{ display: block; margin-bottom: 1em; }

/*--------------------------------
	Helper Styles
--------------------------------*/
.clear		{ clear: both; }
.inner		{ position: relative; }
.spacer		{ height: 2em; }


.mediumblue			{ background-color: #0099CC !important; color: white; }
a.mediumblue:hover	{ background-color: white !important; color: #0099CC !important; }
.lightblue			{ background-color: #99CCFF !important; color: white; }
a.lightblue:hover	{ background-color: white !important; color: #99CCFF !important; }
.green				{ background-color: #66CC00 !important; color: white; }
a.green:hover		{ background-color: white !important; color: #66CC00 !important; }
.inv-green			{ background-color: white !important; color: #66CC00 !important; }
a.inv-green:hover	{ background-color: #66CC00 !important; color: white !important; }
.pink				{ background-color: #FC51B5 !important; color: white; }
a.pink:hover		{ background-color: white !important; color: #FC51B5 !important; }

.notice 	{ padding: 1em; line-height: 1.2em; *min-height: 20px;  background: transparent url('images/pk-wide-dotted.png') repeat top left; font-style: italic; font-weight: bold; color: black; margin: 2em 0 1em 0;  }
.notice p	{ margin-bottom: 0; }

/*--------------------------------
	Page Structure
--------------------------------*/
#wrapper 	{ padding-top: 6em; padding-bottom: 6em; }

#header,
#footer		{ width: 100%; position: fixed; left: 0; }
#header		{ height: 3em; top: 0; background-color: #263340; border-bottom: 6px solid white; overflow: visible; }
#footer		{ height: 3em; bottom: 0; background-color: #99CCFF; border-top: 6px solid white; line-height: 3em; font-size: .8em; }


/*--------------------------------
	Page Components
--------------------------------*/
#mainnav			{ position: absolute; width: 100%; height: 100%; margin: 0; padding: 0; list-style: none; }
#mainnav li 		{ margin: 0; padding: 0 1em 0 0; float: left; }
#mainnav a			{ display: block; line-height: 3em; color: white; text-decoration: none; text-transform: uppercase;  }
#mainnav a:hover	{ background-color: white !important; color: #263340; }
#mainnav a.active	{ border-top: 6px solid white; line-height: 2.2em; }

#logo		{ position: absolute; width: 106px; height: 70px; top: 0; right: 0; background: transparent url('images/logo_wta.png') no-repeat bottom right; text-indent: -10000em; }

#mainbar		{ }
#sentence		{ font-size: 25px; font-weight: bold; margin-bottom: 20px; line-height: 1.1em; text-shadow: 1px 1px 0 #EFF7FF; }
#sentence span	{ padding: 4px 0; background-color: #99CCFF; color: white; text-shadow: 1px 1px 0 #263340; }
#mainbar h3		{ background: transparent url('images/lb-wide-dotted.png') repeat top left; text-shadow: 1px 1px 0 #EFF7FF;  }

#products,
#products li			{ list-style: none; margin-left: 0; padding-left: 0; }
#products li a			{ padding: .3em 0; background-color: #66CC00; font-size: 1.5em; font-weight: bold; text-decoration: none; color: white;}
#products li a:hover	{ background-color: white; color: #66CC00; }
/*#products li #sexxi		{ padding-left: 35px; background: transparent url('images/icons/sexxi.png') no-repeat 0 0; }*/

#maincontent			{ position: relative; }

.content-header			{}
.content-info			{ float: right; margin: 1em 0 1em 1em; text-align: right; line-height: 1.6em; }
.content-info span		{ padding: .3em 0; background-color: #99CCFF; font-size: 1.2em; font-weight: bold; text-decoration: none; color: white; }
.content-header h1		{ font-size: 34px; line-height: 1.1em; letter-spacing: -2px; }
.content-header h1 span	{ padding: .1em 0; }
.content-header h2		{ line-height: 1.3em; letter-spacing: -1px; }
.content-header h2 span	{ padding: .3em 0; }

#mainbody				{ padding: 1em; border-left: 1px dashed #999; border-bottom: 1px dashed #999; background: white; clear: both; }
#mainbody blockquote	{ border: 1px dashed #0099CC; padding: 1em 1em 0.2em 1em; margin-bottom: .5em; background-color: #99CCFF; color: #0099CC; font-style: italic; font-weight: bold;}
#mainbody h4 span		{ padding: 4px 0; background-color: #99CCFF; font-size: .9em; color: white; text-shadow: 1px 1px 0 #263340;  }

.content_row			{ padding-bottom: 2em; margin-bottom: 2em; }
.content_row h2 span	{ padding: .3em 0; background-color: #0099CC; color: white; letter-spacing: -1px; text-shadow: 1px 1px 0 #263340; }
.content_row .more		{ padding: .2em 0; margin-top: 1em; font-size: 1.6em; float: right; background-color: #66CC00; color: white; letter-spacing: -1px; text-shadow: 1px 1px 0 black; text-decoration: none; }

.content_col_equal		{ position: relative;  width: 309px; *min-height: 10px; background-color: white; border-left: 1px dashed #999; border-bottom: 1px dashed #999; -webkit-transition-property: -webkit-box-shadow, top, left; -webkit-transition-duration: .1s; -webkit-transition-timing-function: linear;  }
.content_col_equal:hover{ left: -4px; top: -4px; -webkit-box-shadow: 4px 4px 8px #999; -moz-box-shadow: #999 4px 4px 8px; }

.first					{ float: left; /*margin-left: 0; margin-right: 10px;*/ clear: left; }
.last					{ float: right; /*margin-left: 10px; margin-right: 0;*/ clear: right; }

.pagination				{}
.pagination span		{ padding: .2em 0; margin-top: 1em; font-size: 1.6em; font-weight: bold; background-color: #66CC00; color: white; letter-spacing: -1px; text-shadow: 1px 1px 0 black;  }
.pagination a			{ text-decoration: underline; color: white; }


/* Clients */
#clients				{ }
.client-item			{ cursor: pointer; }
/*.client-name			{ font-size: 2.5em; font-weight: bold;  letter-spacing: -2px; color: #263340; }*/
.client-name			{ font-size: 2.5em; font-weight: bold; letter-spacing: -2px; line-height: 1em; }
.client-image			{ border-top: 1px solid #999; background-color: #CCC; }
.client-brief			{ padding: 1em; border-top: 1px solid #999; font-size: .85em; color: #263340;  }
/*.client-brief:hover		{ background-color: #66CC00; color: white; }*/

/* Tweet */
#twitter			{ }
.tweet-row			{ position: relative; padding: 1em 0 1em 1em; margin-bottom: 1em; border-left: 1px dashed #999; border-bottom: 1px dashed #999; background-color: white; -webkit-transition-property: -webkit-box-shadow, top, left; -webkit-transition-duration: .1s; -webkit-transition-timing-function: linear; }
.tweet-row:hover	{ left: -4px; top: -4px; -webkit-box-shadow: 4px 4px 8px #999; -moz-box-shadow: 4px 4px 8px #999; }
.tweet-info			{ float: right; margin-left: 1em; margin-bottom: 1em; text-align: right; line-height: 1em; }
.tweet-info a		{ padding: .3em 0; background-color: #99CCFF; font-size: 1.2em; font-weight: bold; text-decoration: none; color: white; }
.tweet-info a:hover	{ background-color: white; color: #99CCFF; }

.tweet-text			{ font-size: 1.2em; font-weight: bold; line-height: 1em;}
.tweet-text a 		{ color: #66CC00; }
.tweet-text a:hover	{ background-color: #66CC00; color: white; text-decoration: none; }
.tweet-date			{ font-size: .8em; font-style: italic; color: #263340; }

/* Blog */
#blog				{ }
.blog-row			{ position: relative; padding: 1em 0 1em 1em; margin-bottom: 1em; border-left: 1px dashed #999; border-bottom: 1px dashed #999; background-color: white; -webkit-transition-property: -webkit-box-shadow, top, left; -webkit-transition-duration: .1s; -webkit-transition-timing-function: linear;  }
.blog-row:hover		{ left: -4px; top: -4px; -webkit-box-shadow: 4px 4px 8px #999; -moz-box-shadow: 4px 4px 8px #999; }
.blog-info			{ float: right; margin-left: 1em; margin-bottom: 1em; text-align: right; line-height: 1em; }
.blog-info a,
.blog-info span		{ padding: .3em 0; background-color: #99CCFF; font-size: 1.2em; line-height: 1.2em; font-weight: bold; text-decoration: none; color: white; }
.blog-info a:hover	{ background-color: white; color: #99CCFF; }

.blog-title			{ font-size: 1.2em; font-weight: bold; line-height: 1em;}
.blog-title a		{ text-decoration: none; color: black; }
.blog-title a:hover	{ }
.blog-date			{ font-size: 11px; font-style: italic; color: #263340; }

.blog-text a:hover,
.blog-title a:hover	{ background-color: #66CC00; color: white; text-decoration: none; }

.blog-item .blog-title		{ font-size: 2.5em;  letter-spacing: -2px; color: #263340; border-bottom: 1px solid #999; }
.blog-item .blog-date-cmts	{ font-weight: bold; padding-left: 1em; }
.blog-item .cmts			{ float: right; padding-right: 1em; }
.blog-item .blog-text		{ padding: 1em; font-size: 11px; color: #263340;  }
.blog-item .blog-info		{ position: relative; float: right; margin: 1.5em 0 1em 1em; font-size: .8em; }

/* Shares */
#shares 			{ margin-top: 2em; margin-bottom: 0; /*border-top: 1px solid #99CCFF;*/}
#shares dt			{ position: absolute; bottom: -35px; right: 0; width: 60px; height: 35px; line-height: 35px; background-color: #99CCFF; color: #263340; font-weight: bold; text-align: center; cursor: pointer;   }
dt#shares-comments	{ right: 140px; }
dt#shares-form		{ right: 70px; }
dt#shares-social	{ right: 0; }
#shares dt.current	{ bottom: -40px; height: 40px; line-height: 45px; color: white; text-shadow: 1px 1px 0 #263340; }
#shares .pane		{ display: none; }

.comments-list		{ margin: 0; padding: 0; list-style: none;}
.comment-item.odd	{}
.comment-item.even	{ background-color: #EFF7FF; }
.comment-item		{ margin: 0; padding: 1em 0 0 0; list-style: none; border-top: 1px dashed #999; }
.comment-info		{ font-weight: bold; color: #263340; line-height: 1.1em; }
.comment-text		{ font-size: 11px; }


/* Contacts */
.freeform,
.comment_form {}
.freeform input.text,
.freeform textarea,
.comment_form input.text,
.comment_form textarea {
	border: 1px solid #ccc;
	background: white;
	width: 80%;
	padding: .5em;
	font-size: 14px;
	font-style: italic;
}
.freeform textarea,
.comment_form textarea { height: 120px; }
.freeform label,
.freeform .label,
.comment_form label,
.comment_form .label {
	font-weight: bold;
	font-style: italic;
}
.freeform  button,
.comment_form  button {
	border: none;
	font-size: 16px;
	font-weight: bold;
	text-transform: lowercase;
	padding: 4px; background-color: #99CCFF; color: white; text-shadow: 1px 1px 0 #263340; 
}
/*--------------------------------
	Overrides
--------------------------------*/