/*
* Skeleton V1.2
* Copyright 2011, Dave Gamache
* www.getskeleton.com
* Free to use under the MIT license.
* http://www.opensource.org/licenses/mit-license.php
* 6/20/2012
*/

/* Table of Content
==================================================
	#Site Styles
	#Page Styles
	#Media Queries
	#Font-Face */

/* #Site Styles
================================================== */

/* #Page Styles
================================================== */
#splitter .purpleBack .one-third.column h3 a,
 h3 a,
 .mainContent h3,
h2, h4,
.colLeft h5{
font-family: 'Source Sans Pro', Tahoma, Verdana, Segoe, sans-serif;
}
nav{float:right;}

header .three.columns{padding-top:10px;}

#top{text-align:center;float:right;margin-top:38px;padding-left:12px;background:url(../images/nav_hr.png) no-repeat bottom center;}
#top li {float:left;padding:.5em;font:15px Tahoma, Verdana, Segoe, sans-serif !important;}
#top a, #top a:visited {color:#4E4E4E;padding: 5px 7px;display: block;text-decoration: none;font-size:14px;border-radius:3px;text-transform:uppercase;}
#topNav select{display:none;}
#logo{display:block;}
body#ctact a.ctact,
body#design a.design,
body#development a.development,
body#ecom a.ecom,
body#strategy a.strategy,
body#privacy a.privacy,
body#work a.work,
body#blog a.blog,
#top a:hover, #top a:active, #top a:focus {color: #FFF;background:#82B841;}/*-- sets attributes for current page hover etc --*/
.slides{height:300px;background:url(../images/slides/web_design_slide_1.jpg) no-repeat center center;}
h2,.colLeft h5, h4{color:#412C11;font-weight:300;font-size:32px;text-shadow:0 1px 1px #FFF;margin:0 auto 20px auto;width:100%;text-align:center;}
h2 span{color:#C923B4;}
h1, .page{font-family: 'Rokkitt', Tahoma, Verdana, Segoe, sans-serif !important;}
h1.headline{font-weight:700;font-size:55px;color:#422D11;line-height:48px;}
h1.page, .page{font-weight:700;font-size:48px;color:#422D11;line-height:100%;display:block;}
h2.inform{font-weight:300;font-size:32px;color:#C923B4;line-height:33px;width:60%;text-align:left;margin:0 0 20px 0;padding:40px 0 0 0;background:url(../images/pointer_down.png) no-repeat;}
h1.headline span{display:block;font-size:24px;line-height:21px;padding:6px 0 10px 0;}


.slides h1.headline{margin-top:240px;font-size:44px;}
#splitter{clear:both;display:block;height:182px;clear:both;padding:20px 0;}
#splitterShort{clear:both;display:block;height:100px;clear:both;padding:0;margin:0 0 20px 0;background:#F2F7FA;}
#splitterShort .container{padding:45px 0 0 30px;}
#splitter{ clear:both;position:relative !important;display:block;height:182px;clear:both;background:url(../images/strap_bg.png) no-repeat center center;padding:20px 0;}
#splitter .purpleBack{position:relative;height:142px;margin:20px 0 !important;background:#7531A9;}
.container .one-third.column.purple{width:292px !important;height:130px;margin-bottom:20px;}
#splitter .purpleBack .container .one-third.column{background:#7531A9;border-radius:6px;color:#000;padding:4px;text-align:center;}
h4{display:block;color:#FFF;text-shadow:0 2px 2px #FFF;font-weight:300;color:#422D11;font-size:26px;}
#splitter .purpleBack .one-third.column h3 a, h3 a{text-decoration:none;display:block;color:#FFF;text-shadow:0 2px 2px #000;font-weight:300;}
#splitter .purpleBack .one-third.column img{float:right;padding:7px 0 3px 5px;}
#splitter .purpleBack .one-third.column p{margin-bottom:0;padding-bottom:0;font-size:15px;line-height:19px;color:#CCC;}
.infoBox{margin-bottom:24px !important;background:#F9F7FC;border:3px solid #FFF;box-shadow: 0 0 2px 2px #D1D1D1;border-radius:6px;min-height:100px;}
.infoBox img{float:left;margin:0 10px 0 0;}
.infoBox p{padding:10px 10px 4px 10px;overflow:hidden;}
.colLeft{padding:6px 0 0 12px;}
.colLeft h5{text-shadow:0 2px 2px #FFF;font-weight:300;color:#333;font-size:26px;text-align:left;}
.mainContent p{max-width:560px;}
.mainContent ol{max-width:510px;}
.mainContent h3{color:#82B841;font-weight:300;padding:20px 0 14px 0;}
.mainContent blockquote p{font-size:24px;}
.mainContent img{max-width:100% !important;height:auto;display:block;margin-bottom:3%;}
.mainContent a{color:#000;}
.mainContent a:hover, .mainContent a:active{color:#666;}
.colLeft ul a{color:#422D11;text-decoration:none;font-size:17px;display:block;width:170px;padding:5px 5px 18px 5px;border-top:1px solid #AAA;}
.on{background:#F6F6F6;}


.blogList li{padding:4px 0 4px 30px;}
.blogList a{color:#333;}




footer{width:100%;background:#1A1A1A;color:#666;padding:20px 0;margin-top:20px;}
footer .container{padding: 0 20px;}
/*-----------footer nav--------------------*/
#bottom {
text-align:center;}

#bottom li{display:inline;padding:4px;}
#bottom li a{padding:4px;color:#666;text-decoration:none;}

#contactInfo{clear:both;float:left;padding:20px 0 0 10px;width:300px;}
#contactInfo strong{color:#CCC;}
.phone{padding-top:6px;}
.copy, .credit{width:300px;float:right;text-align:right;padding-right:10px;}
.copy{padding-top:20px;}
.credit, .credit a{font:11px Arial, Helvetica, sans-serif; color:#666;text-decoration:none;}
.credit strong{color:#999;}

/*-  portfolio -*/
.workItem{width:316px;height:250px;overflow:hidden;float:left;text-align:center;padding:2px;margin:0 10px 18px 0;}

.base img{border:2px solid #FFF;padding:0px;background:#999;box-shadow:0 0 2px 2px #C9C9C9;}
.workItem:hover .base img{box-shadow:0 0 2px 2px #000;}
.base h4{font-size:22px;}

#portfolio .workOverlay{color:#EFEFEF;clear:both;width:300px;height:200px;padding:2px;position:absolute;border:1px solid #000;margin-left:-10000px;background:url(../images/black_bg_trans.png);  opacity: 0;}
#portfolio .workItem:hover .workOverlay, .highlight{margin-left:0;margin-top:-264px;
   opacity: 1;
   transition: opacity .7s ease-out-in;
   -moz-transition: opacity .7s ease-in-out;
   -webkit-transition: opacity .7s ease-in-out;
}

.workOverlay ul{margin:5px;text-align:center;}
.workOverlay li{display:inline;padding:2px 4px;}
.workOverlay li span{clear:both;display:block !important;color:#FFF;font-size:18px;text-align:left !important;}
.effects{clear:both;border-radius:50px;width:50px;height:50px;display:inline-block !important;padding:8px;margin:20px 20px 10px 20px;}
.effects:hover{padding:4px;border:4px solid #FFF;}
.workOverlay a img{height:50px; width:50px;}



/*- Blog - */
.sections{font-weight:bold !important;}
.dated{font:bold 11px Arial, sans-serif;}
.posted{width:50px;height:50px;background:#FFF;border-radius: 50px;box-shadow:0 0 2px 2px #E9E9E9;border: 1px solid #CCC;float:right;text-align:center;font-size:11px;color:#333;line-height:16px;margin:50px 200px 0 0 ;}
.listDate{margin:6px 172px 6px 6px;}
.posted div{font-size:21px;color:#82B841;line-height:15px;}
.posted span{font-size:11px;color:#000;line-height:14px;}
body#blog h2{display:inline-block;text-align:left;font-size:28px;}
body#blog h2 a{color:#C923B4;text-decoration:none;}





/* #Media Queries
================================================== */

	/* Smaller than standard 960 (devices and browsers) */
	@media only screen and (max-width: 959px) {
	#splitter{height:100%;background:none;padding:10px;}
	#splitter .purpleBack{height:100%;margin:0 !important;background:none;}
	h2 span{display:block;}
	
	}

	/* Tablet Portrait size to standard 960 (devices and browsers) */
	@media only screen and (min-width: 768px) and (max-width: 959px) {
	
	.slides{background-size:contain;}
	.container .one-third.column.purple{width:28% !important;height:134px;}
	#splitter .purpleBack .one-third.column img{display:none;}
	#top li {padding:.10em;}
	.slides h1.headline{margin-top:218px;font-size:44px;}
	h2.inform{font-size:30px;width:80%;}
	.flag{font-size:30px;}
	.colLeft{margin-left:-12px;}
	.listDate, .posted{margin-right:0;}
	
	}

	/* All Mobile Sizes (devices and browser) */
	@media only screen and (max-width: 767px) {
#topNav select{display:block;width:100%;padding:4px;color:#000;}
#topNav ul{display:none;}
#top{margin-top:10px;padding:0;}
#top a{background-color:#ECECEC;color:#000;}
#splitter .purpleBack .one-third.column img{display:none;}

h2.inform{padding:0;}
h2.inform,blockquote{background:none;border:none;}	
#splitterShort{height:60px;clear:both;padding:0;margin:0 0 20px 0;background:none;}
.contextNav{display:none !important;}
#splitterShort .container{padding:10px 0 10px 0;}
footer .container{padding: 0;}
.copy{clear:both;float:none;text-align:center;width:100%;}
.flag{font-size:24px;}
	
	}

	/* Mobile Landscape Size to Tablet Portrait (devices and browsers) */
	@media only screen and (min-width: 480px) and (max-width: 767px) {
header .three.columns{border-radius:6px;padding:8px;text-align:center}
.slides{background-position:-60px -30px;height:300px;}
.slides h1.headline{margin-top:190px;font-size:40px;}
h1.page{font-size:40px;line-height:34px;}
h2.inform{font-size:30px;width:100%;}
.container .one-third.column.purple{width:100% !important;height:110px;}
.listDate, .posted{margin-right:0;}

	}

	/* Mobile Portrait Size to Mobile Landscape Size (devices and browsers) */
	@media only screen and (max-width: 479px) {	
header .three.columns{border-radius:6px;padding:8px;text-align:center}
.slides{background-position:-110px -30px;height:330px;}
.slides h1.headline{margin-top:190px;font-size:40px;}
h1.page{font-size:40px;line-height:34px;}
.container .one-third.column.purple{width:100% !important;height:126px;}
.infoBox{width:300px;overflow:hidden;}
h2.inform{font-size:24px;line-height:26px;}
h2.inform,blockquote{width:98%;padding:0 1%;}
	.listDate, .posted{margin-right:0;}

	}


/* #Font-Face
================================================== */
/* 	This is the proper syntax for an @font-face file
		Just create a "fonts" folder at the root,
		copy your FontName into code below and remove
		comment brackets */

/*	@font-face {
	    font-family: 'FontName';
	    src: url('../fonts/FontName.eot');
	    src: url('../fonts/FontName.eot?iefix') format('eot'),
	         url('../fonts/FontName.woff') format('woff'),
	         url('../fonts/FontName.ttf') format('truetype'),
	         url('../fonts/FontName.svg#webfontZam02nTh') format('svg');
	    font-weight: normal;
	    font-style: normal; }
*/