/*  
Theme Name: ChaoticSoul
Theme URI: http://sandbox.avalonstar.com/
Description: A dark 2 column theme based off of a certain designer's old website. 
Version: 1.2-wpcom
Author: Bryan Veloso
Author URI: http://avalonstar.com/
Tags: dark, two columns, black, custom header, fixed width
*/


/*  -----|  Globals  |------------------------------------------------------  */

body { 
	background-color: #161410;
	color: #999;
	font: 62.5%/125% 'Trebuchet MS', Tahoma, Arial, Helvetica, sans-serif;
	margin: 0;
	padding: 0;
	}

/* hr { display: none; } */

.hr {
	background-color: #22201d;
	border: 1px solid #363430;
	height: 5px;
	margin: 5px 0;
	width: 758px;
	}
	
a:link, a:visited, a:active { color: #d8d7d3; text-decoration: none; }
a:hover { color: #fff; text-decoration: none; }

a img { border: 0; }

ul { list-style: none; }

input, textarea {
	color: #9c9890;
	font-size: 11px; 
	text-decoration: none; 
	background-color: #161410; 
	border: 1px solid #363430;
	padding: 5px;
	}
	
blockquote {
	background: #1b1814;
	padding: 1px 15px 5px;
	border-bottom: 1px solid #35302a;
}

ttable { width: 100%; border-collapse: collapse; }
	th { border-bottom: 1px solid #35302a; text-align: left; }

pre {
	padding: 5px 0;
	border-top: 1px dotted #35302a;
	border-bottom: 1px dotted #35302a;
}



/*  -----|  Structure  |----------------------------------------------------  */
	
#page {
	margin: 10px auto 5px;
	padding: 0;
	width: 760px;
	}
	
#header {
	text-align: center;
	}

#wrapper, #headerimg { width: 760px; position: relative; }

#header-overlay { 
	width: 760px;
	height: 60px;
	z-index: 5; 
	position: absolute;
	top: 0;
	left: 0;
	}
	
#footer {
	font-family: Arial, 'Times New Roman', serif; 
	color: #999;
	}
	
#sidebar { 
	border-left: 0px solid #363430;
	border-right: 1px solid #363430;
	padding: 5px; 
	overflow: hidden;
	float: right; 
	width: 150px; 
}
	#sidebar h3 { color: #bd934f; margin: 15px 0 5px; font-variant: small-caps; font-size: 14px; font-weight:bold; padding-bottom: 12px;}
	#sidebar h3 a { color: #bd934f; }
	#sidebar h4 { color: #bd934f; margin: 15px 0 5px; font-variant: small-caps; font-size: 12px; font-weight:bold; padding-bottom: 10px;}
	#sidebar h4 a { color: #bd934f; }
	#sidebar ul, #akismetwrap { margin: 0 0 10px; padding: 0; border-top: 1px solid #363430; border-bottom: 1px solid #363430; }
	#sidebar li, #akismetwrap { display: block; padding: 4px 10px; background: #22201d; margin: 1px 0; font-size: 12px; }
	#sidebar li:hover { background: #363430; }
	#sidebar ul ul { border: 0; margin: 0; list-style: disc; }
	#sidebar ul ul li:before { content: "\2022 \20"; }
	#sidebar ul ul li { margin: 0 -10px; }
	
.ataglance_entry { font-size: 1.1em; padding-top: 5px;}
.ataglance_title { color: #bd934f; margin: 15px 0 5px;  font-size: 14px; font-weight:bold;}


#content { 
	border-left: 1px solid #363430;
	border-right: 1px solid #363430;
	padding: 0 10px; 
	overflow: hidden;
	float: left; 
	font-size: 1.1em; 
	width: 567px;
	}
	
	#content h2 { margin: 0 0 0px; }
	#content h3 { color: #999; margin: 5px 0 5px; font-variant: small-caps; font-size: 20px; font-weight:bold;}
	#content h4 { color: #999; margin: 5px 0 5px; font-variant: small-caps; font-size: 14px; font-weight:bold;}
	#content p { line-height: 1.5em; }
	
#wide_content { 
	border-left: 1px solid #363430;
	border-right: 1px solid #363430;
	padding: 0 10px; 
	overflow: hidden;
	float: left; 
	font-size: 1.1em; 
	width: 737px;
	}
	
	#wide_content h2 { margin: 0 0 0px; }
	#wide_content h3 { color: #ccc; margin: 0px 0 0px; font-variant: small-caps; font-size: 22px; font-weight:bold;}
	#wide_content h4 { color: #ccc; margin: 5px 0 5px; font-variant: small-caps; font-size: 14px; font-weight:bold;}
	#wide_content p { line-height: 1.5em; }
	
		
#searchform { background: #22201d; padding: 10px; text-align: center; }
	#s { width: 160px; }
	
.goleft { float: left; }
.goright { float: right; }

