/* @override http://symphony.local:8888/workspace/css/styles.css */

/******* Structure *******/

* {
	padding: 0;
	margin: 0;
}

html {display: block; position: relative; height: 100%;}

body {
	position: relative;
	min-height: 100%;
	min-width: 850px;
	height: auto;
	color: #111;
	background: #eeb61a url(img/pattern.gif);
	font: 0.8em/1.7em Arial, Helvetica, Verdana, sans-serif;
	padding: 0 50px 0 50px;
}

ul {list-style-type: none;}

hr {
    height: 1px;
    border: none;
	height: 1px;
	background: transparent;
	border: 0px;
	border-bottom: 1px dashed #5a4d44;
	color: #eeb61a;
	margin: 0 0 25px 0;
	padding: 0px;
}

* html hr {margin: 0 0 18px 0; /* for IE6 */}
*+html hr {margin: 0 0 18px 0; /* for IE7 */}

.float {float: left;}

.bypass {opacity: 0.5;}
.hide {display: none;}
.clear {clear: both;}

div#bg1 {
	background: url(img/bg2.gif) no-repeat;
	position: absolute;
	top: 0;
	left: 0;
	overflow: hidden;
	width: 1055px;
	height: 635px;
	z-index: 0;
}

/******* TYPO *******/

h1 {
	font: 36px Arial, Helvetica, Verdana, sans-serif;
	margin-bottom: 50px;
	letter-spacing: -1px;
	color: #fff;
}

h2 {
	color: #31493f;
	font: 26px Arial, Helvetica, Verdana, sans-serif;
	letter-spacing: -1px;
	font-weight: bold;
}

