body {
	margin: 0px;
	padding: 0px;
	text-align: center; /* this centers the container in IE 5* browsers. The text is then set to the left aligned default in the #container selector */
	font-family: Geneva, Arial, Helvetica, sans-serif;
	font-size: 0.8em;
	color: #333333;
	background-color: #666666;
	background-image: url(images/wwa_background_1.jpg);
	background-repeat: repeat-y;
	background-position: center;
	}
	
a, a:link, a:visited, a:active {
	color: #4E96D1;
	text-decoration: none;
}
a:hover
{
	color: #F79421;
}

h1 {
	font-size: 1.5em;
	font-style:italic;
	letter-spacing: 0.3em;
	color: #9C68B3;
	margin: 0 0 5px 0;
	padding: 20px 0;
	font-family: "Trebuchet MS", sans-serif;
	background-image: url(images/wwa_h1_bg.jpg);
	background-repeat: no-repeat;
	background-position: right;
	}
h2 {
	font-size: 1.2em;
	color:#AF86C2;
	font: Tahoma, Arial, sans-serif;
	}
h3 {
	font-size: 1.0em;
	color:#AF86C2;
	font: Tahoma, Arial, sans-serif;
	}
h4 {
	font-size: 0.9em;
	color:#AF86C2;
	font: Tahoma, Arial, sans-serif;
	}	
	

/*LAYOUT CONTROL*/

#container {
	width: 980px;
	height: 100%;
	margin: 0 auto; /* the auto margins (in conjunction with a width) center the page */
	border: 1px solid #000000;
	text-align: left; /* this overrides the text-align: center on the body element. */
	background-image: url(images/wwa_site_09.jpg);
	background-repeat: no-repeat;
	background-color: #FFFFFF;
	background-position: 0px 134px;
	}

#top {
	padding: 0 0px 0px 0px;  /* this padding matches the left alignment of the elements in the divs that appear beneath it. If an image is used in the #header instead of text, you may want to remove the padding. */
} 
#left {
	float: left; /* since this element is floated, a width must be given */
	width: 150px; /* the actual width of this div, in standards-compliant browsers, or standards mode in Internet Explorer will include the padding and border in addition to the width */
	/* background: #EBEBEB; /* the background color will be displayed for the length of the content in the column, but no further */
	padding: 5px 10px 15px 5px; /* padding keeps the content of the div away from the edges */
	min-height: 720px;
}

	
#middle {
	margin: 0 190px 0 150px; /* the right and left margins on this div element creates the two outer columns on the sides of the page. No matter how much content the sidebar divs contain, the column space will remain. You can remove this margin if you want the #mainContent div's text to fill the sidebar spaces when the content in each sidebar ends. */
	padding: 0 10px; /* remember that padding is the space inside the div box and margin is the space outside the div box */
	min-height:500px; 
}

#adminMain {
	margin: 0 0 0 175px; /* for admin pages we will not use te right hand column */
	padding: 0 10px 0 30px; /* remember that padding is the space inside the div box and margin is the space outside the div box */
	background: url(images/admin_bg.jpg) #FFFFFF no-repeat left top;
} 
	
#right {
	float: right; /* since this element is floated, a width must be given */
	width: 160px; /* the actual width of this div, in standards-compliant browsers, or standards mode in Internet Explorer will include the padding and border in addition to the width */
	/* background: #EBEBEB; /* the background color will be displayed for the length of the content in the column, but no further */
	padding: 5px 10px 15px 10px; /* padding keeps the content of the div away from the edges */
	border-left: 1px solid #AF86C2;
	margin-bottom: 10px;
	min-height: 710px;
	}

#footer {
	clear: both;
	height: 23px;
	padding:7px 20px 0 20px;
	background-color: #F0F1E5;
	text-align:right;
	font-size:0.8em;
	border-top-width: 1px;
	border-top-style: solid;
	border-top-color: #874AA3;
	}

#MainImage {
	float:right;
	margin: 80px 0 15px 0;
}

#alert {
	background-color:#FFFF99;
	border:solid 1px;
	border-color:#CCCCCC;
	font-family:Verdana, Arial, Helvetica, sans-serif;
	font-size: 0.7em;
	margin: 0 0 10px 0;
	padding: 10px;
	text-align:center;
}

