/**********
** A shot at CSS for shootsafe.com.
**
** Colors Used:
**		#CCCCFF - blue-grey        (204R 204G 255B)
**    #DCD2C8 - tan              (220R 210G 200B)
**		#000079 - dark blue        (0R 0G 121B)
**		#FFFF33 - bright yellow    (255R 255G 51B)
** 	#FFFF66 - white-yellow.    (255R 255G 102B)
**    #D3AA1C - orange-yellow    (211R 170G 28B)
**    #006600 - dark green       (0R 102G 0B) 
**		#8C3200 - orange/brown.    (140R 50G 0B)
**		#643200 - brown            (100R 50G 0B)
**    #46AAE4 - light blue       (70R 170G 228B) 
*/


/*-------------------------------------------------------
** Container and Global Elements
**		unless over-ridden, these styles will usually
** 	be inherited by child elements.
**
**		Unless you're changing everything, best to
**		leave this part alone :)
*/
html, body, form, fieldset {
   margin: 0px;
   padding: 0px;
   font: 100%/120% Verdana, Tahoma, Helvetica, sans-serif;
}

html { font-size:100.01%; overflow: auto; width: 830px; }
body {
	background-color: #CCCCFF;
   line-height: 1.2em;
}

/*
** A container class for the whole page
*/
div#container {
   position:absolute;
   left:0px;
   top:0px;
	width: 830px;
	font-family: Verdana, Tahoma, Helvetica, sans-serif;
	font-size: 14px;
	margin: 0px;
	padding: 0px;
	z-index: -1;   
}

/*
** Header section of the container -- really just holds
** 		the top image(s).
*/

div#header {			/* very top section */
	margin: 0px; 
	padding: 0px;
	width: 100%;
	height: 140px;
	background-color: #000079;
   clear: both;
   z-index:3;
}

#prop { 
/* 'Proprietor' text id, only used once, at the top */
	text-align: center;
	margin-left: 20px;     /* to center it, but..more to the left */
	width: 400px;
	color: #993300;
	line-height: normal;
	font-family: Georgia, "Times New Roman", Times, serif;
	font-size: 150%;
}

#top-box {
/*
** this just fills in the light blue-grey on the top left
**		Don't use for anything else.
*/
	position: absolute;
   left: 0px;
	height: 41px;
	width: 160px;
	background-color: #CCCCFF;
}

/* specs for the page top images */
img#imgTop {
	position: absolute;
	left: 100px;
   z-index: 5;
}

/*---------------------------------------------------------------
** Left column -- holds the menu, but also other text and headers
** 	as needed :)
*/

div#left-col {
   position: absolute;
   left: 0px;
   width: 170px;
   top: 140px;
   bottom: 20px;
	background-color: #000079;
	color: #CCCCFF;
	font-size: 85%;
	line-height: 1.4;
	text-align: center;
	z-index: 5;
   clear:none;
}

div#left-col h1 {
/* main (menu) headers for the left menu */
	font-family: Georgia, "Times New Roman", Times, serif;
	font-size: 180%;
	font-weight: bolder;
	letter-spacing: 0.5em;
	color: #FFFF66;
}

div#left-col h2, 
div#left-col h3, 
div#left-col h4, 
div#left-col h5, 
div#left-col h6 {
/* Other headers for left-col paragraphs
** They can be broken out (like the h1 above) if
** you need to. Mostly, they take care of themselves.
*/
	margin: 1em 0 1em 0;
	font-family: Georgia, "Times New Roman", Times, serif;
   font-size: larger;
	font-weight: bold;
	font-style: italic;
	color: #FFFF33;	
}

div#left-col p {
	margin-top: 0px;
	font-size: 90%;
	padding: 0.5em;
	font-weight: normal;
}

mnu_btn {    /* left col course btn menu item */
	margin:0; padding: 0;
	float:left;
}
img.mnu_btn{
	border:0;
	padding-bottom:0;
	margin-bottom:0;
}
p.mnu_btn {
	font-family: Garamond, "Times New Roman", Times, serif;
	font-weight: normal;
	text-align: center;
	font-size: 10px;
	color: #CCCCFF;
   padding-top:0;
	margin-top:0;

}


/*----------------------------------------
** Content Section
**		Light background, most of page.
*/

div#content {
/* global styles for the center/content pane */
   margin-top: 0px;
   margin-left:175px;
	margin-right: 0px;
   /*width: 640px;*/
	padding: 1em;
	z-index: 2;
	/*height: 100%; */
	background-color: #CCCCFF;
	color: #000079;
   line-height: 1.2em;
   overflow:hidden;
}

div#content h1 {
	color: #993300;
	font-family: Georgia, "Times New Roman", Times, serif;
	font-weight: bold;
}