ul.navigation { 
	border-top: 1px solid #363430; 
	border-bottom: 1px solid #363430; 
	}
	
	ul.navigation li { display: block; padding: 4px 10px; background: #22201d; margin: 1px 0; }
	ul.navigation li:hover { background: #363430; }

/* Post Structure */

.post { padding: 0px 0 0; }
	.widecolumn .post { padding: 0; margin: 0; }
	
.top { padding: 0px 0px 0px; background: #1b1814; margin-bottom: 15px; border-bottom: 1px solid #35302a; }
.lastfive { padding-left: 10px; padding-right: 10px; }
	.postmetadata { margin: 3px 0; padding: 0; }
	.postmetadata a { font-weight: bold; }
		#sidebar .postmetadata { line-height: 1.5em; }
	.continue { font-weight: bold; font-size: 1.3em; }
	
	.top .entry { font-size: 1.1em; padding: 5px;}
	.entrytext { padding: 0 0px 0; line-height: 2em; font-size: 1.1em; }
	
	.entrytext h2 { border-bottom: 1px solid #bd934f; display: block; }
	.entry ul, .entrytext ul { list-style-type: square; }
	
/* Comments Structure */

.comments { padding: 10px; margin-top: 15px; background: #1b1814; border-top: 1px solid #35302a; position: relative; }
	#commentform p { float: left; margin: 0 10px 10px 0; }
	
.commentlist { background: #1b1814; list-style: none; margin: 0; padding: 0; }
	.commentlist li { background: #161410; margin-top: 10px; padding: 5px 0 0; }
	.commentlist li p { padding: 5px 10px 0; margin: 0; }
	.commentlist li p.commentmetadata { border-bottom: 1px solid #35302a; background: #181612; padding: 5px 10px; margin-top: 10px; }
	
ul.archive { list-style: none; padding: 0; margin: 0 10px 25px; font-size: 1.3em; }	
ul.archive li { display: inline; }


/*  -----|  Typography  |---------------------------------------------------  */

h1, h2, h3, h4, h5, h6 { font-family: Arial, Georgia, 'Times New Roman', serif; font-weight: normal; }

h1 { text-transform: lowercase; color: #fff; font-size: 2em; margin: 0 0 8px; }
h1:before, h1:after { content: " . . "; color: #444; }
h1 span { color: #bd934f; }

h3 { text-transform: lowercase; color: #fff; font-size: 2em; margin: 0 0 8px; padding-top: 12px;  }
h3:after { content: " . . "; color: #444; }

h4 { text-transform: lowercase; color: #fff; font-size: 1.5em; margin: 0 0 8px; padding-top: 8px;  }
h4:after { content: " . . "; color: #444; }

h2 { color: #bd934f; font-size: 1.25em; line-height: 1.15em; margin: 0; padding: 1px 0; display: inline; border-bottom: 1px solid #35302a; }
	.post h2 a { color: #bd934f; }
	.post h2.first { font-size: 1.75em; 
	 }

	
	.widecolumn h2.title { 
		display: block; 
		padding: 13px 10px;
		background: #1b1814;
		margin: 0 0 15px; 
		border-bottom: 1px solid #35302a; 
		font-size: 1.75em; }

.description { color: #666; font-weight: bold; }

.comments h3 { margin: 0 0 10px 0; color: #bd934f; }



/*  -----|  Miscellaneous  |------------------------------------------------  */

.clearfix:after {
    content: "."; 
    display: block; 
    height: 0; 
    clear: both; 
    visibility: hidden;
}

.clearfix {display: inline-table;}

/* Hides from IE-mac \*/
* html .clearfix {height: 1%;}
.clearfix {display: block;}
/* End hide from IE-mac */

#sidebar li.linkcat { background-color: #161410; margin: 0; padding: 0; list-style: none;  }

.avatar { 
	margin: -26px 0 0;
	border: 1px solid #35302a;
	padding: 2px;
	float: right;
}

.navigation { 
	margin-top: 10px;
	padding: 10px;
	border-top: 1px solid #35302a;
	}
.navigation .left { float: left; }
.navigation .right { float: right; }

.authormeta {
	border-top: 1px solid #35302a;
	font-size: 10px;
	padding-top: 10px; 
	color: #fff;
	font-weight: bold;
}

#commentform #comment {
	width: 480px;
}

/* flickr widget color fixes */
#flickr_badge_wrapper {
	background-color: #161410 !important;
	border: none !important;
}

#flickr_badge_wrapper a {
	color: #d8d7d3 !important;
}
#flickr_badge_wrapper a:hover {
	color: #fff !important;
}

iframe{
	z-index:-1;
}

#thePortfolioFrame{
	Z-INDEX: -1; 
}


/* popup div */
#thePopup2 {
	position: absolute;
	left: 10px;
	top: 10px;
	visibility: hidden;
	width: 90%;
	height: 90%;
	background-color: #000;
	border: 1px solid #000;
	padding: 3px;
	Z-INDEX: 20003; 
}

#close {
	float: right;
}

DIV.translucent {
	FILTER: alpha(opacity=50); BACKGROUND-COLOR: #999; opacity: .5; -moz-opacity: .5
}
#thePopup {
	Z-INDEX: 20002; LEFT: 0px; VISIBILITY: hidden; WIDTH: 100%; POSITION: absolute; TOP: 0px; HEIGHT: 100%
}
#thePopup3 {
	BACKGROUND-POSITION: center center; Z-INDEX: 1003; LEFT: 0px; VISIBILITY: hidden; WIDTH: 80%; BACKGROUND-REPEAT: no-repeat; POSITION: absolute; TOP: 20px; HEIGHT: 80%
}

img.floatLeft { 
    float: left; 
    margin: 4px; 
}
img.floatRight { 
    float: right; 
    margin: 4px; 
}

/* ================================================================ 
This copyright notice must be untouched at all times.

The original version of this stylesheet and the associated (x)html
is available at http://www.cssplay.co.uk/menus/final_drop.html
Copyright (c) 2005-2007 Stu Nicholls. All rights reserved.
This stylesheet and the associated (x)html may be modified in any 
way to fit your requirements.
=================================================================== */
.menu {width:760px; height:32px; font-size:0.95em; position:relative; z-index:10000;border-right:1px solid #000; }
/* hack to correct IE5.5 faulty box model */
* html .menu {width:760px; w\idth:760px;}
/* remove all the bullets, borders and padding from the default list styling */
.menu ul {padding:0;margin:0;list-style-type:none;}
.menu ul ul {width:152px;}
/* float the list to make it horizontal and a relative positon so that you can control the dropdown menu positon */
.menu li {float:left;width:152px;position:relative;}
/* style the links for the top level */

.menu a, .menu a:visited {display:block; font-family:'Arial', 'Century Gothic', 'Trebuchet MS', Tahoma, Arial, Helvetica, sans-serif; font-size:12px; text-decoration:none; color:#aaa; width:138px; height:30px; border:1px solid #363430; border-width:1px 1px 1px 1px; background:#363430; padding-left:5px; padding-right:5px; line-height:29px; text-align:center;}



/* a hack so that IE5.5 faulty box model is corrected */
* html .menu a, * html .menu a:visited {width:152px; w\idth:138px;}

/* style the second level background */
.menu ul ul a.drop, .menu ul ul a.drop:visited {background:#d4d8bd url(http://www.cssplay.co.uk/graphics/drop.gif) bottom right no-repeat;}
/* style the second level hover */
.menu ul ul a.drop:hover{background:#c9ba65 url(http://www.cssplay.co.uk/graphics/drop.gif) bottom right no-repeat;}
.menu ul ul :hover > a.drop {background:#c9ba65 url(http://www.cssplay.co.uk/graphics/drop.gif) bottom right no-repeat;}
/* style the third level background */
.menu ul ul ul a, .menu ul ul ul a:visited {background:#e2dfa8;}
/* style the third level hover */
.menu ul ul ul a:hover {background:#b2ab9b;}


/* hide the sub levels and give them a positon absolute so that they take up no room */
.menu ul ul {visibility:hidden;position:absolute;height:0;top:31px;left:0; width:152px;border-top:1px solid #000;}
/* another hack for IE5.5 */
* html .menu ul ul {top:30px;t\op:31px;}

/* position the third level flyout menu */
.menu ul ul ul{left:152px; top:-1px; width:152px;}

/* position the third level flyout menu for a left flyout */
.menu ul ul ul.left {left:-152px;}

/* style the table so that it takes no ppart in the layout - required for IE to work */
.menu table {position:absolute; top:0; left:0; border-collapse:collapse;;}

/* style the second level links */
.menu ul ul a, .menu ul ul a:visited {background:#d4d8bd; color:#000; height:auto; line-height:1em; padding:5px 10px; width:128px;border-width:0 1px 1px 1px; font-family:'Trebuchet MS', Tahoma, Arial, Helvetica, sans-serif; font-size:12px; text-align:left }
/* yet another hack for IE5.5 */
* html .menu ul ul a, * html .menu ul ul a:visited {width:150px;w\idth:128px;}

/* style the top level hover */
.menu a:hover, .menu ul ul a:hover{color:#fff; background:#161410;}
.menu :hover > a, .menu ul ul :hover > a {color:#fff;background:#161410;}

/* make the second level visible when hover on first level list OR link */
.menu ul li:hover ul,
.menu ul a:hover ul{visibility:visible; }
/* keep the third level hidden when you hover on first level list OR link */
.menu ul :hover ul ul{visibility:hidden;}
/* make the third level visible when you hover over second level list OR link */
.menu ul :hover ul :hover ul{ visibility:visible;}