#alert h1, #alert p {
	background:none;
	padding: 0;
	margin: 0;
}

.newscolumn {
	font-family:Verdana, Arial, Helvetica, sans-serif;
	font-size: 0.75em;
}
.newscolumn h1 {
	background:none;
	padding: 15px 0;
	margin: 0;
	text-align:center;
	border-top: solid 1px;
	border-top-color: #AF86C2;
	
}

.testimonials {
	font-family:Verdana, Arial, Helvetica, sans-serif;
	font-size: 0.7em;
}
.testimonials h1 {
	background:none;
	padding: 15px 0;
	margin: 0;
}	

#purchase, #edit {
	background-color:#FFFFCC;
	border:solid 1px;
	border-color:#CCCCCC;
	font-family:Verdana, Arial, Helvetica, sans-serif;
	font-size: 0.9em;
	margin: 0 0 10px 0;
	padding: 10px;
	text-align:center;
}
#purchase h1, #edit h1 {
	background:none;
	padding: 0;
	margin: 0;
}

#events {
	font-family:Verdana, Arial, Helvetica, sans-serif;
	font-size: 0.75em;
	text-align:center;
	padding: 0;
	margin: 0;
}

#events h1 {
	background:none;
	padding: 15px 0;
	margin: 0;
	text-align:center;
	border-top: solid 1px;
	border-top-color: #AF86C2;	
}

#events h2 {
	background:none;
	padding: 10px 0;
	margin: 0;
	text-align:center;
	border-top: solid 1px;
	border-top-color: #AF86C2;	
}

#events h3 {
	background:none;
	padding: 5px 0;
	margin: 0;	
}

	
/*END LAYOUT CONTROL*/
	
/*HEADER & NAV*/

.headerMenu {
	text-align: left;
	text-transform: lowercase;
	background-color: #4E96D1;
}
.headerMenuBox {
	margin-bottom: 0px;
	padding: 0px;
	float: left;
	clear: left;
	width: 100%;
}

.headerMenu a, .headerMenu a:link, .headerMenu a:visited, .headerMenu a:active
{
	text-align: left;
	text-decoration: none;
	color: #fff;
	float: right;
	padding-left: 10px;
	padding-right: 10px;
	border-left-width: 1px;
	border-left-style: solid;
	border-left-color: #FFFFFF;
	font-size: 11px;
	margin-top: 2px;
}

.headerMenu a:hover
{
	background-color: #6699CC;
	color: #000;
}

.headerBox { /* for main banner and big buttons */
	height: 69px;
	width: 100%;
	background-color: #F79421;
	margin: 0 auto 0 auto;
	
}


/*END HEADER & NAV*/

.borderBox {
padding: 10px;
border:solid 1px #AF86C2;
}

/* EXPANDING INFO BOX */
	
/* set the image to use and establish the lower-right position */ 
.infobox1, .infobox1_body, .infobox1_head, .infobox1_head h2 {
	background-color: transparent;
	background-image: url(images/infobox4.gif);
	background-repeat: no-repeat;
	background-position: right bottom;
} 
.infobox1 {
	width: 150px !important; /* intended total box width - padding-right(next) */
	width: 140px; /* IE Win = width - padding */
	padding-right: 8px; /* use to position the box */
	text-align: left;
	margin-top: 0px;
	margin-right: auto;
	margin-bottom: 0px;
	margin-left: auto;
	line-height: 1.3em;
}
.infoBox1 a, .infoBox1 a:link, .infoBox1 a:visited, .infoBox1 a:active {	
font-size:11px;
}


/* set the top-right image */ 
.infobox1_head {
	background-position: top right;
	/* ADJUST THIS TO MATCH RIGHT HAND SIDE of BODY */
	margin-right: -8px; /* pull the right image over on top of border */
	padding-right: 50px;
	/*adjust position of left side of header */
	margin-left: 0px;
} 

/* set the top-left image */ 
.infobox1_head h2 {
	background-position: top left;
	margin: 0; /* reset main site styles*/
	border: 0; /* padding-left = image gap + interior padding ... no padding-right */
	height: auto !important;
	height: 1%;
	color: #FFFFFF;
	font-size: 10px;
	padding-top: 5px;
	padding-right: 0;
	padding-bottom: 5px;
	padding-left: 10px;
} 

