/*
Theme Name: Cyber Terror World Wide
Theme URI: http://cyberterrorworldwide.com
Description: the personal website of Alexis Nicholas Feurer
Version: 1.0
Author: Alexis Nicholas Feurer (design) and Lev Kanter (development)
Author URI:
Tags:
*/

/*
------------------------------------------- 
	reset 
------------------------------------------- 
*/
* {	
	margin:0; padding:0; border:0; outline:0;
	vertical-align:baseline; background-color:transparent; background-repeat:no-repeat;
	font-family:inherit; font-size:inherit; line-height:inherit;
	font-weight:inherit; text-decoration:inherit; font-style:inherit; color:inherit;
}
body { 
	overflow:auto; text-align:center; font-size:62.5%;
	font-weight:normal; text-decoration:none; font-style:normal;
}
div { text-align:left; }

ul, ol { list-style:none; list-style-position:outside; }
table { border-collapse:collapse; border-spacing:0; empty-cells:hide; }
caption { text-align:center; caption-side:top; }
address { font-style:normal; }
acronym, abbr { cursor:help; }
del, strike { text-decoration:line-through; }
strong, b { font-weight:bold; } 
em, i, cite, dfn, ins { font-style:italic; }
u { text-decoration:underline; }
sup { vertical-align:super; font-size:80%; }
sub { vertical-align:sub; font-size:80%; }
small { font-size:80%; }
big { font-size:120%; }
hr { width:100%; }
pre { white-space:pre; }
input[type='hidden'] { display:none; }

code, samp, var, kbd, tt { 
	font-family:monospace; 
}
blockquote, q { quotes:none; }
q:before, q:after { content:'"'; }
a,a:link,a:visited,a:hover,a:active { 
	text-decoration:none; /* don't trust text-decoration:inherit for links */
}
input[type='submit'], input[type='reset'], input[type='button'], button, input.btn { 
	cursor:hand; cursor:pointer; 
}
textarea { overflow:auto; } /* prevent scrollbar on IE */
textarea { resize:none;   } /* prevent grip on Safari */

input[type='radio'], input[type='checkbox'], input.radio, input.checkbox { 
	float:left; clear:left; 
}
label { clear:left; }
label.fl { clear:none; }

fieldset, input, button, textarea, select, label, code, cite { 
	display:block; 
}
img, object, embed { 
	display:block; max-width:100%; 
}
p code, p img, p object, p embed { 
	display:inline; margin:0;
}

/* 
Prevent font sizes from exploding for these nested elements.  
Relevant for font sizes specified with percentages, ems, etc. 
*/
ul p, ol p, dl p,
ul ul, ul ol, ul dl,
ol ol, ol ul, ol dl,
dl dl, dl ul, dl ol,
td p, td ul, td ol, td dl,
ul pre, ol pre, dl pre, td pre { 
	font-size:100%; 
}

/*
------------------------------------------- 
	general utils  
------------------------------------------- 
*/
.hidden { display:none; }
.fixed { position:fixed; }
.centered { margin-left:auto; margin-right:auto; }
.flex			{ width:auto; }
.xHalf 			{ width:50%;  } /* CAREFUL with margins and padding */
.xOneThird 		{ width:33%;  } /* */
.xTwoThirds 	{ width:66%;  } /* */
.xThreeQuarters { width:75%;  } /* */
.cb { clear:both;  }
.cl { clear:left;  }
.cr { clear:right; }
.fl { float:left;  }
.fr { float:right; }
.graphic a 		{ display:block; }
.graphic span 	{ display:none;  } /* for image replacement */
.logo 			{ display:block; }

/* Clearfix by P.I.E. [ http://www.positioniseverything.net/easyclearing.html ] */
.clearfix:after { content:"."; display:block; clear:both; visibility:hidden; line-height:0; height:0; }
.clearfix { display:inline-block; }
html[xmlns] .clearfix { display:block; }
* html .clearfix { height:1%; }

/*
------------------------------------------- 
	generic structures 
------------------------------------------- 
*/
div.box,
div.box div.bd,
div.box div.hd,
div.box div.ft { 
	position:relative; overflow:hidden; 
}

