/*
Theme Name: Opiate
Description: Custom theme by me, for me
Version: 2.0
Author: Daryl Gilbert
Author URI: http://darylgilbert.net/
Tags:
*/
@font-face {
    font-family: 'CabinRegular';
    src: url('fonts/cabin/Cabin-Regular-webfont.eot');
    src: url('fonts/cabin/Cabin-Regular-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/cabin/Cabin-Regular-webfont.woff') format('woff'),
         url('fonts/cabin/Cabin-Regular-webfont.ttf') format('truetype'),
         url('fonts/cabin/Cabin-Regular-webfont.svg#CabinRegular') format('svg');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'CabinBold';
    src: url('fonts/cabin/Cabin-Bold-webfont.eot');
    src: url('fonts/cabin/Cabin-Bold-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/cabin/Cabin-Bold-webfont.woff') format('woff'),
         url('fonts/cabin/Cabin-Bold-webfont.ttf') format('truetype'),
         url('fonts/cabin/Cabin-Bold-webfont.svg#CabinBold') format('svg');
    font-weight: normal;
    font-style: normal;

}
@font-face {
    font-family: 'OpiateRegular';
    src: url('fonts/opiate/opiate-regular-webfont.eot');
    src: url('fonts/opiate/opiate-regular-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/opiate/opiate-regular-webfont.woff') format('woff'),
         url('fonts/opiate/opiate-regular-webfont.ttf') format('truetype'),
         url('fonts/opiate/opiate-regular-webfont.svg#OpiateRegular') format('svg');
    font-weight: normal;
    font-style: normal;
}
/*** reset ***/
html, body, 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, figure, footer, header, hgroup, menu, nav, section, time, mark, audio, video {margin: 0;padding: 0;border: 0;outline: 0;font-size: 100%;vertical-align: baseline;background: transparent;} article, aside, figure, footer, header, hgroup, nav, section {display: block;}
ul {list-style: none;}a {margin: 0; padding: 0; font-size: 100%; vertical-align: baseline; background: transparent;} input, select {vertical-align: middle;}
/*Clearfix*/ .cf:before, .cf:after {content:"";display:block;} .cf:after {clear:both;} .cf {zoom:1;}/* For IE 6/7 (trigger hasLayout) */