/* all lowner than h1 header have this in common */
div#content h2, 
div#content h3, 
div#content h4, 
div#content h5, 
div#content h6 {
	font-family: Georgia, "Times New Roman", Times, serif;
	margin-top: 2em;
	color: #993300;
	font-weight: bold;
	font-style: italic;
}

/* indent lower level headers a bit more */
div#content h3, 
div#content h4 {
	margin-left: 1em;
}

/* and these a bit more */
div#content h5, 
div#content h6 { 
	margin-left: 2em;
}

div#content p { 
   /* indent normal content paragraphs a couple spaces */
	margin-left: 2em;
}

div#content p.callout {
/* This stands text out and to the right of the rest
**  it's in front of the other divisions.
*/
	font-variant: small-caps;
	font-size: 110%;
	float: right;
	margin: 0px 0px 15px 20px; /* top right bottom left */
	width: 35%;
	padding: 5px;
	color: #FFFF33;
	background-color: #000079;
	text-align: center;
	z-index: 5;
}

/******************
** Footer division, mostly just for navigation
*/
div#footer {
   margin: 0;
   padding: 0;
   left: 0px;
   bottom: 0px;
   width: 100%;
   height: 16px;
   background-color: #000079;
   color: #CCCCFF;   
}

#clr { /* some older browsers won't clear without it :/ */
   clear: both;
   height: 1em;
}

/*************************************************************
**    Misc. Classes and Tags
** These don't affect page structure, like those <div> tags do.
*/

img.button, img.cap {
/* image button styles, for links on the classes.html page */
	vertical-align: middle;
	margin-right: 1em;
	text-align: center;
	border: 0px;
}

/* dark color links for default light background color. */
a:link {color: #996600; }    		/* unvisited link */
a:visited {color: #000079; } 		/* visited link */
a:hover {color: #993300; }		/* mouse over link */
a:active {color: #663300; }  		/* selected link */

/* links in the left-col, (any).callout class, and any 
** anchor tag with class="bright".
*/
div#left-col a:link, 
.callout a:link, 
a[bright]:link { color: #FFFF66; text-decoration: none; }	/* unvisited link */

div#left-col a:visited, 
.callout a:visited, 
a[bright]:visited
	{color: #CCCCFF; text-decoration: none; }	/* visited link */

div#left-col a:hover, 
.callout a:hover, 
a[bright]:hover
	{color: #FFFF00; text-decoration: none; } /* mouse over link */

div#left-col a:active, 
.callout a:active, 
a[bright]:active
	{color: #FF3300; text-decoration: underline;}	/* selected link */
	
/*
** Unordered and ordered list styles, including footer nav
*/
ul, ol { 
   line-height: 1.4em;
   list-style-position: inside; 
}
ul {list-style-type: disc; }

ul#navlist
{
   line-height: normal;
   padding: 0;
   margin: 0;
   list-style-type: none;
   float: left;
   width: 100%;
   color: #FFFF33;
   background-color: #000079;
}

ul#navlist li { display:inline; font-size:12px; }

ul#navlist li a {
   width: 5em;
   color: #CCCCFF;
   border-right: 1px solid #CCCCFF;
   background-color: #000079;      
   padding: 0.2em 1em;
   text-decoration: none;
}

ul#navlist li a:hover {
   background-color: #0000AA;
   color: #CCCCFF;
}

ul#navlist li.tag {
   padding: 0.2em 1em;
   text-decoration: none;
   color: #FFFF00;
}

/*
** Other misc styles
*/

cite { padding: 1em; }

.right {
	float: right;
	margin: 0px 0px 5px 5px;
	width: 35%;
   color: #006600;
}

.r-cent {
/* Same as above, but more to the center */
	float: right;
	margin: 0px 100px 5px 5px;
	width: 35%;
	color: #006600;
}

/* A class to make the element text to appear in small caps */
.scaps { font-variant: small-caps; }

.large {
/* make this text 20% larger than the 'normal' */
	font-size:120%;
}

.larger {
/* ..aaand a bit larger--and a new font family */
   margin:0.5em;
   font-size: 140%;
	font-family: Georgia, "Times New Roman", Times, serif;
   line-height: 1.4em;
}


/* Emphasis text -- a bit larger, italic, and brownish */
em {
   font-size: 110%; 
   font-style: italic; 
   color: #663300; 
}
p em {
   line-height:1.4em;
}

.lalt {
   /* alt format for over-used styles, light bg */
   color: #D3AA1C; 
/* color: #46AAE4; */
}

.dalt {
   /* and one for the dark colors, just cause. */
   color: #DCD2C8;
}
   
   
.super {
/* Superscript, if it seems necessary somewhere */
   vertical-align: super;
   font-size: small;
}

.blue {
/* just makes the element dark blue */
   color: #000079;
}
