/*
© Cameron Steele 2010
*/

html {
    height: 100%;
}

body {
    height: 100%;
	background: url(/images/seriousbottomtile.png);
    margin: 0px;
    color: #b8aa9c;
}

img {
    border: 0px;
}

/*********************************
************************************
************* WRAPPERS
************************************
**********************************/
#topgradient {
    background: url(/images/tile2gradient.png) repeat-x top left;
}

#bottomgradient{
	background: url(/images/bottombggradient.png) repeat-y top left;
	padding: 0px 0px 10px
}

#pagewrapper {
    background: url(/images/tile2gradient.png) repeat-x top left;
	padding: 0px;
}

#headerwrapper {
    margin: 0px auto;
    width: 900px;
    padding: 0px;
}

#newswrapper {
    margin: 0px auto;
    width: 900px;
    padding: 0px;
	
}

#blogwrapper {
    margin: 0px auto;
    width: 900px;
    padding: 0px;
}

#abyss {
    background: #B0A578 url(/images/tile2_var.png) left top;
}

/*********************************
************************************
************* GENERAL
************************************
**********************************/

/********************
Header
********************/

#headerwrapper a:link, #headerwrapper a:visited {
    text-decoration: none;
    color: #f6dcff;
}

#headerwrapper a:hover {
    text-decoration: none;
    color: #CAFA72;
    background-color: #381f0c;
}

#headerwrapper a:active {text-decoration: none; color: #CEB39F;}

#headerwrapper h1 {
    margin: 2px 0px 0px 5px;
    font-family: "Lucida Console", Monaco, monospace;
	font-size: 40px;
}

#headerwrapper h1 a:link, #headerwrapper h1 a:visited, #headerwrapper h1 a:active {
    font-size: 40px;
    color: #98aeec;
}

#headerwrapper h1 a:hover {font-size: 40px; color: #b0e8b0; background: none;}

/********************
News
********************/

#newswrapper a:link, #newswrapper a:visited {
    text-decoration: none;
    color: #AAB48D;
}

#newswrapper a:hover {
    text-decoration: none;
    color: #CAFA72;
    background-color: #381f0c;
}

#newswrapper a:active {text-decoration: none; color: #CEB39F;}

#newswrapper h1 {
    margin: 0px 0px 0px 5px;
    font-family: "Lucida Console", Monaco, monospace;
}

#newswrapper h1 a:link, #newswrapper h1 a:visited, #newswrapper h1 a:active {
    font-size: 40px;
    color: #4c4644;
}

#newswrapper h1 a:hover {font-size: 40px; background-color: #20201d;}

/**********
Footer
**********/

#footer {
    width:800px;
    padding: 3px 0px 0px;
    margin: 0px auto 0px;
    text-align: center;
    font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
    color: #000;
    font-size: x-small;
	height: 60px;
/*	border: solid #3e3745;
    border-width: 0px 1px 1px;
	background-image: url(/images/footerbg.png) #4c4644; */

}

#footerwrapper {
	width: 100%;
	background: url(/images/bottomtile.png) repeat-x;
	height: 91px;
	
}

#badges {margin: 5px 20px 0px 0px; float: right;}

/********************
Blog
********************/

#blogwrapper a:link, #blogwrapper a:visited {
    text-decoration: none;
    color: #AAB48D;
}

#blogwrapper a:hover {
    text-decoration: none;
    color: #CAFA72;
    background-color: #381f0c;
}

#blogwrapper a:active {text-decoration: none; color: #CEB39F;}

#blogwrapper h1 {
    margin: 0px 0px 0px 5px;
    font-family: "Lucida Console", Monaco, monospace;
}

#blogwrapper h1 a:link, #blogwrapper h1 a:visited, #blogwrapper h1 a:active {
    font-size: 40px;
    color: #4c4644;
}

#blogwrapper h1 a:hover {font-size: 40px; background-color: #20201d;}



/*********************************
************************************************************************
************* HEADER
************************************************************************
**********************************/

#headerwrapper #userwrapper {
    width:95%;
    margin: 0px auto;
    height:20px;
    font:small Verdana, Geneva, sans-serif;
}

#headerwrapper #usermessage{float:left; padding: 5px 10px 2px; color: #8C8C88;}

#headerwrapper #userpanel{float:right;}

#headerwrapper #menu {
    width: 95%;
    height: 25px;
    font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
    color: #252035;
    font-weight: bold;
    font-size: small;
 
    padding: 0px;
    margin: 0px auto;
    border: solid #20201d;
	border-width: 1px 1px 0px;
    overflow: hidden;
}

#headerwrapper #navigationmenu {float: left; margin: 3px 10px;}

