/************************************************************
*****
*****	Website:		Townsend Bay Marine
*****	Filename:		main.css
*****	Version:		1.5
*****	Last modified: 	31 July 2008
*****	Author:			Kevin Browne
*****	E-mail:			kevin@workpump.com
*****	Copyright:		Workpump, Inc.: 2005-2008
*****	
*****	This file will control all styling for Townsend Bay Marine
*****
*****	Oh man, I couldn't find anything with this CSS file importing several others. Thus, a bigger file and a version change.
*****
*****
*****	Table of Contents
*****	-------------------------------------------
*****	- Content, Primary: Formatting (=CNT1F)
*****		- Headings (=C1HDG)
*****		- Text (=C1TXT)
*****		- Lists (=C1LST)
*****		- Images (=C1IMG)
*****		- Microformats (=C1MCR)
*****		- Links (=C1LNK)
*****	- Alert (=ALRT)
*****	- Sponsor (=SPNSR)
*****	- Header (=HDR)
*****	- Footer (=FOOT)
*****	- Testimonials (=TSTMN)
*****	- Primary Navigation (=NAV1)
*****	- Basic Layout Structure (=LOUT)
*****	- Forms (=FORM)
*****	- Colors and Backgrounds (=COBG)
*****	- Typography (=TYPE)
*****		- Special Cases (=TYPSPC)
*****		- Line Heights (=TYPHT)
*****		- Font Faces (=TYPFCE)
*****		- Font Sizes (=TYPSZ)
*****		- Kerning (=TYPKRN)
*****
************************************************************
*****
*****	CHANGELOG
*****
*****	2006.12.05 - Border color of #content img.picture-left/right changed from white to black
*****
************************************************************
*****
*****	In this town there lived an outlaw by the name of Texas Red
*****	Many men had tried to take him and that many men were dead
*****	He was vicious and a killer though a youth of twenty four
*****	And the notches on his pistol numbered one an nineteen more
*****	One and nineteen more
*****	- Marty Robbins "Big Iron"
*****
************************************************************/


@import url("firefox.css");



* {
	margin: 0;
	padding: 0;
}



/**************************************************
***		Content, Primary: Formatting (=CNT1F)
**************************************************/
#content {text-align: left;}


/**** HEADINGS (=C1HDG) ****/
h1 {margin: 20px 0 40px 0;}

h2 {margin: 40px 0 20px 0;}

h3, h4, h5, h6 {margin: 40px 0 10px 0;}



/**** TEXT (=C1TXT) ****/
abbr,
acronym {
	border-bottom: 1px dotted;
}

blockquote {
	padding: 0 40px 0 30px;
}

p {
	margin: 20px 0;
}

pre + p {
	margin-top: 20px;
}




/* Audio Interviews */




/**** LISTS (=C1LST) ****/
div#content dl {
	margin: 20px 0;
}

	div#content dl dd {
		margin: 0 0 10px 15px;
	}

		div#content dl dd blockquote {
			padding-bottom: 20px;
			padding-top: 20px;
		}
	
		div#content dl dd p {
			margin: 0;
		}
		
			div#content dl dd p + p {
				margin-top: 20px;
			}

	div#content dt {
		font-weight: bold;
	}

div#content ol {
	margin: 20px 0;
}

	div#content ol li {
		margin-left: 22px;
		padding-left: 1px;
	}

div#content ul {
	margin: 20px 0;
}

	div#content ul li {
		margin-left: 15px;
		padding-left: 7px;
		text-indent: 20px;
	}

	div#content ul li ul {
		margin-top: 0px;
	}

li p {
	margin: 0;
}

	li p + p {
		margin-top: 20px;
	}

div#content ul#sitemap ul {
	margin-bottom: 0;
}




/* What's New list */
div#content dl#whatsnew dd {
	background-color: #fff;
	color: #000;
	border: 2px solid #000;
	border-top-width: 0px;
	margin-left: 0;
	padding: 10px 10px;
}

div#content dl#whatsnew dt {
	background-color: #ddd;
	color: #000;
	border: 2px solid #000;
	border-bottom-width: 0px;
	margin-top: 20px;
	padding: 5px 10px;
}



