/*>>>> 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: 6px;
}

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;
}

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 {
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;
}

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

nav {
position:absolute;
top:200px;
right: auto;
left:10px; /*WAS 5px */
width:700px; /*WAS 710px */
height:10px;
padding:0px;
background-color:#667E94;
border:0px dotted #000000;
z-index: 100;
}

img {
border:0;
}

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;
}

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

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

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

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

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

a.cp:hover {
font-family: Geneva, Arial, Helvetica, sans-serif;
font-size: 13px;
font-weight: normal;
color: #EEEEEE;
text-decoration: underline;
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;
}

hr {height:0px;width:60%;background:black;margin: 0px auto 0px auto;  }

/*tr {
background-color: #667E94;
}

td {
background-color: #667E94;
}*/

/*>>>> DIVISION STYLES <<<< */

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

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

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

#content-wrap {
position: relative;
top: 40px; /*WAS 60px */
left: 0px;
padding:0px 0px 10px 0px; 
width:100%; 
height: 520px;
margin:0px auto; 
background: #DDDDDD /*url(../Images/background1.gif) no-repeat*/;
color:#000;
/*border:black solid 1px;*/
border-radius: 10px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
box-shadow:-1px 5px 10px black;
-moz-box-shadow:-1px 5px 10px black;
-webkit-box-shadow:-1px 5px 10px black;
}


#content {
position: relative;
top: 10px;
left: 0px; 
padding: 0px 5px/*5 WAS 0px */ 3px/*3 WAS 10px */ 0px; 
width:700px; 
height: 505px; /*WAS 500px*/
margin:0px auto; 
color:#000;
overflow: auto;
}

#contentB {
position: relative;
top: 65px;
left: 0px;
width: 700px;
height:540px;
padding: 10px;
background-color: #EEEEE0;
border:0px solid #000000;
overflow: auto;
}

/* OLD Properties 
#nav {
position:absolute;
top:205px;
right: auto;
left:10px; /*WAS 5px */
/*width:700px; WAS 710px 
height:10px;
padding:0px;
background-color:#667E94;
border:0px dotted #000000;
z-index: 0;
}*/

#nav {
position:absolute;
top:200px;
right: auto;
left:10px; /*WAS 5px */
width:700px; /*WAS 710px */
height:10px;
padding:0px;
background-color:#667E94;
border:0px dotted #000000;
z-index: 100;
}

/*BOX SHADOW PROPERTIES
Box shadow allows shadow effects on elements. This property takes several values:
The first value indicates the horizontal offset of the shadow. You can use a negative value to put the shadow to the left of your box.
The second value indicates the vertical offset. You can use a negative value to put the shadow above your box
The third value is the blur radius. The bigger the value, the more blurred it is.
*/

#navcontainer ul {
margin: 0px; /* originally 5px */
padding: 5px; 
list-style-type: none; 
text-align: center;
background-color: #003366;
border-radius: 10px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
box-shadow:0px 2px 3px black;
-moz-box-shadow:-1px 5px 10px black;
-webkit-box-shadow:-1px 5px 10px black;
}

#navcontainer ul li { 
display: inline;
}

#navcontainer ul li a { 
text-decoration: none;
padding: 0px 15px 5px 15px;
color: #CCCCCC; /* originally fff */
background-color: #036; 
border-top-right-radius: 10px;
border-top-left-radius:10px;
-moz-border-radius-topleft:10px;
-moz-border-radius-topright:10px;
-webkit-border-top-right-radius:10px;
-webkit-border-top-left-radius:10px;
}

#navcontainer ul li a:hover{
color: #fff;
background-color: #667E94;
border-top-right-radius: 10px;
border-top-left-radius:10px;
-moz-border-radius-topleft:10px;
-moz-border-radius-topright:10px;
-webkit-border-top-right-radius:10px;
-webkit-border-top-left-radius:10px;
}

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,
body#drums a#drumsnav,
body#studio a#studionav,
body#news a#newsnav {
color: #fff;
background-color: #667E94;
border-top-right-radius: 10px;
border-top-left-radius:10px;
-moz-border-radius-topleft:10px;
-moz-border-radius-topright:10px;
-webkit-border-top-right-radius:10px;
-webkit-border-top-left-radius:10px;
}

#ctrDiv {
text-align:center;
}

#playerTable {
width:100%;
}

#playertd {
text-align:center;
}

/*>>>> CLASSES <<<< */

.pMargin0 {
margin: 0px;
}

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

.video {
padding: 0 0 0 10px;
}

/*.video {
	width: 240px;
	-o-transition: all 0.5s ease-in-out;
	...
}
 
.video:hover,video:focus { width:600px; 
} */

.imgPadTop {
border:0;
padding:5px 0 0 0;
}

.imgPadTop10 {
border:0;
padding:10px 0 0 0;
}

.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;
}

.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;
}

.rightText {
text-align: right;
}

.rightTextSm {
font-family: Geneva, Arial, Helvetica, sans-serif;
font-size: 10px;
text-align: right;
}

.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;
}

.align-right { 
float:right; margin: 4px 0 2px 5px; 
}

.align-left { 
float:left; margin: 4px 5px 2px 0; 
}

.padLeft {
padding: 2px 0 0 5px;
}

.padRight {
padding: 2px 5px 0 0;
}

.photoPadRight {
padding-right: 5px;
padding-top: 2px;
align:left;
}
.photoPadLeft {
padding-left: 5px;
padding-top: 2px;
align:right;
}


/*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. */