/* -- custome fonts-- 

@font-face {  
  font-family: "opine sans light_simon" ;  
  src: url(  ../fonts/opine_sans_light.eot );  
}  


@font-face {
  font-family: "opine sans light_simon";
  src: url( ../fonts/opine_sans_light.ttf ) format("truetype");
}
*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-weight: inherit;
	font-style: inherit;
	font-size: 100%;
	font-family: Helvetica, Arial, sans-serif;
	vertical-align: baseline;
}
/* remember to define focus styles! */
:focus {
	outline: 0;
}

html,
body {
	height: 100%;
	width: 100%;
}

body {
    font-size:.625em;
	line-height: 1;
	background: #ed1923;
	overflow: hidden;
}
ol, ul {
	list-style: none;
}
/* tables still need 'cellspacing="0"' in the markup */
table {
	border-collapse: separate;
	border-spacing: 0;
}
caption, th, td {
	text-align: left;
	font-weight: normal;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: "";
}
blockquote, q {
	quotes: "" "";
}

#mainContainer {
	margin: 0 auto;
	width: 976px;
	height: 100%;
	position: relative;
	
}

h1 {
	color: #fff;
}

h1 span {
    position: absolute;
    font-size: 8.32em;
}


a { color: #FBAD44; }

a:visited { color: #D66043; }

.firstWord {
	left: 10px;
	position: absolute;
	top: 10px;
}

.JSEnabled .firstWord {
	color: #ed1923;
}

.secondWord {
	left: 10px;
	position: absolute;
	bottom: 10px;
}

.JSEnabled .secondWord {
	color: #ed1923;
}

.thirdWord {
	right: 10px;
	position: absolute;
	bottom: 10px;
}

.JSEnabled .thirdWord {
	color: #ed1923;
}	

.initials {
	background: #50303c url(../images/css/bg_circles_left.png) no-repeat top right;
	cursor: pointer;
	position: absolute;
	height: 80px;
	left:800px;
	top: 10px;
	z-index: 7;
}

.JSEnabled .initials {
	display: none;
}

.initials .wrapper {
	background: url(../images/css/bg_circles_right.png) no-repeat ;
	height: 55px;
	padding: 25px 35px 0 15px;
	width: 60px;
}

.initials .wrapper span {
	float: left;
	color: #fff;
}


.wrapperOpen {
	width: 690px;
	height: 78px;
	padding-top: 5px;
	padding-left: 0px;
}

.initialsOpen {
	left: 200px;
}

.mainChar {
	font-size: 28px;
}

.mainCharLarge {
	font-size: 64px;
	padding-left: 37px;
}

.hidden,
.jobTitle {
	display: none;
	padding-top: 25px;
	font-size: 18px;
	font-weight: bold;
}

.initials .wrapper span.jobTitle {
	float: right;
}


#mainContent {
	color: #fff;
	padding: 10px;
	position: absolute;
	height: 400px;
	left:190px;
	top: 80px;
	width: 540px;
}

#mainContent h2  {

	background-color: #d6270c;
	border: 3px solid #d6323a;
	float: left;
	margin: 20px 0 0 20px;
	width:220px;
	padding: 10px;
	
}

#mainContent h2  .normal {

    font-size: 1.6em;
	font-weight: normal;
	line-height: 2.2em;
	
}

#mainContent h2 em {
	font-style: normal;
}

#mainContent h2 .large { font-size: 5.6em; }

#mainContent h2 .medium { font-size: 4em; }

#mainContent h2 .small { font-size: 2.4em; }

#mainContent .mainImage {
	float: right;
}

#mainContent .mainLinks {
	float: left;
	margin: 10px 0 0 20px;
	width:260px;
}

#mainContent .mainLinks li {
	margin-bottom: 10px;
}

#mainContent .mainLinks li a {
	text-decoration: none;
	color: #FBAD44;
}

#mainContent .mainLinks .icon {
	display: none;
	z-index: 99;
}

#mainContent .mainLinks .first { font-size: 2.4em; }
#mainContent .mainLinks .second { font-size: 3.3em; text-align: right;}
#mainContent .mainLinks .third { font-size: 4.4em; }
#mainContent .mainLinks .fourth { font-size: 3em; text-align: right;}
#mainContent .mainLinks .fifth { font-size: 4.4em; }

.JSEnabled #mainContent {
	display: none;
}

.JSEnabled #lightBoxOverlay {
	background-color: #50303c;
	z-index: 9;
}

.JSEnabled #aboutMe p {
	color: #fff;
	font-size: 1.2em;
	padding: 0 30px;
}

.JSEnabled #aboutMe img {
	width: 337px;
	height: 231px;
}

.JSEnabled #aboutMe .sandbag_typeA {
	display: block;
	clear: left;
	float: left;
	height: 1.5em;
}

.JSEnabled #aboutMe .sandbag_typeB {
	display: block;
	clear: right;
	float: right;
	height: 0.8em;
}

.JSEnabled #aboutMe #sandbag_1 { width: 30px; }

.JSEnabled #aboutMe #sandbag_2 { width: 40px; }

.JSEnabled #aboutMe #sandbag_3 { width: 50px; }

.JSEnabled #aboutMe #sandbag_4 { width: 60px; }

.JSEnabled #aboutMe #sandbag_5 { width: 70px; }

.JSEnabled #aboutMe #sandbag_6 { width: 80px; }

.JSEnabled #aboutMe #sandbag_7 {  width: 30px; }

.JSEnabled #aboutMe #sandbag_8 { width: 40px; }

.JSEnabled #aboutMe #sandbag_9 { width: 50px; }

