/*
	Theme Name: Custom
	Theme URI: http://kahi.cz
	Description: Custom commercial template
	Version: 1.0
	Author: Peter Kahoun
	Author URI: http://kahi.cz/
*/

/* CSS Document
 ****************
 * Media: screen, presentation
 * Tested in: Opera 9.5, Firefox 3, Safari 4 (Win), Chrome and IE 6,7,8 (additional stylesheets applied)
 * Note: advanced-browsers-enhancement (MOSe) applied
 *
 * Author: Peter Kahoun aka Kahi
 * Author contact: kahi@kahi.cz; web: kahi.cz
 * Date: 2009/04
 */


/* Colors
 ****************
 * yellow	e8a921
 * 			000
 * 		 	fff
 *
 * Widths
 ****************
 * 996 total
 * 560 content max
 */


/* =reset
------------------------------------------------*/

body,
dl, dt, dd, ul, ol, li,
h1, h2, h3, h4, h5, h6,
form, fieldset, legend,
th, td, hr, pre, p, blockquote {margin:0; padding:0;}

h1, h2, h3, h4, h5, h6 {font-size:100%; font-weight:normal; line-height:1;}

ol, ul {list-style:none;}

table {border-collapse:collapse; border-spacing:0;}

fieldset, img {border:0;}

body {font-size:62.5%;}

input[type=text] {padding:1px 3px;}

hr {display:none;}

th {text-align:left;}


/* =general classes
------------------------------------------------*/

.noscreen, 
.hidden, 
#footer .skip {
	position:absolute; left:-10000px; top:-1000px;
	width:0; height:0; overflow:hidden;}

.cleaner {
	clear:both; height:0;}


/* =base
------------------------------------------------*/

body {
	background:#111a2e url(images/body-back.png) repeat-x;
	color:#fff; font-family:"Trebuchet MS", "Geneva CE", lucida, sans-serif;}

	a {color:#fff;}


/* =layout
------------------------------------------------*/

#container {
	margin:34px auto 60px; position:relative;
	width:912px;}

	#header {
		height:205px;}

	#main {
		padding:0 6px;}

		#content {
			clear:both; float:left;
			padding:40px 30px 30px; width:510px; /* 580 total */}

		#sidebar {
			float:right; margin-right:30px;
			width:270px;}


/* =header (visually)
------------------------------------------------*/

#header {
	background:transparent url(images/header-back.jpg) no-repeat;}

 	/* logo and else */

#logo a {
	position:absolute; left:40px; top:35px;
	width:130px; height:130px; overflow:hidden;
	text-indent:-200px;}

#nav-skip a {
	position:absolute; left:40px; top:-200px;
	font-size:120%; text-transform:uppercase;}

#nav-skip a:focus,
#nav-skip a:active {
	top:-20px;}

	/* nav main */

#nav-main {
	position:absolute; left:127px; top:6px;
	width:720px; height:56px; padding-left:70px;
	background:url(images/nav-main-start.png) no-repeat;}

	#nav-main li {
		float:left;
		padding-right:2px;
		background:url(images/nav-main-separator.png) right top no-repeat;}

		#nav-main li a {
			display:block;
			padding:0 15px; line-height:56px;
			background:url(images/nav-main-back.png) repeat-x;
			font-size:120%; text-decoration:none; text-transform:uppercase; color:#000;}

			#nav-main li a:hover {
				text-decoration:underline;}
	
			#nav-main li.current_page_item a {
				text-decoration:underline; /*  @todo maybe improve */}
				
	#nav-main li:last-child {
	 	background:none;}

		#nav-main li:last-child a {
			padding-right:100px;
			background:url(images/nav-main-last-back.png) no-repeat;}

 	/* nav series */

#nav-series {
	position:absolute; left:190px; top:80px;
	width:680px;}


	#nav-series li {
		float:left;
		padding-right:2px;
		background:url(images/nav-series-separator.png) right top no-repeat;}

	#nav-series li:last-child {
		padding-right:19px;
		background:url(images/nav-series-back-after-last.png) right top no-repeat;}

		#nav-series a {
			display:block;
			padding:0 1em; line-height:49px;
			background:url(images/nav-series-back.png) repeat-x;
			font-size:120%; text-decoration:none;}

		#nav-series a:hover,
		#nav-series .current_page_item a,
		#nav-series .current_page_parent a {
			background:url(images/nav-series-back-active.png) repeat-x;}


	/* nav breadcrumbs */
	
.nav-bc {
	position:absolute; left:200px; top:162px;
	width:670px;
	color:#7c8697; font-size:110%; font-style:italic; line-height:22px !important;}
	
	#content .nav-bc a {
		color:#bcc6d7; text-decoration:none;}
		
		/* #content .nav-bc:hover a {
			text-decoration:underline;} */
	
	.nav-bc .arrow {
		margin:0 3px; position:relative; top:2px;
		color:#fff; font-size:22px; line-height:22px;}
	
	#content .nav-bc .current {
		color:#bcc6d7;}
	

/* =main
------------------------------------------------*/

#main {
	background:transparent url(images/main-back.png) repeat-y;}

/* see: Sidebar and Content */


/* =footer
------------------------------------------------*/

#footer {
	padding:2em 36px 50px;
	background:transparent url(images/footer-back.png) left bottom no-repeat;}

	#footer p {
		color:#b2bcce; line-height:1.6;}

	#footer a {
		color:inherit}