/**** IMAGES (=C1IMG) ****/
#content img {
	border: 1px solid #000;
}

	#content a img.expand,
	#content a img.expand:active {
		border: 2px solid transparent;
	}
	
	#content a img.expand:hover,
	#content a img.expand:focus {
		border: 2px solid white;
	}

#content img.picture-left {
	border: 1px solid;
	float: left;
	margin-right: 10px;
}

#content img.picture-right {
	border: 1px solid;
	float: right;
	margin-left: 10px;
}

/*Picture of the month image*/
#content img.potm {
	border: 1px solid #000;
	float: left;
	margin-bottom: 40px;
	width: 531px;
}


/* Web Picture Creator */
#content img.thumb,
img.main_img,
img.main_thumb {
	border: 1px solid #000;
}



/**** Microformats (=C1MCR) ****/
.vcard p {margin: 0;}

	.vcard p.org {font-weight: bold;}

.vcard div {margin-top: 20px;}

	.vcard .adr {margin-top: 0;}

	.vcard .type {display: none;}

.email p,
.tel p {margin-left: -5px;}
	




/**** LINKS (=C1LNK) ****/
a[href="http://www.webpicturecreator.com"] {display: none;}

a:hover {text-decoration: none;}




/************************************************************
***		Visual styling of thumbnail gallery
************************************************************/

	
div.lightbox_thumbnail {
	clear: both;
	float: left;
	width: 535px;
}

.noShow {display: none;}

	div.lightbox_thumbnail div {
		background-color: #fff;
		border: 1px solid #000;
		clear: right;
		float: left;
		margin: 0 8px 20px 0;
		padding: 8px;
		width: 152px;
	}
	
		div.lightbox_thumbnail div.last {
			margin: 0 0 0 1px;
		}
	
		div.lightbox_thumbnail a {
			display: block;
		}
	
		div.lightbox_thumbnail img {
			max-width: 150px;
		}
		
		div.lightbox_thumbnail p {
			margin: 0;
			padding: 0;
		}
	
			div.lightbox_thumbnail p a {
				background-color: #fff;
				color: #000;
				text-align: center;
			}
	
			div.lightbox_thumbnail p + p {
				font-size: 10px;
				padding-top: 5px;
			}



/**************************************************
***		Alert (=ALRT)
**************************************************/

.alert {
	background-color: #fff;
	background-image: url(../graphics/alert.jpg);
	background-position: 10px 10px;
	background-repeat: no-repeat;
	border: 3px solid #000;
	color: #000;
	padding: 10px;
}

/*.alert {
	background-color: #fff;
	border: 3px solid #000;
	color: #000;
	float: right;
	margin: -20px 0 0 550px;
	padding: 5px 10px;
	position: fixed;
	width: 220px;
}*/

	.alert h2 {
		color: #981323;
		margin: 12px 0 0 58px;
		padding: 0;
	}

	.alert p {
		font-size: 13px;
		margin-bottom: 0;
		padding-bottom: 0;
	}

.alert-macAudio {
	background-color: #fff;
	border: 3px solid #000;
	color: #000;
	margin: 0 0 10px 0;
	padding: 5px 0 5px 20px;
}

	.alert-macAudio h2 {
		color: #981323;
		margin: 5px 0;
		padding: 0;
	}

	.alert-macAudio img {
		float: left;
		margin: 0 1em 1em 0;
	}



/**************************************************
***		Header (=HDR)
**************************************************/
#header {
	margin: 0;
	padding: 3px 0 0 0;
	width: 100%;
}

	#header_photo {
		margin: 25px 0 0 0;
	}

		#header_photo img {
			border-style: solid;
			border-width: 1px 1px 0 0;
		}



/**************************************************
***		Footer (=FOOT)
**************************************************/
div#footer {
	border-top: 1px solid;
	clear: both;
	margin: 40px 0 0 265px;
	padding: 40px 0;
	text-align: center;
}

	div#footer ul {
		list-style: none;
		margin: 0;
		padding: 0;
		width: auto;
	}
	
		div#footer ul li {
			border-left: 1px solid;
			display: inline;
			padding: 0 10px;
		}
		
			div#footer ul li#footer_navFirst {
				border-left: 0;
				padding-left: 0;
			}
			
			div#footer ul li#footer_navLast {
				padding-right: 0;
			}


			/***** Links *****/
			div#footer ul li a,
			div#footer ul li a:active,
			div#footer ul li a:link,
			div#footer ul li a:visited {
				text-decoration: underline;
			}
			
			div#footer ul li a:hover {
				text-decoration: none;
			}