.JSEnabled #aboutMe #sandbag_10 { width: 60px; }

.JSEnabled #aboutMe #sandbag_11 { width: 70px; }

.JSEnabled #aboutMe #sandbag_12 { width: 80px; }

.JSEnabled #aboutMe #sandbag_13 { width: 90px; }

.JSEnabled #aboutMe #sandbag_14 { width: 100px; }

.JSEnabled #aboutMe #sandbag_15 { width: 100px; }

.JSEnabled #aboutMe #sandbag_16 { width: 105px; }

.JSEnabled #aboutMe #sandbag_17 { width: 115px; }

.JSEnabled #aboutMe #sandbag_18 { width: 105px; }

 #articles {
	background-color: #3F2731;
	color: #fff;
    margin:0 auto;
    height: 100%;
	overflow:auto;
	padding: 0 20px;
	left:320px;
	width: 570px;
}

.loading {
	background-image: url(../images/css/anim_loading.gif); 
	background-repeat:  no-repeat;
	background-position:  50%;
}


#articles h2 {
 
    padding: 10px 0;
    margin-top: 10px;
    border-top: 5px solid #fff;
    font-size: 2.4em;
    
}

#articles h2 a {
	
	position: static;
	height: auto;
	text-decoration: none;
	color: #fff;
}

#articles p {
    
    font-size: 1.4em;
    line-height: 1.2em;
	padding: 5px 0;
}

#articles pre {
	background: #deb887;
	border: 1px dashed #50303C;
	color: #000;
    clear: both;
    font-size: 1.6em;
	margin: 10px 0;
    overflow: hidden;
	padding: 10px;
}

small {
	font-size: 1.2em;
}

#articles blockquote img,  
 #articles p img {
	margin: 10px;
	float: left;
}

#articles img {
	margin: 10px 0;
}

#articles blockquote {
	color: #fae2c3;
	font-style: italic;
	font-weight: normal;
	font-size: 1.4em;
	margin: 0 20px 0 0;
	padding-left: 20px;
}
#articles ul,
#articles ol {
    margin: 10px 20px;
}
#articles li {
    font-size: 1.4em;
	line-height: 1.2em;
    margin: 0 0 10px 0;
    list-style: circle;
}

#articles li  li ,
#articles li pre {

	font-size: 1em; /* poor hack for word presses shitty template html sorry I feel ill*/

}

#close {
	color: #FBAD44;
	cursor: pointer;
	padding: 10px 10px 35px 10px;
	position: absolute;
	background: #3F2731 url(../images/css/sprite_navIcons.png) no-repeat 0 100%;
	left: 340px;
	top: 100px;
}

#close:hover {
	color: #d66043;
	background-position: -35px 100%;
}

 #close span {
	display: block;
	font-size: 2.4em;
	text-align: center;
	width: 15px;
}

.JSEnabled .scroller {
	position: absolute;
	top: 0;
	right: 0;
	width: 33px;
	height: 100%;
}

.JSEnabled .scroller span {
	right: -16px;
	height: 33px;
	width: 33px;
	display: block;
	background: url(../images/css/sprite_navIcons.png) no-repeat -73px 0;
}

.JSEnabled .scroller span:hover {
	right: -16px;
	height: 33px;
	width: 33px;
	display: block;
	background: url(../images/css/sprite_navIcons.png) no-repeat -108px 0;
}

.JSEnabled #portfolio {
	background-color: #3F2731;
	cursor: pointer;
	height: 150px;
	position: absolute;
	z-index: 99;
	overflow: hidden;
}

.JSEnabled #portfolio #spotLight{
	background: #d66043 url(../images/css/bg_spotLight.png) no-repeat;
	display: none;
	position: absolute;
	top: 0;
	left: 0;
	height: 150px;
	width: 150px;
}

.JSEnabled #portfolio ul {
	padding: 35px;
	position: relative;
	float: left;
}

.JSEnabled #portfolio li {
	float: left; 
	margin-right: 35px;
}

.JSEnabled #portfolio a {
	background: url(../images/css/bg_portfolioLogo.png) no-repeat 0 -1px;
	padding: 1px 11px 11px 1px;
	display: block;
	width: 150px;
	height: 84px;
}


/* wordpress styles */

#page {
    background:#3F2731 none repeat scroll 0 0;
    
    padding:20px 0;
    text-align:left;
    width:610px;
}

#header {
    padding: 20px 0;
}

#header h1 a {
    
    font-family: "opine sans light_simon", Helvetica, Arial, sans-serif;
    font-size: 3em;
    color: #fff;
    text-decoration: none;
}

.singlePostHeading {
    
    font-size: 2em;
    margin: 1.5em 0;
    
}

.description {
    color: #fff;
    font-family: "opine sans light_simon", Helvetica, Arial, sans-serif;
    font-size: 1.7em;
}

.navigation a {
    font-size: 1.2em;
}

#respond {
    border-top: 5px solid #fff;
    margin-top: 10px;
    padding-top: 20px;
}
#respond h3 {
    color: #FBAD44;
    margin-bottom: 20px;
    font-weight: bold;
}

#respond input {
    outline: 1px solid d66043;
    border: 1px dotted #FBAD44;
    width: 170px;
    
}

#respond label {
    margin-left: 10px;
}

#respond  textarea {
    width: 550px;
    outline: 1px solid d66043;
    border: 1px dotted #FBAD44;
}

#articles p img.alignright {
    float: right;
}

#articles h3 {
    font-size: 1.8em;
    margin: 10px 0;
}

.tutotialNotes {
	display: block;
	font-size: 0.8em;
	margin: 5px;
}