/* =sidebar (and the "3 boxes")
------------------------------------------------*/

#sidebar {}

.box {
	float:left; margin-bottom:30px;
	width:270px; overflow:hidden;
	background-color:#2c374e;}

	.box h3 {
		position:relative;
		padding:15px 20px;
		background-color:#374157;
		font-size:150%; text-transform:uppercase;}
	
		.box h3 a.right {
			position:absolute; right:20px;
			color:#8B96A9;}
	
	.box p {
		padding:20px 20px 0.66em;
		font-size:120%; line-height:1.5;}
	
	.box ul {
		padding:20px 20px 0.66em 2.33em;
		list-style:square;
		font-size:120%;}
	
	/* @todo style another possible elements */


#main > .box {
	margin-left:15px;
	height:270px;}

#main > .box.welcome {
	margin-left:30px;}

#main > .box.photo {
	background:#1a212f url(images/box-photo-back.png) left bottom no-repeat;}

	#main > .box.photo p {
		padding:30px 10px 30px; overflow:hidden; 
		text-align:center;}

#main > .box.video {
	background:#000;}

	#main > .box.video object,
	#main > .box.video embed {
		width:270px; height:222px;}

#sidebar .box {
	padding-bottom:20px;}


/* =content
------------------------------------------------*/

#content {
	background:#fff url(images/content-top-back.png) right top no-repeat;
	color:#000;

	/* one element and one picture saved: */
	-moz-border-radius-bottomright:12px;
	-khtml-border-radius-bottomright:12px;
	-webkit-border-bottom-right-radius:12px;
	border-bottom-right-radius:12px;}

	#content a {
		color:#000;}

	#content h1 {
		font-size:180%;}

	#content h1 a.feed,
	#content h2 a.feed,
	#content h3 a.feed {
		padding:0 8px;
		opacity:0.5;
		background:url(images/feed-icon.png) center center no-repeat;
		text-decoration:none;}

	#content a.feed:hover {
		opacity:1;}


 	/* general content's typo */

#content p,
#content ol,
#content ul,
#content dl,
#content form,
#content table {
	margin-bottom:1em;
	font-size:120%; line-height:1.5;}

	#content li ul,
	#content li ol,
	#content li p,
	#content li h3,
	#content li h4,
	#content dl p,
	#content form p,
	#content form table,
	#content form li,
	#content form dl {
		font-size:100%;}

#content .separator {
	margin:0 -25px 0 -30px;
	height:4px;
	background:transparent url(images/horizontal-separator-pattern.png) left bottom repeat-x;}


	/* pg-multi pages */

.hentry {
	padding:4em 0 3em; overflow:hidden;}

	.hentry .title-and-meta {
		overflow:hidden;}

		.hentry .entry-title {
			float:left;
			font-size:160%;}

			.hentry .entry-title a {
				text-decoration:none;}

			.hentry .entry-title a:hover {
				text-decoration:underline;}

		.hentry .entry-meta {
			float:right;
			padding-top:3px;
			font-size:110% !important;}

	.hentry .entry-image a img {
		float:right; margin:10px 0;
		/* more: #content img */}

	.hentry .summary-and-more {
		float:left;
		width:260px;}

		.hentry .entry-summary {
			margin:10px 0;}

		.hentry .more {
			margin-top:1em;}

.hentry object {
	width:500px; height:400px;}

.nav-pagination {
	margin:3em 0;}
	
	.nav-pagination div {
		display:inline; /* wp page-navi plugin inserts a div */
		font-size:120%;}
	 
	.nav-pagination h3 {
		float:left; margin:6px 1.5em 0 0;
		font-weight:bold; font-size:120%;}

	.nav-pagination a,
	.nav-pagination span {
		float:left; margin-right:1px;
		padding:4px 7px;
		font-weight:normal; text-decoration:none;}

	.nav-pagination span.current,
	.nav-pagination a:hover {
		background:#7886A6;
		color:#fff !important;
		-moz-border-radius:3px;
		-khtml-border-radius:3px;
		-webkit-border-radius:3px;
		border-radius:3px;}


 	/* pg-singular context */
		
		
		/* ... */
		
.pg-singular .hentry {
	padding-top:0;}
	
.pg-singular #content h1 {
	margin-bottom:1.5em;}
		
.pg-singular #content h2 {
	margin:1.5em 0 1em;
	font-size:160%;}
	
.pg-singular #content h3 {
	margin:1.5em 0 1em;
	font-size:140%;}	


		/* images and flowing content */

#content img {
	padding:5px; max-width:500px;
	background:#e5e5e5;}

