/* 

Title: Master CSS for TaylorCarrigan.com
Author: Taylor Carrigan
Copyright 2012 Taylor Carrigan, all rights reserved. Please don't steal, be inspired to learn more.

*/


/* Global Formatting */

html, body {
	
	border:0; 
	margin:0; 
	padding:0;
	height: 100%;
	width: 100%;

}

html { 

	-webkit-font-smoothing: antialiased;
	-webkit-text-size-adjust: none; /* Disable text scaling on mobile devices */
 }

body {

	background-color: rgba(57, 92, 123, 1.0);
	background: url("blue_bg.png") repeat;
	text-align: center;
	display: table;	

}

a, a:link, a:link:visited { 

	color: rgba(20, 50, 69, 1.0); 
	text-decoration: none; 
	outline: none; 

}

a:hover, a:link:hover, a:link:visited:hover { 

color: rgba(10, 28, 39, 1.0); 
text-decoration: underline; 

}

h1 {
	
	text-align: left;
	color: rgba(177, 21, 22, 1.0);
	font-family: "museo-slab-1","museo-slab-2", Serif; 
	font-weight: 700;
	font-size: 20px;
	text-transform: uppercase;
  	text-shadow: 0px 1px 1px rgba(255, 255, 255, 0.80);
	
}


p {
	
	text-align: left;
	color: rgba(37, 94, 128, 1.0);  
	font-family: "ff-din-web-1","ff-din-web-2", "Helvetica", Sans-Serif;
	font-size: 14px;
	font-weight: 500;
	line-height: 18px;
  	text-shadow: 0px 1px 1px rgba(255, 255, 255, 0.80);
	
}


::selection { background: rgba(37, 94, 128, 0.15); }

::-moz-selection { background: rgba(37, 94, 128, 0.15); }

/* Topbar */

div#topbar {
	
	background: url("topbar_shadow.png") bottom repeat-x;
	width: 100%;
	height: 100px;
	display: table;
	
}


div#topbar div#topbarContainer {

	display: table;
	margin: 0 auto;

}


div#topbar ul#name {
	
	width: 960px;
	text-align: center;
	display: table-cell;
	vertical-align: middle;
	margin: 0;
	padding: 0;

}


div#topbar ul#name li {

	display: inline-block;
	vertical-align: middle;
	margin: 0;
	padding: 0;

}


div#topbar ul#name li h1 {

	color: rgba(137, 167, 190, 1.0000);
	text-shadow: 0px -1px 1px rgba(0, 0, 0, 0.85);
	font-family: "museo-slab-1","museo-slab-2", Serif; 
	font-weight: 600;
	font-size: 18px;
	text-transform: uppercase;
	padding: 2px 0 0 0;

}


div#topbar ul#name li a#monogram, div#topbar ul#name li a#monogram:visited {

	width: 75px;
	height: 75px;
	background: url("monogram_sprite.png") 0 0 no-repeat;
	color: rgba(255, 255, 255, 0);
	display: block;
	vertical-align: middle;
	margin: 0 25px 0 25px;
	padding: 0;
	border: none;

}

div#topbar ul#name li a#monogram:hover, div#topbar ul#name li a#monogram:visited:hover {

	background: url("monogram_sprite.png") -75px 0 no-repeat;

}


div#topbar ul#name li a#monogram:active, div#topbar ul#name li a#monogram:visited:active {

	background: url("monogram_sprite.png") -150px 0 no-repeat;

}

div#wrapper { 
	
	background-color: rgba(237, 242, 244, 1.0);
	background: url("blue_grid_pattern.png") repeat;
	width: 100%;
	padding: 0 0 60px 0;

}


/* Content */


div#contentContainer { width: 960px; margin: 0 auto; padding-top: 60px; }

body#downloads div#contentContainer, body#contact div#contentContainer { padding-top: 60px; }

div.content { width: 960px; height: 100%; padding-top: 60px; }


/* Navigation */


div#navigationContainer {
	
	width: 100%;
	height: 150px;
	margin: 0 auto;
	padding: 0;
	background: rgba(137, 167, 190, 0.1);

}

div#navigation {

	display: table;
	margin: 0 auto;

}


ul#menu {  
	
	text-align: center;
	display: table-cell;
	vertical-align: middle;
	width: 960px;
	margin: 0;
	padding: 0;

}  



ul#menu li {  
	
	display: inline-block;
	margin: 0 10px 0 10px;
	padding: 0;
	height: 150px;
	vertical-align: middle;
	
}


ul#menu li a {  
	
    color: rgba(137, 167, 190, 1.0);  
    font-family: "museo-slab-1","museo-slab-2", Serif; 
	font-weight: 700;
	font-size:20px;
  	text-shadow: 0px 1px 1px rgba(255, 255, 255, 0.60);
	text-transform: uppercase;
	text-decoration: none;
	padding: 65px 10px 10px 10px;
	margin: 0;
	border-bottom: none;
	-webkit-transition: color .2s linear;
	-moz-transition: color .2s linear;
	-ms-transitiion: color .2s linear;
	-o-transition: color .2s linear;
	transition: color .2s linear;
	display: inline-block;
	cursor: pointer;

}  

