/*
	Theme Name:     Boilerplate-Utasi
	Author:         Gabriel Utasi
	Template:       1140FluidStarkers
	Version:        0.1.0
	*/

	/* ============================== */
	/* ! Layout for desktop version   */
	/* ============================== */

	body {
	font-family: helvetica, arial, sans-serif; 
	font-size: .85em;
	background-color: #dddddd;
	background-repeat:no-repeat; 
	background-color: #eee;
	/* IE10 */ 
	background-image: -ms-linear-gradient(top, #BBBBBB 0%, #EEEEEE 100%);
	/* Mozilla Firefox */ 
	background-image: -moz-linear-gradient(top, #BBBBBB 0%, #EEEEEE 100%); 
	/* Opera */ 
	background-image: -o-linear-gradient(top, #BBBBBB 0%, #EEEEEE 100%);
	/* Webkit (Safari/Chrome 10) */ 
	background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #BBBBBB), color-stop(1, #EEEEEE));
	/* Webkit (Chrome 11+) */ 
	background-image: -webkit-linear-gradient(top, #BBBBBB 0%, #EEEEEE 100%);
	/* Proposed W3C Markup */ 
	background-image: linear-gradient(top, #BBBBBB 0%, #EEEEEE 100%);
	}

h1 {
	margin:.3em 0;
	font-weight:normal
	}

.ninecol h1 {
	color: #e0e0e0;
	font-size: 3.7em;
	font-weight: normal;
	letter-spacing: -0.04em;
	margin: 0.3em 0 -0.6em;
	text-align: right;
	line-height:.7em
}

h2 {
	border-bottom: 2px solid #DDDDDD;
	font-size: 1.3em;
	font-weight: normal;
	margin: 0 -4.25% 2em 0;
	padding: 20px 0 0;
}
h2 a {
	text-decoration:none;
	color:#000;
	}
.click {
	background: #CCCCCC;
	border: 1px outset #FFFFFF;
	font-size: 1.5em;
	margin: 0.3em 0;
	padding: 5px;
	cursor: pointer;
	}
h3 {
	border-bottom: 2px solid #DDDDDD;
	font-size: 1.1em;
	margin: 0 0 1em;
	padding: 20px 0 0;
}

.container p {
	text-align: left;
	margin: 2em 0;
	line-height:1.4em;
	}

.top {
	background-color:#333;
	/* IE10 */ 
	background-image: -ms-linear-gradient(bottom, #000000 0%, #333333 100%);
	/* Mozilla Firefox */ 
	background-image: -moz-linear-gradient(bottom, #000000 0%, #333333 100%);
	/* Opera */ 
	background-image: -o-linear-gradient(bottom, #000000 0%, #333333 100%);
	/* Webkit (Safari/Chrome 10) */ 
	background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0, #000000), color-stop(1, #333333));
	/* Webkit (Chrome 11+) */ 
	background-image: -webkit-linear-gradient(bottom, #000000 0%, #333333 100%);
	/* Proposed W3C Markup */ 
	background-image: linear-gradient(bottom, #000000 0%, #333333 100%);
	line-height:48px;
	}

#hider:hover {
	background-image: url(http://gabrielutasi.com/copyright/gabrielutasi/copyright.png);
	background-repeat:no-repeat;
	}

#hider:hover img {
	opacity:.2
	}

.logo a img { margin-left:2%; text-decoration:none; border: 0; vertical-align: middle; }

.alignright { float:right; margin:0 0 20px 20px }
.alignleft { float:left; margin:0 20px 0 20px }
.alignright:after, img .alignleft:after { clear:both; }

.greyimage {
    margin-right: -4.25%;
    margin-top: -2.6em;
    max-width: 50%;
}

.contact { 
	background-image:url('http://gabrielutasi.com/images/GabrielUtasi-contact.png'); 
	background-position: left center;
	background-repeat: no-repeat;
	color: #CCCCCC;
	display: block;
	float: right;
	font-size: 0.85em;
	font-weight: bold;
	line-height: 45px;
	opacity: 0.7;
	padding-left: 30px;
	text-decoration: none;
	text-transform: lowercase;
	width: 45px;
	margin-right:.1em;
	} 
.contact:hover { opacity:1 }

#home  .threecol { padding: 0; text-align:center; width:25%; margin-right:0% }
.page-id-138 h1 { margin:0 }

.features { }

.page_item a { 
	background:none;
	}

/* ----------------- Feature Blocks ----------------- */

.consulting, .page-item-16 { background-color:#46B745;  }
.art, .page-item-43 { background-color:#477747; }
.design, .page-item-50 { background-color:#7E997D; }
.illustration, .page-item-45 { background-color:#6CC66F; }

.consulting, .art, .design, .illustration { outline:5px solid; }



.consultingfeature, .page-item-16 a, .page-item-16 a:visited, .page-item-16 a:active, 
.artfeature, .page-item-43 a, .page-item-43 a:visited, .page-item-43 a:active,
.designfeature, .page-item-50 a, .page-item-50 a:visited, .page-item-50 a:active,
.illustrationfeature, .page-item-45 a , .page-item-45 a:visited , .page-item-45 a:active {
	background-image:url(http://gabrielutasi.com/images/GabrielUtasi-Art.png);
	background-repeat:no-repeat;
	height:200px;
	position:relative;
	margin:0;
	display:block;
	opacity:.6
	}

.consultingfeature, .page-item-16 a, .page-item-16 a:visited, .page-item-16 a:active, .page-item-16 a:hover  { background-position:0px 0px; color:#46B745 }
.artfeature, .page-item-43 a, .page-item-43 a:visited, .page-item-43 a:active, .page-item-43 a:hover { background-position:-285px 0px; color:#477747 }
.designfeature, .page-item-50 a , .page-item-50 a:visited, .page-item-50 a:active, .page-item-50 a:hover { background-position:-570px 0px; color:#7E997D }
.illustrationfeature, .page-item-45 a  , .page-item-45 a:visited , .page-item-45 a:active, .page-item-45 a:hover { background-position:-855px 0px; color:#6CC66F }

.page-item-16 a:hover, 
.page-item-43 a:hover, 
.page-item-50 a:hover, 
.page-item-45 a:hover {
	background-image:url(http://gabrielutasi.com/images/GabrielUtasi-Art.png);
	background-repeat:no-repeat;
	position:relative;
	margin:0;
	opacity:1
	}	
	
/* Feature Blocks Sub Menus */

.page-item-16 .children li a, .page-item-43 .children li a, 
.page-item-50 .children li a, .page-item-45 .children li a,
.cat-item a {
	min-height:10px;
	background-image:none;
	max-height:20px;
	color: #000000;
	clear:both; 
	text-align:left; 
	display:block;  
	padding: .5em;  
	width:auto;  
	text-decoration:none;  
	border:1px outset #fff;
	}

.cat-item a { border:0 }

.page_item .children li a:hover, .cat-item a:hover { background-color:#eee; opacity:1; border-style:inset; }

.threecol:hover .page-item-16 a, 
.threecol:hover .page-item-43 a, 
.threecol:hover .page-item-50 a, 
.threecol:hover .page-item-45 a {
	opacity:1
	}	

.threecol:hover .children li a {
	opacity: .7
	}	

.page_item , ul, ul li ul { list-style-type: none; }

.xoxo li ul { float:right; margin-top:50px;  } 

.xoxo li ul li  { float:left; margin; 10px; max-height: 37px; background:none; text-align:center } 

.xoxo li ul li a { text-decoration:none; display:block; padding: 10px; color:#444}

.xoxo li ul li a:hover { background-color:#999 }

.children  {
	background-color:#ccc;
	/* IE10 */ 
	background-image: -ms-linear-gradient(top, #eee 0%, #cccccc 100%);
	/* Mozilla Firefox */ 
	background-image: -moz-linear-gradient(top, #eeeeee 0%, #cccccc 100%); 
	/* Opera */ 
	background-image: -o-linear-gradient(top, #eeeeee 0%, #cccccc 100%);
	/* Webkit (Safari/Chrome 10) */ 
	background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #eeeeee), color-stop(1, #cccccc));
	/* Webkit (Chrome 11+) */ 
	background-image: -webkit-linear-gradient(top, #eeeeee 0%, #cccccc 100%);
	/* Proposed W3C Markup */ 
	background-image: linear-gradient(top, #eeeeee 0%, #cccccc 100%);
	opacity:.7;
	}
.homebutton {
	background-color: #333333;
	border-radius: 0 0 0 10px;
	color: #CCCCCC;
	float: right;
	opacity: 0.5;
	padding: 4px 15px;
	position: relative;
	text-decoration: none;
	width: auto;
	z-index: 10;
	height:16px;
	}
.homebutton:hover {
	opacity:.855;
	}
	
#morebutton {
	background-color: #46941a;
	border-radius: 8px 8px 8px 8px;
	cursor: pointer;
	display: block;
	margin: 20px 0;
	opacity: 0.75;
	padding: 15px 0;
	text-align: center;
	width: 11%;
	color: #ffffff;
	display:none
	}
/*	
#morebutton:hover {
	opacity:1;
	}
#morebutton span {
	border: 5px solid #46941a;
	border-radius: 8px 8px 8px 8px;
	padding: 24px 9px 0;
	}
#morecontent {
	display:none
	}
*/
.spacer, .page-item-74, .home .homebutton {
	display:none;
	line-height:0
	}

.portfolio li {
	border-bottom: 1px solid #aaa;
	width: 100%;
	padding:10px 10px 30px;
	margin-bottom:20px;
	display:inline-block;
	}
.portfolio li img {
	border: 0px solid #aaa;
	width:100%;
	margin:0;
	}

.feature {
	float:left; 
	margin:0 15px 15px 0; 
	max-width:300px
	}

.frame {
	float:left;
	width:280px;
	position:relative;
	margin-right:20px;
	min-height:45px;
	transition: width .5s;
	-moz-transition: width .5s; /* Firefox 4 */
	-webkit-transition: width .5s; /* Safari and Chrome */
	-o-transition: width .5s; /* Opera */
	^position:inherit
	}

.full { 
	width:280px;
	transition: width .5s;
	-moz-transition: width 1s; /* Firefox 4 */
	-webkit-transition: width 1s; /* Safari and Chrome */
	-o-transition: width 1s; /* Opera */
	}

.row .ninecol {
	background-color: #FFFFFF;
	border-radius: 0 0 40px 40px;
	border-top: 24px solid #DDDDDD;
	margin-left: -3.81%;
	min-height: 480px;
	padding-left: 3%;
	padding-right: 3%;
	width: 71.05%;
	padding-bottom:30px;
	}

.wp-caption-text, .wp-caption-text a {
	background: none repeat scroll 0 0 #000000;
	color: #FFFFFF;
	padding: 3px 10px;
	}

.wp-caption-text a {
	color: #ccccff
	}

table#pricing {
	width:100%;
	border:1px solid #ccc;
	margin-bottom:20px
}
#pricing th {
	background-color:#444;
	color:#fff;
	font-weight:normal;	
}
#pricing .price {
	text-align: right;
}
#pricing tr td {
	border-bottom:1px dotted #aaa;
	padding: 8px;
}

#searchform {
	margin-top:1em
	}
.screen-reader-text {
	margin-left:-9999px;
	position:absolute
	} 
#searchform input {
	font-size:.85em;
	}

#s {
	clear:both;
	}

ul.processlist { margin:10px 0; display:block; ^padding-bottom:10px; }
ul.processlist li { width:47%; float:left; margin: 5px 0 10px 16px; padding:0; list-style:square; color:#3e3e3e; min-width: 230px }
.clearfix { clear:both; }

.close { 
	opacity:0;
	display:none;
	 }

.hide {
	opacity:.7
	}

.show {
	opacity:1
	}

#noborder {
	border:0 none
	}

small a {
	color:#bbb;
	text-decoration:none;
	}

.page-item-663, .page-item-677, .page-item-683 {
	display:none;
}

	/* ============================= */
	/* ! Layout for mobile version   */
	/* ============================= */

	@media handheld, only screen and (max-width: 767px) {

body {

	}

#home  .threecol { padding: 0; text-align:center; width:100%; margin-right:0% }

.threecol img { max-height:60px; margin-left:1em; }

.contact { margin-right: 1%; }

.consultingfeature, .page-item-16 a, .page-item-16 a:visited, .page-item-16 a:active, 
.artfeature, .page-item-43 a, .page-item-43 a:visited, .page-item-43 a:active, 
.designfeature, .page-item-50 a, .page-item-50 a:visited, .page-item-50 a:active, 
.illustrationfeature, .page-item-45 a, .page-item-45 a:visited, .page-item-45 a:active,
.page-item-16 a:hover, 
.page-item-43 a:hover, 
.page-item-50 a:hover, 
.page-item-45 a:hover {
	background-image: none;
	display: block;
	font-size: 1.4em;
	height: 30px;
	margin: 0;
	opacity: 1;
	padding: 40px 0 0 10px;
	position: relative;
	text-decoration: none;
	color:#fff;
	text-align:left;
	}	

.page-item-16 a:hover, 
.page-item-43 a:hover, 
.page-item-50 a:hover, 
.page-item-45 a:hover {
	background-image: none;
	opacity:1
	}	

.page-item-16 .children li a, .page-item-43 .children li a, 
.page-item-50 .children li a, .page-item-45 .children li a {
	font-size:1em;
	
	min-height:10px;
	background-image:none;
	max-height:20px;
	color: #000000;
	clear:both; 
	text-align:left; 
	display:block;  
	padding: .5em;  
	width:auto;  
	text-decoration:none;  
	border:1px outset #fff;
	}
	

.page_item .children li a:hover { background-color:#eee; opacity:1; border-style:inset; }


.threecol:hover .children li a {
	opacity:1
	}	

.row .threecol, .row .twelvecol {
	padding: 0 6px
	}
	
.row .ninecol {
	background-color: #FFFFFF;
	border-radius: 0 0 40px 40px;
	border-top: 4px solid #AAAAAA;
	margin-left: 0;
	padding: 2% 4% 4%;
	width: auto;
	min-height:0
}

.homebutton {
	width: 70px;
	margin-right:-6px;
	opacity:1
	}
	
.frame {
	width:150px;
	}

.full { 
	width:280px;
	margin-bottom:25px;
	}

.close {
	background: none repeat scroll 0 0 #333333;
	border-radius: 25px 25px 25px 25px;
	bottom: -7px;
	color: #EEEEEE;
	display: block;
	opacity: 0;
	padding: 5px;
	position: absolute;
	text-align: center;
	text-decoration: none;
	width: 97%;
	^position:inherit;
	filter: alpha(opacity=0);
	-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
	}
.show {
	opacity:1;
	6filter: alpha(opacity=100);
	-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
	}

}
	/* ========================================== */
	/* ! Provide higher res assets for iPhone 4   */
	/* ========================================== */

	@media only screen and (-webkit-min-device-pixel-ratio: 2) { 

	/*.logo {
	background: url(logo2x.jpg) no-repeat;
	background-size: 212px 303px;
	}*/

	}