body 
{
	font-family:Arial,Helvetica;
	font-size:83.333%;
	margin:0;
	padding:0; 
	background: url("ImagesGeneric/BG2.png") #000 repeat-y top center;
	color:#ddd;
}
/*the font size here is used as a base dimension to scale the page*/


p {font-size:100%;}
/* this scales the font only */

/*
for 100% 100px = 6.25em (~12pt / 16px text - default)
for 83.333% 100px = 7.5em(~10pt / 13px text)
for 78.125% 100px = 8em (~9pt / 12px text) 80%  = 7.8125em 

800px * 0.0625 = 50em
800px * 0.075 = 60em
800px * 0.08 = 64em

for 78.125% 

DIMENSIONS
10px = 0.8em
8px = 0.64em
5px = 0.40em
4px = 0.32em
3px = 0.24em
2px = 0.16em
spot a theme yet ;)

FONTS
8pt =  0.8em
10pt = 1.0em
12pt = 1.2em
15pt = 1.5em
18pt = 1.8em
nice huh?
*/

/*********************************
layout - key structures
*********************************/
div#page
{
	
	width:70em;
	margin:0 auto;
	padding:0; /*far easier to set this here to delimit the page*/
	background:#000;
	position:relative;
}

div#headertop
{
	width:auto; /*(% is relative to container. Auto expands as much as it can)*/
	margin:0;
	padding:0.5em;
	height:5em;
	background:#0c2 url('ImagesP/Header.jpg') top left no-repeat;
}	

div#headerbottom
{
	background:#0d9200 url('ImagesP/NavBarBackground.gif') top left repeat-x;
	width:auto; 
	margin:0 0 0.4em 0;
	padding:0em;
	height:2.2em;
}

div#containerFull
{
    width:auto;
    margin:0.5em;
    padding:0;
    min-height:30em;
    height:auto !Important;
    height:25em;
    position:relative;
}

div#containerOuter
{
	width:100%;
	margin-left:-16.8em;
	float:right;
}

div#containerMid
{
	margin-left:16.4em ;/*increase to account for nav borders*/
}

div#containerInner
{
	width:100%;
	margin-right:-16.8em;
	float:left;
	
}

div#footer
{
	clear:both;
	margin:0;
	padding:0.3em;
	height:1em;
	background:#00a107;
	color:#fff;
}



/*********************************
layout - master content zones
*********************************/
div#primaryContent
{
	margin:0 16.4em 0.4em 0; /*increase to account for nav borders*/
	padding:0.4em;
	min-height:12em;
	background:#ffc;
	overflow:hidden;/*ensures box stretches past floats*/
	
}



#secondaryContent
{
	clear:both;
	margin:0 0 0.4em 0;
	padding:0.4em;
	background:#def;
	overflow:hidden;
}

div#secondaryNav
{
	float:right;
	width:15.2em; /*remeber to deduct padding, margin*/
	margin:0 0 0.24em 0.24em;
	padding:0.4em;
	min-height:16em;
	height:auto !Important;	
	height:16em;
	background:#ddd;
	overflow:hidden;
}

div#primaryNav
{
	float:left;
	width:15.2em;
	margin:0 0 0.4em 0;
	padding:0.4em;
	min-height:32em;
	height:auto !important;
	height:32em;
	background:#fed;
	overflow:hidden;
}



/*********************************
elements - multi boxes
*********************************/

.unoBox, .duoBox, .triBox, .quadBox
{
	background: #100 url("ImagesGeneric/BackgroundRedTolex.gif");
	border:1px solid #400;
	padding:0;
	width:900px;
	margin:0 auto;
}
.unoBox>div
{
	width:100%; /*(% is relative to container)*/
	margin:0.4em 0;
	float:left;
	padding:0;
}
.duoBox>div
{
	width:50%; /*(% is relative to container)*/
	margin:0.4em 0;
	float:left;
	padding:0;
}
.triBox>div
{
	width:32%; /*(% is relative to container)*/
	margin:0.4em 0.5%;
	float:left;
	padding:0;
	background-color:#090000;
}
.quadBox>div
{
	width:215px; /*(% is relative to container)*/
	margin:5px;
	float:left;
	padding:0;
}
.pentBox>div
{
	width:19.9%; /*(% is relative to container)*/
	margin:0.3em 0;
	float:left;
	padding:0;
}