/* Custom text-selection colors*/
::-moz-selection{background: #e68a00; color: #fff; text-shadow: none;}
a::-moz-selection{background: #e68a00; color: #fff; text-shadow: none;}
::selection {background: #e68a00; color: #fff; text-shadow: none;}
a::selection  {background: #e68a00; color: #000; text-shadow: none;}

/********* shaded columns REUSE **********/
.w12{width:940px;} .w9{width:700px;} .w6{width:460px;} .w3{width:220px;} .w2{width:140px;}
.de {
	z-index:1;
	position:relative;
	background: -moz-linear-gradient(left, rgba(38,57,64,0), rgba(38,57,64,0.6) 25%, rgba(38,57,64,0.6) 75%, rgba(38,57,64,0)); /* Firefox 3.6+ */
	background: -webkit-gradient(linear, left top, right top, from(rgba(38,57,64,0)), color-stop(0.25, rgba(38,57,64,0.6)), color-stop(0.75, rgba(38,57,64,0.6)), to(rgba(38,57,64,0))); /*Safari 4-5, Chrome 1-9 */
	background: -webkit-linear-gradient(left, rgba(38,57,64,0), rgba(38,57,64,0.6) 25%, rgba(38,57,64,0.6) 75%, rgba(38,57,64,0)); /* Safari 5.1+, Chrome 10+ */
	background: -o-linear-gradient(left, rgba(38,57,64,0), rgba(38,57,64,0.6) 25%, rgba(38,57,64,0.6) 75%, rgba(38,57,64,0)); /* Opera 11.10+ */
	
	background: -moz-linear-gradient(left, rgba(38,57,64,0) 0%, rgba(38,57,64,0.6) 25%, rgba(38,57,64,0.6) 75%, rgba(38,57,64,0) 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, right top, color-stop(0%,rgba(38,57,64,0)), color-stop(25%,rgba(38,57,64,0.6)), color-stop(75%,rgba(38,57,64,0.6)), color-stop(100%,rgba(38,57,64,0))); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(left, rgba(38,57,64,0) 0%,rgba(38,57,64,0.6) 25%,rgba(38,57,64,0.6) 75%,rgba(38,57,64,0) 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(left, rgba(38,57,64,0) 0%,rgba(38,57,64,0.6) 25%,rgba(38,57,64,0.6) 75%,rgba(38,57,64,0) 100%); /* Opera11.10+ */
	background: -ms-linear-gradient(left, rgba(38,57,64,0) 0%,rgba(38,57,64,0.6) 25%,rgba(38,57,64,0.6) 75%,rgba(38,57,64,0) 100%); /* IE10+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00263940', endColorstr='#00263940',GradientType=1 ); /* IE6-9 */
	background: linear-gradient(left, rgba(38,57,64,0) 0%,rgba(38,57,64,0.6) 25%,rgba(38,57,64,0.6) 75%,rgba(38,57,64,0) 100%); /* W3C */
	
	
	background: -moz-linear-gradient(left, rgba(38,57,64,0) 0%, rgba(38,57,64,0.55) 20%, rgba(38,57,64,0.6) 25%, rgba(38,57,64,0.6) 75%, rgba(38,57,64,0.55) 80%, rgba(38,57,64,0) 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, right top, color-stop(0%,rgba(38,57,64,0)), color-stop(20%,rgba(38,57,64,0.55)), color-stop(25%,rgba(38,57,64,0.6)), color-stop(75%,rgba(38,57,64,0.6)), color-stop(80%,rgba(38,57,64,0.55)), color-stop(100%,rgba(38,57,64,0))); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(left, rgba(38,57,64,0) 0%,rgba(38,57,64,0.55) 20%,rgba(38,57,64,0.6) 25%,rgba(38,57,64,0.6) 75%,rgba(38,57,64,0.55) 80%,rgba(38,57,64,0) 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(left, rgba(38,57,64,0) 0%,rgba(38,57,64,0.55) 20%,rgba(38,57,64,0.6) 25%,rgba(38,57,64,0.6) 75%,rgba(38,57,64,0.55) 80%,rgba(38,57,64,0) 100%); /* Opera11.10+ */
	background: -ms-linear-gradient(left, rgba(38,57,64,0) 0%,rgba(38,57,64,0.55) 20%,rgba(38,57,64,0.6) 25%,rgba(38,57,64,0.6) 75%,rgba(38,57,64,0.55) 80%,rgba(38,57,64,0) 100%); /* IE10+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00263940', endColorstr='#00263940',GradientType=1 ); /* IE6-9 */
	background: linear-gradient(left, rgba(38,57,64,0) 0%,rgba(38,57,64,0.55) 20%,rgba(38,57,64,0.6) 25%,rgba(38,57,64,0.6) 75%,rgba(38,57,64,0.55) 80%,rgba(38,57,64,0) 100%); /* W3C */
	padding:20px 0;
}
.de::before, .de::after {
	position:absolute;
	left:0;
	width:100%;
	display:block;
	background-image: url('img/divends.png');
	background-position: center top;
	background-repeat: no-repeat;
	content:" ";
	z-index:-1;
	clear:both;
}
.de::before {
	top:-2px;
	height:2px;
}
.de.w9::before{background-position:center -21px;}
.de.w6::before{background-position:center -42px;}
.de.w3::before{background-position:center -63px;}
.de.w2::before{background-position:center -84px;}
.de::after {
	bottom:-20px;
	height:20px;
}
.de.w12::after {background-position:center -1px;}
.de.w9::after {background-position:center -22px;}
.de.w6::after {background-position:center -43px;}
.de.w3::after {background-position:center -64px;}
.de.w2::after {background-position:center -85px;}
/*** overall styles ***/
html {
	background:#121a1d;
	background-color: #121a1d;
	background: url('img/bgt.png') fixed, -moz-radial-gradient(center bottom, circle, #263440, #121a1d) fixed; /* Firefox 3.6+ */ 		
	background: url('img/bgt.png') fixed, -webkit-gradient(radial, center bottom, 0, center bottom, 500, from(#263440), to(#121a1d)) fixed; /* Safari 4-5, Chrome 1-9 */ 
	background: url('img/bgt.png') fixed, -webkit-radial-gradient(center bottom, circle, #263445, #121a20) fixed; /* Safari 5.1+, Chrome 10+ CHECK NUMBERS*/ 
	height:100%;
	width:100%;
}
body {
	width:100%;
	height:100%;
	color:#eee;
	font: normal 13px/22px CabinRegular, Tahoma, Sans-serif;
	text-rendering: optimizeLegibility;/*supposed to help with fonts being bold in ff*/
	overflow:hidden;
}
#wrap {
	height:100%;
	width:940px;
	margin:0 auto;
	position:relative;
}
a {color:#e68a00;text-decoration:none;}
a:hover {color:#fff;}
p {margin-bottom:13px;}
.aRight {text-align:right;}
#horizon {
	width:100%;
	height:460px;
	position:absolute;top:50%;
	margin-top:-230px;
	border-top: solid 1px rgba(255,255,255,0.1);
	border-bottom: solid 1px rgba(255,255,255,0.1);
	background:rgba(0,0,0,0.2);
}
#wrap>section {
	position:absolute;
	padding:20px 0;
	height:420px;
	top:50%;
	left:-799px;
	margin-top:-230px;
	opacity:0;
}
#wrap>section#home{
	padding:0;
	height:460px;
	left:0px;
	opacity:1;

}


/*************************************************************************************************************************/
/*********************                                     CONTROL                            ****************************/
/*************************************************************************************************************************/
#control {
	height:460px;	width:460px;
	position:absolute; top:50%; right:0; margin-top:-230px;
	text-align:center;
}
#control h1 {display:block; width:448px; height:300px;margin-left:12px;}
#control h1 a {
	display:block;
	width:448px;
	height:300px;
	background:url('img/heading.png') no-repeat center right;
	line-height:300px;text-indent:-999999px;
}
#control h2 {
	margin:15px auto;
	font:normal 28px/28px OpiateRegular, Sans-Serif;
	text-shadow: 2px 2px 4px #000000;
	filter: dropshadow(color=#000000, offx=2, offy=2);
	display:block;
	width:331px;
	height:34px;
	text-indent:-99999px;
	background:url('img/controlSubH.png') no-repeat center center;
}
#control nav {text-align: center;}/*required for ie 8 apparently*/
#control nav ul#menu {margin:0 auto;text-align:center;}
#control nav ul#menu li {display:inline;margin:0 10px;padding: 0;}
#menu li a {
	font:normal 24px/24px OpiateRegular, Sans-Serif;
	color:#eee;
	text-shadow:2px 2px 4px rgba(0,0,0,0.5);
}
#menu li a:hover {text-shadow:2px 2px 4px rgba(0,0,0,1);color:#e68a00;}

#menuV {
	position:absolute;
	right:-60px;
	top:50%;
	margin-top:-100px;
}
#menuV nav ul li{
	display:block;
	width:140px;
}
#menuV nav ul li a{
	font:normal 20px/50px OpiateRegular, Sans-Serif;
	color:rgba(255,255,255,0.5);
	text-shadow:2px 2px 4px rgba(0,0,0,0.5);
	display:block;
}
#menuV nav ul li a:hover{
	margin-left:-60px;
	color:#eee;
}
section .tray {
	padding:20px 20px;
	width:420px;
	overflow:hidden;
}
section .traywide {
	padding:20px 20px;
	width:920px;
	overflow:hidden;
}
section header>h1 {
	margin-bottom:10px;
	font:400 32px/32px OpiateRegular;
	text-align:center;
	text-shadow:2px 2px 4px rgba(0,0,0,0.5);
}


/******* Portfolio *******/
#portfolio {}

#portfolio>.content>ul>li{
    display:block;
    float:left;
    width:140px;
    margin-right:20px;
}
#portfolio>.content>ul>li>h2{
    display:block;
    width:140px;
    height:138px;

    border-top:1px solid rgba(100,100,100,0.5);
    border-bottom:1px solid rgba(100,100,100,0.5);
    background:#121a1d;
    background:rgba(0,0,0,0.1);
    box-shadow: inset 0px 0px 20px 0px rgba(0,0,0,0.3);

    border-radius:15px;

    text-align:center;
    margin-bottom:20px;
}
#portfolio>.content>ul>li>h2>a{
    display:block;
    padding-top:100px;
    font:normal 24px/38px OpiateRegular, Sans-Serif;
}
#portfolio>.content>ul>li:hover h2{
    background:#e68a00;
}
#portfolio>.content>ul>li:hover h2>a{
    color:#fff;
}

