@charset "UTF-8";
@import url("http://elusive84.com/index.php/elusive84/typography_css");
/**** 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{border:0;outline:0;font-size:100%;vertical-align:baseline;background:transparent;margin:0;padding:0}
body{line-height:1}
article,aside,canvas,details,figcaption,figure,footer,header,hgroup,menu,nav,section,summary{display:block}
nav ul{list-style:none}
blockquote,q{quotes:none}
blockquote:before,blockquote:after,q:before,q:after{content:none}
a{border:0;font-size:100%;vertical-align:baseline;background:transparent;margin:0;padding:0}
ins{background-color:#ff9;color:#000;text-decoration:none}
mark{background-color:#ff9;color:#000;font-style:italic;font-weight:700}
del{text-decoration:line-through}
abbr[title],dfn[title]{border-bottom:1px dotted #000;cursor:help}
table{border-collapse:collapse;border-spacing:0}
hr{display:block;height:1px;border:0;border-top:1px solid #ccc;margin:1em 0;padding:0}
input,select{vertical-align:middle}



/**** Global Styles */
body {  background-color:#2f7669;
	background: -moz-linear-gradient(bottom, #2f7669, #00568b) no-repeat #2f7669;
    background: -webkit-gradient(linear, center bottom, center top, from(#2f7669), to(#00568b)) repeat-x #2f7669;
    background: linear-gradient(bottom,#2f7669, #00568b) no-repeat #2f7669;
    font: 13px/18px PTSansRegular, Arial, Helvetica, sans-serif; color: #f3f3f3; }
a { text-decoration: none; color: #46e3c7; -webkit-transition: color .15s linear; -moz-transition: color .15s linear; -o-transition: color .15s linear; transition: color .15s linear; }
a:hover { color: #fff; }
#wrapper { width:980px; margin:0 auto; position: relative; border-top: 5px solid #3c9787; }
#home header, 
#portfolio header, 
#rambles header, 
#rambles-entry header { width:980px; position: relative; border-bottom: 1px solid #0f84b4; }
#portfolio header, 
#rambles header, 
#rambles-entry header { border-bottom: none; }



/**** Content: Top Scroll Indicator */
.scroll { position: fixed; display:none; width:50px; height:50px; background-color: #3c9787; right:20px; top:50%; color: #fff; font-weight:normal; text-transform: uppercase; font-style: italic; font-size: 12px; border-radius: 80px; z-index: 999; cursor: pointer; }
.scroll h6 { margin: 18px 0 0 12px; }
.scroll h6 a { color: #fff; }



/**** Logo */
h1#logo a { width:82px; height: 82px; text-indent: -9999px; display: block; margin:22px 0 0 22px; background: url(http://elusive84.com/i/elusive84_logo.png) no-repeat top left; -webkit-transition: opacity .15s linear; -moz-transition: opacity .15s linear; -o-transition: opacity .15s linear; transition: opacity .15s linear; }
h1#logo a:hover { opacity: 0.80; }



/**** Navigation */
header nav ul { list-style: none; position: absolute; top:32px; right: 19px; }
header nav ul li { float: left; display: block; font-family: Kievit, Arial, Helvetica, sans-serif; font-size: 14px; text-transform: uppercase; }
header nav ul li a { color: #fff; text-decoration: none; margin:0 7px 0 0; padding: 4px 12px 3px 12px;
	-webkit-transition: background-color .15s linear;
	-moz-transition: background-color .15s linear;
	-o-transition: background-color .15s linear;
	transition: background-color .15s linear; }
header nav ul li:last-child a { margin-right: 0; }
header nav li a:hover { background-color: #006692; -moz-border-radius:  4px; border-radius: 4px; }
header nav li.active a { background-color: #3c9787; -moz-border-radius:  4px; border-radius: 4px; }



/**** Content: HOME PAGE */
.contentarea { 
    display: -moz-box; display: -webkit-box; display: box; width:980px; margin:2px 0 43px 0;
    background: -moz-linear-gradient(bottom, #28716e, #356b7d) no-repeat;
    background: -webkit-gradient(linear, center bottom, center top, from(#28716e), to(#356b7d)) no-repeat;
    background: linear-gradient(bottom,#28716e, #356b7d) no-repeat; }
#intro { margin:84px 0 58px 21px; width:786px; position: relative; }
#portfolio #intro , #rambles #intro , #rambles-entry #intro { margin:46px 0 26px 21px; width:940px; border-bottom: 1px solid #0f84b4; }
#portfolio #intro { margin-bottom: 56px; }

.fportfolio, #home article, .fabout { -moz-box-flex: 1;  -webkit-box-flex: 1; box-flex:1; /*width:286px;*/ width:326px; /*border-right:1px solid #0b5b80;*/ padding:19px 20px 0 20px;
	background: url(http://elusive84.com/i/spacer.png) no-repeat right bottom; }
.fportfolio img {
	-moz-border-radius:4px;
	-webkit-border-radius: 4px;
	border-radius:4px;
	/*margin-top: 16px;*/
	-moz-box-shadow: 1px 1px 1px rgba(0,0,0,0.14);
	-webkit-box-shadow: 1px 1px 1px rgba(0,0,0,0.14);
	box-shadow: 1px 1px 1px rgba(0,0,0,0.14); }
.fportfolio a { display: block; width:288px; height: 158px; margin-top: 16px; }
.fportfolio a:hover { background: url(http://elusive84.com/i/view_project.png) no-repeat top left; -moz-border-radius:4px; -webkit-border-radius: 4px; border-radius:4px; }
.fportfolio a img { -webkit-transition: opacity .15s linear; -moz-transition: opacity .15s linear; -o-transition: opacity .15s linear; transition: opacity .15s linear; }
.fportfolio a:hover img { opacity: .03; }

.fabout { border:none; background-image: none; }
.fabout ul { list-style: none; margin-top: -6px; }
.fabout ul li { float:left; display: block; }
.fabout ul li a { display: block; width: 31px; height: 32px; text-indent: -9999px; margin-right: 7px; opacity: 0.40; 
	-webkit-transition: opacity .15s linear;
	-moz-transition: opacity .15s linear;
	-o-transition: opacity .15s linear;
	transition: opacity .15s linear; }
.fabout ul li.facebook a {background:url(http://elusive84.com/i/social_icons/facebook.png) no-repeat top left; }
.fabout ul li.flickr a {background:url(http://elusive84.com/i/social_icons/flickr.png) no-repeat top left; }
.fabout ul li.lastfm a {background:url(http://elusive84.com/i/social_icons/lastfm.png) no-repeat top left; }
.fabout ul li.youtube a {background:url(http://elusive84.com/i/social_icons/youtube.png) no-repeat top left; }
.fabout ul li a:hover { opacity: 1; }

.fportfolio h3, 
.fabout h3, 
#home article h3 { font-family: Kievit, Arial, Helvetica, sans-serif; font-size: 13px; font-weight: normal; text-transform: uppercase; color:#9fe6f5; }
.fabout h3 { margin-bottom: 19px; }
.fabout p { margin-bottom: 18px; }
.fabout p a { border-bottom: 1px dotted; -webkit-transition: color .15s linear; -moz-transition: color .15s linear; -o-transition: color .15s linear; transition: color .15s linear; }



/**** Content: Home Page Introduction & Headers */
#intro h2 { font-family: 'Kievit Bold', Arial, Helvetica, sans-serif; font-size: 42px; letter-spacing: -0.02em; text-shadow: 1px 1px 1px rgba(0, 0, 0, .47); margin:0 0 21px 0; font-weight: normal; color: #fff; }
#intro h3 { font-family: Kievit, Arial, Helvetica, sans-serif; font-size: 20px; line-height: 27px; color:#d5d3d3; font-weight: normal; }

#home article h1 { margin: 15px 0 0 0; }
#home article h1 a { font-family: 'Kievit Bold', Arial, Helvetica, sans-serif; font-weight: normal; font-size: 22px; color: #fff; line-height: 18px; text-decoration: none; }
#home article h2 { font-family: Kievit, Arial, Helvetica, sans-serif; font-weight: normal; font-size: 15px; color:#d7d7d7; margin-bottom: 18px; }
#home article h4 { display: block; margin-top: 9px; }
#home article h4 a { font-weight: normal; font-size: 13px; text-decoration: none; border-bottom: 1px dotted;
	-webkit-transition: color .15s linear;
	-moz-transition: color .15s linear;
	-o-transition: color .15s linear;
	transition: color .15s linear;	}
#home article h4 a:hover { color: #fff; }

#portfolio #intro h2 , 
#rambles #intro h2 { font-family: 'Kievit Medium', Arial, Helvetica, sans-serif; font-size: 36px; margin:0 0 20px 0; text-shadow: 1px 1px 1px rgba(0, 0, 0, .17); }
#portfolio #intro h2 span , 
#rambles #intro h2 span , 
#rambles-entry h2 span { color: #d5d3d3; font-family: Kievit, Arial, Helvetica, sans-serif; font-size: 20px; font-weight: normal; letter-spacing: 0; }
#rambles #intro h2 span { text-shadow: none; font-size: 18px; float: right; margin: 7px 0 0 0; }
#rambles #intro h2 span a { color:#d5d3d3; text-decoration: none;
	-webkit-transition: color .15s linear;
	-moz-transition: color .15s linear;
	-o-transition: color .15s linear;
	transition: color .15s linear; }
#rambles #intro h2 span a:hover { color: #46e3c7; }
#rambles #intro h2 a.active { font-family: 'Kievit Medium', Arial, Helvetica, sans-serif; color: #fff; }

#rambles-entry h2 { font-size: 30px; text-shadow: none; font-family: 'Kievit Medium', Arial, Helvetica, sans-serif; letter-spacing: -0.03em; }
span.entrynav { text-align: right; position: absolute; top:5px; right:0; font-family: 'PTSansItalic', Arial, Helvetica, sans-serif; font-size: 15px; color: #77a3bd; }
span.entrynav a { color: #46e3c7; text-decoration: none;
	-webkit-transition: color .15s linear;
	-moz-transition: color .15s linear;
	-o-transition: color .15s linear;
	transition: color .15s linear; }
span.entrynav a:hover { color: #fff; }



/**** Content: Porfolio Page */
dl.portfolio { position: relative; width:940px; margin: 0 auto 64px auto; overflow: hidden; }
.portfolio dt { float: right; }
.portfolio dd {width:210px;}
.portfolio dd.title { border-top: 1px solid #3b9685; padding-top: 20px; }
.portfolio dd.noBorder { border-top: none; padding-top: none; }
.portfolio dd h2 { font-family: 'Kievit Medium', Arial, Helvetica, sans-serif; font-size: 18px; font-weight: normal; color: #fff; margin-bottom: 9px; }
.portfolio dd h2 span { font-family: Kievit, Arial, Helvetica, sans-serif; font-size: 12px; font-weight: normal; color:#d0d0d0; }
.portfolio dd p { color: #ccc; }
.portfolio dd h4 { display: block; margin-top: 18px; }
.portfolio dd h4 a { font-family: 'Kievit Medium', Arial, Helvetica, sans-serif; font-weight: normal; font-size: 13px; text-decoration: none; color: rgba(255,255,255,0.28);
	background-color: rgba(0,0,0,0.08); padding: 5px 12px;
	-moz-border-radius: 4px;
	-webkit-border-radius: 4px;
	border-radius: 4px;
	-webkit-transition: background-color .15s linear, color .15s linear;
	-moz-transition: background-color .15s linear, color .15s linear;
	-o-transition: background-color .15s linear, color .15s linear;
	transition: background-color .15s linear, color .15s linear; }
.portfolio dd h4 a:hover { background-color: #3c9787; color: #fff; }



/**** Content: Rambles Landing */
.articleEntry { width:940px; margin: 0 auto 10px auto; overflow: hidden; }
#rambles article a { width:250px; height: 240px; float: left; padding: 28px 25px 0 25px; margin:0 20px 20px 0;
	background: url(http://elusive84.com/i/patternlines.png) no-repeat top left rgba(0,0,0,0.03);
	-webkit-transition: background-color .15s linear, color .15s linear;
	-moz-transition: background-color .15s linear, color .15s linear;
	-o-transition: background-color .15s linear, color .15s linear;
	transition: background-color .15s linear, color .15s linear; }

#rambles article a:hover { background-color: #3c9787; background-image: none; }
#rambles article a:hover p {color:#fff;}
#rambles article.last a { margin-right: 0; }
#rambles article a { text-decoration: none; }
#rambles article a h2 { font-family: 'Kievit Medium', Arial, Helvetica, sans-serif; font-size: 24px; line-height: 24px; font-weight: normal; color:#fff; margin-bottom: 18px; }
#rambles article a h3 {
	font-family: Kievit, Arial, Helvetica, sans-serif;
	font-size: 16px;
	line-height: 18px;
	font-weight: normal;
	color: #ccc;
	margin:-16px 0 18px 0; }
#rambles article a p { color: #ccc; margin-bottom: 18px; }
#rambles article a h4 { font-family: 'PTSansItalic', Arial, Helvetica, sans-serif; font-size: 14px; font-weight: normal; color:#fff; }



/**** Content: Rambles Entry */
.article-entry { width:940px; margin: 0 auto; position: relative; overflow: hidden; }
.article-entry article { margin-bottom: 55px; overflow: hidden; }
#rambles-entry .article-entry article header { padding: 0 0 30px 0; border-bottom: 1px dotted #0e7fb2; margin: 0 0 34px 0; }

.article-entry article h1 { font-family: 'Kievit Bold', Arial, Helvetica, sans-serif; font-size: 40px; line-height: 45px; font-weight: normal; color: #fff; text-shadow: 0 1px 1px rgba(0, 0, 0, .47); letter-spacing: -0.039em; }
#rambles-entry .article-entry article h2 { font-family: Kievit, Arial, Helvetica, sans-serif; font-size: 18px; line-height: 27px; font-weight: normal; color: #d5d3d3; letter-spacing: 0.004em; }
#rambles-entry p.lead-paragraph { /*font-size: 17px;*/ font-family: Kievit, Arial, sans-serif; font-size: 24px; line-height: 32px; color: #fff; letter-spacing: normal; }

.article-entry article h3 { font-family: 'PTSansBold', Arial, sans-serif; font-size: 22px; font-weight: normal; color: #fff; margin-bottom: 10px; padding-top: 14px; }
.article-entry ul , #rambeles-entry ol { margin-bottom: 22px; color: #ccc; }
.article-entry ul li , #rambles-entry ol li { font-size: 15px; margin-bottom: 11px; }
.article-entry blockquote { font-family: 'PTSansItalic', Arial, sans-serif; font-size: 14px; font-weight: normal; border-left: 3px solid #3c97b7; margin:0 0 28px 42px; padding: 0 0 0 20px; float: left; }
.article-entry article blockquote p { font-size: 14px; line-height: 18px; margin-bottom: 16px; width:82%; }
.article-entry article blockquote p:last-child { margin-bottom: 0; }

.article-entry article p { /*font-size: 15px; line-height: 22px; margin-bottom: 22px;*/ font-size: 17px; line-height: 23px; margin-bottom: 28px; color: #d7d7d7; letter-spacing: 0.012em; }
.article-entry article p a { color: #46e3c7; text-decoration: none; border-bottom: 1px dotted; }
.article-entry article p a:hover { color: #fff; }
.bordernone { border: none !important; }

section.left-col { width: 220px; margin: 4px 20px 0 0; float: left; }
section.left-col img {  -moz-border-radius: 3px; -webkit-border-radius: 3px; border-radius: 3px; }
section.right-col { /*width:568px; float: left;*/ position: relative; width:670px; margin-right: 16px; float: right; }



/**** Footer */
footer { margin: 0 auto; width:940px; border-top: 1px solid #26828f /*#2a94a4*/; padding:14px 0 30px 0; position: relative; }
footer h5 { font-size: 12px; font-weight: normal; color:#8fb5ba; }
footer ul { font-size: 12px; position: absolute; top:16px; right: 0; list-style: none; }
footer ul li { float:left; margin:0 0 0 10px; padding:0 0 0 10px; border-left: 1px solid #8fb5ba; line-height: 12px; }
footer ul li:first-child { border: none; }
footer ul li a { color: #8fb5ba; text-decoration: none; }



/**** Contact module */
#contactBody { width:776px; height: 334px; position: fixed; top:14%; left: 22%; z-index: 9000; border: 1px solid #2577aa; background-color:#2f7669;
	background: -moz-linear-gradient(bottom, #2f7669, #00568b) no-repeat;
    background: -webkit-gradient(linear, center bottom, center top, from(#2f7669), to(#00568b)) no-repeat;
    background: linear-gradient(bottom,#2f7669, #00568b) no-repeat;
    -moz-border-radius:4px;
	-webkit-border-radius: 4px;
	border-radius:4px;
	display: none; }

a.close { width:38px; height: 38px; background: url(http://elusive84.com/i/close-contact.png) no-repeat top left; text-indent: -9999px;  position: absolute; display: block; top:-14px; right: -16px; }
a.close:hover { background: url(http://elusive84.com/i/close-contact.png) no-repeat left -38px; }

.leftContact { width:255px; height: 292px; border-right: 1px solid #3579a1; float: left; padding: 42px 28px 0 28px; }
.leftContact h2 {  font-family: 'Kievit Bold', Arial, Helvetica, sans-serif; font-weight: normal; font-size: 26px; color: #fff; margin-bottom: 9px; }
.leftContact p { color: #d7d7d7; }
.leftContact ul { margin: 18px 0 0 0; font-size: 14px; list-style: none; }
.leftContact ul li { }
.leftContact ul li a { display: block; border-bottom: 1px dotted #75a4af; color: #ccc; margin: 0 0 9px 0; padding: 0 0 9px 4px; }
.leftContact ul li a:hover {color:#fff;}
.leftContact ul li:last-child a { border: none; }

.rightContact { width: 462px; float: right; margin: 32px 0 0 0; }
.rightContact .left-col { float: left; width: 190px; }
.rightContact .right-col { float: right; width: 190px; }
.rightContact .left-col input , 
.rightContact .right-col input { border: none; font-family: Arial, Helvetica, sans-serif; font-size: 13px; line-height: 18px; color: #666; padding: 0 0 0 6px; width:184px; height:32px; margin-bottom: 12px; }

.rightContact form { width: 395px; margin: 0 auto; }
.rightContact label { display: block; font-family: 'PTSansBold', Arial, Helvetica, sans-serif; font-size: 14px; font-weight: normal; margin-bottom: 3px; }
.rightContact textarea { border: none; width: 383px; height: 150px; font-family: Arial, Helvetica, sans-serif; font-size: 13px; line-height: 18px; color: #666; padding:6px; margin-bottom: 10px; }
.rightContact #submit { background-color: #529f7d; border: none; font-family: Kievit, Arial, Helvetica, sans-serif;
	font-weight: normal; font-size: 14px; color: #fff; padding: 6px 8px; -moz-border-radius:4px; -webkit-border-radius: 4px; border-radius:4px; cursor: pointer; }
#mask { display: none; background-color: #000; position: absolute; top:0; left: 0; z-index: 8000; }



/**** Media Queries */
@media screen and (max-width: 480px), screen and (max-device-width: 480px) {
	
	/**** Home page */
	#wrapper {width:100%;}
	#home header, #portfolio header, #rambles header, #rambles-entry header { width: 100%; overflow: hidden;  }
	#home header { border-bottom: 0 none; }
	header nav ul { top: 135px; right: inherit; left:24px; }
	#intro { width: 90%; float: left; margin-bottom: 20px; }
	.contentarea { width: 100%; display: block; float: left; margin-top: 0; margin-bottom: 0; background: transparent; }
	.fportfolio, #home article, .fabout { -moz-box-flex: inherit; float: left; padding:22px 0 0 0; margin:22px 0 0 20px; width:87%; border-top: 1px solid #26828F; }
	#home article p  , .fabout p { font-size: 14px; line-height: 19px;  }
	footer { width: 100%; float: left; clear: both; padding-top: 10px; }
	footer h5 { text-align: center; }
	footer ul { position: relative; top: inherit; right:inherit; margin: 10px auto;}
	
	#intro h2 { line-height: 40px; font-size: 32px; }
	#intro h3 { font-size: 18px; line-height: 26px; }
	.fportfolio, #home article, .fabout { background-image: none; }
	.fportfolio img {width:97%;}
	
	/**** Contact Module */
	#contactBody { width:300px; top:80%; left:7px; height: 680px; }
	.leftContact { width:85%; height: 250px; border-right: 0 none; padding: 40px 20px 0; }
	.rightContact { float:left; width:85%; margin-top:0; }
	.rightContact form { width:100%; margin-left: 20px; padding: 20px 0 0 0; border-top: 1px solid #3579A1; }
	.rightContact .left-col { width:100%; clear: both; }
	.rightContact .right-col { width:100%; clear: both; float: left; }
	.rightContact .left-col input, .rightContact .right-col input { width: 98%; }
	.rightContact textarea {width:96%;}
	
	/**** Portfolio Page */
	#portfolio #intro { width:88%; margin: 90px 0 30px 20px;  }
	dl.portfolio {width:100%;}
	dl.portfolio dt { float:left; margin: 0 0 0 20px; }
	dl.portfolio dt img { width: 94%; height: auto; }
	dl.portfolio dd.title , dl.portfolio dd.noBorder { margin-top:20px; border-top: none; padding-top:0; }
	dl.portfolio dd { float: left; margin: 0 0 0 20px; width:88%; }
	dl.portfolio dd p { font-size: 14px; }
	
	#portfolio #intro h2 { font-size: 26px; margin-bottom: 10px; }
	#portfolio #intro h2 span, #rambles #intro h2 span, #rambles-entry h2 span { font-size: 16px; }
	.scroll { display: none !important; }
	
	
	/**** Journal */
	 #rambles #intro, #rambles-entry #intro { width:88%; float: left; margin-top: 76px; }
	 #rambles #intro h2 { font-size: 32px; margin-bottom: 16px; }
	 #rambles #intro h2 span { float: left; display: block; margin-top: 0; }
	 .articleEntry {width:100%;}
	 #rambles article a { width:72%; margin:0 0 20px 20px; height: auto; padding-bottom: 28px; background-image: none; background-color: rgba(0,0,0,0.04); }
	 
	 #rambles-entry #intro { margin-bottom: 20px; }
	 #rambles-entry #intro h2 { margin-bottom: 0px; font-size: 26px; display: none; }
	 span.entrynav { float: left; display: block; position: relative; top:inherit; margin: 0 0 16px 0; }
	 .article-entry {width:100%;}
	 .article-entry article h1 { font-size: 34px; line-height: 40px; margin-bottom: 3px; }
	 #rambles-entry p.lead-paragraph { font-size: 19px; line-height: 24px; }
	 .article-entry article p { font-size: 16px; }
	 #rambles-entry .article-entry article header { margin-left: 20px; width:88%; padding-bottom: 20px; margin-bottom: 20px; }
	 section.left-col { display: none; }
	 section.right-col { width:88%; float: left; margin: 0 0 0 20px; }
	 section.right-col img { width:100%; height: auto; }
}