ul#menu li a:hover {
	

	color: rgba(37, 94, 128, 1.0);

	

  
}


ul#menu li a:active { padding: 67px 10px 10px 10px; }


body#home a#homenav, body#portfolio a#folionav, body#downloads a#downloadnav, body#contact a#contactnav {
	

	color: rgba(37, 94, 128, 1.0);
	background: rgba(255, 255, 255, 0.40);
	-webkit-box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.20);
	-moz-box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.20);
	box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.20);
	
}

/* Showcase */

div#showcase {
	
	width: 100%;
	height: 400px;
	background: url("showcase_bg.png") repeat-x;
}


div#showcaseContent {
	
	width: 960px;
	height: 400px;
	margin: 0 auto;

	
}


body#home div#showcaseContent a, body#home div#showcaseContent a:visited { border: none; }

div#showcaseContent img { border: none; }


/* Big Text */

div.bigText {
	
	text-align: center;
	width: 960px;
	margin: 0 auto 0 auto;

}

div.bigText p {

	font-family: "ff-din-web-1","ff-din-web-2", "Helvetica", Sans-Serif;
	font-size: 36px;
	line-height: 46px;
	font-weight: 500;
	color: rgba(76, 114, 145, 1.0);
	text-shadow: 0px 1px 1px rgba(255, 255, 255, 0.80);
	margin: 0 auto;
	padding: 0;
	text-align: left;

}

div.bigText a, div.bigText a:hover { border: none; }

div.bigText.sectionContent { padding: 50px 0 50px 0 }

div.bigText.sectionContent p { text-align: center; }

div.bigText.sectionContent p { margin: 20px 0 0 0; }

div.bigText.sectionContent p:nth-child(1) { margin: 0; }

div.bigText.top { padding: 0; margin: 0 0 50px 0; }

body#downloads div.bigText.top p { padding: 0; }

div.bigText.bottom { padding: 40px 0 0 0; }

body#notfound div.bigText#top { text-align: center; }


/* Section Headings */

h1.section {
	
	width: 960px;
	display: inline-block;
	background: url("hrule.png") repeat-x center;
	text-align: center;
	color: rgba(37, 94, 128, 1.0000);  
	font-family: "museo-slab-1","museo-slab-2", Serif; 
	font-weight: 500;
	font-size: 20px;
	text-transform: uppercase;
  	text-shadow: 0px 1px 1px rgba(255, 255, 255, 0.80);
	margin: 0;
	padding: 0;
	
}


span.hruleClip {

	background: url("hrule_clip.png") repeat-x center;
	padding: 0 55px 0 55px;


}

/* What I Do */

ul#services {
	
	margin: 0 auto;
	text-align: center;
	padding: 35px 0 80px 0;
	
	
}

ul#services li {
	
	display: inline-block;
	margin: 0 75px 0 75px;
	padding: 150px 0 0 0;
	min-width: 150px;
	
}

ul#services li#iconDesign { 
	
	background: url("service_icondesign.png") top center no-repeat;

}

ul#services li#interfaceDesign { 
	
	background: url("service_uidesign.png") top center no-repeat;

}

ul#services li#webDesign { 
	
	background: url("service_webdesign.png") top center no-repeat;

}

ul#services li h1 {
	
	text-align: center;
	color: rgba(137, 167, 190, 1.0000);  
	font-family: "museo-slab-1","museo-slab-2", Serif; 
	font-weight: 700;
	font-size:13px;
	text-transform: uppercase;
  	text-shadow: 0px 1px 1px rgba(255, 255, 255, 0.80);
	margin: -30px 0 0 0;
	padding: 0;
	
}

ul#services li h2 {
	
	text-align: center;
	color: rgba(37, 94, 128, 1.0000);  
	font-family: "ff-din-web-1","ff-din-web-2", "Helvetica", Sans-Serif;
	font-weight: bold;
	font-size: 14px;
	text-transform: uppercase;
  	text-shadow: 0px 1px 1px rgba(255, 255, 255, 0.80);
	margin: 5px 0 0 0;
	padding: 0;
}

span.ampersand {
	
	color: rgba(255, 255, 255, 0.0);
	text-shadow: none;
	background: url("ampersand.png") no-repeat;
	
}

/* Testimonials */


div#testimonialsContainer {
	
	display: table;
	margin: 0 auto;

}


ul#testimonials {
	
	width: 960px;
	text-align: left;
	margin: 50px 0 0 0;
	padding: 0;
	display: inline-table;
	
}

ul#testimonials li {
	
	display: inline-block;
	width: 260px;
	margin: 0 85px 50px 0;
	vertical-align: top;
	text-align: center;
	
}

ul#testimonials li:nth-child(3n+3) { margin: 0 0 50px 0;}


