/*  
Theme Name: Ketch Harbour Wolves*
Theme URI: http://ketchharbourwolves.com
Description: Ketch Harbour Wolves Theme - uses sIFR 3 r436 and automatically finds directory based on Pat Dryburgh's method.  Uses clean-theme-ready-for-styling as a starting point, which means it's heavily commented and well structured.
Version: 1.0
Author: Brian A. Urbanik
Author URI: http://brianurbanik.com/
*/










@charset "utf-8";
/* ------- CSS Document Begins ------- */










/* ------- Wildcard Selector ------- */

/* -- the "*" is a wildcard selector - in this case we're using it to remove all of the margin and padding from every selector - we do this so that we don't have to worry about any browser defaults, allowing us to have complete control over the margins and padding for every element -- */
* {
	margin: 0;
	padding: 0;
	}

/* ------- Wildcard Selector Ends ------- */










/* ------- Body Tag Styling ------- */

body {

	font-family: /*"Adobe Garamond Pro", */Georgia, "Times New Roman", Times, serif;
	
	font-size: 0.75em;
	
	line-height: 1.5em;
	
	/* set the minimum width here so that a really small browser will show scroll bars at a certain point, as opposed to letting the window collapse to nothing */
	min-width: 70em;
	
	/* set the background color to none */
	background-color: none;
	
	/* background image */
	background-image: url(header.png);
	
	/* background image set to not repeat */
	background-repeat: no-repeat;
	
	/* background image set to top center */
	background-position: center top;
	
	/* it's good practice to zero the margin and padding of the body element to account for differing browser defaults */
	margin: 0; 
	padding: 0;
	
	/* this centers the container in IE 5* browsers. The text is then set to the left aligned default in the #wrapper selector */
	text-align: center; 
	
	/* sets the text color to black */
	color: #444444;
	}

/* ------- Body Tag Styling Ends ------- */










/* ------- Wrapper Div Styling ------- */

#wrapper {
	
	/* div with the id "wrapper" wraps around absolutely everything - the only element outside of the "wrapper" div is the body tag*/
	
	/* setting the position to relative ensures that if you want to use absolute positioning the elements will be set relative to the #wrapper, as opposed to the web page (the body) itself */
	position:relative;
	
	/* setting the overall width to 900px */
	/* alternatively, in an adjustable width scheme you would use something like "width: 80%;" to create a wrapper div 80% of the browser width */
	width: 900px;  
	
	/* set the background color to none*/
	background: none;
	
	/* upper and lower margins are set to 0 - the auto margins (in conjunction with a width, whether in px, em, or %) centre the page */
	margin: 0 auto; 
	
	/* a solid border - remove the comments if you want to see it (it can help understand margins and padding to see this) */
	/*border: 1px solid #000000;*/
	
	/* this overrides the "text-align: center" which was set on the body element (see above) */
	text-align: left; 
	}

/* ------- Wrapper Div Styling Ends ------- */










/* ------- Generic Styling Begins ------- */

h1, h2, h3, h4, h5, h6 {

	margin-top: 10px;
	
	}

/* ------- Generic Styling Ends ------- */










/* ------- Pseudo Class Selectors Styling ------- */

a:link, a:visited {

	text-decoration: none;
	
	color: #990000;
	
	}

a:hover {

	text-decoration: overline underline;
	
	color: #CC0000;
	
	}

/* ------- Pseudo Class Selectors Styling Ends ------- */










/* ------- Header Styling ------- */


div#header {

	/* -- styling for the div that contains the navigation menu -- */
	/* -- setting the height so that the header.png background image shows "Ketch Harbour Wolves" -- */
	/* -- there are some serious discrepancies in the way that IE and Firefox calculate height -- */
	/* -- I just played around with this value until I found one that worked in both IE and Firefox -- */
	height: 270px;
	
	}


#header p.tagline {
	
	/* -- styling for "The official website of Ketch Harbour Wolves" -- */
	/* -- padding of 5px for top and bottom, 20px for right and left -- */
	margin: 20px;
	
	color: #990000;
	
	}

#header h1 {

	/* zeroing the margin of the last element in the #header div will avoid margin collapse - an unexplainable space between divs */
	/* if the div has a border around it, this is not necessary as that also avoids the margin collapse */
	/* check to see that this tag is in fact the last element in the #header div, otherwise this desn't work */	
	margin: 0; 

	}
	
	
#header div.navmenu	{

	/* -- styling for the div that contains the navigation menu -- */
	float:right;

	margin-right: 15px;
	
	border-bottom: dashed 1px #CCCCCC;
	
	}

