/*
Theme Name:Caribou
Theme URI:http://spectacu.la/caribou-news-theme/
Description: Highly customisable theme with animated highlight spots, editable navigation bar, sections support so you can place categories into sections like Sport, Media, etc, alternate styles (create your own if you know a little CSS!) and a colour picker for setting various design elements.  Javascript enhanced threaded comments help make visitor engagement an easier thing to management.  Built in you get three styles, including two different post layouts (narrow or wide), and there'll be more variations to come.  Image thumbnail generation works from WordPress 2.7 on so upgrade for the best experience. For a full demo, instructional videos and support please visit our site.
Version: 1.0.6
Author:James R Whitehead of Spectacu.la
Author URI:http://spectacu.la/
Tags:custom-colors,custom-header,theme-options,light,two-columns,three-columns,fixed-width,right-sidebar,threaded-comments
*/

/*
 Version info:
 1.0.6	:	Added wide-post scheme, added translation domain, changed the related posts code, fixed the image grabber, fixed some things in the commenting and moved commenting out to its own folder and changed the pause icon to be a little more obvious.
 1.0.5	:	Changed <? to <?php at one point. oops!
 1.0.4	:	Changed a few things to match up with the wp repository requirements. Removed my code for dealing with the logo file and used the WPs own and quite a few other subtle changes.
 1.0.3	:	Changed icons over to the Rinoa set from Creative 9 Design. http://www.c9-d.com/
			Changed this theme over to GPL license.
 1.0.2	:	Some minor fixes.
				No margin at the bottom of a P that was in comments.
				Slight logic problem in a posts theme options. Image choice wouldn't show if you hadn't created a section page.
				Missing comments section from a basic page now added.
 1.0.1	:	Removed PHP5 specific elements, should now work fine in PHP4.
 1.0	:	Initial release.
*/

@import "css3.css" screen; /* Rounded corners for boxes and other features I need to hide from ie*/

* {
	margin: 0;
	padding: 0;
}

.bullet,
#importantPages .page_item a,
.page_item,
.cat-item {
	background: url(images/default.gif) no-repeat scroll transparent -9000px 0.6em;
	/* The -9000px should keep it out of sight for places where I've not set its position. */
}

.page_item {
	background-position: 0 0.5em;
	background-repeat: no-repeat;
}

#sidebar .page_item { text-indent: 12px; }
#footer .page_item { background-image:none}

form, fieldset {
	padding:0;
	margin:0;
	border: 0 none;
}
/* Titles and links */

a {text-decoration: none; color: #709b9a}
/*a:visited {color: #709b9a;}*/
a img { border: 0 none; vertical-align:text-top}
a:focus {outline: 0 none!important;}
a:hover {text-decoration: underline;}

h1,h2,h3,h4,h5,h6,.title,.archiveTitle,.commentTitle {
	font-weight: normal;
	font-family: georgia,serif;
	line-height: 1.5em;
	margin-bottom: 10px;
}
h1{font-size:2em}
h2{font-size:24px}
h3{font-size:22px}
h4{font-size:18px}
h5{font-size:16px}
h6{font-size:14px}

.archiveTitle {
	font-size: 16px;
	margin-bottom: 20px;
	background-position: 2px 8px;
}
.commentTitle {
	margin:10px 0 1em;
}
.underline,
.postTitle {
	background-repeat:no-repeat;
	background-position: -900em 0;
	border-bottom: solid 2px;
	line-height: 1em;
	padding-bottom: 3px;
}

/* invisible blocks to force open boxes with floats inside.*/
.clear{
	display:block;
	height:1px;
	overflow:hidden;
	clear:both;
	visibility:hidden
}
html { min-height: 100%}
body{
	font-size:13px;
	font-family:Georgia;
	line-height:1.6em;
	padding-bottom:10px;
	margin-bottom:100px;
	background:#b9a087;
	background-attachment: fixed;
}

#navigation {
	background-repeat:repeat-x;
	background-position:bottom left;
    margin-bottom: 20px;
    padding: 0 10px;
    width: 910px;
}

