@charset "utf-8";
/* ************************************************************************************************************************ */
/*

	JOHN DROESE - MAIN CSS Document
	Written by: John Droese
	Last Edited: 07-12-10
	Version: 1.0
	
*/
/* ************************************************************************************************************************ */



/* ************************************************************************************************************************ */
/* | BODY STYLES | ******************************************************************************************************** */
/* ************************************************************************************************************************ */
* {
	margin:0;
}

html {
	height:100%;
}

body {
	margin:0 auto;
	height:100%;
	background:url(../images/bg.jpg) #232312 repeat;
	font-family:Arial, Helvetica, sans-serif;
}

#page-wrapper {
	margin:0 auto;
	padding:20px 40px 20px 40px;
	width:920px;
	height:auto;
	min-height:600px;
	overflow:hidden;
	z-index:5;
	position:relative;
	background:#34331e;
	
	border-radius:10px;
	-moz-border-radius:10px;
	-webkit-border-radius:10px;
	
	box-shadow: 0 0 10px #000000;
	-moz-box-shadow: 0 0 10px #000000;
	-webkit-box-shadow: 0 0 10px #000000;
}

p {
	font-family:Georgia, "Times New Roman", Times, serif;
}



/* ************************************************************************************************************************ */
/* | *HTML 5 TAGS* | ****************************************************************************************************** */
/* ************************************************************************************************************************ */
header, section, footer, aside, nav, article, figure {
	display:block;
	overflow:hidden;
}



/* ************************************************************************************************************************ */
/* | *IMAGE AND TEXT STYLE* | ********************************************************************************************* */
/* ************************************************************************************************************************ */
img {
	border:none;
	margin:0;
	padding:0;
}



/* ************************************************************************************************************************ */
/* | *GLOBAL LINK STYLES* | *********************************************************************************************** */
/* ************************************************************************************************************************ */
a {
	outline:none;
}



/* ************************************************************************************************************************ */
/* | *HEADER STYLES* | **************************************************************************************************** */
/* ************************************************************************************************************************ */

/* | *BRAND HEADER STYLES* | ********************************************************************************************** */
#brand {
	margin:20px auto 0 auto;
	padding:0;
	width:1000px;
	height:auto;
}


/* | *LOGO STYLES* | ****************************************************************************************************** */
#logo {
	background:url(../images/logo.png) no-repeat;
	width:300px;
	height:35px;
	margin:0 50px 0 0;
	padding:0;
	display:block;
	float:left;
}

#logo a h1 span {
	display:none;
}


/* | *NAVIGATION STYLES* | ************************************************************************************************ */
nav {
	margin:0;
	padding:0;
	width:auto;
	display:block;
	float:right;
}

nav ul {
	margin:24px 0 0 0;
	padding:0;
	list-style:none;
}

nav ul li {
	margin:0 5px 0 0;
	padding:0;
	display:inline-block;
	float:left;
}

nav ul li:first-child {
	margin:0 5px 0 10px;
	padding:0;
}

nav ul li:last-child {
	margin:0 10px 0 0;
	padding:0;
}

nav ul li a:link, nav ul li a:visited {
	margin:0;
	padding:0;
	display:inline-block;
	float:left;
	width:120px;
	height:30px;
	background:#232312;
	z-index:1;
	position:relative;
	font-size:15px;
	color:#ffffff;
	text-decoration:none;
	text-align:center;
	line-height:27px;
	
	box-shadow: 0 0 10px #000000;
	-moz-box-shadow: 0 0 10px #000000;
	-webkit-box-shadow: 0 0 10px #000000;	

	border-top-left-radius:10px;
	-moz-border-radius-topleft:10px;
	-webkit-border-top-left-radius:10px;
	border-top-right-radius:10px;
	-moz-border-radius-topright:10px;
	-webkit-border-top-right-radius:10px;
}

nav ul li a:hover, nav ul li a:active {
	text-decoration:none;
	background:#34331e;
}

nav ul li.active a:link, nav ul li.active a:visited {
	background:#34331e;
	color:#ffffff;
	z-index:10;
	position:relative;
}



/* ************************************************************************************************************************ */
/* | *CAROUSEL STYLES* | ************************************************************************************************** */
/* ************************************************************************************************************************ */