a {
	color: #e36014;
	text-decoration: none;
}

	a:hover {color: #dc3f01;}
	
	.affix, h2 .affix, a.affix {font-weight: normal; color: #f2d45a;}
	a.affix:hover {color: #f8e188;}
	
h1 a, h3 a {color: #fff;}
h1 a:hover {color: #dc3f01;}

.meta {font-size: 0.85em; font-style: normal; color: #1c3d46; }

	.meta a {color: #d35106; }
	
p.title {margin: 20px 0 10px 0; color: #31493f;}

.subhead {
	line-height: 1.4em;
	margin-bottom: 2.2em;
}

p.caption {
	font: normal 1em/1.2em "Courier New";
	padding: 0 5px;
	color: #f8e188;
	background: #e36014;
}
a.goto, a.function {
	font: normal 1em/1.2em "Courier New";
	padding: 0 5px;
	color: #f2d45a;
	background: #548914;
	margin-right: 5px;
}

a.goto:hover, a.function:hover {
	cursor: pointer;
	color: #fff;
	background: #68a709;
}

.nice {
	font-family: georgia, times new roman, serif;
	font-style: italic;
	color: #f8e188;
}

/******* LAYOUT *******/

#metanav		{z-index: 15; position: relative;}
#mainheader		{z-index: 5; position: relative; padding-top: 80px; width: 850px;}
#navigation 	{z-index: 5; position: relative; float: left; width: 250px;}
#maincontent	{z-index: 5; float: left; position: relative; height: 100%; width: 600px;}
#fill			{z-index: 0; clear: both; width: 850px; height: 150px;}
#mainfooter		{z-index: 5;}


/******* MARGIN HELPERS *******/

.top25			{margin-top:25px;}
.top35			{margin-top:35px;}

*+html hr.top25 {margin-top: 18px; /* for IE7 */}
*+html hr.top35 {margin-top: 28px; /* for IE7 */}

.bottom15		{margin-bottom:15px;}
.bottom25		{margin-bottom:25px;}
.bottom35		{margin-bottom:35px;}

*+html hr.bottom15 {margin-bottom: 8px; /* for IE7 */}
*+html hr.bottom25 {margin-bottom: 18px; /* for IE7 */}
*+html hr.bottom35 {margin-bottom: 28px; /* for IE7 */}

/******* MAINHEADER *******/

#mainheader h1 .divider {color: #fff;}
#mainheader h1 .path_b {color: #1c3d46;}
body#envira #mainheader h1 .path_b {color: #fff;}

#mainheader .date {position: absolute; right: 0px; color: #f1c22c;}
h1 a.jua_ib .affix {color: #f1c22c;}

/******* MAINMENU *******/

ul#mainmenu {
	width: 200px;
	border-bottom: 1px #fff dotted;
}

	ul#mainmenu li {border-top: 1px #fff dotted;}
	
	body#envira ul#mainmenu {background: #f1bb03;}
	
	ul#mainmenu li a:hover, ul#mainmenu li.active a {background: #f6c728 url(img/pattern_c.gif); color: #444; opacity: 1.0;}
	
	ul#mainmenu li a {
		display: block;
		padding: 2px 10px;
		color: #5a4d44;
	}
	
/******* ADMINMENU *******/

#metanav {
	position: absolute;
	top: 0px;
	left: 0px;
	width: 900px;
}

ul.metanav {
	position: absolute;
	top: 0px;
	right: 0px;
}

ul.metanav li {
	color: #f2d45a;
	float: left;
	margin-right: 1px;
}

	ul.metanav li a:hover, ul.metanav li.active a {background: #e36014; color: #fff}
	
	ul.metanav li a {
 		background: #1c3d46;
		display: block;
		padding: 2px 10px;
		color: #999;
	}

/******* WELCOME *******/

#welcome {
	margin-top: -5px;
	font: 26px Arial, Helvetica, Verdana, sans-serif;
	letter-spacing: -1px;
	color: #8e4d00;
}
h4#latest_post, h4#latest_note, h4#latest_posts {
	text-indent: -9999px;
	overflow: hidden;
	height: 28px;
	width: 205px;
	position: relative;
	margin-left:-250px;
	float: left;
}

	h4#latest_post {background: url(typo/latest_post-trans.png) no-repeat;}
	h4#latest_note {background: url(typo/latest_note-trans.png) no-repeat;}
	h4#latest_posts {background: url(typo/latest_posts-trans.png) no-repeat;}


/******* BLOG ENTRY *******/

.itemhead .date {
	display: inline;
	font: 26px Arial, Helvetica, Verdana, sans-serif;
	letter-spacing: -1px;
	color: #8e4d00; margin-right: 2px;
}
	.date a {color: #8e4d00;}

.itemhead h2 {
	letter-spacing: -2px;
	display: inline;
}

.itemhead .meta {
	display: block;
	clear: both;
}

.blog_body {margin-bottom: 25px;}

/******* FORMAT *******/

.format {font-family: "Courier New"; font-size: 1em;}

	.format p	{margin-bottom: 17px;}
	.format ul	{margin: 17px 0px;}
	.format ol	{margin-bottom: 17px;}
	
	.format ul {
		width: auto;
	}
	 .format ul li {
	 	padding-left: 20px; 
	 	background: url(fx/li-trans.png) 0px 6px no-repeat;
	 }
	 
	.format a:hover {color: #fff;}
	
	.format h1, .format h2, .format h3, .format h4, .format h5, .format h6	{
		font: normal 1em/3em "Courier New";
		padding: 0 5px;
		color: #f8e188;
		background: #e36014;
		display: inline;
	}
	
	.format blockquote {margin-top: 10px; border: 1px dashed #ddd; opacity: 0.4; padding: 5px 10px;}
	.format blockquote p {margin: 0px;}

	.blog_body a	{color: #dc3f01;}
	
/******* COMMENTS & NOTES *******/

.com_body, .note_body {
	font: 0.9em/1.7em normal "Courier New" Verdana;
	background: #548914 url(img/com_body.gif) no-repeat;
	padding: 5px 20px 0 15px;
	color: #fff;

}
	.com_body_parent {background: #d95d08 url(img/com_body_parent_b.gif) no-repeat;}
	.note_body {background: #fff url(img/com_body_parent_b.gif) no-repeat; padding-top: 15px; font-family: Arial; font-size: 11px; color: #fae6a0;}
	.note_body:hover {cursor: pointer;}
	
		.com_body p	{margin: 10px 0 0 0;}
		.note_body p {color: #f6d76d; display: inline; margin-top: 10px;}
		
		.com_body a {color: #f2d45a;}
		.note_body a.title {display: none;}
		
		.com_body ul li {
	 		background: url(fx/li-com-trans.png) 0px 4px no-repeat;
		}

.com_meta, .note_meta {
	background: transparent url(img/com_footer.gif) no-repeat;
	height: 12px;
	padding: 28px 0px 0px 15px;
	margin-bottom: 25px;
}
	
	.note_meta {background: transparent url(img/com_footer_parent_b.gif) no-repeat;}
	.com_meta_parent {background: transparent url(img/com_footer_parent_b.gif) no-repeat;}



/******* ITEMLISTS *******/

.itemlist .subhead {margin-bottom: 17px;}

ul.tablist {
	display: block;
	position: relative;
	height: auto;
}

h4.tablist {
	position: relative;
	font-size: 1em;
	text-indent: 10px;
	line-height: 52px;
	height: 52px;
	color: #31493f;
	border-top: 1px solid #f4c325;
}
	h4.bloglist .affix {position: absolute; top: 0; left: 25%; font-weight: normal;}
	h4.comlist .affix {position: absolute; top: 0; left: 55%; font-weight: normal;}
	
	.tablist li.item {display: block; position: relative; border-top: 1px solid #f4c325;}
	
		.tablist li.item a.item {
			color: #111;
			text-indent: 10px;
			display: block;
			background: #eeb61a url(img/pattern_a.gif);
			width: 100%;
			height: 26px;
			line-height: 25px;
			cursor: pointer;
		}
		
		.juaiblist li.item {
			color: #111;
			text-indent: 10px;
			height: 26px;
			line-height: 25px;
		}
		
		.tablist li.even a.item {background: #f1bb03 url(img/pattern_b.gif);}
		.tablist li.item a.item:hover {background: #f6c728 url(img/pattern_c.gif); color: #444;}
		
		.tablist strong {color: #fff;}
		
		.bloglist li strong.title {position: absolute; top: 0; left: 25%;}
		.bloglist li.note strong.title {color: #f8e188; font-weight: normal;}
		.bloglist li .comments {text-align: right; position: absolute; top: 0; right: 5%;}
		.comlist li .title {position: absolute; top: 0; left: 30%;}
		.comlist li .context {position: absolute; top: 0; left: 55%;}
		.juaiblist li .title {position: absolute; top: 0; left: 25%;}
		
div.listend {border-bottom: 1px solid #f4c325;}
		
		
/******* FORM *******/

fieldset {border: 0;}
	
	div.field		{background: #f2d45a; padding: 3px;}
	div.m			{width: 208px;}
	
	label {display: block; margin: 5px 0px;}
	
		label .affix {font-family: georgia, "times new roman", serif; font-style: italic; color: #f4db78;}
	
	input {width: 200px;}
	
	input#submit, input.submit, input.check {
		margin-top: 15px;
		border: 0;
		background: #398b08;
		padding: 3px 5px;
		width: auto;
		font-size: 13px;
		font-family: Arial;
		font-weight: bold;
		color: #fff;
	}
	
		div.float input#em_submit {margin: 2px 0 0 5px; padding: 3px 5px;}
	
	
		input#submit:hover, input.submit:hover {background: #46a30f; cursor: pointer;}
	
	input, textarea {border: 1px solid #f6c728; padding: 2px 3px; margin: 0;}
	
	textarea {width: 98.5%;}
	div.xl input {width: 98.5%;}
	
	
	#sm {margin: 15px 0; width: 100%; color: #fff; cursor: pointer;}
	
	#sm.error {background: #e36014;}
	#sm.success {background: #3a8b08;}
	#sm.info {background: #3a8b08;}
	
		.sm_body {padding: 10px;}



/******* ALBUM, SLIDESHOW & IMAGES *******/

.description {margin-bottom: 25px;}

#slideshow, .image {
	display: block;
	position: relative;
	height: 320px;
	width: 616px;
	margin-left: -8px;
	z-index: 1;
	margin-bottom: 40px;
}

	a.image, a.image:hover, a.image img, a.image:hover img {border: none; cursor: pointer;}

	.album {
		display: block;
		position: absolute;
		top: 15px;
		left: 12px;
		height: 290px;
		width: 590px;
		background: #222;
		z-index: 1;
	}
	
		.album img{
			display: block;
			position: absolute;
		    top: 0; 
		    left: 0;
		}
		
	.image img {
		background: #222;
		display: block;
		position: absolute;
	    top:  15px; 
	    left: 12px;
	}
	
	
	#slideshow .frame , .image .frame {
		z-index: 4;
		position: absolute;
		top: 0;
		left: 0;
		height: 320px;
		width: 616px;
		background: transparent url(fx/frame-trans.png) 0 no-repeat;
	}
	
	
	
	
	#slideshow p.caption, .image p.caption {
		z-index: 10;
		position: absolute;
		bottom: -17px;
		left: 20px;
		margin: 0px;
	}
	
	#slideshow p.counter {
		z-index: 10;
		position: absolute;
		bottom: -10px;
		left: -140px;
		font-family: Arial;
		font-size: 36px;
		font-style: normal;
		line-height: 1.2em;
		padding: 0 5px;
		color: #f1c72d; 
		text-align: right;
		width: 100px;
	}
	
	#slideshow:hover .counter {color: #f2d45a;}
	
	
	#slideshow a.prev, #slideshow a.next {
		position: absolute;
		top: 0;
		height: 320px;
		width: 50%;
		z-index: 5;
	}
	
		#slideshow a.prev {left: 0;}
		#slideshow a.next {right: 0;}
		
		#slideshow a.next:hover {background: transparent url(fx/frame_next.png) 0 160px no-repeat;}
		#slideshow a.prev:hover {background: transparent url(fx/frame_prev.png) 0 0 no-repeat;}
		
		
	#slideshow .prev_arrow, #slideshow .next_arrow {
		display: block;
		width: 30px;
		height: 60px;
		z-index: 6;
	}
	
		#slideshow .prev_arrow {position: absolute; top:130px; left: -30px; background: url(fx/arrows_xl.png) 0 0 no-repeat;}
		#slideshow .next_arrow {position: absolute; top:130px; right: -30px; background: url(fx/arrows_xl.png) -30px 0 no-repeat;}
		

/******* VIDEO *******/

object {
	border: none;
	display: block;
	position: relative;
	background: #fff url(img/video_bg.gif) 0 0 no-repeat;
	padding: 10px;
	margin: 20px 0 30px 0;
}


/******* MAP *******/

div#map {
	background: #fff;
	position: absolute;
	top: 0;
	left: 0;
	overflow: hidden;
	width: 100%;
	height: 100%;
	z-index: 1;
}

div#bg_map {
	background: url(img/bg_map.png) no-repeat;
	position: absolute;
	top: 0;
	left: 0;
	overflow: hidden;
	width: 1050px;
	height: 150px;
	z-index: 2;
}

/******* MARKDOWN *******/


pre {
	font-size: 12px;
	background: #f4c72d;
	padding: 10px;
	border: 1px dashed #f8e188;
	margin-bottom: 10px;
}


/******* FOOTER *******/

#mainfooter{
	position: absolute;
	bottom: 0px;
	left: 40px;
	background: url(img/footer-trans.png) no-repeat;
	font-size: 11px;
	height: 50px;
	width: 870px;
}

#mainfooter p {margin: 20px 0 0 20px; color: #f2d45a;}
#mainfooter a {color: #f1bb03; text-decoration: underline;}

#js-info {
	color: #f8e188;
	font-size: 0.85em;
	position: absolute;
	top: 115px;
	left: 52px;
}