#portfolio>.content>ul>li#pfControl{
    margin-right:0;
}
#portfolio>.content>ul>li#pfControl>h2{
    text-indent:-99999px;
    border:none;
    background: url('img/avIcon140.png') center center no-repeat;
}
#portfolio #menu_portfolio {
    font:normal 20px/30px OpiateRegular, Sans-Serif;
}
#portfolio #menu_portfolio li{
    display:block;
    text-align:center;
}
#portfolio #menu_portfolio a{
    text-align: center;
    text-shadow:2px 2px 4px rgba(0,0,0,0.5);
    color:#eee;
}
#portfolio #menu_portfolio a:hover{
    text-shadow:2px 2px 4px rgba(0,0,0,1);color:#e68a00;
}
/******** Tweets *********/
#tweet ul {overflow:hidden;}

#tweet ul li{
    padding:10px 10px 10px 45px;
    border-bottom:1px dotted rgba(255,255,255,0.3);
    position:relative;
}
#tweet ul li:hover {
}
#tweet ul li:before{
    display:block;
    position:absolute;
    top:10px;
    left:5px;
    content:" ";
    background:url('img/bird.png');
    width:27px;
    height:19px;
}
.tweetDate{
    font-size:9px;
    padding-left:5px;
    position:absolute;
    top:28px;
    left:0px;
}
#tweet ul li:first-child {
    font-size:14px;
    background:rgba(0,0,0,0.1);
    border-radius:20px;
    border-top:1px solid rgba(255,255,255,0.3);
    border-bottom:1px solid rgba(255,255,255,0.3);
    padding:30px 20px 10px 20px;
}
#tweet ul li:first-child:before {
    content:"Latest:";
    height:30px;
    top:5px;
    left:20px;
    font-style:italic;
    font-size:12px;
    background:none;
}
#tweet ul li:first-child .tweetDate{
    top:7px;
    left:60px;
}