#header .navmenu ul {
	
	/* -- clear margins and padding just in case -- */
	margin: 0;
	padding: 0;
	
	}		
		
	
#header .navmenu li {

	/* -- clear margins and padding just in case -- */
	margin: 0; 
	padding: 0;
	
	/* -- top padding for navmenu list items so that header.png shows -- */
	/* -- keep in mind that this margin overlaps with the margin of the p.tagline element -- */
	margin-top: 170px;
	
	list-style-image:none;
	list-style-type:none;
	
	float: left;
	
	/* width set to 100px means that each of the navbar list items receive 100px of space */
	/* the individual widths are specified below, so default acts as the default width (this is actually unnecessary - just a safety feature) */
	width: 100px;
	
	/* -- text alignment is set in sifr-config.js, and is controlled by sIFR so long as sIFR is rendering the fonts -- */
	/* -- so this text-align only applies to computers that do not have flash installed -- */
	text-align: center;

	/* -- font size of the navigation menu items -- */
	font-size: 1.75em;
	
	}

/* -- width of each individual navigation menu item -- */
/* -- this is important because sIFR doesn't allow padding or margins on text that it renders -- */
#header .navmenu li.media {width:100px;}
#header .navmenu li.press {width:100px;}
#header .navmenu li.show {width:100px;}
#header .navmenu li.myth {width:100px;}
#header .navmenu li.weblog {width:125px;}
#header .navmenu li.contact {width:135px;}



/* ------- Header Styling Ends ------- */











/* ------- Sidebar Styling ------- */

	/* --- note --- the sidebar is generated within a ul tag, which means that each element in the sidebar is an individual 'li' */
	/* some sidebar widgets have other 'ul' with separate 'li' within them - it helps to keep this in mind when styling */

#sidebar {

	/* floats the sidebar to the right */
	/* since this element is floated, a width must be given (see below) */
	float: right; 
	
	/* since this element is floated, a width must be given */
	/* the actual width of this div, in standards-compliant browsers, or standards mode in Internet Explorer will include the padding and border in addition to the width */
	/* here we've chosen a width of 224px, and the 1px left border will make for 225px total*/
	width: 224px; 
	
	/* the 1px grey border on the sidebar's left*/
	border-left-width: 1px;
	border-left-style: dashed;
	border-left-color: #CCCCCC;	
	
	/* the background color will be displayed for the length of the content in the column, but no further (though in this case it doesn't matter since its 'none') */
	background: none; 
	
	margin: 0;
	
	padding: 0;
	
	font-size:11px;
	
	}



#sidebar h2 {

	/*this adjusts the h2 font size, which is the sifr generated Oklahoma font*/
	font-size: 16px;
	
	/* top right bottom left */
	margin: 0;
	
	padding: 0;
	
	}	

#sidebar ul {

	/* this will style each dynamic element from the wordpress sidebar */
	/* remember that this is each element, for instance the GigPress element as a whole, but NOT the title (that is 'ul li') */

	list-style-type: none;
	
	/* top right bottom left */
	margin: 0 10px 0 20px;
	
	padding: 0;
	
	}
	
#sidebar ul li {

	/* top right bottom left */
	margin: 20px 0 0 0;
	
	}

#sidebar ul li ul li{

	list-style-type: disc;

	margin:0;

	line-height: 15px;
	
	/* top right bottom left */
	padding:5px 0 0 0;
	
	}
	
		
#sidebar .entry-content {

	/* twitter widget entry content (i.e. the tweet itself) */

	color: #3399FF;
	
	}
	
#sidebar .entry-meta {

	/* twitter widget meta content (i.e. the link to the tweet and where it came from) */

	font-style:italic;
	
	font-size: 90%;
	
	display: block;
	
	color: #000066;
	
	}
	
	
#sidebar .entry-meta a:link, #sidebar .entry-meta a:visited {

	text-decoration: none;
	
	color: #0033FF;
	
	}

#sidebar .entry-meta a:hover {

	text-decoration: overline underline;
	
	color: #3399FF;
	
	}	
	
	
	
#sidebar div.widget_sp_image {

	/* top right bottom left */
	margin:20px 0 0 0;
	}

/* ------- Sidebar Styling Ends ------- */










/* ------- Main Content Styling Begins ------- */

#maincontent { 
	
	/* setting the width of the maincontent container to 600px*/
	/* technically this shouldn't have to be done, but IE seems to require it*/
	width: 625px;
	
	
	/* the right margin on this div element creates the column down the right side of the page */
	/* no matter how much content the sidebar div contains, the column space will remain */
	/* you can remove this margin if you want the #maincontent div's text to fill the #sidebar space when the content in #sidebar ends */
	margin: 0 225px 0 0; 
	
	/* remember that padding is the space inside the div box and margin is the space outside the div box */
	/* padding of 10px on the right and 25 px on the left*/
	/* this means that max image width is 525px (800 - 225 - 25 - 25 = 625)*/
	/*padding: 0 25px 0; */
	
	} 
	
	
