@media screen, projection {

.BeNiceToMacIE5 {
	font-family: "\"}\"";
	font-family: inherit;
	}

/* ==================================================================== */
 
/*********** reset common tags ***********/
html,body,div,h1,h2,h3,h4,h5,h6p,ul,li,table,thead,tbody,tfoot,th,tr,td {
    border: 0; margin: 0; outline: 0; padding: 0;
    color: inherit;
    font-family: inherit;
    font-weight: inherit;
    font-style: inherit; 
    line-height: 1.2em;
    text-align: left; vertical-align: top; 
}

/* 2009 - 2010 (c) | ez-css.org
 * ez-min.css :: version 1.3 :: 03132010
 */
body{text-align:center}.ez-mw{margin-right:auto;margin-left:auto;text-align:left;position:relative;z-index:1;text-align:left;overflow:hidden}.ez-wr{clear:left}.ez-wr:after,.ez-box:after{content:".";display:block;height:0;clear:both;visibility:hidden}.ez-wr,.ez-box,.ez-last{display:inline-block;min-height:0}/* \*/* html .ez-wr,* html .ez-box,* html .ez-last{height:1%}.ez-wr,.ez-box,.ez-last{display:block}/* */.ez-oh{overflow:hidden}* html .ez-oh{overflow:visible}.ez-oa{overflow:auto}.ez-dt{display:table}.ez-it{display:inline-table}.ez-tc{display:table-cell}.ez-ib{display:inline-block}.ez-fl{float:left}* html .ez-fl{margin-right:-3px}.ez-fr{float:right}* html .ez-fr{margin-left:-3px}.ez-25{width:25%}.ez-33{width:33.33%}.ez-50{width:50%}.ez-66{width:66.66%}.ez-75{width:75%}.ez-negmr{margin-right:-1px}* html .ez-negmr{margin-right:-4px}* html .ez-negmx,.ez-negmx{margin-right:-1px}.ez-negml{margin-left:-1px}* html .ez-negml{margin-left:-4px}

/* ==================================================================== */

/* Typography */


/* visited and unvisited link */
a:link, a:visited {
	color:#fff; 
	text-decoration:underline; 
	font-weight: bold;
}
/* mouse over and selected link */     
a:hover, a:active {
	color:red; 
	text-decoration:underline;
	font-weight:bold;
}    

h1:first-child, h2:first-child {
    margin:0;
    margin-bottom: 10px;
}
	
h1 {
	/*color: #d4d4d4;*/
	color: #fff;
	font-size: 1.4em;
	//font-weight: 100;
	margin: 10px 0px;
	//padding-bottom: 5px;
	//padding-top: 30px;
}

h2 {
	/*color: #d4d4d4;*/
	color: #fff;
	font-size: 1.2em;
	//font-style: normal;
	//font-weight: 100;
	//letter-spacing: 1px;
	}

p { 
	margin-bottom: 15px;
	//margin-left: 20px;
	margin-right: 100px;
	/*margin: 15px 0;
    line-height: 180%;*/
	}

li {
	list-style-position: inside;
	margin:10px;
	}

img {border: 0}

div.panes div {
	font-size:1.0em;
	color: #000;
}

#header > #logo a:link, #header > #logo a:visited {color:#000; text-decoration:none; font-weight: normal} 
#header > #logo a:hover, #header > #logo a:active {color:#000; text-decoration:none; font-weight: normal}

/* tabs when used for example, in classes.html */
div.panes h1, div.panes h2 { color: #000; font-weight: bold; }
div.panes a:link, div.panes a:visited {color:#000; text-decoration:underline; font-weight: bold;}   
div.panes a:hover, div.panes a:active {color:red; text-decoration:underline; font-weight:bold;}  

#footer a:link, #footer a:visited {color:#ccc; text-decoration:none; font-weight: normal} 
#footer a:hover, #footer a:active {color:#fff; text-decoration:underline; font-weight: normal}
#footer { font-size: 0.8em; color: #fff;}
	
/* some helpful classes */	
.small { font-size: 0.7em; letter-spacing: 0px;}

.large { font-size: 1.3em; font-weight: bold; letter-spacing: 2px;}

.spaced { letter-spacing: 2px }

.red { color: #ff0000; }

.caption {
	width: 100%;
	text-align:center;
	font-size: 0.8em;
}

button {
	color:black;
	height:20px;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	border-radius: 5px;
	border: 1px solid #ccc;
}

.selected {
	font-color: red;
	letter-spacing: 5px;
}	
.clear { 
	clear: both; 
	margin: 0;
	padding: 0;
	}
	
.center {
	width:100%;
	text-align: center;
	}

.left {
	text-align: left;
	}
	
.right {
	text-align: right;
	}

.rounded {
	-moz-border-radius: 10px;
	-webkit-border-radius: 10px;
	border-radius: 10px;
	border: 1px solid #000;
	}

/* ==================================================================== */

/* Layout */

/* page layout 
div id="wrapper"
	div id="header"
	div id="main"
		div id="tabs"
			ul class="flowtabs"
		div id="flowpanes"
			divs w/ content
			...
	div id="footer"
*/

/*
html {
	height: 100%;
	width:100%;
}
*/

body { 
	background:#990000;
	//background:#ccc;
	//background:#990000 url('/img/bg.png') repeat-x bottom left;
	color: #ccc;
	font: 100% "Helvetica", "Trebuchet MS", "Arial", sans-serif; 
	/*border: 1px solid green;*/
	}

/* align this to always be in the middle of the page */
#wrapper {
	width: 1000px;
	/*background: #ccc;*/
	
	/* these two lines center the wrapper - http://www.w3schools.com/css/css_align.asp */
	/* will not work when width is 100% */
	margin-left:auto;   
	margin-right:auto;
	
	padding-top:20px;
	}

#header {
	width: 100%;
	height: 100px;
	background-color: #000;
	padding-bottom: 5px;
	
	-moz-border-radius: 10px;
	-webkit-border-radius: 10px;
	border-radius: 10px;
	border:1px solid #000;  /*don't know why this is necessary but rounded corners won't work without it*/
	}

#header > #tabs {
	float: left;
	position:relative;
	top: 60px;
	left:15px;
	letter-spacing: 4px;
	margin: 0;
	}

#header > #logo {
	float: right;
	cursor:pointer;
	margin-right: 5px;
	margin-top: 5px;
	}

