/*
*****
*********
*************

General Stylesheet for:
Kirsten Ludwig

Created by:
http://454creative.com

Green:  #DCF500
Grey:   #BBBBBB
Orange: #E1FE58
New Neon: #E1FE58

*************
*********
*****
*/

/***** Reset  ***************************************/

html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure,
footer, header, hgroup, menu, nav, section, summary,
time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
}

article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
  display: block;
}

button {  width: auto; overflow: visible; }
.ie7 img { -ms-interpolation-mode: bicubic; }

a:hover, a:active { outline: none; }
.hidden { display: none; }


/***** Text Highlight  ***************************************/

::-moz-selection{ background: #E1FE58; color:#fff; text-shadow: none; }
::selection { background:#E1FE58; color:#fff; text-shadow: none; }
a:link { -webkit-tap-highlight-color: #E1FE58; }

/***** Let's Begin  ***************************************/

body {
	border-top: 5px solid #E1FE58;
	color: #BBBBBB;
	font: normal 52px/50px Tanek, Impact, "Helvetica Neue", Helvetica, Arial, sans-serif;
	margin: 0;
	padding: 0;
	text-transform: uppercase;
}

@font-face {
    font-family: 'Tanek';
    src: url('../fonts/tanek/tanek-webfont.eot');
    src: url('../fonts/tanek/tanek-webfont.eot?iefix') format('eot'),
         url('../fonts/tanek/tanek-webfont.woff') format('woff'),
         url('../fonts/tanek/tanek-webfont.ttf') format('truetype'),
         url('../fonts/tanek/tanek-webfont.svg#webfontw1GU57Ta') format('svg');
    font-weight: normal;
    font-style: normal;

}

/***** Links  ***************************************/


a {
	color: #E1FE58;
	text-decoration: none;
}

p {
	margin: 0 0 52px 0;
	padding: 0;
}

/***** Structure  ***************************************/

#header {
	margin: 0 0 30px 60px;
	padding-top: 60px;
	width: 280px;
	position: absolute;
	left: 0;
}

#content {
	margin:60px 60px 60px 340px;
	min-height: 440px;
	min-width: 600px;
}

#copyright {
	color: #CCC;
	display: none;
	font: normal 10px/10px "Helvetica Neue", Helvetica, Arial, sans-serif;
	margin: 30px 0 0 0;
}

/***** Header  ***************************************/


#logo {
	font-size: 36px;
	line-height: 36px;
	margin: 0;
	padding: 0;
	text-indent: -1px;
}

#logo a {
	background: url(../images/KirstenLudwig_logo.png) no-repeat;
	background-size: 220px 213px;
	color: #000; 
	display: block;
	padding-top: 216px;
	white-space: pre;
}

#nav {
	font: normal 58px/50px Tanek, Helvetica, Helvetica Neue, Arial, sans-serif;
	margin: 0;
	padding: 0;
}

#nav li {
	margin: 0;
	padding: 0;
	list-style: none;
	text-indent: -2px;
}

#nav a, #nav ul a {
	color: #BBB;
	-webkit-transition: color 0.1s linear;
}

#nav .selected li a {
	color: #BBB;
}

#nav a:hover, #nav ul a:hover, #nav .selected a {
	color: #000;
}

#nav ul {
	font-size: 36px;
	line-height: 28px;
	color: #BBB;
	margin-bottom: 4px;
	margin-left: 1px;
}

#nav ul li {display: inline;}

#nav ul .selected a {
	color: #000;
}

#nav a.download {
	position: relative;
	top: -9px;
	left: 6px;
	
}

#nav a.download:hover img {
	-moz-transition: all .2s ease;
	-webkit-transition: all .2s ease;
	-o-transition: all .2s ease;
	transition: all .2s ease;
}

#nav a.download:hover img {
	-webkit-transform: rotate(-90deg);
-moz-transform: rotate(-90deg);
transform: rotate(-90deg);
}

/***** Portfolio  ***************************************/

.portfolio {
	overflow: hidden;
}

.portfolio .item {
	float: left;
	margin: 0;
	padding: 0;
}

.portfolio .item a {
	border: 5px solid #FFF;
	display: block;
	float: left;
	height: 160px;
	margin: 0;
	padding: 0;
	width: 130px;
	-webkit-transition: all 0.1s linear;
}

.portfolio .item a:hover {
	border: 5px solid #E1FE58;
}


/***** Portfolio  ***************************************/

#pagePortfolio {
	padding-bottom: 60px;
}

#pagePortfolio #content {
	margin:0 55px 0 335px;
	padding: 55px 0 30px 0;
	}

#pagePortfolio a.thumb {
	border: 5px solid #FFF;
	display: block;
	float: left;
	height: 160px;
	margin: 0;
	padding: 0;
	width: 130px;
	-webkit-transition: all 0.1s linear;
}

#pagePortfolio a.thumb:hover {
	border: 5px solid #E1FE58;
}

.qtip {font-size: 24px; line-height: 22px; margin-top: 12px;}
.qtip p {margin: 0 0 5px 0; padding: 0;}
.qtip p.resume {margin-top: 30px;}

.pdfLink, .movLink {
	background: url(../images/pdfIconBG.png) 0 0 no-repeat;
	color: #000;
	display: inline-block;
	height:32px;
	margin: 0 30px 0 0;
	padding:0 0 0 28px;
	opacity: .3;
}
.movLink {
	background: url(../images/movIconBG.png) 0 0 no-repeat;
	padding:0 0 0 33px;
	margin-right: 0;
}

.pdfLink:hover, .movLink:hover {
	opacity: 1;
}