.tier { 
	position:relative;
	overflow:hidden; 
	display:block; 
	clear:both;
	float:none;
}

ul.h 		{ overflow:hidden; }
ul.h > li 	{ float:left; display:inline; }
ul.h > li a { display:block; }

ul.h-c		{ text-align:center; }
ul.h-c > li { display:inline;    }

/* for centering block elements with arbitrary widths in a <ul> */
ul.h-c-blocks    { text-align:center; }
ul.h-c-blocks li { 
	vertical-align:top; display:-moz-inline-stack; display:inline-block; zoom:1; *display:inline; 
}

ul.stack > li a { display:block; }

/* 
a wrapper element (can, but does not have to, be a <div>) 
for gaining precise stylistic control of form input buttons
CAREFUL: remember to bind function (such as form submit) to .btn-wrap! 
*/
.btn-wrap { display:block; cursor:pointer; }
.btn-wrap input.btn { display:none; }

/*
------------------------------------------- 
	layout control
------------------------------------------- 
*/
html, body, #page, #main { height:100%; }

body { line-height:1.3; }

#page { width:1000px; margin:0 auto; }

#main { float:left; width:600px; margin:15px 0 0; }

#main-stack { float:right; width:500px; margin:0 14px 0 0; }

#sidebar { float:right; width:397px; }