#navigation * {
	list-style-position: inside;
    font-size: 12px;
	line-height:2em;
}
    #navList{
        width: 100%;
    }
        #navList li{
            bottom: 0px; /* Fixes a problem with ie5. Some how.*/
            float:left;
            list-style-type:none;
            margin-right:1px;
			position:relative;
            z-index: 10;
        }
            #navList li ul{
                display:none;
                padding-bottom: 5px;
				background-repeat:repeat-x;
				background-position:bottom left;
            }
            #navList li ul li{
                width:150px;
            }
			#navList li.over ul,
            #navList li:hover ul {
                display:block;
                position:absolute;
				left: 0;
                width:150px;
                z-index:10;
            }

            #navList li a{
                white-space:nowrap;
                background-color:transparent;
                text-decoration:none;
                padding:0 10px;
                line-height:2em;
                display:block;
                line-height: 2.5em;
            }
            #navList li li{
                position:relative;
            }

            #navList li li a{
                white-space:normal;
                overflow:hidden;
                padding: 10px;
                line-height:1.5em;
                width: 125px;
            }
            /* Sub sub menus.  Attach the arrow inside the 10px padding and hide the rest of it until rollover.*/
            #navList li:hover ul ul,
            #navList li.over  ul ul ul ul,
            #navList li.over  ul ul ul,
            #navList li.over  ul ul {
                width:0;
                height:3em;
                overflow:hidden;
                position:absolute;
                left:140px;
                top:0;
                background:url(images/submenu.gif) no-repeat -1px 16px transparent;
                z-index: 10;
                padding:0 0 0 10px;
				border: none 0;
            }

            #navList li li:hover > ul { /* IE6 fails utterly here.  */
                width:150px;
                overflow:visible;
                height:auto;
                background-repeat: repeat-x;
                background-position:bottom left;
                padding: 5px 0;
                border: solid 2px #01314E;
                z-index: 20;
                top: -4px;
                left: 145px;
            }

			/* IE 6, limits the number of sub menus but should be enough for most people.*/
			#navList li li li li.over ul,
			#navList li li li.over ul,
			#navList li li.over ul {
                width:150px;
                overflow:visible;
                height:auto;
                background-repeat: repeat-x;
                background-position:bottom left;
                padding: 5px 0;
                border: solid 2px #709b9a;
                z-index: 20;
                top: -4px;
                left: 145px;
			}

/* Bullet point positioning */
	#navList li.page_item,
	#navList li.cat-item {
		background-position: 6px 12px;
		text-indent: 10px;
	}

	#navList li.page_item{ 		background-position:6px 12px}
	#navList li li.page_item{	background-position:8px 15px}

	#navList li li.page_item,
	#navList li li.cat-item,
	#navList li li.current-cat,
	#navList li li.current_page_item {
		background-position: 8px 15px;
		text-indent: 12px;
	}

/* Colours */
	#navigation {
		background-image:url(images/navigationbackground.gif);
		background-color:#709b9a
	}
    #navigation a {color:white}
    /* Active colour */
    #navList li ul li.current-cat,
    #navList li ul li.current_page_item,
    #navList li ul li.current_page_ancestor,
    #navList li ul li.over,
    #navList li ul li:hover,
    #navList li.current-cat-parent,
    #navList li.current_page_parent,
    #navList li.current_page_ancestor,
    #navList li.current-cat,
    #navList li.current_page_item,
    #navList li.over,
    #navList li:hover{
        background-color:#709b9a;
    }
    #navList li ul,
	#navList li ul ul,
	#navList li li li li.over ul,
	#navList li li li.over ul,
	#navList li li.over ul {
		background-image:url(images/menubackground.gif);
		background-color:#709b9a;
		border-color:#709b9a;
	}
    #navList li li:hover > ul {
		background-image:url(images/menubackground.gif);
		background-color:#709b9a;
		border-color:#709b9a;
	}

#header {
	width:970px;
	height:115px;
	margin:5px auto 0;
	overflow:hidden;
	position:relative;
}
	#logo {
		position:absolute;
		top:0;
		left:0;
		width:480px;
		height: 110px;
	}
		#logo img{
			/*display:none;*/
			position:absolute;
			left:0;
			top:0;
			z-index:1;
		}
		#logo h1 {
			width:480px;
			font-style:oblique;
			margin:0;
			position:absolute;
			line-height:60px;
			top:13px;
			z-index:2;
			font-size:4em;
			letter-spacing:-0.05em;
			font-weight:normal;
		}
		#logo h1 a:hover {
			text-decoration:none;
			color:#709b9a;
		}
		#logo .description {
			position:absolute;
			width:480px;
			top:70px;
			left:0;
			text-indent:1em;
			letter-spacing:0.05em;
			z-index:2;
			color:#709b9a;
			font-style:italic;
		}

	#header .widgetBanner  {
		width:468px;
		height: 60px;
		position:absolute;
		right:0;
		top: 13px;
		overflow:hidden;
		margin:0;
	}
	#importantPages {
		position:absolute;
		bottom: 0;
		right:0;
		height:26px;
	}
	.ie6 #importantPages {
		bottom:-1px;

	}
		#importantPages li {
			display:inline;
			float: left;
			background: url(images/inactivetab.gif) repeat-x bottom left #b9a087;
			margin-left:5px;
			height: 26px;
			list-style-type: none;
		}

		#importantPages li a {
			height:16px;
			padding: 5px 10px;
			white-space:nowrap;
			line-height: 16px;
			display:block;
		}
			#homeTab a {
				background: url(images/home.gif) no-repeat 6px 9px transparent;
				text-indent: 10px;
			}

		#importantPages .page_item a {
			background-position: 6px 10px;
			background-repeat: no-repeat;
			text-indent: 10px;
		}



		#importantPages li.over,
		#importantPages li:hover,
		#importantPages li.current_page_item {
			background: none #fff;
		}

#container {
	width:930px;
	margin:0 auto 0 auto;
	padding: 20px;
	background-color: #fff;
}
	#content {
		padding:0;
		width:930px;
		overflow:hidden;
		background: url(images/divider.gif) repeat-y 620px 0 #fff;
	}
		#posts{
			width:610px;
			/*min-height:420px;*/
			float:left;
			overflow:hidden;
			/*line-height: 1.25em;*/
		}
		#pageNavigation {
			margin-top: 20px;
			font-size: 20px;
			line-height: 2em;
		}
			#previousPosts {
				width: 48%;
				float: left;
			}
			#nextPosts {
				margin-left: 52%;
				text-align: right;
			}
	#sidebar{
		width:300px;
		margin-left: 630px;
	}
		#sidebar120 {
			width: 120px;
			float: left;
			overflow: hidden;
		}
		#sidebar160 {
			width: 160px;
			margin-left:140px;
		}
		.widget  {
			margin-bottom: 20px;
			line-height: 1.5em;
		}
			#scrollerLinks li,
			.postSidebarBlock li,
			.widget li {
				list-style-position: outside;
				list-style-type: none;
				margin-bottom: 0.3em;
			}
			.widgetTitle {
				display: block;
				font-size:1em;
				line-height:1.5em;
				padding: 0.5em 0 3px;
				margin-bottom: 0.5em;
				border-bottom: solid 2px #000;
			}
	#footer {
		background-color: #fff;
		color: #ccc;
		padding: 20px;
		margin-top: 20px;
	}
		#footer a {
			color: #ccc;
		}
		#footer .leftSide {
			width: 49%;
			float:left;
		}
		#footer .rightSide {
			margin-left: 52%;
			text-align:right;
		}

/* Single post with sidebar */
.post .postBody {
	overflow:hidden;
}
	.postBody .pageLinks {
		display: block;
		text-align: right;
	}
	.postBody .pageLinks span {
		font-size: 20px;
		margin: 0 5px;
	}
	/* Post side bar stuff */
	.postSidebar {
		width: 140px;
		margin-left: 470px;
	}
		.postSidebarBlock {
			margin-bottom: 20px;
		}
			.postSidebarBlock strong {
				display: block;
				margin-top: 10px;
			}

		.postSidebar .postMeta {
			background-color: #fff;
			padding: 5px;
		}
		.commentIconRSS { vertical-align:middle}

/* Archives, categories and searches. */

.index .single,
.postExcerpt 	{
	margin-top:20px
}

.index .firstPost,
.archive .firstPost {
	margin-top:0
}
	.archiveTitle {
		background-position: 2px 0.5em;
		text-indent: 16px;
	}

	.index .postMeta,
	.search .postMeta,
	.archive .postMeta{
		margin-bottom: 5px;
		background-position: 2px 0.3em;
		text-indent: 16px;
		line-height:1.25em;
	}

	.index .postMeta, .index .postMeta *,
	.search .postMeta, .search .postMeta *,
	.archive .postMeta, .archive .postMeta * {
		color: #bbb;
		font-size: 12px;
	}

	.excerptReadMore {
		float:right;
	}

	.excetptThumb {
		float:left;
		margin:0.5em 10px 0 0;
	}