ul#testimonials li:before, ul#testimonials li:after {
	
	font-family: "Georgia", Serif; 
	font-weight: 700;
	font-size: 70px;
	color: rgba(196, 211, 223, 1.0);
	text-shadow: 0px 1px 1px #fff;
	display: block;
	width: 50px;
}

ul#testimonials li:before { content: '\201C'; margin: 0 0 15px -30px; height: 0; }


ul#testimonials p {
	
	color: rgba(37, 94, 128, 1.0000);  
	font-family: "ff-din-web-1","ff-din-web-2", Sans-Serif;
	font-weight: 600;
    font-size: 14px;
	line-height: 18px;
  	text-shadow: 0px 1px 1px rgba(255, 255, 255, 0.80);
	margin: 0;
	padding: 0;
	text-align: left;
}


div.attribution {
	
	margin-top: 20px;
	padding-left: 5px;
	color: rgba(137, 167, 190, 1.0000);  
	font-family: "museo-slab-1","museo-slab-2", Serif; 
	font-weight: 500;
	font-size: 14px;
  	text-shadow: 0px 1px 1px rgba(255, 255, 255, 0.80);
  	text-align: left;
	
}

span.name {
	
	color: rgba(177, 21, 22, 1.0);
	font-weight: 600;
	
}


/* Portfolio Pages */


body#portfolio div#showcase div#showcaseContent img {
	
	width: 490px;
	height: 400px;
	float: left;
		
}

body#portfolio div#showcase div#showcaseContent div.content {
	
	width: 400px;
	height: 400px;
	padding-top: 45px;
	float: right;
	text-align: left;
		
}

body#portfolio div#showcase div#showcaseContent div.content h1 {
	
	color: rgba(177, 21, 22, 1.0);
	font-family: "museo-slab-1","museo-slab-2", Serif; 
	font-weight: 700;
	font-size: 20px;
	text-transform: uppercase;
  	text-shadow: 0px 1px 1px rgba(255, 255, 255, 0.80);
	
}


body#portfolio div#showcase div#showcaseContent div.content p {
	
	
	color: rgba(37, 94, 128, 1.0000);  
	font-family: "ff-din-web-1","ff-din-web-2", "Helvetica", Sans-Serif;
	font-weight: 500;
	font-size: 14px;
	line-height: 17px;
  	text-shadow: 0px 1px 1px rgba(255, 255, 255, 0.80);

	
}


body#portfolio div#showcase div#showcaseContent div.content p.testimonial {
	
	font-weight: 600;
	line-height: 18px;
	padding: 20px 0 0 0;
	
}



body#portfolio div#showcase div#showcaseContent div.content p.testimonial:before, body#portfolio div#showcase div#showcaseContent div.content p.testimonial:after{
	
	font-family: "Georgia", Serif; 
	font-weight: 700;
	font-size: 70px;
	color: rgba(203, 220, 231, 1.0);
	text-shadow: 0px 1px 1px #fff;
	display: block;
	width: 50px;
}

body#portfolio div#showcase div#showcaseContent div.content p.testimonial:before { content: '\201C'; margin: 0 0 -15px -25px; height: 0; }



body#portfolio div#showcase div#showcaseContent div.content div.attribution {
	
	margin-left: 10px;
	
}


body#portfolio div#contentContainer, body#portfolio div#contentContainer {
	
	width: 960px;
	padding-left: 0;
	
	
}


div#portfolioListContainer {

	width: 100%;
	margin: 0 auto 0 auto;
	display: table;
}


ul#portfolioList {
	
	width: 100%;
	list-style: none;
	padding: 0;
	display: table-cell;
	text-align: left;
}

ul#portfolioList li {
	
	width: 260px;
	display: inline-block;
	text-align: left;
	list-style: none;
	vertical-align: top;
	position: relative;
	margin: 0 85px 50px 0;
	padding: 0;

}

ul#portfolioList li:nth-child(3n+3) { margin: 0 0 50px 0; }

body#downloads ul#portfolioList li { height: 300px; position: relative; }


ul#portfolioList li a img {
	
	margin: 0 auto;
	background: rgba(255, 255, 255, 1.0);
	background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(rgba(255, 255, 255, 1.0)), to(rgba(249, 249, 249, 1.0)));
	background-image: -moz-linear-gradient(top, rgba(255, 255, 255, 1.0) 0%,  rgba(249, 249, 249, 1.0) 100%);
	background-image: -o-linear-gradient(top, rgba(255, 255, 255, 1.0) 0%,  rgba(249, 249, 249, 1.0) 100%);
	-webkit-border-radius: 2px;
	-moz-border-radius: 2px;
	border-radius: 2px;
	padding: 5px;
	-webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, .50);
	-moz-box-shadow: 0 1px 3px rgba(0, 0, 0, .50);
	box-shadow: 0 1px 3px rgba(0, 0, 0, .50);
	position: relative;
	z-index: 1;
	outline: 0;	
	border: 0;

}

