/* ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ 
RESET (Meyer)
^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-size: 100%;
	vertical-align: baseline;
	background: transparent;
}
ol, ul {
	list-style: none;
	/*border: 1px solid green;*/
}
blockquote, q {
	quotes: none;
	border: none;
	margin-left: 12px;
	font-size: 0.9em;
	line-height: normal;
}

/* remember to define focus styles! */
:focus {
	outline: 0;
}

/* remember to highlight inserts somehow! */
ins {
	text-decoration: none;
}
del {
	text-decoration: line-through;
}

/* tables still need 'cellspacing="0"' in the markup */
table {
	border-collapse: collapse;
	border-spacing: 0;
}

/* ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ 
SITE DEFAULTS (This is where you redefine all the basic tags for your site. 
Youll handle the body, links, headers and such here.)
^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ */
html {
	background: transparent url(images/htmlbg.jpg) no-repeat center top;
}

body {
	margin: 0;
	padding: 0; 
	font: normal 1em/1.7em Helvetica, Arial, sans-serif; 
	color: #000000;
	text-align: center;
	background: transparent url(images/bodybg.gif) no-repeat center top;
}
h3 {
	font-size: 0.9em;
	color: #000000;
	margin-bottom: 8px;
}
h4 {
	font-size: 1.2em;
	color: #000000;
	margin-bottom: 20px;
	font-style: normal;
	font-weight: normal;
}
h5 {
	font-size: 1.2em;
	font-weight: bold;
	color: #000000;
	text-align: left;
	margin-bottom: 12px;
	
}
b {
	font-weight: bold;
	
}
ul {
	margin-left: 20px;
	margin-bottom: 25px;
	line-height: normal;

}
li {
	margin-bottom: 6px;
	list-style-type: disc;
}
blockquote {
	line-height:1.5em;
	margin-top:12px;
	margin-bottom:30px;
}
a:link {
	color:#611D7A;
	text-decoration:underline;
}
a:visited {
	color:#611D7A;
	text-decoration:underline;
}
a:hover {
	color:#c1161f;
	text-decoration: underline;
}
a:active {
	color:#611D7A;
	text-decoration:underline;
}

/* ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ 
GENERIC STYLES (This is where you create generic utility classes that you can use as 
a toolkit within your site. For example, clearing elements or generic form input styles.)
^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ */
.nodisplay {
	margin-left:-9999px;
}
.blockspacer {
	padding-bottom: 300px;
}
.spacer24 {
	width:200px;
	height:24px;
}
.center {
	display:block;
	margin-left:auto;
	margin-right:auto;
	text-align:center;
}	
.smaller {
	font-size: 0.85em;
}
.marleft12 {
	margin-left: 12px;
}
.marright12 {
	margin-right: 12px;
}
.clear {
	clear: both;	
}
.fltlft {
	float:left;
	margin-right: 12px;
}
.fltrt {
	float:right;
	margin-left: 12px;
}

/* ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ 
SHELL (This is where the layout is styled for the shell of the site. 
The shell is the outer layer of the site that exists on every page. 
The shell will have the site container, the header and the footer. 
Frequently, an important job of the shell is to set the width of the website.)
^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ */
#container {
	/*position:static;*/
	margin: 0px auto;
	padding: 0;
	width: 696px;
	/*border: 1px solid black;*/
	text-align: left;
	position: relative;
}
#content {
	margin-top: 250px;
	
}
#footer{
	text-align: left;
	padding-left: 63px;
	padding-top: 100px;
	background-image: url(images/footerbg.jpg);
	background-repeat: no-repeat;
	background-position: bottom;
	padding-bottom: 70px;
	clear:both;
}
/* ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ 
LAYOUT (Your website will probably break down into several templates. 
This is where you style the wireframes for those templates layouts. 
This section usually has a lot to do with columns.)
^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ */
#leftcol{
	/*top: 285px;
	position: relative;*/
	padding-left: 50px;
	color: #000000;
	width: 340px;
	padding-bottom: 29px;
	text-align: left;
	/*border: 1px solid blue;*/
	float:left;
	
}
#rightcol {
	/*position: absolute;
	left:104px; 
	right:auto; 
	top: 269px;
	margin-left: 390px;
	margin-top:285px;*/
	width: 220px;
	background-image: url(images/bgsidebar.jpg);
	background-repeat: no-repeat;
	background-position: left top;
	padding-right: 70px;
	/*border: 1px solid brown;*/
	float:right;
	/*display:inline;*/
}
#rightcol blockquote p {
	margin-bottom:12px;
}
#rightcol p {
	font-size:0.9em;
	color: #000000;
	line-height: 1.5em;
	margin-bottom: 2em;
	padding-left: 25px;
}
#rightcol h5 {
	padding-left: 25px;
}

/* ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ 
MODULARS (You may have small portions of your website that are styled the same, 
but across many pages and in many locations. Here you can make those modular boxes for reuse.)
^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ */
.copyright {
	font-size: 0.75em;
	color: #999999;
}
.opener {
	font-size: 1em;
	line-height: 1.7em;
	color: #000000;
	/*font-variant: small-caps;*/
	margin-bottom: 12px;
}
.blurbox {
	position: relative;
	left: 400px;
	top: -40px;
	z-index:1;
	border: 2px solid #00808d;
	height: 24px;
	width: 260px;
	/*padding-top:4px;*/
	font-variant: small-caps;
	font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
	font-size: 0.8em;
	font-weight: bold;
	color: #000000;
	text-align:center;
}
.blurbox a:link {
	color:#333333;
	text-decoration:none; 
}
.blurbox a:visited {
	color:#333333;
	text-decoration:none;  
}
.blurbox a:hover {
	color:#c1161f;
	text-decoration: underline;
}
.blurbox a:active {
	color:#333333;
	text-decoration: none; 
}
/* ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ 
SECTION/PAGE SPECIFIC (Once youve got everything else covered, youre only left to style 
elements individually. This may mean stying a box that appears in several pages in a section 
or a unique element on the site.)
^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ */
#schedule {
	position: relative;
}
#schedule h2 {
	position:relative;
	width:216px;
	height:24px;
	padding:0;
	overflow:hidden;
	margin-bottom: 4px;
	margin-top: 22px;
}
#schedule span {
	position:absolute;
	width:216px;
	height:24px;
	left:0;
	top:0;
	margin:0;
	background-image:url(images/hd-schedule.jpg); background-repeat:no-repeat;
}
#clothes {
	position: relative;
}
#clothes h2 {
	position:relative;
	width:216px;
	height:24px;
	padding:0;
	overflow:hidden;
	margin-bottom: 4px;
	margin-top: 22px;
}
#clothes span {
	position:absolute;
	width:216px;
	height:24px;
	left:0;
	top:0;
	margin:0;
	background-image:url(images/hd-clothes.jpg); background-repeat:no-repeat;
}
#accessories {
	position: relative;
}
#accessories h2 {
	position:relative;
	width:216px;
	height:24px;
	padding:0;
	overflow:hidden;
	margin-bottom: 4px;
	margin-top:22px;
}
#accessories span {
	position:absolute;
	width:216px;
	height:24px;
	left:0;
	top:0;
	margin:0;
	background-image:url(images/hd-accessories.jpg); background-repeat:no-repeat;
}
#hosting {
	position: relative;
}
#hosting h2 {
	position:relative;
	width:216px;
	height:24px;
	padding:0;
	overflow:hidden;
	margin-bottom: 4px;
	margin-top:22px;
}
#hosting span {
	position:absolute;
	width:216px;
	height:24px;
	left:0;
	top:0;
	margin:0;
	background-image:url(images/hd-host.jpg); background-repeat:no-repeat;
}
#about {
	position: relative;
}
#about h2 {
	position:relative;
	width:216px;
	height:24px;
	padding:0;
	overflow:hidden;
	margin-bottom: 4px;
	margin-top:22px;
}
#about span {
	position:absolute;
	width:216px;
	height:24px;
	left:0;
	top:0;
	margin:0;
	background-image:url(images/hd-about.jpg); background-repeat:no-repeat;
}
#maincol{
	top: 285px;
	position: relative;
	left: 55px;
	color: #000000;
	width: 570px;
	padding-bottom: 29px;
	text-align: left;
	/*border: 1px solid blue;*/
	/*float:left;*/
}
#maincol p {
	margin-bottom:2em;
}
/* ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ 
SUBSECTIONS (once your sections get large enough, be sure to divide them into logical subsections)
^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ */