/*
	Styling for the basic page layout, colors, and imagery. Please be gentle
	
	This file is intended as a storage location for common site styles. Please 
	make an effort to keep it clean of rift-raft, development styles, or styles that
	do not pertain to the base of the site.
	
	Remember to comment!!!!

	Notes: 
	
	The margins for elements in the #content, #left, #center, and #right divs take a
	no-top-margin approach (for the most part). This means that elements, such as headers and
	paragraphs, avoid using a top margin, leaving it to the element above it to dictate the
	spacing between using its bottom margin.
	
	Remember, the actual width/height of a box is equal to its width/height PLUS padding!

*/


/*
	Rest Styles! Helps mitigate some display issues across browsers

	Original Code:
	Reset CSS v1.0 | 20080212
	http://meyerweb.com/eric/tools/css/reset/
	
	Compressed with: 
	http://www.cssdrive.com/index.php/main/csscompressoradvanced/
*/
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;}body{line-height:1;margin:0px;padding:0px;}blockquote,q{quotes:none;}blockquote:before,blockquote:after,q:before,q:after{content:'';content:none;}:focus{outline:0;}ins{text-decoration:none;}del{text-decoration:line-through;}table{border-collapse:collapse;border-spacing:0;}


/* Default element styling */

body
{
	margin: 0;
	padding: 0;
	background-color: #076C98;
	color: #666;
	font-family: Trebuchet MS, Helvetica, Verdana, sans-serif;
	font-size: small;
	
	line-height: 1.3;
}

dl, dt, dd, ol, ul
{
	margin: 10px 3px;
	padding: 0px 25px;
}

li
{
	margin: 2px 0px;
	padding: 0px;
}

p
{
	margin: 0px 0px 5px;
}

blockquote
{
	margin: 5px;
	padding: 5px;
}

img
{
	margin: 3px;
	border: none;
}

h3, h4, h5, h6
{
	margin: 0px 0px 3px 0px;
	padding: 0px;
	
	color: #15759D;
}

h1
{
	color: #075677;
}

h2
{
	color: #136d92;
}

/* Container allows gradient to extend across the page */
#headercontainer
{
	background-image: url('../images/gui/headerbg1.jpg');
	background-repeat: repeat-x;
	background-color: #fff;
	
	border-bottom: 1px solid #ddd;
}

#header
{
	width: 960px;
	height: 288px;
	position: relative;
	
	margin: 0px auto 0px auto;
	padding: 0px;

	background-image: url('../images/gui/header2.jpg');
	background-repeat: no-repeat;
	background-position: center;
	
}

#logo
{
	position: absolute;
	top: 114px;
	left: 25px;
	width: 210px;
	height: 80px;
	
}

#logo a
{
	display: block;
	width: 210px;
	height: 80px;
}


/* Container allows background to extend across the page */
#body
{
	background-color: #fff;
}

#content
{
	width: 960px;
	height: 100%;
	
	margin: 0px auto 0px auto;
	padding: 10px 0px;
	
	line-height: 1.5;
}

#content #left
{
	float: left;

	width: 350px;
	height: 100%;
	
	margin: 0px;
	padding: 10px;
}

#content #center
{
	float: left;

	width: 350px;
	height: 100%;
	
	margin: 0px;
	padding: 10px;
}

#content #center h3
{
	color: #136d92;
}

#content #center h4
{
	color: #555555;
}


#content #right
{
	float: left;

	width: 180px;
	height: 100%;
	
	margin: 0px;
	padding: 10px;
}

/* Used for inside pages */
#content #contentbody
{
	float: left;

	width: 700px;
	height: 100%;
	
	margin: 0px;
	padding: 0px 0px 0px 30px;
}

#content #contentbody p
{
	margin-bottom: 20px;
}

/* Subnav styling */

#content #subnav
{
	float: left;

	width: 160px;
	height: 100%;
	
	margin: 10px 10px 10px 0px;
	padding: 0px 0px 10px 0px;
	
	border-right: 1px solid #bbb;
}

#content #subnav ul
{
	display: block;
	
	margin: 0px 20px 0px 20px;
	padding: 0px;
	
	list-style-type: none;
}

#content #subnav ul li
{
	margin: 2px 0px 2px 0px;
	padding: 0px 0px 0px 0px;
	
	list-style-type: none;
}

#content #subnav ul li ul
{
	margin: 2px 0px 2px 20px;
	padding: 0px 0px 0px 0px;
	
	list-style-type: none;
}

/* Set styling for current page */

#content #subnav li.current
{
	color: #000;
}

#content #subnav li.current a:link, #content #subnav li.current a:visited, 
#content #subnav li.current a:hover, #content #subnav li.current a:active
{
	color: #000;
	text-decoration: none;
}

/* Container allows gradient to extend across the page */
#footercontainer
{
	margin: 0px;
	padding: 0px;
	
	background-image: url('../images/gui/footerbg.jpg');
	background-repeat: repeat-x;
	background-color: #fff;
	
	border-top: 1px solid #ddd;
}