span.imageOverlay {
	
	width: 250px;
	height: 150px;
	position: absolute;
	z-index: 2;
	background: url("image_overlay.png") center no-repeat;
	top: 5px;
	left: 5px;
	opacity: 0;
	-webkit-transition: opacity .2s linear;
	-moz-transition: opacity .2s linear;
	-ms-transition: opacity .2s linear;
	-o-transition: opacity .2s linear;
	transition: opacity .2s linear;
	
}


ul#portfolioList li a.grouped_elements span.imageOverlay {

	background: url("image_overlay_group.png") center no-repeat; /* Show grouped expansion icon on portfolio entries with more than one image */

}

span.imageOverlay:hover { opacity: 1; }

ul#portfolioList li a.single_image, ul#portfolioList li a.grouped_elements { border: 0; outline: 0; }

ul#portfolioList li img.hide { display: none; }

ul#portfolioList li h1 {
	
	color: rgba(177, 21, 22, 1.0);
	font-family: "museo-slab-1","museo-slab-2", Serif; 
	font-weight: bold;
    font-size: 14px;
	text-transform: uppercase;
  	text-shadow: 0px 1px 1px rgba(255, 255, 255, 0.80);
	
}

ul#portfolioList li p {
	
	color: rgba(37, 94, 128, 1.0000);  
	font-family: "ff-din-web-1","ff-din-web-2", "Helvetica", Sans-Serif;
	font-size: 14px;
	font-weight: 500;
	line-height: 18px;
  	text-shadow: 0px 1px 1px rgba(255, 255, 255, 0.80);
	margin: 0;
	padding: 0;
	
}

/* Buttons */

a.button {
	
	margin: 30px 0 0 0;
	background: rgba(170, 191, 209, 1.0);
    background-image:
        -webkit-gradient(
            linear,
            left bottom,
            left top,
            color-stop(0, rgba(170, 191, 209, 1.0)),
            color-stop(1, rgba(236, 246, 255, 1.0))
        );
	background-image: -moz-linear-gradient(top, rgba(236, 246, 255, 1.0) 0%,  rgba(170, 191, 209, 1.0) 100%);
	background-image: -o-linear-gradient(top, rgba(236, 246, 255, 1.0) 0%,  rgba(170, 191, 209, 1.0) 100%);
    -webkit-box-shadow:
    	0px 1px 2px rgba(0, 0, 0, 0.25),
        inset 0 1px 0 rgba(255, 255, 255, 1.0),
        inset 0 0 0 1px rgba(255, 255, 255, 0.3);
	-moz-box-shadow:
		0px 1px 2px rgba(0, 0, 0, 0.25),
	    inset 0 1px 0 rgba(255, 255, 255, 1.0),
	    inset 0 0 0 1px rgba(255, 255, 255, 0.3);
	 box-shadow:
    	0px 1px 2px rgba(0, 0, 0, 0.25),
        inset 0 1px 0 rgba(255, 255, 255, 1.0),
        inset 0 0 0 1px rgba(255, 255, 255, 0.3);
    -webkit-background-clip: padding box;
    border: 1px solid rgba(126, 156, 182, 1.0);
	-webkit-border-radius: 4px;
	-moz-border-radius: 4px;
    border-radius: 4px;
    padding: 5px 10px 5px 10px;
   	font-family: "museo-slab-1","museo-slab-2", Serif;
    font-size: 14px;
    font-weight: 700;
    color: rgba(101, 125, 147, 1.0);
	text-shadow: 0px 1px 0px rgba(255, 255, 255, 0.70);
    text-decoration: none;
	outline: none;
	
}

a.button:hover {
	
	background: rgba(175, 197, 216, 1.0);
	background-image:
        -webkit-gradient(
            linear,
            left bottom,
            left top,
            color-stop(0, rgba(170, 191, 209, 1.0)),
			color-stop(.48, rgba(170, 191, 209, 1.0)),
			color-stop(.51, rgba(175, 197, 216, 1.0)),
            color-stop(1, rgba(236, 246, 255, 1.0))
        );
	background-image: -moz-linear-gradient(top, rgba(236, 246, 255, 1.0) 0%,  rgba(175, 197, 216, 1.0000) 48%, rgba(170, 191, 209, 1.0) 51%, rgba(170, 191, 209, 1.0) 100%);
	background-image: -o-linear-gradient(top, rgba(236, 246, 255, 1.0) 0%,  rgba(175, 197, 216, 1.0000) 48%, rgba(170, 191, 209, 1.0) 51%, rgba(170, 191, 209, 1.0) 100%);
	border: 1px solid rgba(126, 156, 182, 1.0);
	color: rgba(83, 104, 126, 1.0);
	text-decoration: none;
	
}

