/* Global Styles */

html, body {
margin:0px;
padding:0px;
background-color:#657E94
}

p {
font-family:Geneva, Arial, Helvetica, sans-serif;
font-size:13px;
text-align: justify;
padding: 5px;
}

h1 {
font-family: Geneva, Arial, Helvetica, sans-serif;
font-size: 36pt;
font-style: italic;
font-weight: bold;
color: #000000;
}

h2 {
font-family: Geneva, Arial, Helvetica, sans-serif;
font-size: 24pt;
font-style: italic;
font-weight: bold;
color: #000000;
}

h2.updates {margin:15px 0 -5px 0;font-family: Geneva, Arial, Helvetica, sans-serif;font-size: 14px;font-weight: bold;color: #000000;padding: 0px 6px 0px 6px;}
h3.updates {margin:30px 0 -5px 0;font-family: Geneva, Arial, Helvetica, sans-serif;font-size: 13px;font-style:italic;font-weight: bold;color: #000000;padding: 0px 6px 0px 6px;}

h3 {
font-family: Geneva, Arial, Helvetica, sans-serif;
font-size: 18pt;
font-style: italic;
font-weight: bold;
color: #000000;
}

h4 {
font-family: Geneva, Arial, Helvetica, sans-serif;
font-size: 16pt;
font-style: italic;
font-weight: bold;
color: #000000;
}

h5 {
text-align: left;
font-family: Geneva, Arial, Helvetica, sans-serif;
font-size: 14pt;
font-weight: bold;
color: #000000;
font-style: italic;
}

h6 {
font-family: Geneva, Arial, Helvetica, sans-serif;
font-size: 12pt;
font-weight: bold;
color: #000000;
text-align: center;
font-style: italic;
}

a:link {
font-family: Geneva, Arial, Helvetica, sans-serif;
font-size: 13px;
color: #000000;
text-decoration: underline;
padding:1px;
}

a:visited {
font-family: Geneva, Arial, Helvetica, sans-serif;
font-size: 13px;
color: #003366;
text-decoration: underline;
padding:1px;
}

a:hover {
font-family: Geneva, Arial, Helvetica, sans-serif;
font-size: 13px;
font-weight: normal;
color: #657E9F;
text-decoration: none;
padding:1px;
}

ul {
font-family: Geneva, Arial, Helvetica, sans-serif;
font-size: 13px;
color: #000000;
}

li {
font-family: Geneva, Arial, Helvetica, sans-serif;
font-size: 13px;
color: #000000;
}

/* Division Styles */

#body-center {
margin:0px; /* WAS 5px*/
text-align:center;
border:0px solid #000000;
}

#body {
	position:absolute;
	width:720px;
	top: 0px; /*WAS 15px*/
	margin-left:0px;
	margin-right:auto;
	text-align:left;
	padding-bottom:0px;
	background-color:#667E94;
	border:solid 0px #000000;
	left: 0px;
}

#header {
position:relative;
top:5px;
right: auto;
left:0px;
width:720px;
height:127px;
background-color:#667E94;
border:0px dotted #000000;
z-index:1;
}

#content-wrap {
position: relative;
top: 10px;
left: 5px;
padding:0px 0px 10px 0px; 
width:720px; 
height: 485px;
margin:0px auto; 
background: #657E94 url(../Images/background3.gif) no-repeat;
color:#000;
}

#content {
position: relative;
top: 15px; /* 0px worked perfectly, trying to get the scroll bar further down the page with this setting*/
left: 0px; 
padding: 0px; 
width:700px; 
height: 440px;
margin:0px auto; 
color:#000;
overflow: auto;
}

/*Shaded Border via RUZEE*/
#border {
position: relative;
top: 5px; /* 0px worked perfectly, trying to get the scroll bar further down the page with this setting*/
left: 0px; 
padding:0px; 
width:700px; 
height: 470px;
margin:0px auto; 
color:#000;
overflow: auto;
}

#border-wrap {
position: relative;
top: 10px;
left: 5px;
padding:0px 0px 10px 0px; 
width:720px; 
height: 485px;
margin:0px auto; 
color:#000;
}

#border, #border-wrap, #border .sb-inner { 
background:#DDD /*url(grad.png)*/ repeat-x; 
}

#trans-border { width:710px; margin:0px auto; padding:14px 20px; background:#667E94; color:#000; }
#trans-border .sb-border { background:#000; }

#my-nav-border {
position: relative;
top: 40px; 
padding:0px; 
width:100%; 
height: 500px;
margin:0px auto; 
color:#000; 
}
/*END Shaded Border via RUZEE*/