/**************************************************
***		Testimonials (=TSTMN)
**************************************************/
#testimonials {
	font-style: italic;
	font-weight: bold;
	left: 0;
	margin: 0;
	padding: 0 0 0 10px;
	position: absolute;
	text-align: right;
	top: 500px;
	width: 220px;
}

	#testimonials p.source {
		font-size: 16px;
		font-style:normal;
		font-weight: normal;
		text-align: right;
	}

	#testimonials a img {
		border: none;
	}



/**************************************************
***		Sponsor (=SPNSR)
**************************************************/
.sponsor {
	background-color: #fff;
	border: 3px solid #000;
	color: #000;
	float: right;
	margin: 0;
	padding: 10px;
	width: 165px;
}

	.sponsor h2 {
		color: #981323;
		margin: 10px 0;
		padding: 0;
	}

	.sponsor p {
		font-style: normal;
		font-weight: normal;
		text-align: left;
	}
	
	.sponsor p.txt {
		border-top: 1px solid #ccc;
		margin: 20px 0 0 0;
		padding: 10px 0 0 0;
	}
	
	.sponsor p.img {
		margin: 0;
		padding: 0;
	}

		.sponsor p.img a img {
			border: none;
		}


/**************************************************
***		Basic Layout Structure (=LOUT)
**************************************************/
body {
	padding-top: 3px;
}

#main {
	width: 800px;
}

#content {
	margin: 0 0 0 265px;
	padding: 0;
}



/**************************************************
***		Forms (=FORM)
**************************************************/
fieldset {
	margin-bottom: 20px;
	padding-bottom: 20px;
}

input,
select,
textarea {
	margin: -20px 0 0 170px;
}

input[type=text],
input[type=password] {
	width: 150px;
}

input[type=checkbox],
input[type=radio] {
	margin-top: -17px;
}

input[type=button],
input[type=reset],
input[type=submit] {
	margin: 10px 0 0 0;
	padding: 2px 5px;
}

input[type=reset] {
	margin-left: 170px;
}

label {
	display: block;
	margin: 0 380px 0 0;
	padding-top: 10px;
	text-align: right;
}

textarea {
	height: 100px;
	width: 300px;
}

p.terms input {
	margin-top: 0;
}

p.buttons {
	margin-top: -20px;
}



/**************************************************
***		Colors and Backgrounds (=COBG)
**************************************************/
/*** Red: a21426
**** Dk Red: 981323
**** Blue: 67d1dc
*/


html {
	background-color: #A21426;
	color: #fff;
}

body {
	background-color: #A21426;
	background-image: url(../graphics/bkg_gradient.gif);
	background-repeat: repeat-x;
	color: #fff;}

#header_photo img {
	border-color: #fff;
}



/*** FOOTER ***/
#footer {
	border-top-color: #fff;
	color: #fff;
}

	#footer ul li {
		border-left-color: #fff;
	}

		#footer ul li a,
		#footer ul li a:active,
		#footer ul li a:link,
		#footer ul li a:visited {
			color: #fff;
		}
	
		div#footer ul li a:hover {
			background: #fff;
			color: #981323;
		}



/*** CONTENT ***/
abbr,
acronym {
	border-bottom-color: #fff;
}

#content,
h1, h2, h3, h4, h5, h6 {
	color: #fff;
}

code, var {
	color: #aaa;
}

#content img.picture-right,
#content img.picture-left {
	border: 1px solid #000;
}

a img.expand,
a img.expand:active {
	border-color: transparent;
}

a img.expand:hover,
a img.expand:focus {
	border-color: white;
}

a,
a:link,
a:active,
a:visited,
ul a,
ul a:link,
ul a:active,
ul a:visited {
	background-color: none;
	color: #67D1DC;
}

a:hover,
ul a:hover {
	background-color: white;
	color: #981323;
}