/* | *MAIN CAROUSEL STYLES* | ********************************************************************************************* */
.jcarousel-skin-tango .jcarousel-container {
	margin:20px 0 20px 0;
	padding:0;
	background:url(../images/bg.jpg) #232312 repeat;
	width:878px;
	height:300px;
	
	border-radius:10px;
    -moz-border-radius:10px;
	-webkit-border-radius:10px;

	box-shadow:inset 0 0 10px #000000;
	-moz-box-shadow:inset 0 0 10px #000000;
	-webkit-box-shadow:inset 0 0 10px #000000;	
}

.jcarousel-skin-tango .jcarousel-container-horizontal {
	width:878px;
    padding:20px;
}

.jcarousel-skin-tango .jcarousel-clip-horizontal {
	width:878px;
    height:300px;
}

.jcarousel-skin-tango .jcarousel-item {
	width:878px;
    height:300px;
}

.jcarousel-skin-tango .jcarousel-item-horizontal {
    margin-right:10px;
}

.jcarousel-skin-tango .jcarousel-item-placeholder {
    background:#ffffff;
    color:#505050;
}


/* | *CAROUSEL BUTTON STYLES* | ******************************************************************************************* */
.jcarousel-skin-tango .jcarousel-next-horizontal {
    position:absolute;
    top:160px;
    right:8px;
    width:13px;
    height:16px;
    cursor:pointer;
    background:transparent url(../images/next-horizontal.png) 0 0 no-repeat ;
}

.jcarousel-skin-tango .jcarousel-next-horizontal:hover {
    background-position:0 -16px;
}

.jcarousel-skin-tango .jcarousel-next-horizontal:active {
    background-position:0 -16px;
}

.jcarousel-skin-tango .jcarousel-prev-horizontal {
    position:absolute;
    top:160px;
    left:8px;
    width:13px;
    height:16px;
    cursor:pointer;
    background:transparent url(../images/prev-horizontal.png) 0 -16px no-repeat;
}

.jcarousel-skin-tango .jcarousel-prev-horizontal:hover {
    background-position:0 0;
}

.jcarousel-skin-tango .jcarousel-prev-horizontal:active {
    background-position:0 0;
}


/* | *CAROUSEL LEADER STYLES* | ******************************************************************************************* */
.leader {
	margin:0;
	padding:0;
	display:block;
	float:left;
	width:870px;
	height:300px;
	
	border-radius:10px;
	-moz-border-radius:10px;
	-webkit-border-radius:10px;
}

.leader-img {
	margin:0 20px 0 10px;
	padding:0;
	display:block;
	float:left;
	width:600px;
	height:300px;
}

.leader-cta {
	margin:0;
	padding:0;
	display:block;
	float:left;
	width:240px;
	height:auto;
}

.leader-cta h3 {
	margin:0;
	padding:0;
	font-size:1.4em;
	letter-spacing:-.04em;
	color:#01adef;
	text-shadow:#34331e 2px -2px 2px;
}

.leader-cta p {
	font-size:.8em;
	color:#ffffff;
	text-align:justify;
	line-height:1.4em;
}

.leader-cta a:link, .leader-cta a:visited {
	margin:0 0 0 120px;
	padding:0;
	display:block;
	float:right;
	width:120px;
	height:27px;
	border:2px solid #0099cc;
	background:#01adef;
	font-size:1em;
	color:#ffffff;
	text-decoration:none;
	text-align:center;
	line-height:1.6em;
	font-family:Arial, Helvetica, sans-serif;
	bottom:0;
	position:absolute;

	border-radius:5px;
    -moz-border-radius:5px;
	-webkit-border-radius:5px;
}

.leader-cta a:hover, .leader-cta a:active {
	border:2px solid #ffffff;
	background:#0099cc;
	color:#ffffff;
	text-decoration:none;
}



/* ************************************************************************************************************************ */
/* | *LIGHTBOX STYLES* | ************************************************************************************************** */
/* ************************************************************************************************************************ */

/* | * MAIN LIGHTBOX STYLES* | ******************************************************************************************** */
#fancybox-loading {
	position:fixed;
	top:50%;
	left:50%;
	height:40px;
	width:40px;
	margin-top:-20px;
	margin-left:-20px;
	cursor:pointer;
	overflow:hidden;
	z-index:1104;
	display:none;
}

