/* Global CSS Document for harleyworthit.com*/

html, body, h1, h2, h3, h4, h5, h6, p, ol, ul, form, blockquote {
		padding: 0;
		margin: 0;
}

html, body {
	font-family: "Myriad Web Pro", Arial, sans-serif;
	background-image: url(../images/bgs/background.gif);
	background-repeat: repeat;
	font-size: 1em;
	/*font-size: 100.01%;*/
}

h1, h3, h4, h5, h6, p, pre, code {font-size: 1em;}
h2 {font-size: .8em;}
a {text-decoration: none;}

a:hover {text-decoration: underline;}

a img {border: none;}

/*#wrapper {
	position: relative;
	width: 800px;
	height: 800px;
	margin: 30px auto 0 auto;
	background-color: #ffc;
}*/

/* \*/

* html #tlc, * html #trc {height: 1%;}

/*this is the "wrapper" for the page, essentially.  It's a yellow box with drop shadow and sets the background for the content of each page*/

body#home td#homeLink,
body#contact td#contactLink,
body#schedule td#scheduleLink,
body#photos td#photosLink,
body#stuff td#stuffLink
 {
	background-color: #FFcc00;
}
#box
	{
	position: relative;
	margin-left: auto;
	margin-right: auto;	
	margin-top: 20px;
	padding: 0;
	text-align: left;
	width: 80%;				/*<-- use this to tie width to viewport size */
	width: 830px;				/* <-- use this for a set width */
	/*background-color: #ffffcc;*/
	}
 	
#content{
	padding: 0;
}
		
/* ---=== The borders code for "box", which serves as a wrapper, follows.  This gives the box the drop shadows, etc.--- */
/*-------------------------------------------
	tlc = top left corner
	trc = top right corner
	blc = bottom left corner
	brc = bottom right corner
	lb = left border
	rb = right border
	tb = top border
	bb = bottom border 
----------------------------------------------*/


#tlc, #trc, #blc, #brc
	{
	background-color: transparent;
	background-repeat: no-repeat;
	}

#tlc
	{
	background-image: url(../images/bgs/tlc.gif);
	background-position: 0% 0%;
	}

#trc
	{
	background-image:url(../images/bgs/trc.gif);
	background-position: 100% 0%;
	}
	
#blc
	{
	background-image:url(../images/bgs/blc.gif);
	background-position: 0% 100%;
	}

#brc
	{
	background-image:url(../images/bgs/brc.gif);
	background-position: 100% 100%;
	}

#tb, #bb
	{
	background-color: transparent;
	background-repeat: repeat-x;
	}
			
#tb
	{
	background-image:url(../images/bgs/tb.gif);
	background-position: 0% 0%;
	}

#bb
	{
	background-image:url(../images/bgs/bb.gif);
	background-position: 50% 100%;
	}
#rb
	{
	background-image:url(../images/bgs/r.gif);
	background-position: 100% 0%;
	background-repeat: repeat-y;
	}

#lb
	{
	background-color: #ffffcc;
	background-image:url(../images/bgs/l.gif);
	background-position: 0% 100%;
	background-repeat: repeat-y;
	}
	
	/*----------------------------end of "box" borders---------------------------------*/
	
#header {
	background-image: url(../images/bgs/banner.jpg);
	height: 150px;
	background-repeat: no-repeat;
	background-position: center;
}

/*-------------------leftpanel contains main Harley image for page-----------------*/

#leftpanel {
	position: absolute;
	z-index: 10;
	left: 15px;
	top: 109px;
	}
#leftpanel.schedule {
	top: 130px;
	z-index: 10;
}
#leftpanel.archive {
	top: 160px;
}
#leftimg {
	width: 250px;
	padding: 10px 50px 10px 0;
}
#leftimg p {
	display: block;
	padding: 20px 30px 20px 30px;
	margin-top: -20px;
	text-align: center;
	color: #1c6a84;
}
#leftimg img.center {
	display: block;
	text-align: center;
	margin: 50px 10px 10px 50px;
}
#leftimg img.center_2 {
	display: block;
	text-align: center;
	margin: 0 10px 10px 75px;
}
#sidebar {
	background:url(../images/bgs/sidebar2bg.gif) center top repeat-y;
	color: #ffffcc;
	font-family: "Myriad Web Pro", Arial, sans-serif;
	width: 210px;
	margin-left: 20px;
	margin-top: 20px;
}
#sidebar h3 {
	background:url(../images/bgs/h3bg.gif) center top no-repeat;
	font-size: 1.1em;
	padding: 20px;
}
#sidebar ul {
	background: url(../images/bgs/bottombg.gif) center bottom no-repeat;
	color: #ffffcc;
	list-style: none;
	padding:0 10px 30px 30px;
}
#sidebar ul li {
	display: block;
	padding: 5px;
	}