/*** TESTIMONIALS ***/
#testimonials,
#testimonials p.source {
	color: #FFF;
}



/**************************************************
***		Typography (=TYPE)
**************************************************/



/***** SPECIAL CASES (=TYPSPC) *****/
.BoatName {font-style: italic;}

.interviewName {
	font-weight: bold;
	text-transform: uppercase;
}



/***** FONT FACES (=TYPFCE) *****/
h1, h2, h3, h4, h5, h6 {font-family: Geneva, Arial, Helvetica, sans-serif;}

dd, dl, dt, p, li, ol, ul, #content, #footer {font-family: Arial, Helvetica, sans-serif;}

code, var {font-family: "Courier New", Courier, monospace;}



/***** FONT SIZES (=TYPSZ) *****/
body {font-size: small; line-height: 1.25;}

h1 {
	font-size: 25px;
	line-height: 1.25;
}

h2 {
	font-size: 20px;
	line-height: 1.25;
}

dd, dl, dt, p, li, ol, ul, #content {
	font-size: 16px;
	line-height: 1.25;
}

code, var {font-size: 14px;}

#footer li,
#footer p {
	font-size: 10px;
}



/***** KERNING (=TYPKRN) *****/
#main #content p abbr,
#main #content p acronym {
	font-variant: small-caps;
	letter-spacing: 1px;
}



/* Web Picture Creator */
td div p,
td div p a {
	font-size: 12px;
}

a[href="http://www.webpicturecreator.com"] {
	display: none;
}



/****************************************
***
***		Link Icons (=ICON)
***
***		NOTE: Icons are from the Silk set:
***		http://www.famfamfam.com/lab/icons/silk/
***
****************************************/
a[href ^="mailto:"] {
	background-color: transparent;
	background-image: url(../graphics/icons/email.png);
	background-position: bottom right;
	background-repeat: no-repeat;
	padding-right: 18px;
}



/*** Filetypes ***/
a[href $='.css'] {
	background-color: transparent;
	background-image: url(../graphics/icons/filetype-css.png);
	background-position: bottom right;
	background-repeat: no-repeat;
	padding-right: 18px;
}

a[href $='.doc'] {
	background-color: transparent;
	background-image: url(../graphics/icons/filetype-doc.png);
	background-position: bottom right;
	background-repeat: no-repeat;
	padding-right: 18px;
}

a[href $='.pdf'] {
	background-color: transparent;
	background-image: url(../graphics/icons/filetype-pdf.png);
	background-position: bottom right;
	background-repeat: no-repeat;
	padding-right: 18px;
}

a[href $='.otf'],
a[href $='.ttf'] {
	background-color: transparent;
	background-image: url(../graphics/icons/filetype-font.png);
	background-position: bottom right;
	background-repeat: no-repeat;
	padding-right: 18px;
}

a[href $='.ppt'] {
	background-color: transparent;
	background-image: url(../graphics/icons/filetype-ppt.png);
	background-position: bottom right;
	background-repeat: no-repeat;
	padding-right: 18px;
}

a[href $='.rar'],
a[href $='.zip'] {
	background-color: transparent;
	background-image: url(../graphics/icons/filetype-zip.png);
	background-position: bottom right;
	background-repeat: no-repeat;
	padding-right: 18px;
}

a[href $='.xls'] {
	background-color: transparent;
	background-image: url(../graphics/icons/filetype-xls.png);
	background-position: bottom right;
	background-repeat: no-repeat;
	padding-right: 18px;
}

/** Change bkg color on hover **/
a[href ^="mailto:"]:hover, a[href $='.css']:hover, a[href $='.doc']:hover, a[href $='.pdf']:hover, a[href $='.otf']:hover, 
a[href $='.ttf']:hover, a[href $='.ppt']:hover, a[href $='.rar']:hover, a[href $='.zip']:hover, a[href $='.xls']:hover,
a[href ^="mailto:"]:focus, a[href $='.css']:focus, a[href $='.doc']:focus, a[href $='.pdf']:focus, a[href $='.otf']:focus,
a[href $='.ttf']:focus, a[href $='.ppt']:focus, a[href $='.rar']:focus, a[href $='.zip']:focus, a[href $='.xls']:focus {
	background-color: #fff;
}