#header > #logo h1 {
	color:#ccc;
	font-size: 3.2em;
	letter-spacing: 10px;
	text-align: right;
	padding: 0px;
	margin: 0px;
	}

#header > #logo h2 {
	color: #ccc;
	font-size: 1.3em;
	letter-spacing: 2px;
	text-align: right;
	padding: 0px;
	margin: 0px;
	margin-right: 10px;
	}
/*
#header > div.new {
	background-image:url(/img/new.jpg);
	position:absolute; right:5px; top:5px;
	cursor:pointer;
	height:94px;
	width:96px;
}
*/

#main {
	background-color: #000;
	width: 100%;
	min-height: 400px;
	margin: 0;
	padding: 0;
	
	-moz-border-radius: 10px;
	-webkit-border-radius: 10px;
	border-radius: 10px;	
	border:1px solid #000;  /*don't know why this is necessary but rounded corners won't work without it*/
	margin-top: 5px; /* the space between the header and the main content */
	/*border-top:1px solid #ccc;*/
	}
	
/* could use the content block to center things or have sidebars, etc. */
#main > #content {
	padding:0;
	margin:20px;
	}
	
#footer {
	width: 100%;
	height: 50px;
	padding-top: 10px;
	}



/* ==================================================================== */

/* JQuery Tools */

/* ==================================================================== */
/* Tabs for navigation */

/* Style tabs */
ul.nav-tabs {  
	/*text-transform: capitalize; */ 
	margin:0 !important; 
	padding:0;	 	
	/*border: 1px solid red; */
	}

/* single tab */
ul.nav-tabs li {  
	border-bottom-width: 0px;  	
	border-top-width: 0px;  
	border-style: solid;  
	border-color: #333;  
	/* width: 90px;  */
	/* border: 1px solid red; */
	float: left;
	clear: none;  
	padding:0; 
	margin:0;  
	list-style-type:none;	
	}

ul.nav-tabs a { 
	padding: 10px;
	border-style: none; 
	display:block;	
		
	border-bottom:0px;
	position:relative;	
	
	color: #ccc;
	text-decoration:none;
	font-weight: normal;
	font-style: normal;
	}

ul.nav-tabs a:hover {
	color: #ff0000;
	}
	
/* selected tab */
ul.nav-tabs a.current {	
	border-width: 0px;
	/*border: 1px solid #ccc;	*/
	color: #666;
	/*color: red;*/
	/*color: #ff0000;*/
	cursor:default;
	}

/* tab pane styling */
div#flowpanes > div {
	display:none;		
	}

/* ==================================================================== */
/* Basic tabs */
/* root element for tabs  */
ul.tabs { 
	list-style:none; 
	margin:0 !important; 
	padding:0;	
	border-bottom:1px solid #000;	
	height:30px;
}