#maincontent h1 {

	/*this adjusts the h1 font size, which is the sifr generated Oklahoma font*/
	font-size: 1.5em;
		
	}	

	
#maincontent h2 {

	/*this adjusts the h2 font size, which is the sifr generated Oklahoma font*/
	font-size: 1.5em;
		
	}		
	

#maincontent h2.posttitle {

	/*this adjusts the h2 font size, which is the sifr generated Oklahoma font*/
	font-size: 2.0em;
		
	}	
	
	
#maincontent h3 {

	/*this adjusts the h2 font size, which is the sifr generated Oklahoma font*/
	font-size: 1.25em;
		
	}		
	
#maincontent h4 {

	/*this adjusts the h2 font size, which is the sifr generated Oklahoma font*/
	font-size: 1em;
		
	}		
	
#maincontent h5 {

	/*this adjusts the h2 font size, which is the sifr generated Oklahoma font*/
	font-size: 1em;
		
	}
	
#maincontent h6 {

	/*this adjusts the h2 font size, which is the sifr generated Oklahoma font*/
	font-size: 1em;
		
	}		
	
#maincontent p {

	padding-top: 10px;
	
	padding-bottom: 10px;

	word-spacing: 0.3em;
	
	letter-spacing: 0em;
		
	}	
	
#maincontent p.date {

	padding: 0;
	margin: 0;
	font-size:0.9em;
	color:#666666;
	
	}
	
	
#maincontent li {

	padding-top: 5px;
	padding-right: none;
	padding-bottom: 5px;
	padding-left: 7px;
	
	}	
	
#maincontent ul, #maincontent ol {

	list-style-position:inside;
	list-style-type: disc;
	/*background-color:#33FF00;*/
	
	margin:0;
	padding:0;
	margin-left:10px;
	
	/* top right bottom left */
	/*padding: 10 10 10 50px;*/
	
	}	
	
#maincontent ol {

	list-style-type: decimal;
	
	/* top right bottom left */
	/*padding: 10 10 10 50px;*/
	
	}		
	
	
#maincontent div.post {

	border-bottom: dashed 1px #CCCCCC;
	margin-bottom: 20px;
	
	}
	
#maincontent div#intro {

	border-bottom: dashed 1px #CCCCCC;
	margin-bottom: 20px;
	
	}	
	
#maincontent .breadcrumb {

	margin-bottom: 20px;
	
	}	

/* ------- Main Content Styling Ends ------- */










/* ------- Footer Styling Begins ------- */

#footer { 

	/* this padding matches the left alignment of the elements in the divs that appear above it. */
	padding: 25px;
	
	background: none; 
	
	text-align: center;	
	
	} 
	
		
#footer .navmenu li {

	display: inline;
	
	color: #CCCCCC;

	margin: 0;
	
	padding: 0 5px 0;
	
	list-style-image:none;
	
	list-style-type:none;
	
	}	

#footer p {
	
	/* zeroing the margins of the first element in the footer will avoid the possibility of margin collapse - a space between divs */
	/* check to see that this tag is in fact the first element in the #footer div, otherwise this desn't work */	
	margin: 0; 
	
	/* padding on this element will create space, just as the the margin would have, without the margin collapse issue */
	padding: 10px 0; 

	}

/* ------- Footer Styling Ends ------- */










/* ------- Image Styling Begins ------- */

img, a img, a:hover img {

	/* -- clearing all image borders --*/
	border: 0;
	}

p img { 

	/* -- as suggested by the WordPress Codex site: 
	"We want to clear all the padding around the images within your content 
	and make sure that the whole width of the image shows up rather than just a part of it."
	I'm not sure if this is necessary, but it doesn't hurt to include it -- */
	/*max-width: 100%;*/

	padding: 0; 
	margin: 0;
	
	}



.wp-caption.alignleft, .wp-caption.alignright, .wp-caption.aligncenter {

	/* -- clearing all possible styling from divs created by WordPress when images have captions --*/

	margin: 0;
	padding: 0;
	border: none;
	
	}

p.wp-caption-text {

	/* -- styling for image caption text -- */

	padding: 0;
	margin: 0;
	color: #999999;
	text-align:left;
	font-style:italic;
	font-size:0.9em;
	line-height:0.1em;
		
	}