/*********centered boxes************/
.uno501
{
	width:50%;
	margin:0 auto;
}

.uno501>div
{
	width:100%;
	margin:0.4em 0;
	float:left;
	padding:0;
}

.duo802
{
	width:80%;
	margin:0 auto;
}
.duo802>div
{
	width:50%;
	margin:0.4em 0;
	float:left;
	padding:0;
	overflow:hidden;
}

div.duo802:after
{
	clear:both;
}

/******* multi box, individual box detail ********/
div.box div.header
{
	height:1.2em;
	margin:0 0.4em;
	padding:0.4em;
	background:#fcc;
}
div.box div.content
{
	padding:0.4em;
	margin:0 0.4em;
	background:#fee;
	min-height:7em;
	height:auto !Important;
	height:7em;
}
div.box div.footer
{
	padding:0.4em;
	margin:0 0.4em;
	background:#fdd;
	height:1em;
}

/*********************************
link formatting
*********************************/
a{color:#a00;}
a:link{color:#a00;}
a:visited{color:#600;}
a:hover{color:#f00;}
a:active{color:#f00;}

a img{border-width:1px;}





/*********************************
Horizontal Primary Nav & link formatting
*********************************/

div#horizontalPrimaryNav
{
	margin:0 auto;
	width:65em; /* 61em=6, 65em=7, 72em=8 */
	height:3em;
}
#horizontalPrimaryNav ul
{
    list-style:none;
    padding:0.1em 0 0 0;
    margin:0 0 0 2.6em;
    display:block;
}

#horizontalPrimaryNav li
{
    display:block;
    float:left;
    margin:0.1em;
}
#horizontalPrimaryNav li a
{
    display:block;
    width:8em; /* 9em=6x, 8em=7x, 7.5em=8x */
    height:1.7em;
    text-align:center;
    font-weight:bold;
    line-height:1.7em;
    text-decoration:none;
    color:#d00;
    margin:0.05em;
    padding:0;
    background:#300 url('ImagesGeneric/NavButtonLo.gif') top left repeat-x;
	border:1px solid #500;
}
#horizontalPrimaryNav li a:hover
{
    background:#800 url('ImagesGeneric/NavButtonHi.gif') top left repeat-x;
	color:#fee;
	border:1px solid #a00;
}
#horizontalPrimaryNav li a.selected, 
#horizontalPrimaryNav li a:active,
#horizontalPrimaryNav li a.selected:hover
{
    background:#b00 url('ImagesGeneric/NavButtonLo.gif') top left repeat-x;
    text-decoration:none;
    color:#f00;
}



/*********************************
Primary Nav & link formatting
*********************************/
#primaryNav ul
{
	margin:0;
	padding:0;
	border:0;
}
#primaryNav li /* depth 0 */
{
	margin:0;
	padding:0;
	height:auto;
	list-style:none;
	width:15em;
	border:0;
	background:#ccc;
	display:block;
	height:auto;
}
#primaryNav li li /* depth 1 */
{
	background:#ddd;
}
#primaryNav li li li /* depth 1 */
{
	background:#eee;
}

#primaryNav li.heading h4
{
	padding:0.2em 0.4em;
	border:1px solid #666;
	background:#999;
}

#primaryNav a
{
	position:relative;
	padding:0.2em 0.4em;
	margin:0;
	text-align:right;
	line-height:1.5em;
	display:block;
	border:0.05em solid #888;
	border-top:none;
	text-decoration:none;
	color:#607;
	height:auto;
	width:14.1em; /*required for ie because it won't auto the width*/
	/*border 2x 0.05 + width 14.1 + padding 2x 0.4 = li width (15em) : Accuracy is critical :) */
}

#primaryNav a img
{
	position:absolute;
	border:none;
	display:block;
	top:0.4em;
	left:0.4em;
	/*width:1.35em;*/
}

#primaryNav a img.highlight
{
	display:none;
}

#primaryNav a:hover img.highlight
{
	display:block;
}
	
	
#primaryNav a:link{}
#primaryNav a:visited{}
#primaryNav a:hover
{
	color:#607;
	text-decoration:underline;
	/*background:#ddcfff;*/
}
#primaryNav a:active{}

/*#primaryNav a:hover img
{
	filter:60;
	opacity:0.6;
}*/



/*********************************
Secondary Nav link formatting
*********************************/
.secondaryNav a{}
.secondaryNav a:link{}
.secondaryNav a:visited{}
.secondaryNav a:hover{}
.secondaryNav a:active{}

#secondaryNav ol, #secondaryNav ul
{
	margin:1em;
	padding:0;
}

#secondaryNav li
{
	list-style:none;
	line-height:1.6em;
	border-bottom:0.05em solid #bbb;
}

#secondaryNav li img
{
	border:0;
	float:left;/*floating imge cancels a underline*/
	padding:0.24em 0.24em 0 0;
}

#secondaryNav li a
{
	text-decoration:none;
}

#secondaryNav li a:hover
{
	text-decoration:underline;
}



/*********************************
Login formatting
*********************************/
.login
{
	border:double 3px #500;
	background:#100 url("ImagesGeneric/BackgroundRedTolex.gif");
	padding:0.7em;
	margin:0 auto;
	width:20em;
	text-align:center;
}
.login label
{
	display:block;
	width:6em;
	float:left;
	text-align:right;
	margin:0.2em;
	height:1.2em;
	line-height:1.5em;
}
.login .tbinput
{
	margin:0.1em;
	width:12.7em;
}


/*********************************
linkxchange
*********************************/
.linkxchange
{
	clear:both;
	text-align:center;
}

.linkxchange a
{
	text-decoration:none;
}

.linkxchange a:hover
{
	color:hotpink;
}

.linkxchange a img
{
	border:none;
}



/*********************************
inline select menu
*********************************/
.inlineSelect
{
	display:block;
	padding:0.5em;
	height:1.5em;
	width:auto;
	background:#efe;
}
.inlineSelect label
{
	float:left;
	line-height:1.4em;
}
.inlineSelect input
{
	float:left;
	margin-left:1em;
}
.inlineSelect input.mybutton
{
}
.inlineSelect input.mytextbox
{
	width:10em;
}


/*********************************
generic formatting
*********************************/
p
{
	margin:0 0 0.5em 0;
}

.annotate
{
	font-size:0.9em;
	margin:0;
}



/*********************************
heading formatting
*********************************/
h1, h2, h3, h4, h5, h6
{
	font-weight:bold;
	color:#a00;
}

h1 /* page heading  */
{
	font-size:1.6em;
	margin:0;
	line-height:2em;
}
/*h1:first-letter
{
	border:0.03em solid #119;
	font-family: "Times New Roman", sans-serif;
	font-size:1.6em;
	padding:0.1em;
	background:#fff url("Images/tess_blue.gif") top left;
	margin-right:0.05em;
}*/

h2 /* section heading  */
{
	font-size:1.4em;
	margin:0 0 0.6em 0;
}

h3 /* sub-section heading */
{
	font-size:1.2em;
	margin:0 0 0.2em 0;
}

h3.mydate
{
	font-style:italic;
}


h4 /* main menu heading */
{
	font-size:1em;
	margin:0 0 0.2em 0;
}

h5 /* submenu heading */
{
	font-size:1.1em;
	margin:0;
}

h6 /* annotation heading */
{
	font-size:0.9em;
	margin:0;
}

.inline
{
	display:inline;
	margin:0;
}



/*********************************
generic tools
*********************************/
.clear
{
	clear:both;
}

.centerMe
{
    text-align:center;
}
.centerPic
{
    text-align:center;
    margin:0 auto;
}
.rightMe
{
    text-align:right;
}
.floatRight
{
    float:right;
}
.floatLeft
{
    float:left;
}


/*********************************
peak school specific (Artist)
*********************************/
.newsDL p
{
    
}
.newsDL
{
	width:69em;
    margin:0;
    padding:0;
    border:0;
}

.newsDS
{
	width:590px;
    margin:0;
    padding:0;
    border:0;
    float:left;
}

.newsRC
{
    float:left;
    width:300px;
    margin:5px 0 0 0;
    padding:0;
    border:0;
}



.newsBox
{
    border:1px solid #200;
    background: #100 url("ImagesGeneric/BackgroundRedTolex.gif");
    margin:5px 10px;
    padding:10px;   
}






/*--- old and unused ---*/
.newsDL div.nR1
{
    /*background-color:#e6fed9;#d1ffbf*/
    background: url("ImagesGeneric/GreystudHoriz.gif") repeat-x 0 0;
    width:67.8em;
    margin:0.5em;
    padding:0;
    border:solid 0px #014504;
}
.newsDL div.nR2
{
    background:url("ImagesGeneric/GreystudHoriz.gif") repeat-x 0 100%;
}
.newsDL div.nR3
{
    background:url("ImagesGeneric/GreystudVert.gif") repeat-y 0 0;
}
.newsDL div.nR4
{
    background:url("ImagesGeneric/GreystudVert.gif") repeat-y 100% 0;
}
.newsDL div.nR5
{
    background:url("ImagesGeneric/GreystudCenter.gif") 0 0 no-repeat;
}
.newsDL div.nR6
{
    background:url("ImagesGeneric/GreystudCenter.gif") 100% 0 no-repeat;
}
.newsDL div.nR7
{
    background:url("ImagesGeneric/GreystudCenter.gif") 0 100% no-repeat;
}
.newsDL div.nR8
{
    background:url("ImagesGeneric/GreystudCenter.gif") 100% 100% no-repeat;
    padding:1em;   
}

/***************************
Edit Page stylig
***************************/

.newsEdit
{
    width:54em;
    margin:0 auto 1em auto;
}
.newsEdit label
{
    display:block;
    width:10em;
    text-align:right;
    float:left;
}
.tbregular
{
    display:block;
    width:15em;
}
.newsEdit .tblarge
{
    display:block;
    width:40em;
}
.tbbutton, .tbbuttonwide
{
    border:1px solid #b00;
    background-color:#500;
    color: #fff;
    width:6em;
    margin-left:0.7em;
}
.tbbutton:hover, .tbbuttonwide:hover
{
    background-color:#700;
}
.tbbuttonwide
{
    width:12.7em;
    margin-bottom:1em;
}
.newsSpacer
{
    margin:0 0 10px 0;
}
.newsFooter
{
	float:right;
}

.newsFooter h4, .newsFooter span
{
    display:inline;
}




/***************************
Links user page styling
***************************/
.peakLinks
{
    border:none;  
}
.peakLinks tr, .peakLinks td, .peakLinks th
{
    border:0;
    
}

dl
{
    margin:1em;
}

dl dt
{
	font-weight:bold;
	color:Maroon;
	margin-bottom:0.5em;
}
dl dd
{
}



/*** more stuff ***/
.AdminLink
{
    position:absolute;
    top:10px;
    right:10px;
    text-align:right;
}

.keyBox
{
    border:1px solid #a00;
    padding:10px;
    margin:10px;
}

.smalltext
{
    font-size:0.8em;
}




/* gig boxes (children of newsDL) */

.gigBox
{
    border:1px solid #200;
	clear:left;
    margin:3px 10px;
    padding:5px 10px 0px 10px;
    position:relative;
    background: #100 url("ImagesGeneric/BackgroundRedTolex.gif");  
}
.gigOld h4, .gigOld h3, .gigOld h2
{
    color:#999;
}
.gigBoxOld
{
    border:1px solid #111;
	clear:left;
    margin:3px 10px;
    padding:5px 10px 0px 10px;
    position:relative;
    background: #020202 url("ImagesGeneric/BackgroundGreyTolex.gif");
    color:#333;  
}
.gigBoxOld h4, .gigBoxOld h3, .gigBoxOld h2
{
    color:#555;
}
.gigDate
{
    width:12em;
    float:left;
}
.gigVenue
{
    width:14em;
    float:left;
}
.gigInfo
{
    width:38em;
    float:left;
}

/*------------------------*/
.PublicSignUp
{
    width:510px;
    padding:10px;
    margin:10px auto; 
    background-color:#220000;
    border:1px solid #660000;
}
.PublicSignUp br
{
    clear:both;
}
.PublicSignUp Label
{
    clear:both;
	display:block;
    width:120px;
    float:left;
    padding:7px 3px;
}

.PublicSignUp .box
{
    width:370px;
    margin:3px;
    padding:2px;
}

.PublicSignUp .cbox
{
    width:100px;
    margin:0;
    padding:0px 20px 5px 5px;
    float:left;
}

.PublicSignUp h3
{
    margin-top:0;
}


.px370
{
    display:block;
    width:370px;
    margin:3px 0;
    padding:2px 0;
    text-align:left;
}

/*-----------------------*/
.MailMessage
{
    width:700px;
    margin:0 auto;
    padding:10px 0 10px 20px;
    background-color:#100;
    border:1px solid #300;
    clear:both;
}
.MailMessage .MD
{
    width:350px;
    margin:0 200px 10px 0;
}
.MailMessage .MH
{
    width:550px;
    margin:0 0 10px 0;
}
.MailMessage .MB
{
    width:550px;
    height:200px;
    margin:0 0 10px 0;
}
.MailMessage .MS
{
    clear:both;
    width:120px;
    margin:0 auto;
    display:block;
    border:1px solid #600;
    background-color: #300;
    color:#f60;
}
.MailMessage .MS:hover
{
    color: #fa0;
}

.MailMessage Label
{
    display:block;
    width:120px;
    float:left;
}
.MailMessage h3
{
    margin-top:0;
}



.banners
{
    text-align:center;
}
.banners img
{
    border:1px solid black;
    margin:10px auto 5px auto;
    width:468px;
}
.banners a:hover img
{
    border:1px solid #900;
}





#demobox {
	width: 355px;
	margin-right: auto;
	margin-left: auto;
}


.generalBox
{
    border:1px solid #300;
    background: #100 url("ImagesGeneric/BackgroundRedTolex.gif");
    margin:10px auto;
    padding:10px;
    width:420px;   
}

.widerBox
{
    border:1px solid #300;
    background: #100 url("ImagesGeneric/BackgroundRedTolex.gif");
    margin:10px auto;
    padding:10px;
    width:570px;   
}



/*-------------------------------*/
.sellItem
{
    width:500px;
    margin:10px auto 10px auto;
    background: #100 url("ImagesGeneric/BackgroundRedTolex.gif");
    padding:10px;
    border:solid 1px #440000;
}
.sellCart
{
    width:500px;
    margin:10px auto 10px auto;
    background: #000;
    padding:10px;
    text-align:center;
}
.sellPic
{
    display:block;
    width:120px;
    height:100%;
    margin:0 10px 0 0;
}
.sellItem img
{
    margin:0 10px 0 0;
}
.sellDetail
{
    height:100%;
    width:auto;
    margin:0;
}

/*This technique devised by Sean-Mandrake Hill. Totally free to use and modify but please leave this credit in the CSS. Thanks. */