/* set the lower-left corner image */ 
.infobox1_body {
	background-position: bottom left;
	margin-right: 3px;
	padding-top: 3px;
	padding-right: 0;
	padding-bottom: 5px;
	/* text padding at left side of body */
	padding-left: 5px;
}

.infobox1_body h4 {
	color: #000000;
	font-size: 10px;
}
/* END EXPANDING INFO BOX */
 
/* MAIN CONTENT */

#promopages {
	position: relative;
	padding: 10px;
	margin-top: 20px;
	margin-bottom: 20px;
	text-align:center;
	font-size:12px;
	clear: both;
}


.mainDetail, .mainDetail p {
	font-size:12px;
}

img.mainDetail, img.mainDetail p {
	border: 1px solid #4E96D1;
	padding: 6px;
	background-color: #FFFFFF;
	margin-left: 10px;
	margin-right: 10px;
	margin-bottom: 5px;
}

.mainDetail h1, .promopages h1 {
	font-size:14px;
	font-family: Geneva, Arial, Helvetica, sans-serif;
	letter-spacing: 1px;
	border-bottom-width: 2px;
	border-bottom-style: solid;
	border-bottom-color: #4E96D1;
	text-transform: uppercase;
	font-weight: bold;
	text-align:left;
}

.mainDetail h2, .promopages h2 {
	font-size:13px;
	text-transform: uppercase;
	text-align:left;
}

.mainDetail h3, .promopages h3{
font-size:12px;
text-align:left;
}

table.specs {
	border: 1px solid #000000;
}

table.specs th {
	text-align:left;
	background-color: white;
	white-space: nowrap;
	font-size: 11px;
	border-bottom-width: 1px;
	border-bottom-style: solid;
	border-bottom-color: #000000;
}
table.specs td {
	background-color: white;
	white-space: nowrap;
	font-size: 10px;
}

.mainDetailPic img {
float:right}

/* main page news items */
.mainNews {
	text-align:left;
	font-size:11px;
	margin: auto;
	}

.mainNews h1 {
	font-size:12px;
	font-family: Geneva, Arial, Helvetica, sans-serif;
	letter-spacing: 1px;
	border-bottom-width: 1px;
	border-bottom-style: solid;
	border-bottom-color: #E6E6E6;
	text-transform: capitalize;
}

.mainNews a, .mainNews a:link, .mainNews a:visited, .mainNews a:active {
	font-size:12px;
	letter-spacing: 1px;
}




#adminPanel {
	min-height: 350px;
	max-height: 600px;
	width: 750px;
	overflow: auto;
	border: 1px solid #CCCCCC;
	margin-top: 3px;
	padding-top: 0px;
	padding-right: 3px;
	padding-bottom: 10px;
	padding-left: 3px;
}
html>body #adminPanel {height: 480px;
}

table.adminPanel {
border-collapse:collapse;
height: 10px;
margin: 0px 0px 0px 0px;
}

table.adminPanel tr.row td {
	border-width:1px 0;
	border-style:solid;
	border-color:black;
	padding: 0px 3px 0px 3px;
}
table.adminPanel tr.row td.left{
border-width:1px 0 1px 1px;
}
table.adminPanel tr.row td.right{
border-width:1px 1px 1px 0;
}
table.adminPanel tr.row td.shade{
	background-color: #eecfa1;
}

table.adminPanel th {
	letter-spacing: normal;
	white-space: nowrap;
	padding-right: 5px;
	padding-left: 2px;
	font-size: 11px;
}
table.adminPanel td {
	white-space: nowrap;
	font-size: 10px;
}


/* SpryCollapsiblePanel.css - Revision: Spry Preview Release 1.4 */

/* Copyright (c) 2006. Adobe Systems Incorporated. All rights reserved. */

/* This is the selector for the main CollapsiblePanel container. For our
 * default style, the CollapsiblePanel is responsible for drawing the borders
 * around the widget.
 *
 * If you want to constrain the width of the CollapsiblePanel widget, set a width on
 * the CollapsiblePanel container. By default, our CollapsiblePanel expands horizontally to fill
 * up available space.
 *
 * The name of the class ("CollapsiblePanel") used in this selector is not necessary
 * to make the widget function. You can use any class name you want to style the
 * CollapsiblePanel container.
 */
