/* @override 
	http://kharmik.com/wp-content/themes/midnight/css/main.css
	http://kharmik.sucrose/wp-content/themes/midnight/css/main.css
*/

/*
------------------------------------------------------------------------ 
This is the main stylesheet for the 2007 kharmik design, "midnight".

The graphics and design are Copyright © 2007 Kharmik. Original site 
design by Jon Reese. Code authoring by and Copyright © Joel Schou and 
Fuzzy Coconut. Reproducing the design in whole or part is strictly 
prohibited. However, creative inspiration is wonderful and inevitable. 
Contact us at kharmik.com/contact

Feel free to learn from the CSS. Copying all or part is not only shallow,
but completely useless if you want to actually learn CSS. Please respect
our hard work and only use my code for reference. We will gladly answer
your questions. Contact us at fuzzycoconut.com/contact
-----------------------------------------------------------------------
*/

* {
	margin: 0;
	padding: 0;
}

html {
	height: 100%;
}

body {
	height: 100%;
	color: #fff;
	font: 12px/18px Helvetica, Arial, sans-serif;
	text-shadow: 0 0 0 #000;
	background: #000;
}

#wrapper {
	position: relative;
	height: auto !important;
	height: 100%;
	min-height: 100%;
}

/* ######### header region ######### */
#header {
	/*position: fixed !important;*/
    position: absolute;
	width: 100%;
	z-index: 0;
}

#header h1 {
	position: fixed !important;
    position: absolute;
	top: 0;
	right: 0;
	width: 269px;
	height: 293px;
	text-indent: -200px;
	background: url(../img/h1.png) 100% 0% no-repeat;
	overflow: hidden;
}
div.narrow h1 {
	right: auto;
	left: 700px;
}

/* ========= nav bar ========= */
#header ul {
    position: absolute;
    top: 134px;
    left: 0;
	margin: 0 0 0 0;
	width: 230px;
	text-transform: lowercase;
	list-style: none;
}

/* --------- list items --------- */
#header li {
	height: 25px;
}

li#accessible {
	position: absolute;
}

/* --------- links --------- */
#header li a {
	display: block;
    width: 230px;
	/*text-indent: 153px;*/
	text-indent: 148px;
	text-decoration: none;
	border-top: 4px solid #000;
	border-bottom: 4px solid #000;
}

li#accessible a {
	position: absolute;
	top: -999px;
}
li#accessible a:active {
	top: 10px;
	left: 10px;
}

li#nav1 a { color: #ff9900; background: #ff9900 url(../img/nav.gif) 0% 50% repeat-x; }
li#nav2 a { color: #ba0001; background: #ba0001 url(../img/nav.gif) 0% 50% repeat-x; }
li#nav3 a { color: #ba01ff; background: #ba01ff url(../img/nav.gif) 0% 50% repeat-x; }
li#nav4 a { color: #01a0c7; background: #01a0c7 url(../img/nav.gif) 0% 50% repeat-x; }
li#nav5 a { color: #73bd1e; background: #73bd1e url(../img/nav.gif) 0% 50% repeat-x; }
li#backone a { color: #878787; background: #878787 url(../img/less.gif) 119px 50% repeat-x; margin-top: 12px; }

li a:hover { outline: none; }

li#nav1 a:hover { color: #000; background: #ff9900 url(../img/nav-hover.gif) 0% 50% repeat-x; }
li#nav2 a:hover { color: #000; background: #ba0001 url(../img/nav-hover.gif) 0% 50% repeat-x; }
li#nav3 a:hover { color: #000; background: #ba01ff url(../img/nav-hover.gif) 0% 50% repeat-x; }
li#nav4 a:hover { color: #000; background: #01a0c7 url(../img/nav-hover.gif) 0% 50% repeat-x; }
li#nav5 a:hover { color: #000; background: #73bd1e url(../img/nav-hover.gif) 0% 50% repeat-x; }
li#backone a:hover { color: #000; background: #878787 url(../img/less-hover.gif) 119px 50% repeat-x; }

/* --------- current section --------- */
.home li#nav1 a,
.work li#nav2 a,
.clients li#nav3 a,
.blog li#nav4 a,
.contact li#nav5 a {
	background-position: 86px 50%;
}

/* ######### content region ######### */
#content {
	position: relative;
    left: 260px;
	margin: 0 0 0 0;
	padding: 134px 0 80px 0;
	width: 421px;
}