#nav {
position:absolute;
top:142px;
right: auto;
left:21px;
width:678px;
height:10px;
padding:0px;
background-color:#667E94;
border:0px dotted #000000;
z-index: 100;
}

#navcontainer ul {
margin: 0px; /* originally 5px */
padding: 5px; 
list-style-type: none; 
text-align: center;
background-color: #003366
}

#navcontainer ul li { 
display: inline; 
}

#navcontainer ul li a { 
text-decoration: none;
padding: 0px 15px 5px 15px;
color: #CCCCCC; /* originally fff */
background-color: #036; 
}

#navcontainer ul li a:hover{
color: #fff;
background-color: #667E94;
}

body#home a#homenav,
body#updates a#updatesnav,
body#education a#educationnav,
body#music a#musicnav,
body#video a#videonav,
body#photos a#photosnav,
body#gear a#gearnav, 
body#shop a#shopnav,
body#links a#linksnav {
color: #fff;
background-color: #667E94;
}

/*Classes*/

.pMargin0 {
margin: 0px;
}

.centerTxt0White {
text-align:center;
margin:0px;
color: #DEDAD7;
}

.content {
width: 700px;
height:490px;
padding: 10px;
background-color: #EEEEE0;
border:0px solid #000000;
overflow: auto;
}

.shoptext {
font-family:Geneva, Arial, Helvetica, sans-serif;
font-size:11px;
}

.margin0px {
margin: 0px;
}

.margin10px {
margin: 10px 0px 0px 0px;
}

.margin4px {
margin: 4px;
}

.margin8px {
margin: 8px;
}

.margin20px {
margin-top: 20px;
margin-right: 10px;
margin-bottom: 10px;
margin-left: 10px;
}

.margin4pBtm {
margin: 20px 0 4px 0;
}

.margin8pBtm {
margin: 20px 0 8px 0;
}

.vertAlign {
vertical-align: middle;
}

.navText {
margin: 0px;
vertical-align: middle;
}

.copyrightStatement {
font-family: Geneva, Arial, Helvetica, sans-serif;
font-size: 9px;
color: #000000;
text-align: center;
font-weight: normal;
}

.smallText {
font-family: Geneva, Arial, Helvetica, sans-serif;
font-size: 10px;
}

.centerText {
text-align:center;
}

.centerText0 {
text-align:center;
margin:0px;
}

.centerText2 {
text-align:center;
margin:2px;
}

.centerText3 {
text-align:center;
margin:3px;
}

.centerText4 {
text-align:center;
margin:4px;
}

.centerText8Btm {
text-align:center;
margin:0 0 8px 0;
}

.centerText20Btm {
text-align:center;
margin:0 0 20px 0;
}

.rightText {
text-align: right;
}

.imgCenter {
text-align: center;
margin:5px 10px 5px 10px;
}

.imgCenterDiagram {
text-align: center;
margin:5px 10px 5px 10px;
background-color:#000000;
}

.h6 {
font-family: Geneva, Arial, Helvetica, sans-serif;
font-size: 12pt;
font-weight: bold;
color: #DEDAD7;
text-align: center;
}

.padLeft {
padding: 0 0 0 15px;
}

.padRight {
padding: 0 15px 0 0;
}

/*FLEX SCROLL*/

/* Basic styling with no images starts here */

/* IMPORTANT:
Note that, even if you are not expecting to use horizontal scrollbars,
you should at least define colors for it, e.g. you never know what font size
your users will force on the page
*/

/* .scrollgeneric is required for proper scrollbar display,
not for user customization, and is mandatory*/
.scrollgeneric {
line-height: 1px;
font-size: 1px;
position: absolute;
top: 0; left: 0;
}

/* For scrollbars, defining a color for background alongside with an image 
is always a good idea, this way the scrollbars are visible until images load */
.vscrollerbase {
/* vscrollerbase is the div that holds the scrollbar (parent of vscrollerbar) */
width: 15px;
background-color: #DDDDDD;
}

.vscrollerbar {
width: 15px;
background: #003366 /*url(../Images/Scroll2.png) no-repeat*/;
}

.hscrollerbase {
/* hscrollerbase is the div that holds the scrollbar (parent of hscrollerbar) */
height: 15px;
background-color: #DDDDDD;
}

.hscrollerbar {
height: 15px;
background-color: #003366;
}

/* basic style ends here, this was actually all that is required to run fleXcroll,
albeit without images, my advice is to have this basic style and build the rest
on top of this. */