#headerwrapper #socialmenu {
    height: 100%;
    background: url(/images/socialbg.png);
    float: right;
    border: solid #20201d;
    bottom: 0px;
    border-width: 1px 1px 0px;
    padding: 3px 5px 3px;
    margin: 3px 10px 0px;
}

#headerwrapper #banner {
    height: 60px;
    width: 900px;
    float: left;
    background-image: url(/images/tilegradient.png);
    background-position: left top;
    margin: 0px 100px 0px 0px;
    padding: 0px;
    border: 1px solid #20201d;
}

#headerwrapper #heading {float: left; z-index: 1; position: relative; width: 600px;}
#headerwrapper #headingnegative {position:absolute; left: -1px; top: 1px; color:#e48fcf; z-index: 0;}
#headerwrapper #headingpositive {position:absolute; left: 1px; top: -1px; color:#9ef99b; z-index: 1;}
#headerwrapper #headingmain {position:absolute; left: 0px; top: 0px; z-index:2;}

#headerwrapper #version {
    float: right;
    padding: 5px;
    color: #d3a7c9;
    font-size:small;
}

#headerwrapper #bgpatch {
    clear: left;
    height: 20px;
    border-style: solid;
    border-width: 0px;
    margin: 0px;
    padding: 0px;
}


/*********************************
************************************************************************
************* NEWS
************************************************************************
**********************************/

#newswrapper #content {
	background:url(../images/contentsides.png) bottom left repeat-y;
	padding: 5px 0px 0px;
	border: #393450 solid;
	border-width: 1px 0px 0px;
}

#newswrapper #contentbottom {
	background: url(../images/contentbottom.png);
	width: 100%;
	height: 80px;
}

#newswrapper #contenttop {
	background: url(../images/contenttopgradient.png) repeat-x;
	width: 100%;
	height: 14px;
	border: #31423f solid;
	border-width: 0px 0px 1px;
}

#newswrapper #contentwrapper {
    border: #381f0c solid;
    border-width: 1px;
    padding: 0px;
}

#newswrapper #contentwrapperwrapper {
	background:url(../images/contenttile.png) repeat;
}

#newswrapper #bgbottom {

	
}


/* News Item */
#newswrapper .itemwrapper { width: 620px; margin: 10px auto 0px; padding: 30px 0px 20px; }

#newswrapper .category {
    width: 30%;
    float:left;
    background-color: #554242;
    color: #999;
    font: bold medium "Trebuchet MS", Arial, Helvetica, sans-serif;
    text-align: center;
    margin: 0px 20px;
    padding: 0px 10px;
    border: solid #20201d;
    border-width: 1px 1px 0px;
}

#newswrapper .item {
    background: url("/images/tilegradient3.png") repeat-x bottom left;
    background-color: #4c4644;
	border: 1px solid #20201d;
    clear:left;
    height: 300px;
    width: 100%;
    font: small "Trebuchet MS", Arial, Helvetica, sans-serif;
    text-align: left;
}

#newswrapper .date {
    height: 30px;
    margin: 0px 0px 0px;
    padding: 5px 20px 5px;
    text-align: right;
    font: bold large monospace;
    color: #accadb;
    background: url("/images/tilegradient2.png");
}

#newswrapper .dateshadow {
	position: absolute;
	left: -1px;
}

#newswrapper .itemleft {width: 318px; float: left; padding: 0px; overflow: visible; background: url("/images/itemleftbg.png")}

#newswrapper .iteminfo {height: 150px; padding: 0px 10px; margin: 5px 0px 0px; overflow: hidden;}

#newswrapper .itemlink {
    width: 150px;
    background: #3e3b5a;
    font: bold medium "Courier New", monospace;
    padding: 20px 0px;
    margin: 0px auto 0px;
    text-align: center;
    border: 1px solid #20201d;
}

#newswrapper .itemright {width: 300px; float: right; border: solid #46165A; border-width: 0px 0px 0px 1px;}

#newswrapper .itemimage {
}

#newswrapper .playerwrapper {margin: -24px 10px 0px;}

#newswrapper .titlediv {
    clear: left;
    width: 60%;
    float:left;
    background-color: #403232;
    margin: 20px 20px 0px;
    padding: 5px 5px 2px;
    border: solid #20201d;
    border-width: 1px 1px 0px;
}

#newswrapper .title {
    color: #999;
    font: small "Trebuchet MS", Arial, Helvetica, sans-serif;
    text-transform: uppercase;
}

#newswrapper .itemlicense {width: 88px; height: 31px; float: right; margin: -5px 10px 0px;}