a.button:active {
	
	background: rgba(170, 191, 209, 1.0);
	background-image:
        -webkit-gradient(
            linear,
            left bottom,
            left top,
            color-stop(0, rgba(236, 246, 255, 1.0)),
			color-stop(1, rgba(170, 191, 209, 1.0))
        );
	background-image: -moz-linear-gradient(top, rgba(170, 191, 209, 1.0) 0%,  rgba(236, 246, 255, 1.0) 100%);
	background-image: -o-linear-gradient(top, rgba(170, 191, 209, 1.0) 0%,  rgba(236, 246, 255, 1.0) 100%);
	border: 1px solid rgba(31, 65, 96, 1.0000);
	-webkit-box-shadow: 0px 1px 0px rgba(255, 255, 255, 0.6), inset 0px 1px 4px rgba(0, 0, 0, 0.3);
	-moz-box-shadow: 0px 1px 0px rgba(255, 255, 255, 0.6), inset 0px 1px 4px rgba(0, 0, 0, 0.3);
	box-shadow: 0px 1px 0px rgba(255, 255, 255, 0.6), inset 0px 1px 4px rgba(0, 0, 0, 0.3);
	border: 1px solid rgba(126, 156, 182, 1.0);
	color: rgba(83, 104, 126, 1.0);
	text-decoration: none;
	
}


body#downloads ul#portfolioList li a.button { bottom: 0; position: absolute; }

/* Contact + Section Pages */


div.section {

	width: 100%;
	height: 100%;
	margin: 0;
	padding: 60px 0 60px 0;
	background: url("separator.png") no-repeat bottom center;
}


div.section:first-child { padding-top: 0; }


body#contact div#contentContainer div.left {
	
	width: 320px;
	float: left;
	padding: 0;
}


body#contact div#contentContainer div.right {
	
	width: 500px;
	float: right;
	text-align: left;
	padding: 0;


}

body#contact div#contentContainer div#portrait.left { width: 320px; } 

body#contact div#contentContainer div#about.right {

	width: 575px;
	text-align: right;
	margin: 0 0 0 0;

}

body#contact div#contentContainer div#about.right p { font-size: 20px; line-height: 24px; }

body#contact div#contentContainer div#about.right p:last-child { margin: 0; padding: 0; }

body#contact div#contentContainer div#about.right h1 { margin-top: 5px; }

body#contact div#contentContainer div#form.right { width: 440px; }

body#contact div#contentContainer div#whatIDo.left { width: 440px; }

body#contact div#contentContainer div#whatIDo.left p { margin-bottom: 20px; }

body#contact div#contentContainer div.left strong { font-weight: 700; }

body#contact div#contentContainer div.left h1 {
	
	margin: 0 0 10px 0;
	padding: 0;
	
}


body#contact img.portrait {

	float: left;
	clear: right;
	margin: 0;
	padding: 5px;
	background: rgba(255, 255, 255, 1.0);
	background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(rgba(255, 255, 255, 1.0)), to(rgba(249, 249, 249, 1.0)));
	background-image: -moz-linear-gradient(top, rgba(255, 255, 255, 1.0) 0%,  rgba(249, 249, 249, 1.0) 100%);
	background-image: -o-linear-gradient(top, rgba(255, 255, 255, 1.0) 0%,  rgba(249, 249, 249, 1.0) 100%);
	-webkit-border-radius: 2px;
	-moz-border-radius: 2px;
	border-radius: 2px;
	-webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, .50);
	-moz-box-shadow: 0 1px 3px rgba(0, 0, 0, .50);

}


body#contact div#contentContainer div.right form#contactForm {

	position: relative;
	
}

body#contact form#contactForm input, body#contact form#contactForm textarea {
	
	padding: 5px;
	margin-bottom: 10px;
	width: 430px;
	background: rgba(255, 255, 255, .50);
	font-family: "Helvetica", Sans-Serif;
	font-size: 12px;
	border: 1px solid rgba(152, 184, 208, 0.5);
	-webkit-border-radius: 2px;
	-moz-border-radius: 2px;
	border-radius: 2px;
	-webkit-transition: all .2s linear;
	-moz-transition: all .2s linear;
	-ms-transition: all .2s linear;
	-o-transition: all .2s linear;
	transition: all .2s linear;
}



body#contact form#contactForm textarea {

	height: 140px;
	margin-bottom: 3px;
	-webkit-border-radius: 2px;
	-moz-border-radius: 2px;
	border-radius: 2px;
	overflow: auto;
	
	
}

body#contact form#contactForm textarea:focus, body#contact form#contactForm input:focus {

	background: rgba(255, 255, 255, 0.9);
	outline: none;
}

body#contact form#contactForm p {

	margin: 0;
	padding: 0;

}


body#contact form#contactForm label {
	
	text-align: left;
	float: left;
	margin: 0px 0px 5px 0px;
	color: rgba(177, 21, 22, 1.0);
	font-family: "museo-slab-1","museo-slab-2", Serif; 
	font-weight: 700;
    font-size: 14px;
	text-transform: uppercase;
  	text-shadow: 0px 1px 1px rgba(255, 255, 255, 0.80);
  	float: left;
	
}