/* ========= section styles ========= */
#content a {
	padding: 3px 1px 1px 1px;
	text-decoration: none;
}
#content a.flip {
	padding-right: 25px;
	background: url(../img/flip.gif) 100% 50%;
	white-space: nowrap;
	outline: none;
}
#content a.more,
#content .moreless a {
	padding-right: 25px;
	background: url(../img/more.gif) 100% 50%;
	white-space: nowrap;
}
#content a.less,
#content .moreless span a {
	padding-right: 1px;
	padding-left: 25px;
	background: url(../img/less.gif) 0% 50%;
	white-space: nowrap;
}
#content a.flip:hover {
	background: url(../img/flip-hover.gif) 100% 50%;
}
#content a.more:hover,
#content .moreless a:hover {
	background: url(../img/more-hover.gif) 100% 50%;
}
#content a.less:hover,
#content .moreless span a:hover {
	background: url(../img/less-hover.gif) 0% 50%;
}

/* --------- open/close links --------- */
#content a.unflip {
	padding-right: 25px;
	background: url(../img/unflip.gif) 100% 50%;
	white-space: nowrap;
	outline: none;
}
#content a.unflip:hover {
	background: url(../img/unflip-hover.gif) 100% 50%;
}

/* --------- normal links --------- */
.home #content a, #content .home a { color: #ff9900; }
.home #content a.flip, #content .home a.flip,
.home #content a.unflip, #content .home a.unflip,
.home #content a.more, #content .home a.more,
.home #content a.less, #content .home a.less,
.home #content .moreless a, .home #content .moreless span a { background-color: #ff9900; }

.work #content a, #content .work a { color: #ba0001; }
.work #content a.flip, #content .work a.flip,
.work #content a.unflip, #content .work a.unflip,
.work #content a.more, #content .work a.more,
.work #content a.less, #content .work a.less,
.work #content .moreless a, .work #content .moreless span a { background-color: #ba0001; }

.clients #content a, #content .clients a { color: #ba01ff; }
.clients #content a.flip, #content .clients a.flip,
.clients #content a.unflip, #content .clients a.unflip,
.clients #content a.more, #content .clients a.more,
.clients #content a.less, #content .clients a.less,
.clients #content .moreless a, .clients #content .moreless span a { background-color: #ba01ff; }

.blog #content a, #content .blog a { color: #01a0c7; }
.blog #content a.flip, #content .blog a.flip,
.blog #content a.unflip, #content .blog a.unflip,
.blog #content a.more, #content .blog a.more,
.blog #content a.less, #content .blog a.less,
.blog #content .moreless a, .blog #content .moreless span a { background-color: #01a0c7; }

.contact #content a, #content .contact a { color: #73bd1e; }
.contact #content a.flip, #content .contact a.flip,
.contact #content a.unflip, #content .contact a.unflip,
.contact #content a.more, #content .contact a.more,
.contact #content a.less, #content .contact a.less,
.contact #content .moreless a, .contact #content .moreless span a { background-color: #73bd1e; }

/* --------- visited links --------- 
.home #content a:visited, #content .home a:visited { color: #ffcc80; }
.home #content a.flip:visited, #content .home a.flip:visited,
.home #content a.unflip:visited, #content .home a.unflip:visited,
.home #content a.more:visited, #content .home a.more:visited,
.home #content a.less:visited, #content .home a.less:visited { background-color: #ffcc80; }

.work #content a:visited, #content .work a:visited { color: #ba5d5d; }
.work #content a.flip:visited, #content .work a.flip:visited,
.work #content a.unflip:visited, #content .work a.unflip:visited,
.work #content a.more:visited, #content .work a.more:visited,
.work #content a.less:visited, #content .work a.less:visited { background-color: #ba5d5d; }

.clients #content a:visited, #content .clients a:visited { color: #dd80ff; }
.clients #content a.flip:visited, #content .clients a.flip:visited,
.clients #content a.unflip:visited, #content .clients a.unflip:visited,
.clients #content a.more:visited, #content .clients a.more:visited,
.clients #content a.less:visited, #content .clients a.less:visited { background-color: #dd80ff; }

.blog #content a:visited, #content .blog a:visited { color: #63b3c7; }
.blog #content a.flip:visited, #content .blog a.flip:visited,
.blog #content a.unflip:visited, #content .blog a.unflip:visited,
.blog #content a.more:visited, #content .blog a.more:visited,
.blog #content a.less:visited, #content .blog a.less:visited { background-color: #63b3c7; }

.contact #content a:visited, #content .contact a:visited { color: #98bd6d; }
.contact #content a.flip:visited, #content .contact a.flip:visited,
.contact #content a.unflip:visited, #content .contact a.unflip:visited,
.contact #content a.more:visited, #content .contact a.more:visited,
.contact #content a.less:visited, #content .contact a.less:visited { background-color: #98bd6d; }*/

