/* contact: John Dowler, cosmicidea.com
jdowler@cosmicidea.com
Sep 2007
CSS styling Ron White and John Dowler

see also  ie6hack.css and ie7hack.css*/

/* CONTENTS
General 
Header
Main Content
Left Column
RIght Column
Absolute Right Column
Footer
Main Navigation
Hacks
 */

/*GENERAL ======================================== */

html
{
	margin:0;
	padding:0;
}
body
{
	width:100%;
	height:auto;
	margin:0;
	padding:0;
	border:0;
	text-align:center;
	background-color:#FFFFFF;
	font-size: 100%;
}

/* HEADER ======================================= */ 


#header_wrapper
{
	width:100%;
	height:163px;
	margin:0;
	padding:0;
	text-align:center;
	background:#596f87;
}
#header_wrapper a, a:visited
{
	color:#ff0033;
	text-decoration:none;
}
#header_wrapper a:hover
{
	color:#336699;
}
#header_wrapper a:active
{
	color:#6699cc;
}
#header
{
	width:960px;
	height:163px;
	margin:0 auto;
	padding:0;
	color:#ff0033;
	background:url(images/header.png) top left no-repeat;
}


/* MAIN CONTENT ======================================= */ 


#main_wrapper
{
	width:100%;
	height:auto;
	margin:0 auto;
	padding:0;
	text-align:left;
	background:#d3e3e6;
}
#main
{
	width:960px;
	height:auto;
	margin:0 auto;
	padding:0;
	background:#ffffff;
}

#main_wrapper a:link 
{
color:#FF0000;
}

a:visited {
	/*color:#FF9933;*/
	color:#660099;
	text-decoration: underline;
}

/* LEFT COLUMN ======================================= */ 


#left
{
	float:left;
	width:208px;
	height:auto;
	margin-left:22px;
	margin-right:30px;
}
#left h1
{
	margin-bottom:15px;
	font-size: 112.5%;
	letter-spacing:.8px;
	color:#330066;
	font-family: trebuchet ms, verdana, arial, sans-serif;
}
#left p
{
	font-size:87.5%;
	color:#333333;
	font-family: courier;
	letter-spacing: 1.25%;
}


/* RIGHT COLUMN ======================================= */ 

#right
{
	float:left;
	width:444px;
	margin-top:50px;
}
#right h1
{
	margin-bottom:25px;
	font-size: 112.5%;
	letter-spacing:.8px;
	color:#330066;
	font-family: trebuchet ms, verdana, arial, sans-serif;
}

#right h2
{
	margin-bottom:10px;
	margin-top: 25px;
	font-size: 100%;
	letter-spacing:.8px;
	color:#333333;
	font-family: trebuchet ms, verdana, arial, sans-serif;
}


#right p, form
{
	font-size:81.25%;
	color:black;
	font-family: trebuchet ms, verdana, arial, sans-serif;
}
#pictures
{
	float:right;
	height:auto;
	width:113px;
	margin-right:70px;
	margin-top:110px;
}

/*#articles #pictures
{
	margin-top:50px;
}*/


#pictures img
{
	margin-bottom:10px;
}


.top_link {
	font-size:68.75%;
	text-align: right;
	padding-right: 300px;
	padding-bottom: 8px;
}

/* ABSOLUTE RIGHT COLUMN ======================= */

#right2
{
	float:left;
	width:444px;
	height:540px;
	margin-top:20px;
	margin-bottom: 60px;
	overflow:auto;
}
#right2 h1
{
	margin-bottom:25px;
	font-size: 112.5%;
	letter-spacing:.8px;
	color:#330066;
	font-family: trebuchet ms, verdana, arial, sans-serif;
}

#right2 h2
{
	margin-bottom:10px;
	margin-top: 25px;
	font-size: 100%;
	letter-spacing:.8px;
	color:#333333;
	font-family: trebuchet ms, verdana, arial, sans-serif;
}


#right2 p, form
{
	font-size:81.25%;
	color:black;
	font-family: trebuchet ms, verdana, arial, sans-serif;
}

/* FOOTER ======================================= */ 

#footer_wrapper
{
	width:100%;
	height:25px;
	background:#596f87;
}
#footer
{
	clear:both;
	width:960px;
	height:25px;
	margin:0 auto;
	padding:0;
	font-family:trebuchet ms;
	color:#99ff99;
	font-size:68.75%;
}
.left
{
	float:left;
	padding:0;
	margin:5px 0 0 22px;
}
.right
{
	float:right;
	padding:0;
	margin:5px 32px 0 0;
}

#footer a, #footer a:visited
{
	text-decoration:underline;
	color:#00FF00;
}
#footer a:hover
{
	color:red;
}
#footer a:active
{
	color:#6699cc;
}

/* NAVIGATION ===================================== */

#nav
{
	float:left;
	margin-left:715px;
	margin-top:33px;
	width:200px;
	height:100px;
	text-align:left;
	font-family:verdana;
	font-size: 13px;
}
#nav a, #nav a:visited
{
	text-decoration:none;
	color:#99ff99;
}
#nav a:hover
{
	color:red;
}
#nav a:active
{
	color:#6699cc;
}
#nav .pen
{
	padding:0;
	width:auto;
	height:auto;
}
#nav .pen a, .pen a:visited
{
	float:left;
	width:32px;
	height:33px;
	margin:2px 0 0 2px;
	background:url(images/pen.jpg) no-repeat top left;
}
#nav .pen a:hover
{
	margin:0 2px 0 0;
	padding:0;
	background:url(images/pen_hover.jpg) no-repeat top left;
}
#nav .pen img
{
	min-width:32px;
	min-height:33px;
	border:none;
	padding:0;
	margin:0;
}
#nav .penleft
{
	float:left;
	border:none; 
}
#nav .penright
{
	float:right;
	border:none;
}
#nav .textleft
{
	float:left;
	margin-top:5px;
	margin-left:5px;
}
#nav .textright
{
	float:right;
	margin-top:5px;
	margin-left:5px;
}


/* HACKS ===================================== */

.both
{
	clear:both;
	margin:0;
	padding:0;
}
.mtop
{
	margin-top:30px;
}
.addtop
{
	margin-top:25px;
}
.cartoon
{
	margin-left:-16px;
}
.spacer
{
	padding-top:30px;
}