/******** Contact *******/
#contactForm {margin:0 auto;width:440px;}
#nameFrom, #emailFrom,
#subject,
#message {height:20px;width:180px;padding:10px;margin-bottom:16px;}
#send {height:40px;width:200px;}
#subject,
#message {width:400px;}
#message {height:170px;resize:none}
#nameFrom {margin-right:12px;}
#send {margin-left:224px;font:normal 22px/32px OpiateRegular, sans-serif;color:#eee;}
/*Style*/
#contactForm input,
#contactForm textarea {
	-moz-border-radius: 10px;
	border-radius: 10px;
	border:2px solid #121a1d;
	background-color:#2f4550;
	background-image: url('img/contactBG.png');
	background-repeat:no-repeat;
	opacity:0.5;
	outline: none;
}
/*Focus and Hover*/
#contactForm input:focus,
#contactForm textarea:focus {background-color:#121a1d;background-image:none;border-color:#e68a00;color:#eee;opacity:1.0;}
#contactForm input:hover,
#contactForm textarea:hover {opacity:1.0}
#send:hover {background-color:#e68a00;opacity:1.0;background-image:none;}
/*Background*/
#emailFrom {background-position:-220px 0;}
#subject   {background-position:0 -60px;}
#message   {background-position:0 -120px;}
#send      {background-position:-224px -330px;}
#repSpan {display:none;}

/*
#wrap {background:#f00;}
#wrap>section {background:#0f0;}
#wrap>section>div {background:#00f;}
*/