* html #fancybox-loading {	/* IE6 */
	position:absolute;
	margin-top:0;
}

#fancybox-loading div {
	position:absolute;
	top:0;
	left:0;
	width:40px;
	height:480px;
	background-image:url('../images/fancybox.png');
}

#fancybox-overlay {
	position:fixed;
	top:0;
	left:0;
	bottom:0;
	right:0;
	background:#000;
	z-index:1100;
	display:none;
}

* html #fancybox-overlay {	/* IE6 */
	position:absolute;
	width:100%;
}

#fancybox-tmp {
	padding:0;
	margin:0;
	border:0;
	overflow:auto;
	display:none;
}

#fancybox-wrap {
	position:absolute;
	top:0;
	left:0;
	margin:0;
	padding:20px;
	z-index:1101;
	display:none;
}

#fancybox-outer {
	position:relative;
	width:100%;
	height:100%;
	background:#FFF;
}

#fancybox-inner {
	position:absolute;
	top:0;
	left:0;
	width:1px;
	height:1px;
	padding:0;
	margin:0;
	outline:none;
	overflow:hidden;
}

#fancybox-hide-sel-frame {
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:100%;
	background:transparent;
}

#fancybox-close {
	position:absolute;
	top:-15px;
	right:-15px;
	width:30px;
	height:30px;
	background:url('../images/fancybox.png');
	background-position:-40px 0px;
	cursor:pointer;
	z-index:1103;
	display:none;
}

#fancybox_error {
	color:#444;
	font:normal 12px/20px Arial;
	padding:7px;
	margin:0;
}

#fancybox-content {
	height:auto;
	width:auto;
	padding:0;
	margin:0;
}

#fancybox-img {
	width:100%;
	height:100%;
	padding:0;
	margin:0;
	border:none;
	outline:none;
	line-height:0;
	vertical-align:top;
	-ms-interpolation-mode:bicubic;
}

#fancybox-frame {
	position:relative;
	width:100%;
	height:100%;
	border:none;
	display:block;
}

#fancybox-title {
	position:absolute;
	bottom:0;
	left:0;
	font-family:Arial;
	font-size:12px;
	z-index:1102;
}

.fancybox-title-inside {
	padding:10px 0;
	text-align:center;
	color:#333;
}

.fancybox-title-outside {
	padding-top:5px;
	color:#FFF;
	text-align:center;
	font-weight:bold;
}

.fancybox-title-over {
	color:#FFF;
	text-align:left;
}

#fancybox-title-over {
	padding:10px;
	background-image:url('../images/fancy_title_over.png');
	display:block;
}

#fancybox-title-wrap {
	display:inline-block;
}

#fancybox-title-wrap span {
	height:32px;
	float:left;
}

#fancybox-title-left {
	padding-left:15px;
	background-image:url('../images/fancybox.png');
	background-position:-40px -90px;
	background-repeat:no-repeat;
}

#fancybox-title-main {
	font-weight:bold;
	line-height:29px;
	background-image:url('../images/fancybox-x.png');
	background-position:0px -40px;
	color:#FFF;
}

#fancybox-title-right {
	padding-left:15px;
	background-image:url('../images/fancybox.png');
	background-position:-55px -90px;
	background-repeat:no-repeat;
}

#fancybox-left, #fancybox-right {
	position:absolute;
	bottom:0px;
	height:100%;
	width:35%;
	cursor:pointer;
	outline:none;
	background-image:url('../images/blank.gif');
	z-index:1102;
	display:none;
}

#fancybox-left {
	left:0;
}

#fancybox-right {
	right:0;
}

#fancybox-left-ico, #fancybox-right-ico {
	position:absolute;
	top:50%;
	left:-9999px;
	width:30px;
	height:30px;
	margin-top:-15px;
	cursor:pointer;
	z-index:1102;
	display:block;
}

#fancybox-left-ico {
	background-image:url('../images/fancybox.png');
	background-position:-40px -30px;
}

#fancybox-right-ico {
	background-image:url('../images/fancybox.png');
	background-position:-40px -60px;
}