#sidebar ul li a {
	color: #FFCC00;
	}
#sidebar ul li a:hover {
	color: #FFffcc;
	text-decoration: none;
	border: 1px solid #FFCC00;
	padding: 5px;
	background-color: #6a9ebb;
}

	
/*this is where nav icons are.  There is a table in this nav which contains the images in two rows*/

#nav {
	position: absolute;
	left: 460px;
	top: 95px;
	width: 300px;
	height: 80px;
}

#nav table {
	text-align: center;
}

#navbar img{
	display: block;
	margin-left: 25px;
	margin-top: 5px;
	margin-bottom: 0;
}

ul.links { 
	font-family: "Garth Hand", "Myriad Web Pro", verdana, sans-serif;
	font-size: 14px;
	margin-left: 400px;
	margin-bottom: 0;
	padding: 5px 0 5px 0;
	list-style: none;
}

.links li	{
	display: inline;
	padding-right: 20px;
}

.links li a {
	color: #1c68a4;
}

.links li a:hover {
	color:#FF0000;
	text-decoration: none;
}


/*this is the text content area...#textarea acts as sort of a wrapper for the textbox divs, in which the main text is places*/

#textarea {
	position: relative;
	height: 1000px;
}

#textarea.bio {
	height: 1450px;
}

#textarea.philo {
	height: 1000px;
}
#textarea.archive {
	height: 400px;
}

#textarea.joke {
	height: 600px;
}
#textarea.slide {
	height: 800px;
}
#textarea.stuff {
	height: 1500px;
}
#textarea.schedule {
	height: 1700px;
}
.recline img {
	position: absolute;
	left: 5px;
	bottom: -10px;
	z-index: 15;
}
dl {
	padding: 0;
	margin: 0;
}
.warning {
	color: #FFCC00;
	font-weight: bold;
}
.highlight {
	font-size: 1.2em;
	font-weight: bold;
}
.small {
	font-size: .8em;
}
.fineprint {
	font-size: .6em;
}
.clear {
	clear: both;
}

/*---------------the textbox divs create the blue box in which text is placed on each page---------------*/

#textbox
	{
	position: absolute;
	left: 261px;
	/*top: 20px;*/
	/*margin-top: 30px;*/
	padding: 0;
	width: 95%;				/* <-- use this to tie width to viewport size */
	width: 450px;				/*<-- use this for a set width */
	z-index: 7;
			
}
#textbox.bio {
	width: 550px;
}

#textbox.philo {
	width: 500px;
}
#textbox.archive {
	left: 190px;
	width: 600px;
}
table.archive {
	width: 90%;
	vertical-align:middle;
	padding: 3px;
	margin: 5px;
	border: none;
}
table.orderform {
	width: 100%;
	text-align: left;
	padding: 2px;
	border: 1px;
	border-color:  #ffffcc;
	/*border-collapse: collapse;*/
}
table.orderform th {
	background-color: #ffffcc;
	color: #6a9ebb;
	font-weight: bold;
	text-align: center;
}
table.orderform td {
	padding: 2px;
	text-align: left;
	vertical-align: middle;
	color: #ffffcc;
	border: 1px;
	border-color:  #ffffcc;
}
table.schedule {
	width: 100%;
	text-align: left;
	padding: 2px;
	border: 1px;
	border-color:  #ffffcc;
	/*border-collapse: collapse;*/
}
table.schedule th {
	background-color: #ffffcc;
	color: #6a9ebb;
	font-weight: bold;
	text-align: center;
}
table.schedule td {
	padding: 2px;
	text-align: left;
	vertical-align: middle;
	color: #fff;
	border: 1px;
	border-color: #ffffcc;
}

	
/*#textbox td {
	text-align: center;
	padding: 3px;
}*/

#textbox.joke {
	left: 280px;
	width: 430px;
}
#textbox.stuff {
	left: 320px;
	width: 450px;
}
#textbox.slide {
	left: 20px;
	width: 95%;
}
#textbox.schedule {
	width: 480px;
}


/*-------------Here's the text in the blue box---------------------------*/ 	
#textcontent
	{
	padding: 0 3em 3em 3em;
	
	}
#textcontent.stuff {
	padding-left: 4.5em;
	}

#textcontent h1
	{
	color: #FFFFFF;
	font-weight: bold;
	font-size: 1.4em;
	font-family: "Myriad Web Pro", helvetica, geneva, arial, sans-serif;
	margin-bottom: .5em;
	padding-top: 1.5em;
	}
	
#textcontent h1.topborder {
	display: block;
	border-top: 2px solid #fff;
	margin: 0;
	padding: .5em;
}
#textcontent h2 {
	color: #FFFFFF;
	font-weight: bold;
	font-size: 1em;
	font-family: "Myriad Web Pro", helvetica, geneva, arial, sans-serif;
	margin-top: .5em;
	margin-bottom: .5em;
	}
		
#textcontent p
	{
	color:#ffffcc;
	font-size: 1em;
	line-height: 1.2em;
	margin-bottom: .5em;
	}
#textcontent p.small {
	font-size: .8em;
	color: #FFCC00;
	font-weight: bold;
}
#textcontent img.floatleft {
	float: left;
	margin-right: 5px;
}
#textcontent img.floatright{
	float: right;
	margin-left: 5px;
}
#textcontent a {
	color: #FFCC00;
	font-weight: bold;
}

#textcontent a:hover {
	background-color: #1c6a84;
	text-decoration: none;
}
#flash {
	text-align: center;
	padding: 10px;
}
#flash p {
	display: block;
	padding: 5px;
}
		
/* ---=== border code for the blue textbox divs follows ===--- */
/*
	texttlc = top left corner
	texttrc = top right corner
	textblc = bottom left corner
	textbrc = bottom right corner
	textlb = left border
	textrb = right border
	texttb = top border
	textbb = bottom border 
-----------------------------------------------------------------------*/


#texttlc, #texttrc, #textblc, #textbrc
	{
	background-color: transparent;
	background-repeat: no-repeat;
	}

#texttlc
	{
	background-image: url(../images/bgs/texttlc.gif);
	background-position: 0% 0%;
	}

#texttrc
	{
	background-image:url(../images/bgs/texttrc.gif);
	background-position: 100% 0%;
	}
	
#textblc
	{
	background-image:url(../images/bgs/textblc.gif);
	background-position: 0% 100%;
	}

#textbrc
	{
	background-image:url(../images/bgs/textbrc.gif);
	background-position: 100% 100%;
	}

#texttb, #textbb
	{
	background-color: transparent;
	background-repeat: repeat-x;
	}
			
#texttb
	{
	background-image:url(../images/bgs/texttb.gif);
	background-position: 0% 0%;
	}

#textbb
	{
	background-image:url(../images/bgs/textbb.gif);
	background-position: 50% 100%;
	}
#textrb
	{
	background-image:url(../images/bgs/textr.gif);
	background-position: 100% 0%;
	background-repeat: repeat-y;
	}

#textlb
	{
	background-color: #689ebb;
	background-image:url(../images/bgs/textl.gif);
	background-position: 0% 100%;
	background-repeat: repeat-y;
	}
	
/*-------------These divs can further compartmentalize text inside the content area.  Not used currently	
#textarea .text {
	font-size: 14px;
	color: #000;
	margin-left: 300px;
	margin-top: 30px;
	margin-right: 100px;
	padding: 10px;
}
#textarea .text strong {
	font-size: 16px;
}
#textarea .text a, a:hover{
	color: #FFCC00;
}-----------------------------------------------------------------------------------------------------------------------*/

/*-----------------------------------Copyright and email info div---------------------------------------------------*/

#footer {
	font-size: .7em;
	width: 700px;
	margin:  20px auto 20px auto;
	padding-bottom: 20px;
	color: #812e1c;
	text-align: center;
}
#links {
	width: 800px;
	margin: 0 auto;
	margin-top: 20px;
	margin-bottom: 20px;
	color: #ffffcc;
}
#links ul {
	list-style-type: none;
	text-align: center;
	width: auto;
	padding: 0;
	padding-bottom: 20px;
	margin: 0;
}
#links ul li {
	display: inline;
}
#links ul li a {
	text-decoration: none;
	color: #fff;
	font-family:"Myriad Web Pro", Arial, sans-serif;
	font-size: .7em;
}
#links ul li a:hover {
	text-decoration: underline;
}	
#filmstrip {
	position: absolute;
	left: 212px;
	top: 526px;
}
.audio {
	list-style: none;
	color: #FFFF99;
}
/* easy drop shadow for images*/
.img-wrapper {
	float: left;
	background-image: url(../images/bgs/shadow.gif);
	background-repeat: no-repeat;
	background-position: right bottom;
}
.img-wrapper div {
	background: url(../images/bgs/mask-trans.png) no-repeat left top  !important;
	background: url(../images/bgs/mask.gif) no-repeat left top;
	padding: 0px 5px 5px 0px;  /*KLUDGE: Fixes bug in IE/Mac */
	float: left;
}
.img-wrapper img {
	background-color: #fff;
	border: 1px solid #a9a9a9;
	padding: 4px;
}