body#contact #contactForm input.submit {
	
	width: auto !important;
	height: auto !important;
	margin: 10px 0 0 0 !important;
	padding: 5px 10px 5px 10px !important;
	cursor: pointer !important;
	background: rgba(170, 191, 209, 1.0) !important;
    background-image:
        -webkit-gradient(
            linear,
            left bottom,
            left top,
            color-stop(0, rgba(170, 191, 209, 1.0)),
            color-stop(1, rgba(236, 246, 255, 1.0))
        ) !important;
	background-image: -moz-linear-gradient(top, rgba(236, 246, 255, 1.0) 0%,  rgba(170, 191, 209, 1.0) 100%) !important;
	background-image: -o-linear-gradient(top, rgba(236, 246, 255, 1.0) 0%,  rgba(170, 191, 209, 1.0) 100%) !important;
    -webkit-box-shadow:
    	0px 1px 2px rgba(0, 0, 0, 0.25),
        inset 0 1px 0 rgba(255, 255, 255, 1.0),
        inset 0 0 0 1px rgba(255, 255, 255, 0.3);
	-moz-box-shadow:
		0px 1px 2px rgba(0, 0, 0, 0.25),
	    inset 0 1px 0 rgba(255, 255, 255, 1.0),
	    inset 0 0 0 1px rgba(255, 255, 255, 0.3);
	 box-shadow:
    	0px 1px 2px rgba(0, 0, 0, 0.25),
        inset 0 1px 0 rgba(255, 255, 255, 1.0),
        inset 0 0 0 1px rgba(255, 255, 255, 0.3);
    -webkit-background-clip: padding box;
    border: 1px solid rgba(126, 156, 182, 1.0) !important;
	-webkit-border-radius: 4px;
	-moz-border-radius: 4px;
    border-radius: 4px !important;
   	font-family: "museo-slab-1","museo-slab-2", Serif !important;
    font-size: 14px;
    font-weight: 700;
    color: rgba(101, 125, 147, 1.0);
	text-shadow: 0px 1px 0px rgba(255, 255, 255, 0.70);
    text-decoration: none;
	outline: none;
	-webkit-transition: none !important;
	-moz-transition: none;
	-ms-transition: none;
	-o-transition: none;
	transition: none !important;
	
}

body#contact form#contactForm input.submit:hover {
	
	background: rgba(175, 197, 216, 1.0) !important;
	background-image:
        -webkit-gradient(
            linear,
            left bottom,
            left top,
            color-stop(0, rgba(170, 191, 209, 1.0)),
			color-stop(.48, rgba(170, 191, 209, 1.0)),
			color-stop(.51, rgba(175, 197, 216, 1.0)),
            color-stop(1, rgba(236, 246, 255, 1.0))
        ) !important;
	background-image: -moz-linear-gradient(top, rgba(236, 246, 255, 1.0) 0%,  rgba(175, 197, 216, 1.0000) 48%, rgba(170, 191, 209, 1.0) 51%, rgba(170, 191, 209, 1.0) 100%) !important;
	background-image: -o-linear-gradient(top, rgba(236, 246, 255, 1.0) 0%,  rgba(175, 197, 216, 1.0000) 48%, rgba(170, 191, 209, 1.0) 51%, rgba(170, 191, 209, 1.0) 100%) !important;
	border: 1px solid rgba(126, 156, 182, 1.0);
	color: rgba(83, 104, 126, 1.0);
	
}

body#contact form#contactForm input.submit:active {
	
	background: rgba(170, 191, 209, 1.0) !important;
	background-image:
        -webkit-gradient(
            linear,
            left bottom,
            left top,
            color-stop(0, rgba(236, 246, 255, 1.0)),
			color-stop(1, rgba(170, 191, 209, 1.0))
        ) !important;
	background-image: -moz-linear-gradient(top, rgba(170, 191, 209, 1.0) 0%,  rgba(236, 246, 255, 1.0) 100%) !important;
	border: 1px solid rgba(31, 65, 96, 1.0000);
	-webkit-box-shadow: 0px 1px 0px rgba(255, 255, 255, 0.6), inset 0px 1px 4px rgba(0, 0, 0, 0.3);
	-moz-box-shadow: 0px 1px 0px rgba(255, 255, 255, 0.6), inset 0px 1px 4px rgba(0, 0, 0, 0.3);
	box-shadow: 0px 1px 0px rgba(255, 255, 255, 0.6), inset 0px 1px 4px rgba(0, 0, 0, 0.3);
	border: 1px solid rgba(126, 156, 182, 1.0);
	color: rgba(83, 104, 126, 1.0);
	
}





body#contact form#contactForm input.invalid, body#contact form#contactForm textarea.invalid {

	border: 1px solid rgba(209, 0, 5, 0.4);
	-webkit-box-shadow: 0px 0px 2px rgba(209, 0, 5, 0.40);
	-moz-box-shadow: 0px 0px 2px rgba(209, 0, 5, 0.40);
	box-shadow: 0px 0px 2px rgba(209, 0, 5, 0.40);

}

