/*  
Theme Name: Ketch Harbour Wolves
Theme URI: http://ketchharbourwolves.ca
Description: Ketch Harbour Wolves Wordpress Theme
Version: Damascus
Author: Brian A. Urbanik
Author URI: http://brianurbanik.com/
*/

/* GENERAL NOTES */

/* COLOUR SCHEME */

/* Dark Grey 444444 */



/* SIFR FONT REPLACEMENT */
/* This theme uses the WP-SIFR plugin*/






@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: Arial, Helvetica, sans-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;
	
	background-color: none;
	
	/* background image */
	background-image: url('images/khw-background.jpg');
	
	/* background image set to repeat down the page (y-axis)*/
	background-repeat: repeat-y;
	
	background-attachment:scroll;
	
	/* 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 default text-color*/
	color: #444444;
	}

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










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

div#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 this element (in this case #wrapper), as opposed to the web page (the body) itself */
	position:relative;
	
	/* setting the overall width*/
	/* 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;  
	
	/* 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 ------- */

/* a default top margin for all of the h elements */
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: 1050px;*/
	
	}


#header div#masthead-image {
	
	width: 900px;
	height: 125px;
}

div#feature {
	
	padding-top: 300px;
	width: 900px;
	height: 600px;
	background-image: url('images/feature/ketch-harbour-wolves-breakdown-download-900-900.jpg');
	background-repeat: no-repeat;
}

#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#khw-web-menu table#Table_01 {

	/* centres the khw-web-menu table*/
	margin-left:auto; margin-right:auto;
	
}

#header div#khw-web-menu img.centered {

	/* centres the khw-web-menu table*/
	/* not sure why you have to make it a block here - it's already a block in the html markup*/
	display: block;
	margin-left:auto; margin-right:auto;
		
}




	
#header div.navmenu	{

	display: block;
	padding-top: 10px;
	position: absolute;
	left:0px;
	top:0px;
	z-index: 1;
		
	
	}

#header .navmenu ul {
	
	/* -- clear margins and padding just in case -- */
	margin: 0;
	padding: 0;
	width: 900px;
	margin: auto;
	text-align: left;
	
	
	}		
		
		
#header .navmenu li {

	/* -- clear margins and padding just in case -- */
	margin: 0; 
	padding: 0;
	
	list-style-image:none;
	list-style-type:none;
	
	display: inline;
	
	margin-right: 10px;
	margin-left: 10px;
	
	/* -- 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;
	

}	






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











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

/* setting the display of the sidebar to none so that it simply isn't displayed - leaving all of the now-unused sidebar styling for a little while, until I'm confident we simply don't need it any more, at which point it can be deleted, and the call for the sidebars should be removed from the various php files as well - bau101005*/

div#sidebar {display:none}

	/* --- 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*/
	width: 900px;
/* 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; 
	
	} 
	
	
#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;
	color:#900;
		
	}		
	

#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;
	width:600px;

		
	}	
	
#maincontent p.date {

	padding: 0;
	margin: 0;
	font-size:0.9em;
	color:#ffffff;
	
	}


#maincontent div.date {
	
	display: none;
	background-color:#CCCCCC;
	float: right;
	position: absolute;
	text-transform: uppercase;
	margin-top: 250px;
	margin-left: 200px;
	z-index: 1;
	border:3px coral solid;
	
}
	
#maincontent div.title {
	
	margin: 0;
	padding: 0;
	padding-left: 5px;
	width: 300px;
	text-transform: uppercase;
	/*opacity: 0.79;*/
	margin-top: 0px;
	margin-left: 0px;
	z-index: 1;
	border: none;
	border-bottom: 1px solid #fef5f8;
	
	display: none;
}
	

#maincontent div.entry {
	
	padding-bottom: 15px;
	font-size: 12px;
	color: #333;	
	


}

	
	
#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 {
	
	/*width: 750px;*/
	border: none;
	overflow: hidden;

	
	}
	
#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 0;
	
	background: none; 
	
	text-align: center;	
	clear: both;
	display: block;
	
	} 
	

#footer .navmenu ul {
	
	/* -- clear margins and padding just in case -- */
	margin: 0;
	padding: 0 auto 0;
	width: 900px;
	margin: auto;
	text-align: center;
}

#footer .navmenu li {

	display: inline;
	
	color: #CCCCCC;

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

/* This centres the web menu in the footer */
#footer .khw-web-menu table{
	
	margin: auto;
	
	}


#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 ------- */



.text-large {
	
	font-size: 18px;
	line-height: 22px;
	color:#666;
	
	}


.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;
}