/*   
Theme Name: JG2010
Author: Julian Gibellino
Author URI: http://www.juliangibellino.com
*/

/******* Global Settings ************/




/******* GLOBAL *********/
* {margin:0; padding:0;}


body {width:100%; margin:0 auto; text-align:center; color:#666;  font-family: "Lucida Grande", "Myriad Pro", Arial, sans-serif; }

h1, h2, h3, h4, h5, h6, p, a, li, input, textarea{ font-family: "Lucida Grande", "Myriad Pro", Arial, sans-serif;}

p { color:#343434; padding: 5px 0; font-size: 12px; }
ul,li {list-style:none;}
a, a:link, a:active, a:visited { outline:none; color:#217c74; text-decoration:none; font-weight:bold; }
a:link { text-decoration:none; color: #217c74;}
a:hover { text-decoration:underline; color: #217c74;}
a img, a:hover img { border:none; text-decoration:none; }

.clear {clear:both; margin:0; padding:0;}

#wrapper{ width:100%; background:url(images/wrapper-background.png) repeat-x; font-size:12px;}
#container {width:940px; margin:0 auto; background:url(images/container-background.png) no-repeat; text-align:left}


.darkteal { color: #217c74; }
.gray { color: #686868;}

.clear { clear:both; }

.floatleft{
	float:left;
}
.floatright{
	float:right;
}

.teal_bg {padding:2px 5px; background: #217a72; color:#FFF;}

a.teal_bg {padding:2px 2px; margin: 3px 0; background: #217a72; color:#FFF;}

a:hover.teal_bg { text-decoration:underline}

.about p{ line-height:20px;}

/******************* HEADER *************************/
#header {width:100%; height:90px; background:url(images/header-background.png) no-repeat; background-color:transparent; margin-bottom:20px; color:#FFFFFF;}

.logo{ float:left; position:relative; margin: 15px 0 0 15px;}


#menu {	float:right; position:relative; margin:45px 40px 0 0;}
#menu ul li a, #menu ul li a:visited {display:block; text-decoration:none; overflow:hidden; padding: 3px 0 15px 0; color:#FFFFFF; background-color:transparent;}
#menu ul {padding:0; margin:0; list-style: none;}
#menu ul li {float:left; position:relative; list-style:none; padding: 0; margin: -1px -20px 0 -20px; background:url(images/menu-inactive.gif) no-repeat; width: 85px; height:25px; text-align:center; font-size:1.2em; font-weight:bold; -webkit-transform: rotate(-62deg); -moz-transform: rotate(-62deg); }
#menu ul li.active{ background:url(images/menu-active.gif) no-repeat; color:#555555; }
#menu ul li.active a{ color:#555555;}
#menu ul li:hover{ background:url(images/menu-hover.gif) no-repeat;}
#menu ul li:hover a{ color:#555555;}


/******************* HOMEPAGE ******************/

#slider_container{ height: 300px; background:url(images/slider-container.png) no-repeat; }

#slider_container .slider_left { width: 450px; height:300px; float:left; position:relative; }
#slider_container .title { padding: 35px 0 0 25px; }
#slider_container .title h1 { font-size:40px; font-family:"Lucida Grande", "Myriad Pro", Arial, sans-serif; font-weight:normal; letter-spacing:-3px; line-height: 58px; display:inline;}


#slider_container .container { float:right; margin-top: -300px; width:650px; height:300px; overflow:hidden; position:relative; cursor:default; margin-left:0; }
#slider_container .slides { position:relative;}
#slider_container .slides div { position:relative; width:650px; display:none; }

#slider_container .work-btn{ float:right; position:relative; width:350px; height:105px; margin:-40px 80px 0 0; z-index:2; background:url(images/view-work-btn.png) no-repeat; }
#slider_container .work-btn:hover { cursor:pointer; width:350px;  background:url(images/view-work-btn.png) no-repeat; background-position: 0 -105px; }


ul.pagination { list-style-type:none; margin:20px 0 0 0; padding:0;}
ul.pagination li { float:left; margin:0 5px; }	
ul.pagination a { display:block; width:10px; height:10px; overflow:hidden; background:url(images/slider-controller_btn.png) no-repeat;}
ul.pagination li.active a {background:url(images/slider-controller_btn_active.png) no-repeat;}



#b_container { margin: 10px 0 0 0; background-color:transparent; }
#b_container .l_column{ float:left; width: 600px;}
#b_container .r_column{ float:right; width: 300px; }

#b_container h1{ color:#217a72; font-size:26px;}
#b_container p{ font-size:14px;}
#b_container hr{ border-left:none; border-right: none; border-top: 1px solid #cacaca; border-bottom: 1px solid #FFFFFF; margin: 50px 0; }

.specialize { background:url(images/specializing-background.png) no-repeat; height:45px;}
.specialize li { float:left; position:relative; list-style:none; margin: 0; width: 150px; text-align:center; font-size:18px; color:#292929; padding: 10px 0 0 0;}
.specialize li.s1 {width: 160px;}
.specialize li.s2 {width: 160px;}
.specialize li.s3 {width: 125px;}


.specialize li a {}
.specialize li img { margin-top:-3px;}
span.dark{ color:#434545; }
span.light{ color:#686868; }



#b_container form {	background-color:transparent; margin:0; padding: ;}

#b_container form fieldset { border: none;	margin: 0; padding:0; }

.contact h4 { color: #0b413a; font-size: 20px;font-weight:600; padding: 0; }

#b_container form legend { color: #0b413a; font-size: 20px;	font-weight:600; padding: 0; margin:0; }

#b_container form fieldset ol { margin: 0; padding: 0; }

#b_container form fieldset li { list-style: none;  padding: 10px 0 0 0;  margin: 0;}

#b_container form label {  color: #0b413a;  font-size: 12px; padding:0; margin:0; font-weight:600;}

#b_container form input {  font-size: 12px; vertical-align:text-bottom; width: 250px; height:20px; background: #f4f4f4; border: 1px solid #8f8f8f;}

#b_container form input:focus, #b_container form textarea:focus { background: #FFFFFF; border: 1px solid #5c5c5c; color: #343434;}


#b_container form textarea { font-size: 12px; width: 250px; height:50px; background: #f4f4f4; border: 1px solid #8f8f8f; }

#b_container form button {	padding:0;	margin:0; border:none; cursor:pointer; background-color:transparent; text-align:left; }

#b_container form em { font-weight: bold; font-style: normal; color: #f00; }

#b_container form .submit input { border:none; background:none; background-image:url(images/home-contact-btn.png); width:125px; height:25px;}

#b_container form .submit input:hover { cursor:pointer;}


#b_container .contact { background:url(images/home-contact-bg.png) no-repeat; height:255px; padding: 10px; }


/************** END HOMEPAGE ******************/


/************** MAIN CONTENT ******************/
#content{ width:940px !important; margin:0; }

#content .header{ height:10px; margin:0; background:url(images/body-container-header.png) no-repeat; }
#content .body{ margin:0; min-height:500px; background:url(images/body-container-body.png) repeat-y; padding:10px 15px; }
#content .footer{ height:30px; margin:0; background:url(images/body-container-footer.png) no-repeat; clear:both; }

#content .body-content{ padding: 0 5px;}

#content .body .left{ float:left; width:585px; margin-right: 10px; padding-right: 20px; border-right: #999 1px dotted; }

#content .body .right{ float:right; width:270px;}

#content .title { margin: 0 0 10px 0; padding-bottom:10px; background:url(images/title-border-dark.gif) repeat-x; text-align:left; background-position:bottom; }
#content .title h3{ font-size:24px; font-weight:normal; }

#content .skillz { background:url(images/black-dotted.png) repeat; color:#FFF; padding:10px; -moz-border-radius: 5px; -webkit-border-radius: 5px; }

#content .skillz h2 { color:#333; font-size:18px; font-weight:600; /*border-bottom: 1px #FFF dotted;*/ margin: 0; border:none; }

#content .skillz hr{ border-top: 1px #999 solid; border-bottom: 1px #fff solid; border-left: none; border-right:none; margin: 10px 0 10px 0; }

textarea#comment { width:500px; height:100px;}





/************** POSTS ******************/

#cat_nav{ text-align:right; float:right; margin-right:10px; position:relative; z-index:1000; }

#cat_nav .filter{ float:left; text-align:left; width:40px; padding: 5px 0; }

.cat_title { margin: 0 10px 10px 10px; padding-bottom:10px; background:url(images/title-border-dark.gif) repeat-x; text-align:left; background-position:bottom; }
.cat_title h3{ font-size:24px; font-weight:normal; }

.post { margin: 0 13px 15px 10px; padding: 0 0 15px 0; float:left; width:280px; background:url(images/post-bottom-hr.gif) repeat-x; background-position:bottom;}
.post h2 { color:#333; font-weight:bold; font-size:12px; letter-spacing:-0.03em; }

.description { margin: 0 0 10px 0; padding: 0 0 10px 0; height:60px; }
.services{ padding: 5px 0; background:#FFF; border-top: #CCC 1px dotted; border-bottom: #CCC 1px dotted; }
.services p{ font-size:11px; }

.image { background:url(images/gallery_bg.gif) no-repeat; padding: 10px 0 0 0; margin-bottom:5px; height:180px; width:280px; text-align:center; }
.image:hover { background:url(images/gallery_bg_hover.gif) no-repeat; cursor:pointer; }


hr {border-top: 1px #888 solid; border-bottom: 1px #fff solid; border-left: none; border-right:none; margin: 10px 15px 10px 10px; }

hr.dotted {border-top: 1px #999 dotted; border-bottom: none; border-left: none; border-right:none; margin: 15px 0; }
hr.dotted-wide {border-top: 1px #999 dotted; border-bottom: none; border-left: none; border-right:none; margin: 20px 0; }


/************** FOOTER ******************/

#footer_wrapper{ clear:both; width:100%; min-height:230px; background: url(images/footer-wrapper-background.png) repeat-x; }
#footer { width:940px; min-height:50px; margin:0 auto; background: url(images/footer-background.png) no-repeat; padding-top:25px; color:#FFFFFF; background-color:transparent;}

#footer .sitemap a, #footer .copyright a { text-decoration:none; }
#footer .sitemap a:hover, #footer .copyright a:hover { text-decoration:underline; }

#footer .sitemap { font-size:11px; text-align:left; }

#footer .copyright { font-size:11px; text-align:left; margin-top:15px;}

#footer .contact { float:right; font-size:11px; text-align:left}
#footer li { padding: 5px 0; }
#footer li img { float:left; padding-right:5px; }


#footer .valid { font-size:11px; float: right; margin-top:35px;}

#footer a {color:#FFFFFF; text-decoration:underline; background-color:transparent;}



#content {float:left; width:500px; margin-right:0px; text-align:left;}



/*HIGHSLIDE GALLERY*/

.caption-btn{
	float:right;
}



/* IMAGE OVERLAY */
.boxgrid{ 
				float:left; 
				width:280px; 
				overflow: hidden; 
				position: relative; 
			}
				.boxgrid .image img{ 
					position: absolute; 
					top: 0; 
					left: 0; 
					border: 0; 
				}
				.boxgrid p{ 
					padding: 7px 10px 0 10px; 
					color:#FFF; 
					font-weight:bold;
					font-size:11px;
				}
				.boxgrid p a{ 
					color:#FFF; 
					font-weight:bold;
					font-size:11px;
                                        text-decoration:none;
				}
				
			.boxcaption{ 
				float: left; 
				position: absolute; 
				background: #000;
				border-top:5px solid #217a72;
				height: 25px;
				width: 100%;
				margin-top:-10px;
				text-align:right;
				opacity: .85; 
				/* For IE 5-7 */
				filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=85);
				/* For IE 8 */
				-MS-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=85)";
 			}
 				.captionfull .boxcaption {
 					top: 260px;
 					left: 0;
 				}
 				.caption .boxcaption {
 					top: 220px;
 					left: 0;
 				}	
				


/* Seletion Box */
/* Drop down styles*/
div.selectbox-wrapper {
  position:absolute;
  background-color: #000;
  border:1px solid #ccc;
  margin:0 0 0 55px;
  padding:0px;
  text-align:left;
  max-height:200px;
  width:200px;
  overflow:auto;
  color:#FFF;
  opacity: .80; 
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=80);

  -MS-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";
}

/*Drop down list styles */
div.selectbox-wrapper ul {
  list-style-type:none;
  margin: 0;
  padding:0px;
  width:200px;
}

/* Selected item in dropdown list */
div.selectbox-wrapper ul li.selected { 
  background-color: #0b413a;
}

/* Hover state for dropdown list */
div.selectbox-wrapper ul li.current { 
  background-color: #217a72;
}

/* Drop down list items style*/
div.selectbox-wrapper ul li {
  list-style-type:none;
  display:block;
  margin:0;
  padding:5px;
  cursor:pointer;
}

/* Look and feel of select box */
.selectbox 
{
  width:200px;
  padding:5px;
  font-size:12px;
  width : 140px; 
  display : block;
  text-align:left; 
  background: #000;
  cursor: pointer;
  border:1px solid #cccccc;
  color:#333;
  opacity: .5; 
  
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=50);
  
  -MS-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
}



/*==================================
Hide lists on page load
====================================*/

.stylish-select ul.newList {left:-9999px;}

/*==================================
Select Dropdown
====================================*/
ul.newList * {margin:0; padding:0;}
ul.newList a {color: #fff; text-decoration:none; display:block;}

ul.newList { width:120px!important; margin:0; text-align:left; padding:0; list-style:none; color:#fff; font-weight:600; font-size:11px; background:#000; position:absolute;  border:1px solid #000; overflow:auto; z-index:9999;
opacity: .85; 
   
  /* For IE 5-7*/
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=85);
   /* For IE 8*/
  -MS-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=85)";}


.newListSelected {width:120px!important; height:23px; padding:0; float:left; background: url(images/dropdown-bg.gif) no-repeat; background-position: -3px 0; text-align:left; color:#fff;}
.newListSelected div { padding:5px;}
newListSelected span { display:block;}
ul.newList li a {padding:3px 5px 0 5px; display: block;}
ul.newList li a:focus {-moz-outline-style: none;}
.selectedTxt {width:120px; overflow:hidden; height:16px; padding:0 0 0 0;}
.hiLite {background:#06332d!important; color:#fff!important;}
.hiLite a {background:#06332d!important; color:#fff!important;}
.newListHover {background:#217a72!important; color:#fff!important; cursor:default;}
.newListSelHover, .newListSelFocus {cursor:pointer;}
.newListOptionTitle {font-weight:bold;}
.newListOptionTitle ul {margin:3px 0 0 0;}
.newListOptionTitle li {font-weight:normal; border-left:1px solid #ccc;}


		

/* ------- Highslide Gallery HTML --- */

.gallery-wrapper{
	width:700px; 
	margin:0 auto; 
	padding: 0 5px; 
	text-align:left;
}

.gallery-wrapper hr{
	border-top: 1px #888 solid; border-bottom: 1px #fff solid; border-left: none; border-right:none; margin: 10px 0 10px 0; clear:both;
	
}

.gallery-wrapper .header{
	padding: 5px;
	background:url(../../../wp-includes/js/highslide/graphics/caption_bg.gif) repeat-x;
	color:#FFF;
	border-top:2px solid #0b413a;
	border-left: 1px #cbcbcb solid;
	border-right: 1px #cbcbcb solid;
	border-bottom: 1px #cbcbcb solid;
	
	-moz-border-radius:  0 0 5px 5px;
	-webkit-border-radius: 0 0 5px 5px;
}

.gallery-wrapper .header h1{
	color:#0b413a; 
	font-size:1.25em;
	font-weight:600;
}

.gallery-wrapper .body h2{
	font-size:1em;
	color:#0b413a;
	
}

.gallery-wrapper .descr{
	float:left;
	width:320px;
	
}

.gallery-wrapper .services{ padding: 5px 0; background:#f2f2f2; }


.gallery-wrapper .gallery-slider{ float:right; width:360px; background:url(images/gallery_slider_bg.gif) no-repeat; margin-bottom:5px; text-align:center;}

.gallery-slider .container { width:350px; height:270px; overflow:hidden; position:relative; cursor:default; margin: 5px; cursor:pointer; text-align:center;}
.gallery-slider .slides { position:relative; top:0; left:0; }
.gallery-slider .slides div { position:relative; }

.controls { display:inline-block; margin: 10px auto; text-align:center; clear:both;}


.gallery-slider ul.pagination { list-style-type:none; display:inline; padding:0; text-align:center;}
.gallery-slider ul.pagination li { float:left; margin:0 5px; }	
.gallery-slider ul.pagination a { display:block; width:10px; height:10px; overflow:hidden; background:url(images/slider-controller-gray_btn.png) no-repeat;}

.gallery-slider ul.controller { list-style-type:none; display:inline; padding:0; text-align:center;}
.gallery-slider ul.controller li { float:left; margin:0 5px; }
.gallery-slider li a.previous { display:block; width:10px; height:10px; overflow:hidden; background:url(images/slider-controller_prev.gif) no-repeat;}
.gallery-slider li a.next { display:block; width:10px; height:10px; overflow:hidden; background:url(images/slider-controller_next.gif) no-repeat;}


.gallery-slider ul.pagination li.active a {background:url(images/slider-controller_btn_active.png) no-repeat;}






/*About*/


.spec{ background:url(images/black-dotted.png) repeat; padding:10px; -moz-border-radius: 5px; -webkit-border-radius: 5px;}
.spec table { width:100%; color:#0b413a; }
.spec table td{ padding:5px; }
.spec h2{ font-weight:600; padding: 3px 0; color:#0b413a;}
.spec li{ list-style-position:inside; list-style-image:url(images/check-mark.gif); margin:0; padding:0; }
.spec hr{ border-top: 1px #999 solid; border-bottom: 1px #fff solid; border-left: none; border-right:none; margin: 5px 0; }

.download{ padding: 15px 0;}
.download hr {margin: 5px 0;}



/*Contact*/
.contact-form form { outline:none; border:none; }
.contact-form form fieldset { border: none; margin: 0; outline:none; }
.contact-form form legend { color: #0b413a; font-size: 20px; font-weight:600; padding: 0; }
.contact-form form fieldset ol { margin: 0; padding: 0; }
.contact-form form fieldset li { list-style: none;  padding: 10px 0 0 0;  margin: 0;}
.contact-form form label {  color: #0b413a;  font-size: 12px;  font-weight:600;}
.contact-form form input {  font-size: 12px; vertical-align:text-bottom; width:350px; height:20px; background: #f4f4f4; border: 1px solid #8f8f8f;}
.contact-form form input:focus, .contact-form form textarea:focus { background: #FFFFFF; border: 1px solid #5c5c5c; color: #343434;}
.contact-form form textarea { font-size: 12px; width: 450px; height:200px; background: #f4f4f4; border: 1px solid #8f8f8f; }
.contact-form form button {	padding:0;	margin:0; border:none; cursor:pointer; background-color:transparent; text-align:left; }
.contact-form form em { font-weight: bold; font-style: normal; color: #f00; }
.contact-form form .submit input { border:none; background:none; background-image:url(images/home-contact-btn.png); width:125px; height:25px;}
.contact-form form .submit input:hover { cursor:pointer;}
.frm_required, .frm_errors {color:#F00;}



.skillz .contacts { width:100%; color:#000; }
.skillz .contacts .img{ float:left; margin: 0;}
.skillz .contacts .desc{ margin-left: 50px; padding-top:5px;}
.skillz .contacts hr { margin: 10px 0; }