#fancybox-left:hover, #fancybox-right:hover {
	visibility:visible;    /* IE6 */
}

#fancybox-left:hover span {
	left:20px;
}

#fancybox-right:hover span {
	left:auto;
	right:20px;
}

.fancy-bg {
	position:absolute;
	padding:0;
	margin:0;
	border:0;
	width:20px;
	height:20px;
	z-index:1001;
}

#fancy-bg-n {
	top:-20px;
	left:0;
	width:100%;
	background-image:url('../images/fancybox-x.png');
}

#fancy-bg-ne {
	top:-20px;
	right:-20px;
	background-image:url('../images/fancybox.png');
	background-position:-40px -162px;
}

#fancy-bg-e {
	top:0;
	right:-20px;
	height:100%;
	background-image:url('../images/fancybox-y.png');
	background-position:-20px 0px;
}

#fancy-bg-se {
	bottom:-20px;
	right:-20px;
	background-image:url('../images/fancybox.png');
	background-position:-40px -182px; 
}

#fancy-bg-s {
	bottom:-20px;
	left:0;
	width:100%;
	background-image:url('../images/fancybox-x.png');
	background-position:0px -20px;
}

#fancy-bg-sw {
	bottom:-20px;
	left:-20px;
	background-image:url('../images/fancybox.png');
	background-position:-40px -142px;
}

#fancy-bg-w {
	top:0;
	left:-20px;
	height:100%;
	background-image:url('../images/fancybox-y.png');
}

#fancy-bg-nw {
	top:-20px;
	left:-20px;
	background-image:url('../images/fancybox.png');
	background-position:-40px -122px;
}


/* | *LIGHTBOX IE STYLES* | *********************************************************************************************** */
#fancybox-loading.fancybox-ie div	{ background: transparent; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/js/fancybox/fancy_loading.png', sizingMethod='scale'); }
.fancybox-ie #fancybox-close		{ background: transparent; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/js/fancybox/fancy_close.png', sizingMethod='scale'); }

.fancybox-ie #fancybox-title-over	{ background: transparent; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/js/fancybox/fancy_title_over.png', sizingMethod='scale'); zoom: 1; }
.fancybox-ie #fancybox-title-left	{ background: transparent; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/js/fancybox/fancy_title_left.png', sizingMethod='scale'); }
.fancybox-ie #fancybox-title-main	{ background: transparent; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/js/fancybox/fancy_title_main.png', sizingMethod='scale'); }
.fancybox-ie #fancybox-title-right	{ background: transparent; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/js/fancybox/fancy_title_right.png', sizingMethod='scale'); }

.fancybox-ie #fancybox-left-ico		{ background: transparent; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/js/fancybox/fancy_nav_left.png', sizingMethod='scale'); }
.fancybox-ie #fancybox-right-ico	{ background: transparent; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/js/fancybox/fancy_nav_right.png', sizingMethod='scale'); }

.fancybox-ie .fancy-bg { background: transparent !important; }

.fancybox-ie #fancy-bg-n	{ filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/js/fancybox/fancy_shadow_n.png', sizingMethod='scale'); }
.fancybox-ie #fancy-bg-ne	{ filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/js/fancybox/fancy_shadow_ne.png', sizingMethod='scale'); }
.fancybox-ie #fancy-bg-e	{ filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/js/fancybox/fancy_shadow_e.png', sizingMethod='scale'); }
.fancybox-ie #fancy-bg-se	{ filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/js/fancybox/fancy_shadow_se.png', sizingMethod='scale'); }
.fancybox-ie #fancy-bg-s	{ filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/js/fancybox/fancy_shadow_s.png', sizingMethod='scale'); }
.fancybox-ie #fancy-bg-sw	{ filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/js/fancybox/fancy_shadow_sw.png', sizingMethod='scale'); }
.fancybox-ie #fancy-bg-w	{ filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/js/fancybox/fancy_shadow_w.png', sizingMethod='scale'); }
.fancybox-ie #fancy-bg-nw	{ filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/js/fancybox/fancy_shadow_nw.png', sizingMethod='scale'); }



/* ************************************************************************************************************************ */
/* | *LAYOUT STYLES* | **************************************************************************************************** */
/* ************************************************************************************************************************ */
article {
	margin:0;
	padding:0;
}