#content a:hover img {
	padding:4px;
	background:#f5f5f5;
	border:1px solid #c5c5c5;}

#content .right,
#content .alignright,
#content .figure-right {
	float:right; margin:0.5em 0 0.5em 1.5em;
	text-align:center;}

#content .left,
#content .alignleft,
#content .figure-left {
	float:left; margin:0.5em 1.5em 0.5em 0;
	text-align:center;}

#content .figure-left img,
#content .figure-right img,
#content .figure img {
	margin-bottom:0;}

#content .figure-left p,
#content .figure-right p,
#content .figure p {
	padding:0.5em;
	font-size:110%; font-style:italic;}	
	
	
 		/* lists */
	
#content ul {
	padding-left:2.33em;
	list-style:square;}

#content ol {
	padding-left:2.66em;
	list-style:decimal;}
	
 		/* tables */
	
#content table {}

#content table td,
#content table th {
	padding:0.5em 1em 0.5em 0.5em;
	border:1px solid #BBC5D1;}
	
#content table th {
	background:#DBE2EA;}
	
		/* gallery 3col */

.gallery {
	margin: auto;}

.gallery-item {
	float: left;
	margin-top: 10px;
	text-align: center;
	width: 33%;} /* 33% = 3 col */

.gallery img {
	/* border: 2px solid #cfcfcf; */}

.gallery-caption {
	margin-left: 0;}


	/* comments */

ol.comments {
	margin-bottom:4em !important;
	padding:0 !important;
	list-style:none outside !important;}

.comment {
	margin:2em;}

	.comment .meta {
		overflow:hidden;}
	
		.comment .meta .dt {
			float:right; font-size:11px;}
	
		.comment .meta .author {
			float:left;}
		
		.comment .meta .author strong {
			font-size:16px; font-weight:normal;}


form.add-comment label {
	display:block;}

form input,
form textarea {
	padding:4px;
	font-family:"Trebuchet MS", "Geneva CE", lucida, sans-serif; font-size:13px;}

form textarea {
	width:500px;}

form input[type=submit] {
	padding-left:15px; padding-right:15px;}


	/* other */
	
p.admin a {
	position:fixed; right:10px; top:5px;
	padding:5px;
	font-weight:bold; font-size:15px; text-decoration:none;}

.admin-edit a {
	text-decoration:none; color:#999 !important;}
	
	

	/* colorbox: general part */

#colorbox, #modalBackgroundOverlay, #modalWrap{position:absolute; top:0; left:0; z-index:9999;}
#modalBackgroundOverlay{position:fixed; width:100%; height:100%;}
#colorbox{overflow:hidden; padding:1px; margin-top:-1px; margin-left:-1px;} /*padding fixes a ghosting issue in IE7, the negative margin compensates */
	#modalWrap{width:9000px; height:9000px;}
		#modalContent, #borderTopLeft, #borderTopCenter, #borderTopRight, #borderBottomLeft, #borderBottomCenter, #borderBottomRight, #borderMiddleLeft, #borderMiddleRight {float:left; height:0; width:0; overflow:hidden;}
		#borderMiddleLeft, #borderBottomLeft{clear:left;}
		#modalContent{position:relative; overflow:visible;}
			#contentTitle{margin:0;}
			#modalClose, #contentPrevious, #contentNext{outline:none; cursor:pointer; border:0; margin:0;}
			#modalLoadedContent{overflow:auto; width:0; height:0;}
			#modalLoadedContent iframe{display:block; width:100%; height:100%; border:0;}
                        #modalPhoto{cursor:pointer;}
			#modalLoadedContent embed{display:block; border:0;} /* Display:block removes the line-height gap embedded content */
			#modalLoadingOverlay{position:absolute; width:100%; height:100%; top:0; left:0;}


	/* colorbox: custom part */
	
#modalBackgroundOverlay{background:#111A2E;}

#colorbox{}
	#modalContent{margin-top:32px;}
		#modalLoadedContent {padding:5px;}
			#contentTitle{position:absolute; top:-22px; left:0; color:#000; font-weight:bold;}
			#contentCurrent{display:none;}
			#contentPrevious{width:29px; height:32px; display:block; text-indent:-9999px; position:absolute; top:-32px; right:60px; background:url(js/images/buttons.png) left top no-repeat;}
			#contentPrevious:hover{background-position:left bottom;}
			#contentNext{width:29px; height:32px; display:block; text-indent:-9999px; position:absolute; top:-32px; right:28px; background:url(js/images/buttons.png) right top no-repeat;}
			#contentNext:hover{background-position:right bottom;}
		#modalLoadingOverlay{background:url(js/images/loading.gif) center center no-repeat #000;}
		#modalClose{position:absolute; top:-32px; right:0px; display:block; background:url(js/images/buttons.png) -29px 0 no-repeat; width:26px; height:32px; text-indent:-9999px;}
		#modalClose:hover{background-position:-29px -31px; cursor:pointer;}