/* --------- hover links --------- */
.home #content a:hover, #content .home a:hover { color: #000; background-color: #ff9900; }
.work #content a:hover, #content .work a:hover { color: #000; background-color: #ba0001; }
.clients #content a:hover, #content .clients a:hover { color: #000; background-color: #ba01ff; }
.blog #content a:hover, #content .blog a:hover { color: #000; background-color: #01a0c7; }
.contact #content a:hover, #content .contact a:hover { color: #000; background-color: #73bd1e; }

/* --------- active links --------- */


/* ========= page items ========= */
h2 {
	margin: 0 0 0 0;
	font-size: 24px;
	line-height: 36px;
	font-weight: normal;
}
#content h3 {
	margin: 6px 0;
	font-size: 18px;
	line-height: 27px;
	font-weight: normal;
}
#content h4 {
	margin: 6px 0;
	font-size: 16px;
	line-height: 24px;
	font-weight: normal;
}
#content h5 {
	margin: 6px 0;
	font-size: 14px;
	line-height: 21px;
	font-weight: bold;
}
#content h6 {
	margin: 6px 0;
	font-size: 12px;
	line-height: 18px;
	font-weight: bold;
}

#content p {
	padding: 6px 0 12px 0;
}
#content div div p {
	overflow: auto;
}
#content p.details {
	padding: 5px 0;
	color: #b7b7b7;
	background: url(../img/li.gif) repeat-x;
	clear: both;
}
#content p.details em {
	font-style: normal;
	color: #fff;
}
.clients #content p {
	background: url(../img/li.gif) 0 100% repeat-x;
}

#content blockquote {
	margin: -3px 0 3px 0;
	padding-left: 10px;
	color: #b7b7b7;
	border-left: 2px solid #333;
}
#content blockquote p {
	padding: 9px 0;
}

#content ins {
	text-decoration: none;
	border-bottom: 1px solid #777;
}
#content del {
	color: #777;
}
#content cite,
#content abbr,
#content acronym,
#content dfn {
	text-decoration: none;
	border-bottom: 1px dotted #777;
}

#content ul, #content ol {
	padding: 6px 0 12px 0;
	position: relative;
	color: #b7b7b7;
}
#content ul li, #content ol li {
	position: relative;
}

.clients #content ul {
	overflow: hidden;
	background: url(../img/li.gif) 0 100% repeat-x;
}
.clients #content ul li {
	position: relative;
	padding-right: 25px;
	float: left;
	color: #fff;
	white-space: nowrap;
}

#content code {
	font: 10px/18px Monaco, Courier, 'Courier New', monospace;
	color: #ffff3f;
}
#content pre {
	padding-bottom: 12px;
	margin-bottom: 12px;
	width: 421px;
	font: 10px/18px Monaco, Courier, 'Courier New', monospace;
	color: #ffff3f;
	overflow: auto;
}


/* ========= item lists ========= */
#content ul.items {
	margin: 0 0 18px 0;
	list-style: none;
	color: #fff;
}

#content ul.items li {
	padding: 0;
    width: 100%;
	background: url(../img/li.gif) repeat-x;
}

/* --------- headlines/links --------- */
#content ul.items h4 {
	margin: 0;
	padding: 5px 0;
	font-size: 13px;
	line-height: 13px;
	font-weight: normal;
}
ul.items h4 a {
	display: block;
	padding: 0 1px;
    height: 100%;
}
ul.items h4 span.date {
	display: inline;
	float: left;
	width: 80px;
}
ul.items h4 span.type {
	display: inline;
	float: left;
	width: 80px;
}

/* ========= moreless pagination links ========= */
.moreless {
	text-align: right;
	overflow: hidden !important;
}
li.moreless {
	padding: 5px 0 !important;
}
.moreless span {
	display: inline;
	float: left;
}

/* ========= portfolio styles ========= */
#content a.workthumb {
	padding: 0;
	border: none;
	background: transparent !important;
	outline: none;
}
#content a.workthumb img {
	border: none;
}