/* single tab */
ul.tabs li { 
	float:left;	 
	text-indent:0;
	padding:0;
	margin:0 !important;
	list-style-image:none !important; 
}

/* link inside the tab. uses a background image */
ul.tabs a { 
	background: url(/img/tabs/green.png) no-repeat -420px 0;
	font-size:0.73em;
	display:block;
	height: 30px;  
	line-height:30px;
	width: 134px;
	text-align:center;	
	text-decoration:none;
	color:#333;
	padding:0px;
	margin:0px;	
	position:relative;
	top:1px;
}

ul.tabs a:active {
	outline:none;		
}

/* when mouse enters the tab move the background image */
ul.tabs a:hover {
	background-position: -420px -31px;	
	color:#fff;	
}

/* active tab uses a class name "current". it's highlight is also done by moving the background image. */
ul.tabs a.current, ul.tabs a.current:hover, ul.tabs li.current a {
	background-position: -420px -62px;		
	cursor:default !important; 
	color:#000 !important;
}

/* Different widths for tabs: use a class name: w1, w2, w3 or w2 */


/* width 1 */
ul.tabs a.s 		{ background-position: -553px 0; width:81px; }
ul.tabs a.s:hover 	{ background-position: -553px -31px; }
ul.tabs a.s.current { background-position: -553px -62px; }

/* width 2 */
ul.tabs a.l 		{ background-position: -248px -0px; width:174px; }
ul.tabs a.l:hover 	{ background-position: -248px -31px; }
ul.tabs a.l.current { background-position: -248px -62px; }


/* width 3 */
ul.tabs a.xl 		 { background-position: 0 -0px; width:248px; }
ul.tabs a.xl:hover 	 { background-position: 0 -31px; }
ul.tabs a.xl.current { background-position: 0 -62px; }

/* initially all panes are hidden */ 
div.panes div.pane {
	display:none;		
}

/* tab pane styling */
div.panes div {
	display:none;		
	padding:25px 25px;
	border:1px solid #999;
	border-top:0;
	//background-color:#fff;
	
	min-height: 250px;
	background:#ccc url('/img/h500.png') repeat-x;
	
	-moz-border-radius-topleft: 0; 
	-moz-border-radius-topright: 5px; 
	-moz-border-radius-bottomleft: 5px;
	-moz-border-radius-bottomright: 5px;
	
	-webkit-border-top-left-radius: 0;
	-webkit-border-top-right-radius: 5px;
	-webkit-border-bottom-left-radius: 5px;
	-webkit-border-bottom-right-radius: 5px;
	
	//border-radius: 10px;
}


/* ==================================================================== */
/* Overlay */

/* the overlayed element */ 
.simple_overlay { 
     
    /* must be initially hidden */ 
    display:none; 
     
    /* place overlay on top of other elements */ 
    z-index:10000; 
    
    /* styling */ 
    background-color:#333; 
    width:675px;     
    min-height:200px; 
    border:1px solid #666; 
     
    /* CSS3 styling for latest browsers */ 
    -moz-box-shadow:0 0 90px 5px #000; 
    -webkit-box-shadow: 0 0 90px #000;     
} 
 
/* close button positioned on upper right corner */ 
.simple_overlay .close { 
    background-image:url(/img/overlay/close.png); 
    position:absolute; 
    right:-15px; 
    top:-15px; 
    cursor:pointer; 
    height:35px; 
    width:35px; 
}
.apple_overlay {
	
	/* initially overlay is hidden */
	display:none;
	
	/* growing background image */
	background-image:url(/img/overlay/white.png);
	
	/* 
		width after the growing animation finishes
		height is automatically calculated
	*/
	width:640px;		
	
	/* some padding to layout nested elements nicely  */
	padding:35px;

	/* a little styling */	
	font-size:0.9em;
}

/* default close button positioned on upper right corner */
.apple_overlay div.close {
	background-image:url(/img/overlay/close.png);
	position:absolute; right:5px; top:5px;
	cursor:pointer;
	height:35px;
	width:35px;
}

/* use a semi-transparent image for the overlay */ 
#overlay {  
    background-image:url(/img/overlay/transparent.png); 
    /*color:#efefef;*/
    color: #fff;
    height:480px; 
} 
 
/* container for external content. uses vertical scrollbar, if needed */ 
#overlay_content { 
    height:480px; 
    overflow-y:auto; 
}

/* ==================================================================== */

} /* end @media screen projector */

@media all and (min-width:0px) {
head~body {height:100%;}
}