body#contact form#contactForm span.invalid {
	
	font-family: "ff-din-web-1","ff-din-web-2", Sans-Serif;
	color: rgba(209, 0, 5, 1.0);
	font-size: 11px;
	font-weight: 600;
	text-shadow: 0px 0px 2px rgba(209, 0, 5, 0.40);
	text-transform: none;
	float: right;

}


label span.requirement {

    color: rgba(137, 167, 190, 1.0);  
	text-transform: none;
	font-weight: 500;


}


/* Services List */

ul#myServices {
	
	float: left;
	text-align: left;
}



ul#myServices li {
	
	
	list-style: none;
	color: rgba(37, 94, 128, 1.0000);  
    font-family: "ff-din-web-1","ff-din-web-2", "Helvetica", Sans-Serif;
    font-size: 14px;
	font-weight: 500;
	line-height: 16px;
  	text-shadow: 0px 1px 1px rgba(255, 255, 255, 0.80);
	padding: 0 0 15px 42px;
	margin: 0 0 15px -30px;
	
}

ul#myServices li:last-child { margin-bottom: 0; padding-bottom: 0; }

ul#myServices li.appicon { background: url("servicesicons/appicons.png") no-repeat; }

ul#myServices li.interfaceicon { background: url("servicesicons/interfaceicons.png") no-repeat; }

ul#myServices li.webdesign { background: url("servicesicons/webdesign.png") no-repeat; }

ul#myServices li.uidesign { background: url("servicesicons/uidesign.png") no-repeat; }


/* Status Ribbon */


div#statusRibbon {
	
	width: 500px;
	height: 50px;
	margin: 60px auto 0 auto;
	padding: 0;
	
}

body#contact div#statusRibbon { margin: 60px auto 0 auto; }

div#statusRibbon.available { background: url("ribbon_available.png") center no-repeat; }

div#statusRibbon.available p {
	
	text-align: center;
	color: rgba(57, 123, 65, 1.0000);  
	font-family: "museo-slab-1","museo-slab-2", Serif; 
	font-weight: 500;
	font-size: 14px;
	line-height: 42px;
	text-transform: uppercase;
	text-shadow: 0 1px 1px rgba(255, 255, 255, 0.5);
	margin: 0;
	padding: 0;
	
}

div#statusRibbon.available a, div#statusRibbon.available a:link, div#statusRibbon.available a:link:visited {

	color: rgba(39, 86, 42, 1.0);  
	font-family: "museo-slab-1","museo-slab-2", Serif; 
	font-weight: 500;
	font-size: 14px;
	text-transform: uppercase;
	text-shadow: 0 1px 1px rgba(255, 255, 255, 0.5);
	

}

div#statusRibbon.available a:hover, div#statusRibbon.available a:link:hover, div#statusRibbon.available a:link:visited:hover {

	color: rgba(28, 62, 30, 1.0);


}

div#statusRibbon.unavailable { background: url("ribbon_unavailable.png") center no-repeat; }

div#statusRibbon.unavailable p {
	
	text-align: center;
	color: rgba(155, 47, 47, 1.0000);  
	font-family: "museo-slab-1","museo-slab-2", Serif;
	font-weight: 500;
	font-size: 14px;
	line-height: 42px;
	text-transform: uppercase;
	text-shadow: 0 1px 1px rgba(255, 255, 255, 0.5);
	margin: 0;
	padding: 0;
	
}


div#statusRibbon.unavailable a, div#statusRibbon.unavailable a:link, div#statusRibbon.unavailable a:link:visited {

	color: rgba(100, 31, 31, 1.0);  
	font-family: "museo-slab-1","museo-slab-2", Serif; 
	font-weight: 500;
	font-size: 14px;
	text-transform: uppercase;
	text-shadow: 0 1px 1px rgba(255, 255, 255, 0.5);
	

}

div#statusRibbon.unavailable a:hover, div#statusRibbon.unavailable a:link:hover, div#statusRibbon.unavailable a:link:visited:hover {

	color: rgba(64, 20, 20, 1.0);


}


div#statusRibbon.limited { background: url("ribbon_limited.png") center no-repeat; }

div#statusRibbon.limited p {
	
	text-align: center;
	color: rgba(204, 129, 22, 1.0);  
	font-family: "museo-slab-1","museo-slab-2", Serif; 
	font-weight: 500;
	font-size: 14px;
	line-height: 42px;
	text-transform: uppercase;
	text-shadow: 0 1px 1px rgba(255, 255, 255, 0.5);
	margin: 0;
	padding: 0;
	
}

div#statusRibbon.limited a, div#statusRibbon.limited a:link, div#statusRibbon.limited a:link:visited {

	color: rgba(137, 97, 15, 1.0);  
	font-family: "museo-slab-1","museo-slab-2", Serif; 
	font-weight: 500;
	font-size: 14px;
	text-transform: uppercase;
	text-shadow: 0 1px 1px rgba(255, 255, 255, 0.5);
	

}