/* Section layout */
/* The highlight scroller block */
#scroller {
	padding: 9px;
	width: 590px;
	overflow: hidden;
	border: solid 1px #ccc;
	margin-bottom: 20px;
}
	#scrollerWindow {
		position: relative;
		overflow: hidden;
		top: 0;
		left: 0px;
		width: 590px;
		height: 160px;
		margin-bottom: 10px;
	}
		#scroller .pause {
			display:none;
			position:absolute;
			right:0;
			top:0;
			width:16px;
			height:16px;
			z-index:2;
		}
		#scrollerWindow dl {
			position: absolute;
			z-index: 0;
			top:0;
			left: 0;
			width: 590px;
			height: 160px;
			overflow:hidden;
		}
			#scrollerWindow dl dd {
				width: 590px;
				height: 160px;
				float: left;
				position:relative;
				margin-right:20px;
				overflow:hidden
			}
				#scrollerWindow dl dd img {
					float:left;
					margin-right: 10px;
				}
				#scrollerWindow dl dd h3 {
					line-height: 1em;
					margin-bottom: 10px;
				}
				.scrollerContentText {
					height: 120px;
					overflow: hidden;
					margin-bottom: 20px;
				}
				#scrollerWindow dl dd .commentCount {
					position:absolute;
					right:0;
					bottom:0;
					text-align: right;

					line-height: 20px;
					width: 190px;
				}

	#scrollerLinks li {
		width: 580px;
		padding: 0 5px;
		text-indent: 10px;
		background-position: left center;
		position:relative;
	}

	#scrollerLinks li.active { background-color: #b9a087;}
	#scrollerLinks li.active a.bob { color:#000; cursor: default;}
	#scrollerLinks li.active a.bob:hover { text-decoration: none;}
	#scrollerLinks li div { display:none;text-align:right; position:absolute;right:5px;top:0;color:#709b9a}
	#scrollerLinks li.active div { display:block; }

.section .postMeta {
	margin-bottom: 5px;
	background-position: 2px 0.6em;
	padding-left: 16px;
	display:inline-block;
}
.section .postMeta,
.section .postMeta a {
	color: #709b9a;
	font-size: 12px;
}

.postExcerpt h4,
.section h4 {
	font-size: 18px;
	margin-bottom:0;
}

.sectionLead {
	margin: 10px 0 2em 0
}

.sectionSecond {
	width: 290px;
	float:left;
}

.sectionThird {
	width: 290px;
	margin-left: 304px;
	padding-left: 15px;
	border-left: solid 1px #709b9a;
	/*clear:both;*/
}

.sectionPost {clear:both;}

.widget ul ul { margin-left: 12px;}
.widget li.page-item,
.widget li.cat-item {
	text-indent: 12px;
	background-position: 0 0.5em;
}
#sidebar li li.cat-item a {
	display:block;
}

#wp-calendar {
	width:100%;
	text-align:center;
}
#wp-calendar a {
	background-color: #eee;
	border: solid 1px #ccc;
	display:block
}

#wp-calendar caption {
	font-size: large
}

.widget_search {
	margin-bottom: 0;
}

#searchform,
.searchForm {
	width:300px;
	height:50px;
	background: url(images/search300.gif) no-repeat left top transparent;
	position:relative;
}

#searchform #s,
.searchForm .search_input{
	background-color: transparent;
	border: none 0;
	width: 204px;
	position: relative;
	left: 5px;
	top: 4px;
	color: #999;
	padding: 3px 5px 3px 5px;
}

#searchform #s.focused,
.searchForm .focused {
	color: #000;
}

#searchform .submit,
.searchForm .submit {
	position: absolute;
	right: 4px;
	bottom: 24px;
	width: 72px;
	text-align: left;
	padding-left: 3px;
	overflow: visible;
	height: 22px;
	background-color: transparent;
	border: none 0;
	cursor: pointer;
}

.widget160 #searchform,
.widget160 .searchForm {
	width:160px;
	height:75px;
	background:url(images/search160.gif) no-repeat left top transparent;
}
.widget160 #searchform #s,
.widget160 .searchForm .search_input{
	width: 140px
}

.widget120 #searchform,
.widget120 .searchForm {
	width:120px;
	height:75px;
	background:url(images/search120.gif) no-repeat left top transparent;
}
.widget120 #searchform #s,
.widget120 .searchForm .search_input{
	width: 100px
}

#searchform .errorMessage,
.searchForm .errorMessage {
	position:absolute;
	top:6px;
	left:10px;
	height: 1.25em;
	line-height:1.25em;
	background:url(images/search300.gif) no-repeat -10px -6px #E6E6E6;
	width:100px;
	/*display:none;*/
	z-Index:2;
	color: #900;
}

/* Post Content */
.image .postBody {
	text-align: center;
}
.image .postBody img{
	margin-bottom:20px;
}

#posts address,
#posts pre,
#posts table,
.post ol,
.post ul,
#posts p {
	margin-bottom: 1em;
}