section {
	margin:0;
	padding:0;
}

#home-title {
	margin:0 0 10px 0;
	padding:0 0 5px 0;
	font-size:4.1em;
	letter-spacing:-.07em;
	color:#e6572c;
	text-shadow:#232312 5px -5px 2px;
	border:none;
}

section h1 {
	margin:0 0 10px 0;
	padding:0 0 10px 0;
	font-size:2.3em;
	letter-spacing:-.08em;
	line-height:1.1em;
	color:#01adef;
	border-bottom:2px solid #232312;
	text-shadow:#232312 5px -5px 2px;
}

section h1 img {
	margin:0 10px 0 0;
	padding:0;
	display:block;
	float:left;
}

section h2 {
	margin:0;
	padding:0;
	font-size:1.3em;
	letter-spacing:-.04em;
	color:#ffffff;
	clear:left;
}



/* ************************************************************************************************************************ */
/* | *PAGE STYLES* | ****************************************************************************************************** */
/* ************************************************************************************************************************ */
#work, #resume, #about, #home, #contact {
	margin:0;
	padding:0;
}

#work h3, .contact-title {
	margin:0;
	padding:0;
	font-size:1.2em;
	color:#e6572c;
}

.date {
	margin:0;
	padding:0;
	font-size:.8em;
	line-height:1.6em;
	color:#d5de7a;
}

.caption {
	margin:10px 0 40px 0;
	padding:0 20px 15px 20px;
	font-size:.8em;
	color:#ffffff;
	text-align:justify;
	line-height:1.6em;
	border-bottom:2px dotted #696958;
}

.caption a:link, .caption a:visited {
	color:#01adef;
	text-decoration:none;
}

.caption a:hover, .caption a:active {
	color:#01adef;
	text-decoration:underline;
}

.company {
	margin:10px 0 0 0;
	padding:0;
	font-size:1.6em;
	color:#e6572c;
}

.client-name {
	margin:0;
	padding:0;
	font-size:.8em;
	color:#ffffff;
}

.location {
	margin:0 0 5px 0;
	padding:0;
	font-size:.8em;
	color:#d5de7a;
	font-style:italic;
}

.email {
	margin:0 0 60px 0;
	padding:0;
	font-size:1em;
	color:#01adef;
	font-style:italic;
}

.name {
	margin:0;
	padding:0 0 10px 0;
	font-size:1.6em;
	color:#e6572c;
}

.bio {
	margin:0;
	padding:0 20px 0 20px;
	font-size:.8em;
	line-height:1.6em;
	text-align:justify;
	color:#ffffff;
}

ul {
	margin:10px 0 0 20px;
	padding:0;
	list-style:none;
}

ul li {
	margin:0;
	padding:0;
	font-size:1.2em;
	color:#ffffff;
}

#column-wrapper {
	margin:0 0 40px 0;
	padding:0;
	display:block;
	overflow:hidden;
	border-bottom:2px dotted #696958;
}

.column {
	margin:20px 20px 20px 0;
	padding:0;
	display:block;
	float:left;
	width:280px;
}

.column ul {
	margin:0 0 10 10px;
	padding:0;
	list-style:none;
}

.column ul li {
	margin:0;
	padding:0;
	font-size:.8em;
	line-height:1.6em;
	font-family:Georgia, "Times New Roman", Times, serif;
}

.column p {
	margin:0;
	padding:0;
	font-size:1.6em;
	color:#e6572c;
}



/* ************************************************************************************************************************ */
/* | *FOOTER STYLES* | **************************************************************************************************** */
/* ************************************************************************************************************************ */
#legal {
	margin:20px auto 20px auto;
	padding:0 0 20px 0;
	width:1000px;
	clear:left;
	text-align:center;
}

#footer-nav {
	margin:20px 0 20px 0;
	padding:0;
	font-size:13px;
	color:#696958;
}

#footer-nav a:link, #footer-nav a:visited {
	margin:0;
	padding:0;
	font-size:11px;
	color:#0099cc;
	text-decoration:none;
}

#footer-nav a:hover, #footer-nav a:active {
	text-decoration:underline;
}

.copyright {
	padding:0 0 100px 0;
	font-size:11px;
	color:#696958;
}