#footer
{
	width: 960px;
	height: 176px;
	
	margin: 0px auto 0px auto;
	padding: 0px;
	
	background-image: url('../images/gui/footer.jpg');
	background-repeat: repeat-x;
	background-position: center;
}

/* Main menu styles */

#mainmenu
{
	position: relative;
	top: 133px;
	left: 265px;
	
	margin: 0px;
	padding: 0px;
	
	color: #fff;
	font-family: Arial, Sans-serif;
	/* Use specific size due to space limitations on header background image */
	font-size: 12pt;
	
	width: 680px;
}

#mainmenu ul
{
	margin: 0px;
	padding: 0px;
	
	list-style: none;
}

#mainmenu ul li
{
	float: left;
	
	margin: 0px 5px;
	/* If you want to change the padding of the menus, change it in the next selector (div#mainmenu ul li a)
		This ensures that the blocked <a> element fills the entire <li> element preventing space that
		isn't hyperlinked.
	*/
	padding: 0px;
	
	font-family: Arial, Sans-serif;
}


#mainmenu ul li a
{
	display: block;
	
	margin: 0px;
	/* Change menu item padding here */
	padding: 2px 10px;
	
	color: #fff;
}

/* AKA the submenus */
#mainmenu ul li ul
{
	display: none;
	float: none;
	
	position: absolute;
	
	margin: 0px;
	padding: 10px;
	
	z-index: 10;
	
	background-color: #026895;
	
	/* apply cross-browser opacity */
	-moz-opacity: 0.80;
	-khtml-opacity: 0.80;
	opacity: 0.80;
}

/* AKA the submenu items */
#mainmenu ul li ul li
{
	float: none;
	
	margin: 0px;
	padding: 0px 0px 5px 0px;
	
	font-size: 10pt;
	
	border-bottom: 1px dashed #2b7ba4;
	
}

#mainmenu ul li:hover ul
{
	display: block;
}


/* Changes the background color for menu items on hover
	If you're looking for the submenu's background color, see selector "div#mainmenu ul li ul" above */
#mainmenu ul li:hover
{
	background-color: #026895; 
}
/*
#mainmenu ul li ul li:hover
{
	background-color: #81C2CF;
}
*/

/* Main menu link styling */

#mainmenu ul li a:link 
{
	color: #fff;
	text-decoration: none;
}

#mainmenu ul li a:visited 
{
	color: #fff;
	text-decoration: none;
}

#mainmenu ul li a:hover
{
	color: #fff;
	text-decoration: none;
}

#mainmenu ul li a:active
{
	color: #fff;
	text-decoration: none;
}

#mainmenu ul li ul li a:hover
{
	color: #e7df5b;
	text-decoration: none;
}

#mainmenu ul li ul li a:active
{
	color: #e7df5b;
	text-decoration: none;
}


/* Header styles */

#content h1, #content h2, #content h3, #content h4, #content h5, #content h6
{
	margin: 0px 0px 5px 0px;
	padding: 0px;
}

#content h1
{
	font-size: x-large;
}

#content h2
{
	font-size: large;
}

#content h3
{
	font-size: medium;
}

/* Who even uses these anyways? */
#content h4, #content h5, #content h6
{
	font-size: small;
}

/* Paragraph styles */

#content p
{
	margin: 0px 0px 5px 0px;
	padding: 0px 5px 0px 5px;
}

#footer p
{
	margin: 0px;
	padding: 10px 0px 0px 0px;
	
	text-align: center;
	color: #fff;
	font-size: small;
}

/* Link styles */
#content a:link 
{
	color: #026795;
	text-decoration: none;
}

#content a:visited 
{
	color: #026795;
	text-decoration: none;
}

#content a:hover
{
	color: #13244F;
	text-decoration: none;
}

#content a:active
{
	color: #13244F;
	text-decoration: none;
}

#footer a:link 
{
	color: #eee;
	text-decoration: none;
}

#footer a:visited 
{
	color: #ccc;
	text-decoration: none;
}

#footer a:hover
{
	color: #202F72;
	text-decoration: none;
}

#footer a:active
{
	color: #202F72;
	text-decoration: none;
}

/* First element styles */

#content #left p.first
{

}

#contentbody h1.first
{
	margin-bottom: 20px;
	
	border-bottom: 1px dotted #555;
}

/* Page Specific */


div.event-box, div.news-box
{
	margin-bottom: 15px;
	
	border-bottom: 1px dotted #ddd;
}

div.news-box
{
	padding-bottom: 5px !important;
}

div.event-box h3
{
	font-style: italic;
	font-size: small !important;
	color: #555;
}

div#testimonials a.play
{
	display: block;
}

div.testimonial
{
	float: left;
	
	width: 115px;
	
	margin: 10px;
	padding: 0px;
}

div.testimonial img
{
	border: none;
	
	margin: 0px;
	padding: 0px;
}

div.product-list
{
	margin: 10px 0 20px;
	
}

div.product-list h3
{
	font-size: large !important;
	border-bottom: 1px dotted #ddd;
	margin-bottom: 10px !important;
	font-style: italic;
}