#posts blockquote{ margin: 0 10% 1em 10%}
#posts blockquote blockquote{ margin: 0 0 1em 0}
.postBody {color: #000}
.postBody ul,
.postBody ol {
	margin: 0 0 1em 0;
	padding: 0 0 0 2.5em
}
.postBody ul ul,
.postBody ul ol,
.postBody ol ol,
.postBody ol ul {
	margin-bottom:0;
}
.postBody em {
	letter-spacing: 2px;
	font-weight:bold;
}
.post li {margin-bottom: 0.5em;}

.postBody code,
.postBody var,
.postBody kbd,
.postBody samp,
.postBody pre {
	font-family: monospace;
	line-height:1.1em;
	font-weight: bold;
	font-size: larger;
	color: #66c;
}
.postBody li { padding: 2px 5px;margin:0;}

.postBody ul.cross li.tick,
.postBody ul.cross li,
.postBody ul.tick li {
	list-style-type: none;
	padding:0;
	line-height: 24px;
	padding-left: 24px;
	background-image: url(images/accept.gif);
	background-position: left center;
	background-repeat: no-repeat;
}

.postBody ul.cross li,
.postBody ul li.cross {
	list-style-type: none;
	line-height: 24px;
	padding-left: 24px;
	background-image: url(images/delete.gif);
	background-position: left center;
	background-repeat: no-repeat;
}

.postBody li.highlight {color: #900;background-color:#ccc}

.postBody q {
	font-weight:bold;
	word-spacing: 0.25em;
	color: #500;
	font-size: 14px;
}

/* Tables */
.postBody table {
	border-collapse: collapse;
	border: solid 1px #ccc;
	max-width:95% !important;
	margin: 0 auto 1em;
}

.ie6 .postBody table {
	width:95% !important; /* Not ideal but then what is with IE6 */
}
.postBody table tr.alternate {
	background-color: #ccc;
}

.postBody table td {
	padding: 0.5em 1em;
	vertical-align: top;
	border-left: solid 1px #ccc;
}

.postBody tfoot,
.postBody tfoot tr,
.postBody tfoot td{
	text-align: center;
	font-size: 10px;
	color: #b9a087;
	background-color: #999;
	padding: 0;
}

.postBody table th {
	padding: 0.5em 0;
	font-size: 10px;
	text-align: center;
	background-color: #222;
	color: #b9a087;
}

#sectionCatList {
	padding-top: 10px;
	clear: both;
}
#sectionCatList ul {
	padding: 10px 0;
	list-style-type:none;
	background: url(images/list.gif) no-repeat right center transparent;
}
#sectionCatList li.cat-item {
	background-position: 0 0.6em;
	text-indent: 16px;
}

.errorMessage{
	left:5px;
	background-color:#fff;
	color:#900;
	z-index:10;
	padding:0.5em;
	border:solid 1px #900;
	-moz-border-radius: 5px;
	-o-border-radius: 5px;
	-webkit-border-radius: 5px;
}

.unfocused {
	color: #999;
}

.alignleft {
	display:inline;
	float:left;
	clear:left;
	margin: 0.25em 0.5em 0.25em 0;
}

.aligncenter {
	display:block;
	text-align:center;
	margin: 1em auto 0;
}

.alignright {
	display:inline;
	float: right;
	clear:right;
	margin: 0.25em 0 0.25em 0.5em;
}

.wp-caption img {
	margin: 0;
}

p.wp-caption-text{
	font-size: 10px;
	line-height:1.6em;
	padding:1em 0 2em;
	margin: 0;
	background: url(images/caption-bottom.gif) no-repeat center bottom #FFF ;
}

.wp-caption {
	text-align:center;
}

div.wp-caption.alignright {
	padding:20px 0 0 15px;
	margin:0 -5px 0 5px;
	background: url(images/corner-tl.gif) no-repeat top left #FFF;
}

div.wp-caption.alignleft {
	padding:20px 15px 0 0;
	margin:0 5px 0 -5px;
	background: url(images/corner-tr.gif) no-repeat top right #FFF;
}

.sectionSecond .alignleft,
.sectionThird .alignleft,
.sectionLead .alignleft {
	margin: 0 10px 0 0;
	clear:none;
}

/*Counteract the extra 3px that show up on IE6 floats*/
.ie6 #sidebar{margin-left: 627px;}
.ie6 #sidebar160 {margin-left:137px;}
.ie6 .postSidebar {margin-left: 466px;}
.ie6 #newComment {margin-left:117px;}
.ie6 .sectionThird {margin-left:301px;}

.ie6 #importantPages li a{width:1px;}
.ie6 #logo {display:block;width:400px;height:110px;cursor:pointer}
.ie6 .widget li a {width:99%}
.ie6 .search-form .errorMessage {background-image:none;}

#comments {
	clear:left
}
.single .post {
	width: 457px;
	float:left;
	clear:left;
}