div#statusRibbon.limited a:hover, div#statusRibbon.limited a:link:hover, div#statusRibbon.limited a:link:visited:hover {

	color: rgba(107, 76, 11, 1.0);


}



/* Footer */

div#footer {
	
	height: 100px;
	width: 100%;
	background: url("footer_shadow.png") top repeat-x;
	
}

div#footer div#footerContentContainer {

	width: 960px;
	margin: 0 auto;
	padding: 0;
}


div#footer div.content {
	
	padding: 0;
	margin: 0 auto;
	width: 100%;
	display: table;

}


div#footer div.content ul#footerLinks {

	text-align: right;
	margin: 0;
	padding: 0;


	
}


div#footer div.content ul#footerLinks li {
	
	display: inline;
	color: rgba(137, 167, 190, 1.0);
	text-shadow: 0px -1px 1px rgba(0, 0, 0, 0.80);
	font-family: "museo-slab-1","museo-slab-2", Serif; 
	font-weight: 700;
	font-size: 12px;
	line-height: 100px;

}

div#footer div.content ul#footerLinks li.copyright {

	text-align: left;
	float: left;

}


div#footer div.content ul#footerLinks li a, div#footer div.content ul#footerLinks li a:visited {

	color: rgba(137, 167, 190, 1.0000);
	text-decoration: none;
	border: none;
	-webkit-transition: color .2s linear;
	-moz-transition: color .2s linear;
	-ms-transition: color .2s linear;
	-o-transition: color .2s linear;
	transition: color .2s linear;
	
}

div#footer div.content ul#footerLinks li a:hover, div#footer div.content ul#footerLinks li a:visited:hover {
	
	color: rgba(255, 255, 255, 1.0);
}


/* Half Court Shot */

div#dribbble {

	width: 100%;
	margin: 0 auto;
	padding: 50px 0 50px 0;

}


.hcs{

	overflow: none;
	text-align: left;
}
.hcs ul,
.hcs *{
	padding: 0;
	margin: 0;
	border: 0;
	outline: 0;	
	list-style-type: none;
}

.hcs ul {
	margin: 0;
}

.hcs li {

	position: relative;
	display: inline-block;
	vertical-align:middle;
	margin: 0 65px 0 0;
	padding: 0;
}


.hcs li:nth-child(3n+3) { margin: 0 0 0 0; }

.hcs li a {

	width: 100px;
	height: 75px;
	text-align:center;
	vertical-align:middle;
	display: table-cell;
	border-bottom: none;
}

.hcs li a:hover {

	border-bottom: none;

}

.hcs img {
	
	max-width: 266px;
	max-height: 200px;
	width:auto;
	height: auto;
	position: relative;
	background: rgba(255, 255, 255, 1.0);
	background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(rgba(255, 255, 255, 1.0)), to(rgba(249, 249, 249, 1.0)));
	background-image: -moz-linear-gradient(top, rgba(255, 255, 255, 1.0) 0%,  rgba(249, 249, 249, 1.0) 100%);
	background-image: -o-linear-gradient(top, rgba(255, 255, 255, 1.0) 0%,  rgba(249, 249, 249, 1.0) 100%);
	-webkit-border-radius: 2px;
	-moz-border-radius: 2px;
	border-radius: 2px;
	padding: 5px;
	-webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, .50);
	-moz-box-shadow: 0 1px 3px rgba(0, 0, 0, .50);
	box-shadow: 0 1px 3px rgba(0, 0, 0, .50);
	font-size:0;
	-webkit-transition: all .125s linear;
	-moz-transition: all .2s linear;
	-ms-transition: all .2s linear;
	-o-transition: all .2s linear;
	transition: all .2s linear;
	z-index: 1;
}


div#dribbble span.shotOverlay {


	width: 266px;
	height: 199px;
	background: url("image_overlay_dribbble.png") no-repeat;
	position: absolute;
	top: 5px;
	left: 5px;
	z-index: 2;
	opacity: 0;
	-webkit-transition: opacity .2s linear;
	-moz-transition: opacity .2s linear;
	-ms-transition: opacity .2s linear;
	-o-transition: opacity .2s linear;
	transition: opacity .2s linear;

}


div#dribbble span.shotOverlay:hover { opacity: 1; }

/* Miscellaneous */


div.clear {	clear: both; }

span.red {
	
	color: rgba(177, 21, 22, 1.0);
	font-weight: bold;
	
}

span.currentPosition {

	font-family: "ff-din-web-1","ff-din-web-2", "Helvetica", Sans-Serif;
	text-transform: uppercase;
	font-size: 12px;
	color: rgba(37, 94, 128, 1.0);
	padding: 4px;
	background: rgba(137, 167, 190, 0.2);
	-webkit-border-radius: 4px;
	-moz-border-radius: 4px;
	border-radius: 4px;

}


/* Red Variation: rgba(177, 21, 22, 1.0) */
/* Orange Variation: rgba(209, 72, 48, 1.0) */