#content img.snippet {
	display: inline;
	margin: 3px 12px 9px 0;
	float: left;
	border: none;
}

/* --------- floats --------- */
img.floatright {
	display: inline;
	margin: 0 0 8px 12px;
	float: right;
}

img.floatleft {
	display: inline;
	margin: 0 12px 8px 0;
	float: left;
}

/* --------- gallery --------- */
p.gallery {
	width: 421px;
	overflow: auto;
	clear: both;
}

p.gallery a {
	display: inline;
	float: left;
}

p.gallery img {
	width: 200px;
	margin: 0 5px 8px 5px;
}

/* ========= commentary styles ========= */
#comments, #respond {
	padding-top: 2px;
	background: url(../img/li.gif) repeat-x;
}

/* --------- comment list --------- */
ol.commentlist li {
	position: relative;
	margin: 0 0 24px 0;
	font-size: 24px;
	color: #666;
}
ol.commentlist li.alt {
	color: #aaa;
}
ol.commentlist li.kharmik {
	color: #005266;
}

#content ol.commentlist h4 {
	font-size: 12px;
	line-height: 18px;
	font-weight: normal;
}
ol.commentlist h4 em, ol.commentlist h4 cite {
	font-style: normal;
	color: #fff;
}

ol.commentlist p {
	font-size: 12px;
	color: #fff;
}
ol.commentlist li.kharmik p {
	color: #015064;
}

/* --------- comment form --------- */
#commentform span.required {
	padding-left: 12px;
	color: #000;
	background: url(../img/required.gif) 0% 30% no-repeat;
}

#commentform input, #commentform textarea {
	padding: 2px;
	font: 12px/14px Helvetica, Arial, sans-serif;
	border: none;
}
#commentform textarea {
	width: 417px;
}
#commentform #submit {
	padding: 3px 25px 1px 0;
	background: #01a0c7 url(../img/more.gif) 100% 50%;
	color: #01a0c7;
}
#commentform #submit:hover {
	background: #01a0c7 url(../img/more-hover.gif) 100% 50%;
	color: #000;
	cursor: pointer;
}

/* ######### footer region ######### */
#footer {
	position: relative;
	margin-top: -60px;
	padding-bottom: 20px;
	height: 40px;
	color: #000;
	line-height: 40px;
	text-indent: 260px;
	background: url(../img/footer.png) 571px 4px no-repeat;
}

/* ######### sIFR screen styles ######### */
/* These are standard sIFR styles... do not modify */

.sIFR-flash {
	visibility: visible !important;
	margin: 0;
}

.sIFR-replaced {
	visibility: visible !important;
}
h2.sIFR-replaced {
	margin-bottom: 0 /*-14px*/;
}
h3.sIFR-replaced {
	margin: /*-5px 0 -9px*/ 0;
}

span.sIFR-alternate {
	position: absolute;
	left: 0;
	top: 0;
	width: 0;
	height: 0;
	display: block;
	overflow: hidden;
}

/* Hide Adblock Object tab: the text should show up just fine, not poorly with a tab laid over it. */
.sIFR-flash + div[adblocktab=true] {
  display: none !important;
}

/* These "decoy" styles are used to hide the browser text before it is replaced... the negative-letter spacing in this case is used to make the browser text metrics match up with the sIFR text metrics since the sIFR text in this example is so much narrower... your own settings may vary... any weird sizing issues you may run into are usually fixed by tweaking these decoy styles */

.sIFR-hasFlash h2 {
	visibility: hidden;/**/
	font-size: 36px;
	line-height: 48px;
	font-weight: normal;
	letter-spacing: 0px;
	word-spacing: 0px;
}
.sIFR-hasFlash h3 {
	visibility: hidden;/**/
	margin: 6px 0 12px 0;
	font-size: 18px;
	line-height: 24px;
	letter-spacing: 3px;
}


/* ######### sIFR print styles ######### */
/* This is the print stylesheet to hide the Flash headlines from the browser... regular browser text headlines will now print as normal 

.sIFR-flash, .sIFR-flash object, .sIFR-flash embed {
	display: none !important;
	height: 0;
	width: 0;
	position: absolute;
	overflow: hidden;
}

span.sIFR-alternate {
	visibility: visible !important;
	display: block !important;
	position: static !important;
	left: auto !important;
	top: auto !important;
}*/