.pdfLink span, .movLink span {
	font: normal 10px/10px "Helvetica Neue", Arial, Helvetica, sans-serif;
	display: block;
}


/***** Motion  ***************************************/

#pagePortfolio.motion a.thumb {
	height: 160px;
	width: 270px;
}

/***** Contact  ***************************************/

.downloadResume, .downloadPortfolio, .downloadReferences {display: block; float: left; clear: left;}
.downloadResume img, .downloadPortfolio img, .downloadReferences img {
	position: relative;
	top: -9px;
	left: 6px;
	-moz-transition: all .2s ease;
	-webkit-transition: all .2s ease;
	-o-transition: all .2s ease;
	transition: all .2s ease;
	
}


.downloadResume:hover img, .downloadPortfolio:hover img, .downloadReferences:hover img {	-webkit-transform: rotate(-90deg);
-moz-transform: rotate(-90deg);
transform: rotate(-90deg);
}

#pageContact .qtip {margin-top: 1px;}



/***** Shadowbox  ***************************************/

#sb-title-inner,#sb-info-inner,#sb-loading-inner,div.sb-message{color:#BBB;}
#sb-container{position:fixed;margin:0;padding:0;top:0;left:0;z-index:999;text-align:left;visibility:hidden;display:none;}
#sb-overlay{position:relative;height:100%;width:100%;}
#sb-wrapper{position:absolute;visibility:hidden;width:100px;}
#sb-wrapper-inner{position:relative;overflow:hidden;height:100px;}
#sb-body{position:relative;height:100%;}
#sb-body-inner{position:absolute;height:100%;width:100%;}
#sb-player.html{height:100%;overflow:auto;}
#sb-body img{border:none;}
#sb-loading{position:relative;height:100%;}
#sb-loading-inner{position:absolute;font-size:18px;line-height:32px;height:32px;top:50%;margin-top:-12px;width:100%;text-align:center;}
#sb-loading-inner span{background:url(../js/shadowbox/loading.gif) no-repeat;padding-left:34px;display:inline-block;}
#sb-body,#sb-loading{background-color:#FFF;}
#sb-title,#sb-info{position:relative;margin:0;padding:0;overflow:hidden;}
#sb-title,#sb-title-inner{height:46px;line-height:23px;}
#sb-title-inner{font-size:24px; color: #000;}
#sb-title-inner span{font-size:18px; color: #BBB; display: block;}
#sb-info,#sb-info-inner{height:25px;line-height:25px;}
#sb-info-inner{font-size:16px; color: #000;}
#sb-nav{float:right;height:16px;padding:2px 0;width:45%;}
#sb-nav a{display:block;float:right;height:16px;width:16px;margin-left:3px;cursor:pointer;background-repeat:no-repeat;}
#sb-nav-close{background-image:url(../js/shadowbox/close.png);}
#sb-nav-next{background-image:url(../js/shadowbox/next.png);}
#sb-nav-previous{background-image:url(../js/shadowbox/previous.png);}
#sb-nav-play{background-image:url(../js/shadowbox/play.png);}
#sb-nav-pause{background-image:url(../js/shadowbox/pause.png);}
#sb-counter{float:left;width:45%;}
#sb-counter a{padding:0 4px 0 0;text-decoration:none;cursor:pointer;color:#000;}
#sb-counter a.sb-counter-current{text-decoration:underline;}
div.sb-message{font-size:18px;padding:10px;text-align:center;}
div.sb-message a:link,div.sb-message a:visited{color:#000;text-decoration:underline;}

#sb-nav-previousBox{position:absolute;height:100%;top:0; left:0;width:50%;background: none;display:block;opacity: 0; -webkit-transition: opacity 0.3s linear;} 
#sb-nav-previousBox:hover{background:url(../js/shadowbox/btnPrev.png) no-repeat center left;  cursor:pointer;opacity: 1;} 
#sb-nav-nextBox{position:absolute;height:100%;top:0;width:50%; margin-left: 1px; left:50%; background:none;display:block;opacity: 0; -webkit-transition: opacity 0.3s linear;} 
#sb-nav-nextBox:hover{background:url(../js/shadowbox/btnNext.png) no-repeat center right; cursor:pointer;opacity: 1;} 

/***** Media  ***************************************/

@media all and (orientation:portrait) {

}

@media all and (orientation:landscape) {

}

@media screen and (max-device-width: 480px) {

  /* html { -webkit-text-size-adjust:none; -ms-text-size-adjust:none; } */
}


@media print {
  * { background: transparent !important; color: black !important; text-shadow: none !important; filter:none !important;
  -ms-filter: none !important; } 
  a, a:visited { color: #444 !important; text-decoration: underline; }
  a[href]:after { content: " (" attr(href) ")"; }
  abbr[title]:after { content: " (" attr(title) ")"; }
  .ir a:after, a[href^="javascript:"]:after, a[href^="#"]:after { content: ""; }  
  pre, blockquote { border: 1px solid #999; page-break-inside: avoid; }
  thead { display: table-header-group; }
  tr, img { page-break-inside: avoid; }
  @page { margin: 0.5cm; }
  p, h2, h3 { orphans: 3; widows: 3; }
  h2, h3{ page-break-after: avoid; }
}

/***** Bonus  ***************************************/

.clear {clear:both;display:block;overflow:hidden;visibility:hidden;width:0;height:0;}
.clearleft {clear:left;display:block;overflow:hidden;visibility:hidden;width:0;height:0;}
.clearfix:before, .clearfix:after { content: "\0020"; display: block; height: 0; overflow: hidden; }
.clearfix:after { clear: both; }
.clearfix { zoom: 1; }