/*
------------------------------------------- 
	base styles 
------------------------------------------- 
*/
body { font-family:Helvetica,Arial,sans-serif; background-color:#eeeeee; color:#000000; }

h1, h2, h3, h4, h5, h6 { text-transform:uppercase; font-weight:bold; }
h1 { font-size:280%; }
h2 { font-size:840%; }
h3 { font-size:200%; }
h4 { font-size:140%; }
h5 { font-size:130%; }
h6 { font-size:120%; }

p, ul, ol, dl, pre, table { 
	font-size:120%;
}

p, ul, ol, dl, pre, img, object, form, table { 
	margin:0 0 14px; 
}

blockquote p { 
	padding-left:2em; padding-right:2em; 
}

dl dt,
caption { }

a,a:link,a:visited { color:#a500ba; }
a:hover,a:active   { color:#888888; }

label {  }
input[type="text"],
input.txt { width:392px; }
select 	  { } /* <select> width needs to be nudged to match text inputs */
textarea  { width:392px; height:75px; }

input[type="text"],
input.txt,
textarea,
select { 
	padding:6px; border:3px solid #bebebe;
}
input[type="text"]:focus,
input.txt:focus,
textarea:focus { 
	border-color:#aaaaaa;
}

input[type='submit'], 
input[type='reset'], 
input[type='button'], 
button, 
input.btn { 
	padding:6px; border:3px solid #bebebe; color:#a500ba; text-transform:uppercase; font-weight:bold;
}
input[type='submit']:hover,
input[type='reset']:hover,
input[type='button']:hover,
button:hover,
input.btn:hover { 
	 color:#ffffff; background-color:#000000;
}

optgroup { font-weight:bold; text-transform:uppercase; }
option   { font-weight:normal; text-transform:none;    }

table { text-align:center; }
table caption { font-size:80%; margin-bottom:1px; }
table thead th,
table tfoot tr,
table tbody td { border:1px solid #aaaaaa; padding:2px 8px; }
table thead { font-weight:bold; background-color:#e5e5e5; }
table tfoot { text-align:left; }

hr { height:3px; color:#bebebe; background-color:#bebebe; }

/*
------------------------------------------- 
	 specifics
------------------------------------------- 
*/
body { background-image:url('library/graphics/ink-dots.png'); background-repeat:repeat-y; background-position:top center; }

#masthead { position:relative; background-image:url('library/graphics/masthead-gradient.png'); background-position:bottom center; margin:0 0 16px; }
#masthead h1 a { background-image:url('library/graphics/CTWW-title.png'); height:133px; margin:8px 0 0; }
#masthead #tagline { position:absolute; top:16px; right:0; width:284px; font-weight:bold; font-size:360%; }
#masthead ul#nav { text-transform:uppercase; font-weight:bold; font-size:300%; margin:6px 0 0; }
#masthead ul#nav > li > a { padding:4px 10px 0; }
#masthead ul#nav a, #masthead #nav a:link, #masthead #nav a:visited {
	color:#000000;
}
	.category-portfolio #masthead ul#nav li.portfolio a,
	.info #masthead ul#nav li.info a,
	.category-werks #masthead ul#nav li.werks a,
	.category-thesis #masthead ul#nav li.thesis a,
	.blog #masthead ul#nav li.blog a,
	.s-category-portfolio #masthead ul#nav li.portfolio a,
	.s-category-werks #masthead ul#nav li.werks a,
	.s-category-thesis #masthead ul#nav li.thesis a,
	.s-category-blog #masthead ul#nav li.blog a,
#masthead #nav a:hover, #masthead #nav a:active {
	color:#ffffff; background-color:#000000;
}

#main { background-image:url('library/graphics/main-col-gradient.png'); background-repeat:repeat-y; background-position:top right; }
#main h2.stack-title { float:left; width:64px; margin-left:8px; }
	.s-category-portfolio #main h2.stack-title,
	.category-portfolio #main h2.stack-title { height:481px; background-image:url('library/graphics/PORTFOLIO.png');  }
	.info #main h2.stack-title 		{ height:198px; background-image:url('library/graphics/INFO.png'); 		}
	.s-category-werks #main h2.stack-title,
	.category-werks #main h2.stack-title 	{ height:309px; background-image:url('library/graphics/WERKS.png'); 		}
	.s-category-thesis #main h2.stack-title,
	.category-thesis #main h2.stack-title	{ height:299px; background-image:url('library/graphics/THESIS.png'); 	}
	.s-category-blog #main h2.stack-title,
	.blog #main h2.stack-title 		{ height:236px; background-image:url('library/graphics/BLOG.png'); 		}

#main-stack > .box { margin-bottom:36px; }

.box { background-color:#fcfcfc; padding:16px 25px; }
.box,
.box > .bd { border:3px solid #bebebe; }
.box > .hd { padding:0 0 12px; }
.box > .bd { padding:12px 14px 0; }
.box > .ft { padding:16px 0 0; }

cite.meta { text-transform:uppercase; font-style:normal; font-weight:bold; }
.hd cite.date { position:absolute; top:0; right:0; font-size:200%; color:#bdbdbd; }
.ft cite.tags { text-align:center; font-size:140%; }

.post > .hd h3 { max-width:57%; }

.post img { height:auto !important; } /* prevent wordpress from distorting the images */

.stationary > .hd { text-align:center; }
.stationary > .bd { border-color:transparent; }

.contact .hd h4 { text-transform:none; font-weight:normal; }
.contact .hd h4 a, .contact .hd h4 a:link, .contact .hd h4 a:visited { color:#000000; }
.contact .hd h4 a:hover, .contact .hd h4 a:active { color:#888888; }
.contact form p { overflow:hidden; }
.contact form input.txt { font-size:200%; color:#a500ba; }
.contact form input.btn { float:right; }

#sidebar { border:3px solid #e8bfee; border-right:0; border-bottom:0; }
#sidebar .widget { padding:8px 45px 8px 8px; border-bottom:3px solid #e8bfee; }
#sidebar .widget > h3,
#sidebar .widget > ul { background-color:#f5f5f5; }
#sidebar .widget h3 { padding:16px 16px 0; }
#sidebar .widget ul { margin:0; padding:8px 36px; }
#sidebar #tags.widget > ul li { text-transform:uppercase; }

#sidebar a, #sidebar a:link, #sidebar a:visited {
	color:#888888;
}
#sidebar a:hover, #sidebar a:active {
	color:#a500ba;
}

.pagination a { text-transform:uppercase; font-weight:bold; font-size:140%; }

/*
------------------------------------------- 
	 fanciness
------------------------------------------- 
*/
.box, .bd, #sidebar, input, textarea { 
	-moz-border-radius:3px;
	-webkit-border-radius:3px;
}