.CollapsiblePanel {
width: 130px;
	margin: 5px 0 0 5px;
	padding: 0px;
	border: solid 1px #AF86C2;
	background-color: #ffffff;
	z-index: 1000;
}

/* This is the selector for the CollapsiblePanelTab. This container houses
 * the title for the panel. This is also the container that the user clicks
 * on to open or close the panel.
 *
 * The name of the class ("CollapsiblePanelTab") used in this selector is not necessary
 * to make the widget function. You can use any class name you want to style an
 * CollapsiblePanel panel tab container.
 */
.CollapsiblePanelTab {
	font-size:110%;
	color: #000000;
	font-family:"Courier New", Courier, monospace;
	/* border-bottom: solid 1px #CCC; */
	margin: 0px;
	padding: 2px 5px 2px 5px;
	/*cursor: pointer;*/
	-moz-user-select: none;
	-khtml-user-select: none;
	background-color: #F0F1E5;
	/* border-width: 1px;
	border-style: solid;
	border-color: #4E96D1; */
}

/* This is the selector for a CollapsiblePanel's Content area. It's important to note that
 * you should never put any padding on the content area element if you plan to
 * use the CollapsiblePanel's open/close animations. Placing a non-zero padding on the content
 * element can cause the CollapsiblePanel to abruptly grow in height while the panels animate.
 *
 * The name of the class ("CollapsiblePanelContent") used in this selector is not necessary
 * to make the widget function. You can use any class name you want to style a
 * CollapsiblePanel content container.
 */
.CollapsiblePanelContent {
	font-size: 90%;
	color:#000000;
	background-color: #ffffff;
}

.CollapsiblePanelContent h4 {
	margin: 10px 0 0 0;
	text-align: center;
	border-bottom: solid 1px;
	border-bottom-color:#CCCCCC;
}

.CollapsiblePanelContent a:link, .CollapsiblePanelContent a:visited, .CollapsiblePanelContent a:active {
	display: block;
	color: #000000;
	padding: 3px 6px 3px 6px;
	text-decoration: none;
	/* border-top: solid 1px #e4e4e4;
	border-bottom: solid 1px #F79421; */
}

.CollapsiblePanelContent a:hover{
	color: #000000;
	background-color: #E4E4E4;
}

.consoleOptions p {
	line-height:0.7ems;
	padding: 0px 5px 0px 5px;
	color: #666666;
}

.consoleOptions a:link, .consoleOptions a:visited, .consoleOptions a:active {
	color: #999999;
	text-decoration: underline;
	border:none;
}

.consoleOptions a:hover {
	color: #cccccc;
	text-decoration: underline;
	border:none;
}

/* An anchor tag can be used inside of a CollapsiblePanelTab so that the
 * keyboard focus ring appears *inside* the tab instead of around the tab.
 * This is an example of how to make the text within the anchor tag look
 * like non-anchor (normal) text.
 */
.CollapsiblePanelTab a {
	color: black;
	text-decoration: none;
}

/* This is an example of how to change the appearance of the panel tab that is
 * currently open. The class "CollapsiblePanelOpen" is programatically added and removed
 * from panels as the user clicks on the tabs within the CollapsiblePanel.
 */
.CollapsiblePanelOpen .CollapsiblePanelTab {
	background-color: #B5B898;
}

/* This is an example of how to change the appearance of the panel tab as the
 * mouse hovers over it. The class "CollapsiblePanelTabHover" is programatically added
 * and removed from panel tab containers as the mouse enters and exits the tab container.
 */
.CollapsiblePanelTabHover,  .CollapsiblePanelOpen .CollapsiblePanelTabHover {
	background-color: #F0F1E5;
}

/* This is an example of how to change the appearance of all the panel tabs when the
 * CollapsiblePanel has focus. The "CollapsiblePanelFocused" class is programatically added and removed
 * whenever the CollapsiblePanel gains or loses keyboard focus.
 */
.CollapsiblePanelFocused .CollapsiblePanelTab {
	background-color: #E1E3CA;
}