img.alignleft, a img.alignleft, .wp-caption.alignleft {

	/* -- note that .wp-caption.alignleft is used to include the div created by WordPress when an image has a caption but is set to alignleft
	(the resulting div has class IDs of .wp-caption and .alignleft).  This way it's styled exactly the same as left-floated images. -- */

	/* an image that is aligned left will float to the left, and everything will come pressing up to it's right and bottom */
	float:left; 
	
	/* top right bottom left */
	margin:0 10px 10px 0;
	
	}


img.alignright, a img.alignright, .wp-caption.alignright {

	/* -- note that .wp-caption.alignright is used to include the div created by WordPress when an image has a caption but is set to alignright
	(the resulting div has class IDs of .wp-caption and .alignright).  This way it's styled exactly the same as right-floated images. -- */

	/* an image that is aligned right will float to the right, and everything will come pressing up to it's left and bottom */
	float:right; 
	
	/* top right bottom left */
	margin:0 0 10px 10px;
	
	}
	

img.aligncenter, a img.aligncenter, .wp-caption.aligncenter {

	/* -- note that .wp-caption.aligncenter is used to include the div created by WordPress when an image has a caption but is set to aligncenter
	(the resulting div has class IDs of .wp-caption and .aligncenter).  This way it's styled exactly the same as centered images. -- */

	/* -- "display: block" means that the element is displayed as a block, as paragraphs and headers have always been
	A block has some whitespace above and below it and tolerates no HTML elements next to it, except when ordered otherwise
	by adding a float declaration to another element, for instance).*/
	display: block; 
	
	/* -- left and right margins are set to auto, which evenly spaces the image*/
	margin-left: auto; 
	margin-right: auto;
	
	}


img.alignnone {

	/* -- "display: block" means that the element is displayed as a block, as paragraphs and headers have always been
	A block has some whitespace above and below it and tolerates no HTML elements next to it, except when ordered otherwise
	by adding a float declaration to another element, for instance).*/
	display: block; 
	
	/* top right bottom left */
	/* zero margins on images so that sliced images will touch, border to border - 100427 BAU */
	margin:0 0 0 0;
	
	/* top right bottom left */
	/* commented this out to remove the margin on images so that sliced images will touch, border to border - 100427 BAU */
	/*margin:0 0 10px 0;*/
	
	}
	
.wp-caption.alignnone {

	/* -- display: inline is used for the div created by WordPress when an image has a caption but is set to alignnone
	(it has class IDs of .wp-caption and .alignnone).  If display is not set to inline the div will be treated as a block element
	and it will not share a line with any other element.  This particularly comes into play when an image with a caption is
	floated left and the image with a caption beside it is set to align none. --*/
	display: inline; 
	
	/* top right bottom left */
	margin:0 0 10px 0;
	
	}




/* ------- Image Styling Ends ------- */






/* ------- Miscellaneous Styling Begins ------- */

div.paypal {

	margin-left: 15px;
	margin-bottom: 50px;
	
	}






/* ------- Miscellaneous Styling Begins ------- */














/* ------- Miscellaneous Classes for Reuse Begins ------- */

.fltrt { 

	/* this class can be used to float an element right in your page. The floated element must precede the element it should be next to on the page. */
	float: right;
	
	margin-left: 8px;
	}

.fltlft { 

	/* this class can be used to float an element left in your page */
	float: left;
	
	margin-right: 8px;
	
	}
	
.clearfloat { 

	/* this class should be placed on a div or break element and should be the final element before the close of a container that should fully contain a float */
	clear:both;
	
    height:0;
	
    font-size: 1px;
	
    line-height: 0px;
	
	}

.hide {

	/* this class can be used to set the display to none for elements that we want to hide */
	display: none;
	
	}

.nomargin {

	margin: 0;
	
	}
	
.nopadding {

	padding: 0;
	
	}	

/* ------- Miscellaneous Classes for Reuse Ends ------- */











/*Comments styling adopted from www.wpdesigner.com's tutorial series*/

.comments-template{
	margin: 10px 0 0;
	border-top: 1px solid #ccc;
	padding: 10px 0 0;
}

.comments-template ol{
	margin: 0;
	padding: 0 0 15px;
	list-style: none;
}

.comments-template ol li{
	margin: 10px 0 0;
	line-height: 18px;
	padding: 0 0 10px;
	border-bottom: 1px solid #ccc;
}

.comments-template h2, .comments-template h3{
	font-family: Georgia, Sans-serif;
	font-size: 16px;
}

.commentmetadata{
	font-size: 12px;
}

.comments-template p.nocomments{
	padding: 0;
}

.comments-template textarea{
	font-family: Arial, Helvetica, Georgia, Sans-serif;
	font-size: 12px;
}