/*
Theme Name: danixd
Theme URI: http://danixd.com/templates/danixd
Description: HTML5 CSS3 template
Version: 1.0
Author: Dan O'Connell
Author URI: http://danixd.com
*/

/*Resets all margins + padding to zero*/
@import url('reset.css');

/*Import fonts*/
@font-face { font-family: Helvetica; src: url('HelveticaWorld-Regular.ttf'); }
@font-face { font-family: Helvetica_bold; src: url('HelveticaWorld-Bold.ttf'); }
@font-face { font-family: Helvetica_italic; src: url('HelveticaWorld-Italic.ttf'); }

/*set html styling, fixed background goes here*/
html{height: 100%;
	font-family: Verdana, Geneva, sans-serif;
	background: -webkit-gradient(linear, left top, left bottom, from(#FFF), to(#DDD));
	background: -moz-linear-gradient( 270deg, #FFF, #DDD);
	background-color: #DDD;
	background-position: fixed;
	background-repeat: no-repeat;
	overflow-y: scroll;
}
	
body{font-family: Helvetica; line-height: 14px; color: #333; font-size: 12px;}
	
/*typography*/

p{padding: 10px; font-family: Helvetica; color: #000; font-size: 12px; line-height: 14px; color: #333;}
a{display: inline; text-decoration:none; color: #880000; font-size: 12px; line-height: 12px;}
a:hover{color: #666;}

/*left/right text align*/
p.right{text-align: right;}
p.left{text-align: left;}
p.inline{display: inline;}
p.italic{font-family: Helvetica_italic;}
p.bold{font-family: Helvetica_bold;}

/*set text column number using p class="col2" etc*/
p.col2{-webkit-column-count: 2; -webkit-column-gap: 20px; -moz-column-count: 2; -moz-column-gap: 20px;}
p.col3{-webkit-column-count: 3; -webkit-column-gap: 20px; -moz-column-count: 3; -moz-column-gap: 20px;}
p.col4{-webkit-column-count: 4; -webkit-column-gap: 20px; -moz-column-count: 4; -moz-column-gap: 20px;}
p.col5{-webkit-column-count: 5; -webkit-column-gap: 20px; -moz-column-count: 5; -moz-column-gap: 20px;}
p.col6{-webkit-column-count: 6; -webkit-column-gap: 20px; -moz-column-count: 6; -moz-column-gap: 20px;}

h1, h2, h3, h4, h5{font-family: Visitor;}

/*Used for header, same as h2, for SEO and heirachy*/
h1{font-family: Helvetica_bold; font-size: 28px;padding: 10px 10px 0 10px; letter-spacing: -3px; text-shadow: 0 0 5px #EEE;}
h1 a{color: #000; font-family: Helvetica_bold; font-size: 28px;padding: 10px 0 0 0; letter-spacing: -3px; text-shadow: 0 0 5px #EEE;}
h1 a:hover{color: #88000;}
/*Used for titles in top of sections*/
h2{font-family: Helvetica_bold; font-size: 28px;padding: 10px 10px 0 10px; letter-spacing: -3px; text-shadow: 0 0 5px #EEE;}
h2 a{color: #000; font-family: Helvetica_bold; font-size: 28px;padding: 10px 0 0 0; letter-spacing: -3px; text-shadow: 0 0 5px #EEE;}
h2 a:hover{color: #88000;}
h3{}
/*Used for titles in front page boxes*/
h4{font-family: Helvetica_bold; font-size: 12px; padding: 5px 5px 1px 5px; letter-spacing: -1px; text-shadow: 0 0 2px #EEE;}
/*Used for additional content in posts in .links class*/
h5{font-family: Helvetica_bold; font-size: 12px; padding: 5px 0 5px 0; text-shadow: 0 0 1px #EEE; }

/*Key page elements*/
section { opacity: 1; margin: 0 10px; float: left; width: 150px;  background-color: #FFF; padding: 2px 0 0 0; -webkit-border-radius: 10px; -moz-border-radius: 10px; -webkit-box-shadow: 0px 0px 10px #CCC; -moz-box-shadow: 0px 0px 10px #CCC; }
section:hover{-webkit-box-shadow: 0px 0px 10px #880000; -moz-box-shadow: 0px 0px 10px #880000;}
section:hover h2:after{ content: "+"; }	
section:hover h2{color: #880000; }
section:hover h2 a{color: #880000; }

section:hover h1:after{ content: "+"; }	
section:hover h1{color: #880000; }
section:hover h1 a{color: #880000; }

section p{overflow: hidden; }


	
article {z-index: 2; float: left; overflow: hidden; position: relative; -webkit-transition: -webkit-transform 0.2s ease-in-out; -moz-transition: -moz-transform 2s ease-in-out; }

nav{}

footer{height: 50px; clear: both; float: left; font-weight: bold; margin: 100px 0 0 7px;}

/*content container*/
#container { margin: 50px auto 0 auto; padding: 0; width: 870px;}

/*section ID's for front page*/
#nav{}
#twitter{}
#blog{}
#projects{}
#nav{}

/*Section ID for single.php*/
#single{width: 480px; border-right: 10px solid #FFF;}
#single p{padding: 10px 0 10px 10px!important;}
#single img{margin: 0px;}
#single:hover img{}

/*Section ID for categories*/
#category{width: 490px;}
#category img{margin: 10px; width: 470px; opacity: 0.75;}
#category img:hover{opacity: 1;}

#category:hover h2:after{ content: ""; }	
#category:hover h2{color: #000; }
#category:hover h2 a{color: #000; }

#category h2 a:hover:after{ content: "+"; }	
#category h2:hover{color: #880000; }
#category h2 a:hover{color: #880000;}

.category_image{max-width: 470px; max-height: 150px; margin: 10px; margin: 10px; overflow: hidden;}
.category_image img{margin: 0 !important; }


/*404 Page*/
#missing{height: 470px; width: 470px; display: block; background-color: transparent; background-position: center;
background-image: -webkit-gradient(radial,235 50%,200,235 50%,200,from(#880000),color-stop(65%, #000),to(rgba(255,255,255,0)));
-webkit-transition: -webkit-transform 10s ease-in-out;	}
section:hover #missing{-webkit-transform: scale(2.5);}

/*Post link div*/
.links{width: 275px; margin: 0 0 10px 10px;}
.links ul{margin-left: 20px; list-style: disc;}


/*Getting rid of image borders*/
img, img a, img:hover. img a:hover{border: none; outline: none; } 

/*structure is the top items on the front page (so they won't class switch, plus can set a height for interface balancing if needed*/
.structure{}

/* all front page articles styled with .main class */
.main{background-color:#999; opacity: 0.25; margin: 0 0 10px 10px; height: 140px; width: 130px; }
.main:hover{background-color:#880000;}
.main img{max-width: 810px;}

/*links in content on front page hidden until it has been clicked on, prevents users clicking on links and the class not switching*/
.main a{visibility: hidden;}

/*jquery class selector list, goes from a_ to b_*/
.a_twitter{}
.a_blog{}
.a_projects{}

/*Wordpress Gallery Padding*/
.gallery{margin-left: 8px !important; width: 479px;}

/*jquery class animations (switches with selector classes*/
.b_twitter{width: 810px; border: 10px solid #FFF; height: 120px; -webkit-transform: translate(-180px, 0) !important; -moz-transform: translate(-180px, 0) !important; }
.b_blog{width: 810px; border: 10px solid #FFF; height: 120px; -webkit-transform: translate(-350px, 0) !important; -moz-transform: translate(-350px, 0) !important;}
.b_projects{width: 810px; border: 10px solid #FFF; height: 120px; -webkit-transform: translate(-520px, 0) !important; -moz-transform: translate(-520px, 0) !important;}


/*makes the hidden section and links inside visible when the classes are switch in jquery*/
.b_twitter a, .b_blog a, .b_projects a{visibility: visible;}
.b_twitter .hidden, .b_blog .hidden, .b_projects .hidden{display: block; position: absolute; bottom: 0px;}
.b_twitter, .b_blog, .b_projects{background-color: #EEE !important; z-index: 10; color: #FFF; position: relative; -webkit-border-radius: 10px; -webkit-box-shadow: 0px 0px 10px #880000; -moz-border-radius: 10px; -moz-box-shadow: 0px 0px 10px #880000;}
.b_twitter img, .b_blog img, .b_projects img{max-width: 810px;}

/*Twitter bar stye*/
.twitter p{ padding: 0; color: #000; font-family: Helvetica_bold; font-size: 60px; text-shadow: 0 0 5px #000; line-height: 20px; letter-spacing: 1px;}
.twitter a{ visibility: none; padding: 0; color: #000; font-family: Helvetica_bold; font-size: 60px; text-shadow: 0 0 5px #000; line-height: 20px; letter-spacing: 1px;}
.main:hover .twitter p{color: #DDD;}
.twitter:hover a{color: #DDD;}
.twitter:hover .twitter a{color: #DDD;}
.main:hover .twitter a{color: #DDD;}

/*Hidden class gets shown on click using jquery*/
.hidden {margin:10px 0 10px 10px; display: none; width: 790px; height: 50px; padding: 0px; color: #000; overflow: hidden; background-color: #FFF; opacity: 0.9; z-index: 3; -webkit-border-radius: 5px; -moz-border-radius: 5px; }
.hidden p{color: #000; font-size: 12px; line-height: 14px; padding: 5px;}
.hidden a{font-size: 12px; line-height: 14px;}

/*Title gets hidden when shown on click*/
.title { max-height: 30px; border-bottom: 5px solid #FFF; margin: 10px; position: absolute; background-color: #FFF; color: #000; z-index: 105; opacity: 0; overflow: hidden; -webkit-border-radius: 5px; -moz-border-radius: 5px; }
.main:hover .title{opacity: 1 !important;}


/*Standard classes for use with breaks and type*/
.clear{clear: both;}
.fright{float: right;}
.fleft{float: left;}
.spacer{min-height: 45px;}

/*form styling*/
nav input{height: 20px; margin: 0 0 10px 10px; border: solid 1px #666; width: 130px; font-family: Helvetica; font-size: 12px; line-height: 8px; color: #000; color: #333;}
nav input::-webkit-input-placeholder {}
nav input::-moz-input-placeholder {}
nav input:focus{border: solid 1px #880000;}

/*highlight styling*/
::selection {background-color: #880000; color:#FFF;}
::-moz-selection {background-color: #880000; color:#FFF;}


/*Sharebuttons div padding*/
.dd_buttons{padding: 10px 5px 30px 5px;}