#newswrapper #feedfadein {
    clear: both;
    height: 20px;
    background: url(/images/feedbg_in.png);
	border: #884311 solid;
	border-width: 0px 1px;
	margin: 0px auto;
	width: 850px;
}

#newswrapper #feed {
    width: 850px;
	height: 16px;
    text-align: center;
    background: url(/images/feedbg.png);
    padding: 0px 0px 0px;
    margin: 0px auto 20px;
	border: #884311 solid;
	border-width: 0px 1px 1px;
}


/*********************************
************************************************************************
************* BLOG
************************************************************************
**********************************/



/**********
Links, H1, Fonts
**********/

#blogwrapper a:link, #blogwrapper a:visited {
    text-decoration: none;
    color: #AAB48D;
}

#blogwrapper a:hover {
    text-decoration: none;
    color: #CAFA72;
    background-color: #381f0c;
}

#blogwrapper a:active {text-decoration: none; color: #CEB39F;}

#blogwrapper h1 {
    margin: 0px 0px 0px 5px;
    font-family: "Lucida Console", Monaco, monospace;
}

#blogwrapper h1 a:link, #blogwrapper h1 a:visited, #blogwrapper h1 a:active {
    font-size: 40px;
    color: #4c4644;
}

#blogwrapper h1 a:hover {font-size: 40px; background-color: #20201d;}

#blogwrapper .blogcategory {font-size: x-small; font-family: monospace;}


/**********
Header
**********/

#blogwrapper #userwrapper {
    width:95%;
    margin: 0px auto;
    height:20px;
    font:small Verdana, Geneva, sans-serif;
}

#blogwrapper #usermessage{float:left;}

#blogwrapper #userpanel{float:right;}

#blogwrapper #menu {
    width: 95%;
    height: 25px;
    font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
    color: #252035;
    font-weight: bold;
    font-size: small;
    background-color: #4c4644;
    padding: 0px;
    margin: 0px auto;
    border: 1px solid #20201d;
    overflow: hidden;
}

#blogwrapper #navigationmenu {float: left; margin: 3px 10px;}

#blogwrapper #socialmenu {
    height: 100%;
    background: url(/images/socialbg.png);
    float: right;
    border: solid #20201d;
    bottom: 0px;
    border-width: 1px 1px 0px;
    padding: 3px 5px 3px;
    margin: 3px 10px 0px;
}

#blogwrapper #banner {
    height: 60px;
    width: 900px;
    float: left;
    background-image: url(/images/tilegradient.png);
    background-position: left top;
    margin: 0px 100px 0px 0px;
    padding: 0px;
    border: 1px solid #20201d;
}

#blogwrapper #heading {float: left;}

#blogwrapper #version {
    float: right;
    padding: 5px;
    color: #5e594c;
    font-size:small;
}

#blogwrapper #bgpatch {
    clear: left;
    height: 20px;
    border-style: solid;
    border-width: 0px;
    margin: 0px;
    padding: 0px;
}


/**********
Content
**********/

#blogwrapper #content {
    text-align: center;
    background-color: #534741;
    border: #381f0c solid;
    border-width: 1px;
    padding: 5px 0px 0px;
}


/* Entry */
#blogwrapper .entrywrapper {
    clear: left;
    width: 90%;
    margin: 10px auto 0px;
    padding: 10px;
    background-color: #4c4644;
    border: 1px solid #20201d;
}

#blogwrapper .entry {
    width: 95%;
    margin: 0px auto;
    font: small "Trebuchet MS", Arial, Helvetica, sans-serif;
    text-align: left;
}

#blogwrapper .entrydate {
    width: 30%;
    float:left;
    background-color: #554242;
    color: #999;
    font: small "Trebuchet MS", Arial, Helvetica, sans-serif;
    text-align: center;
    margin: 0px 20px 20px;
    padding: 0px 10px;
    border: solid #20201d;
    border-width: 1px;
}

#blogwrapper #feedfadein {
    clear: both;
    height: 20px;
    background: url(/images/feedbg_in.png);
}

#blogwrapper #feed {
    width: 100%;
    background: url(/images/feedbg.png);
    padding: 0px 0px 3px;
    margin: 0px auto 0px;
}

/*********************************
************************************************************************
************* PROJECTS
************************************************************************
**********************************/

#projectswrapper { width:600px; }

.album {
	width: 600px;
	margin: 5px auto;
	padding: 10px;
	background: url("/images/itemleftbg.png");
	}
	
.cover {
	float: right;
}

.lyrics {
	font-size: 10px;
}

/*********************************
************************************************************************
************* ADMIN
************************************************************************
**********************************/

#editing {
	width:600px;
	margin: 5px auto 0px;
	padding: 10px;
	background: #67776b;
}