/* Video Jester Version 1.1, based on AJ's SBI contest style sheet */
	
/* Section 1 - Global Body, Font and Link Settings ------ */
/* Section 2 - Global Page Structure ------- */
/* Section 3 - Page Structure Details ------ */
/* Section 4 - Left Column Navigation ------ */
/* Section 5 - Additional Navigation ------ */
/* --- Thumbnail-with-Caption Navigation (called ThumbnailLink) -- */
/* --- Horizontal Text NavBar (HeadNav and FootNav)-- */
/* Section 6 - Other Header Elements ------ */
/* --- HeadLogo, HeadPhoto */
/* Section 7 - Boxes ------ */
/* --- CalloutBox, ReminderBox, AdSenseBox, ReturnToNavBox, RSSbox */
/* Section 8 - Frequently Used Styles ------ */	
/* --- Clear, Caption and Floats */	
	  
/* --- Template Colors --- */

/* 
		 
new colors

#9b00b9	(155,0,185) logo purple	
#5b026d	dark purple
#d13fff light purple
#4c0663 side column dark purple
#fed827 logo yellow
#fff2b1 light yellow
#ba9a00 dark yellow (brownish)
#695700 even darker yellow (almost dark green)	
#444444 background gray
#eee v light bkgrd gray on white
#ff0473 magenta (for link hover) bd1392
#ffbdea light pink
#ddd light border gray on white

*/

/* ------ Section 1 - Global Body, Font and Link Settings ------ */

body {
background-image: url(../images/black-purple-gradient.png); 
background-repeat: repeat-x;
background-position: top;
background-color: #490057;
margin: 0;
padding: 0;
font-family: Arial, sans-serif;
color: #000;
font-size: 80%;
line-height: 130%;
}

h1, h2, h3, h4, h5, h6 {
background-color: transparent;
color: #5b026d;
clear: both;
line-height: 120%;
letter-spacing: 0em;
}

h2, h3, h4, h5, h6 {
margin-top: 24px;
}

h1 {
margin-top: 30px;
font-size: 200%;
font-family: Arial, sans-serif;	
font-weight: bold;
text-align: center;
}

h1 .subh1 {
margin-top: 10px;
color: #000000;
font-size: 80%;
font-family: Arial, sans-serif;	
font-weight: bold;
text-align: center;
line-height: 120%;
}

h2 {
font-family: Arial, sans-serif;
font-weight: bold;
border-bottom: 1px solid #ddd;
font-size: 170%;
}

h3 {
font-family: Arial, sans-serif;
border-bottom: 0 solid #000;
font-size: 130%;
}

blockquote {
margin: 12px 40px;
background-color: transparent;
color: #000;
}

ol {
line-height: 150%;
}

code {
color: #333;
}

/* -- General Link Styling -- */

a:link {
color: #9b00b9;    /* purple for link text */
text-decoration: underline;
}

a:visited {
color: #9b00b9;
text-decoration: underline;
}

a:hover {
color: #ff0473;	   /* magenta for link hover */
text-decoration: underline;
}

/* ------ Section 2 - Global Page Structure ------- */

#PageWrapper {
width: 960px;
}
  

#Header {
position: relative;
height: 110px;		 /* Height of header graphic */
}

#ContentWrapper {
float: left;
width: 100%;
}

#ContentColumn {
margin: 0px 181px 0 181px;    /* STEP 1: set to "0 ExtraColumnWidth 0 NavColumnWidth" */ 	
}

#NavColumn {
float: left;
width: 180px;               /* STEP 2: to set left column at 180, set 1 less than 180 here */
margin-left: -960px;        /* STEP 3: set to the same width specified in #PageWrapper above (but with minus sign)  */
}

#ExtraColumn {
float: left;
width: 180px;               /* STEP 4: to set right columns at 180, set 1 less than 180 here */
margin-left: -180px;        /* STEP 5: set to -(ExtraColumnWidth) */
}

#Footer {
clear: both;
width: 100%;
height: 78px;        		 /* Height of footer graphic */
padding: 6px 0;
}

.Liner {
padding: 10px;
}

#NavColumn .Liner {
padding: 5px 10px 5px 10px;
}
	
#ExtraColumn .Liner {
padding: 5px 10px 5px 10px;
}	
	
#ContentColumn .Liner {
padding: 0px 40px 0px 40px;
}

#Header .Liner {
padding: 0;
}

#Footer .Liner {
margin: 0;
padding: 25px;
}



/* ------ Section 3 - Page Structure Details ------ */

#PageWrapper {
margin: 0px auto 0px auto; 
background-image: url();   /* this ensures no gaps in middle portion */
background-repeat: repeat-y;
background-color: transparent;
}

#Header {
background-image: url();
background-repeat: no-repeat;
background-color: transparent;
background-position: top;
}

#ContentWrapper {
background-image: url(../images/white-970.gif);
background-repeat: repeat-y;
background-color: transparent;
}

#NavColumnBlock {
/* background-image: url(../images/black-180-middle.gif); */
background-repeat: repeat-y;
background-color: transparent;
}

#ContentColumn {
background-image: url();
background-repeat: repeat-y;
background-color: transparent;
}

#ExtraColumnBlock {
/* background-image: url(../images/black-180-middle.gif); */
background-repeat: repeat-y;
background-color: transparent;
}

#Footer {
background-image: url(../images/footer-starfield.gif);	 /* footer image */);
background-repeat: no-repeat;
background-color: transparent; 
background-position: bottom; 
text-align: center;
font-size: 85%;
color: #fff;
}

#NavColumn {
font-size: 90%;
color: #000;
}

#ExtraColumn {
font-size: 90%;
color: #fff;
}

#NavColumn h4 {
font-size: 110%;
color: #000;
margin-top: 0;
}

#ExtraColumn h3 {
padding: 0;
text-align: center;
font-family: Arial, sans-serif;
color: #fff;	
font-size: 110%;
border-bottom: 0px solid #000;
margin: 3px 0 12px 3px;
}

#ExtraColumn h4 {
font-size: 110%;
color: #fff;
margin-top: 0;
}

#RSSHead h3 {
padding: 0;
text-align: center;
font-family: Arial, sans-serif;
color: #fff;	
font-size: 110%;
border-bottom: 0px solid #000;
margin: 3px 0 12px 0px;
}


/* ------ Section 4 - Left Column Navigation ------ */

.Navigation {
width: 100%;
font-family: Arial, sans-serif;
background-color: transparent;
margin: 14px 0 0 0;
}
 
.Navigation br {
margin: 10px;
} 
 
/* -- Nav Headers -- */

.Navigation h3 {
padding: 0;
font-family: Arial, sans-serif;
color: #fff;	
font-size: 110%;
border-bottom: 0px solid #000;
margin: 3px 0 12px 12px;
text-indent: -6px;
}


/* -- Nav List -- */

.Navigation ul {
list-style-type: none;
padding: 0 0 6px 5px;
margin: 6px 0 0 0;
}

.Navigation li {    
margin-bottom: 3px;	
letter-spacing: 0em; 
}

/* -- Navigation Link styles -- */

.Navigation a:link {
color: #fed827;		/* color for text */
display: block;     /*  this makes the whole box highlight rather than just the text */
padding: 2px 0 2px 6px;
text-decoration: none;
border: 1px solid #888;
background-color: transparent;		 
}

.Navigation a:visited {
color: #fed827;		/*  color for visited text */
display: block;     /*  this makes the whole box highlight rather than just the text */
padding: 2px 0 2px 6px;
text-decoration: none;	
border: 1px solid #888;
background-color: transparent;
}

.Navigation a:hover {
color: #fff;		/* color when hovering ff0473*/	  
display: block;     /*  this makes the whole box highlight rather than just the text */
padding: 2px 0 2px 6px;
border: 1px solid #bbb;
background-color: #340240;
}

.NavHead a:link {
color: #fed827;		/* color for text */
display: inline;     
text-decoration: none;
border: 0;
margin: 3px 0 12px -6px; 
}

.NavHead a:visited {
color: #fed827;		/* color for text */
display: inline;     
text-decoration: none;
border: 0;
margin: 3px 0 12px -6px; 
}

.NavHead a:hover {
color: #ff0473;		/* color for text */
display: inline;     
text-decoration: none;
border: 0;
margin: 3px 0 12px -6px;
 
}

/* ------ Section 5 - Additional Navigation ------ */

/* -- Thumbnail-with-Caption Navigation -- */

.ThumbnailLink {
text-align: center;
}

.ThumbnailLink a:link .Caption {
text-decoration: none;	 
color: #fed827;
border: 0;
}

.ThumbnailLink a:visited  .Caption {
text-decoration: none;	 
color: #fed827;
}

.ThumbnailLink a:hover .Caption {
text-decoration: none;
color: #ff0473;
}

/* -- Horizontal Text NavBar in Header -- */

.HeadNav {
font-family: Arial, sans-serif;
font-size: 85%;
line-height: 160%;
position: absolute;	
top: 0px;	/* use to position the buttons -- 82 for top of column */  
right: 12px;	 
background-color: transparent; 
}

.HeadNav ul {
list-style-type: none;
padding: 0;
}

.HeadNav ul li {
display: inline;  
text-align: center;
}

.HeadNav a:link {
text-decoration: none;
text-align: center;
padding: 1px 6px;
color: #fed827;
border-top: 1px solid #888;
border-right: 1px solid #888;
border-left: 1px solid #888;
border-bottom: 1px solid #888;
background-color: transparent;
}
 
.HeadNav a:visited {
text-decoration: none;
text-align: center;
padding: 1px 6px;
color: #fed827;
border-top: 1px solid #888;
border-right: 1px solid #888;
border-left: 1px solid #888;
border-bottom: 1px solid #888; 
background-color: transparent;
}

.HeadNav a:hover {
color: #fff;		/* color when hovering */	 	
text-decoration: none;
border-top: 1px solid #bbb;
border-right: 1px solid #bbb;
border-left: 1px solid #bbb;
border-bottom: 1px solid #bbb; 
background-color: #340240; 
}	

/* -- Horizontal Text NavBar in Footer -- */

.FootNav {
font-family: Arial, sans-serif;
background-color: transparent;
margin: 15px 0px 0px 0px; 
text-align: center;
font-size: 85%;
}

.FootNav ul {
list-style-type: none;
padding: 0;
line-height: 2em;
}

.FootNav ul li {
display: inline;  
text-align: center;
}

.FootNav a:link {
text-decoration: none;
text-align: center;
padding: 1px 4px;
color: #9b00b9;		/* purple for text */ 
border: 1px solid #ddd;
}
 
.FootNav a:visited {
text-decoration: none;
text-align: center;
padding: 1px 4px;
color: #9b00b9;	 
border: 1px solid #ddd;
}

.FootNav a:hover {
color: #ff0473;		/* magenta when hovering */	 	
text-decoration: none;
border: 1px solid #ff0473;
} 

.FootNav h3 {
padding: 0;	
font-size: 110%;
margin: 0;
}

/* -- Bottom of page navigation -- */

.ReturnToNav {
background-color: #fff;	
font-size: 90%;
border-top: 1px solid #ddd;
margin: 2px auto 12px auto;
padding: 4px;
text-align: center;
}

/* ------ Section 6 - Other Header Elements ------ */

/* -- Header Graphic -- */

.HeadLogo {
text-align: center;
position: absolute;	
top: 15px;	/* use to position the photo */  
left: 13px; 
background-color: transparent; 
}



/* -- Photo Behind Logo in Header -- */

.HeadBackPhoto {
text-align: center;
position: absolute;	
top: 53px;	/* use to position the photo */  
right: 32px; 
background-color: transparent; 
}


/* -- Tagline in Header -- */

.HeadTag {
font-family: Arial, sans-serif;
font-size: 140%;
line-height: 100%;
font-weight: normal;
font-style: italic;
text-align: right;
color: #fff;
position: absolute;	
top: 40px;	/* use to position the tagline; if 3 lines, use 28px; if 2, 40px */  
right: 190px;		/* align w/ white edge: 190px; align with far right: 16px*/ 
background-color: transparent; 
letter-spacing: 0.13em;
text-shadow: #000 0em 0.1em 0.3em;
line-height: 1.2em;
}

.HeadTag a:link {
text-decoration: none;	 
color: #fed827;
border: 0;
}

.HeadTag a:visited {
text-decoration: none;	 
color: #fed827;
}

.HeadTag a:hover {
text-decoration: none;
color: #ff0473;
}

/* -- Photos in Header -- */

.HeadGraphic1 {
position: absolute;	
top: 0px;	/* use to position the photo */  
left: -280px; 
background-color: transparent; 
}

.HeadGraphic2 {
position: absolute;	
top: 42px;	/* use to position the photo */  
left:381px; 
background-color: transparent; 
}

.HeadGraphic3 {
position: absolute;	
top: 41px;	/* use to position the photo */  
right: 140px; 
background-color: transparent; 
}


/* ------ Section 7 - Boxes ------ */

.CalloutBox {
background-color: #fff;
width: 85%;
border: 1px solid #ddd;
margin: 18px auto 24px auto;
padding: 4px;
color: black;
}

div.CalloutBox p {
margin: 13px;
}

p.CalloutBox {
padding: 13px;
}

div.CalloutBox h1,
div.CalloutBox h2,
div.CalloutBox h3,
div.CalloutBox h4,
div.CalloutBox h5,
div.CalloutBox h6 {
margin: 13px 0 0 13px;
}

.ReminderBox {          
background-color: #eee;
width: 40%;
border: 1px solid #ddd;
margin: 12px auto 12px auto;
padding: 4px;
float: right;             /* adding float enables text to flow around it */
color: #000;
}

.ReminderBox h4 {
margin: 0;
padding: 4px;
text-align: center;
background-color: #fff;	
font-family: Arial, sans-serif;
}

.ReminderBox p {
font-size: 80%;
padding: 4px;
line-height: 120%;
}

.AdSenseBoxLeft, .AdSenseBoxRight, .AdSenseBoxCenter468, .AdSenseBoxExtraColumn {
padding: 2px;
background-color: #ddd;
border: 0px;
}

.AdSenseBoxLeft {
margin: 0 18px 12px 18px;
float: left;
}

.AdSenseBoxRight {
margin: 0 18px 12px 18px;
float: right;
}

.AdSenseBoxCenter468 {
width: 468px;
margin: 0 auto 12px auto;
clear: both;
}

.AdSenseBoxExtraColumn {
padding: 0;
margin: 0 auto 12px auto;
clear: both;
}


/* -- RSS Box -- */

#RSSbox {
width: 148px;
background-color: transparent;
border: 1px solid #888;
margin: 12px auto 10px 4px;
padding: 14px 2px 8px 2px;
font-size: 100%;
font-weight: bold;
color: #fff;
line-height: 120%;
text-align: center;
}

#RSSbox img {
border:0;
padding:2px 0;
}

#RSSbox a:link {
text-decoration: none;	
border: 0; 
color: #fed827;
border: 0;
}

#RSSbox a:visited {
text-decoration: none;	
border: 0; 	 
color: #fed827;
}

#RSSbox a:hover {
text-decoration: none;	
border: 0; 
color: #fff;   
}


/* ------ Section 8 - Frequently Used Styles ------ */
 
.dots li {
list-style: url(../images/vjdot.png);
padding-bottom: 7px;
}

.CenterIt {
text-align: center; 
margin: 0 auto
}

.IndentIt { 
margin: 0 30px
}

.Clear {
clear: both;
}

.Caption {
font-size: 95%;
display: block;
line-height: 150%;
margin-bottom:7px;
margin-top: 5px;
}

.BCaption {
font-size: 95%;
display: block;
line-height: 150%;
margin-bottom:7px;
margin-top: 5px;
font-weight: bold;
}

.SmallCaption {
font-size: 80%;
display: block;
line-height: 150%;
margin-bottom:7px;
margin-top: 5px;
}

.Spacer {
clear: both;
line-height: 0;
}
/* -- floats -- */

.PixRight {
float: right;
margin: 10px 0 10px 10px;
text-align: right;
}

.PixLeft {
float: left;
margin: 10px 20px 10px 0;
text-align: left;
}

.LabelRight {
padding: 55px 0 10px 0;
text-align: left;
font-weight: bold;
}

.ItemCenter {
margin: 2px auto 12px auto;
text-align: left;
clear: both;
}

.LeftColumn {
float: left;
width: 27%;
margin: 5px 5px 8px 0px;
padding: 0 10px 10px 10px;
text-align: center;
border: 1px solid #ddd;
background-color: #eee;
background-image: url(../images/graygrad.png); 
background-repeat: repeat-x;
background-position: top;
}

.LeftColumnBlank {
float: left;
width: 27%;
margin: 5px 5px 8px 0px;
padding: 0 10px 10px 10px;
text-align: center;
border: 1px solid #fff;
background-color: #fff;
}

.MidColumn {
float: left;
width: 27%;
margin: 5px 10px 8px 10px;
padding: 0 10px 10px 10px;
border: 1px solid #ddd; 
text-align: center;
background-color: #eee;
background-image: url(../images/graygrad.png); 
background-repeat: repeat-x;
background-position: top;
}

.RightColumn {
float: left;
width: 27%;
margin: 5px 0px 8px 5px;
padding: 0 10px 10px 10px;
text-align: center;
border: 1px solid #ddd;
background-color: #eee;
background-image: url(../images/graygrad.png); 
background-repeat: repeat-x;
background-position: top;
}

.GrayBack {
background-color: #eee;
background-image: url(../images/graygrad.png); 
background-repeat: repeat-x;
background-position: top;
}

.Columns a:link {
color: #9b00b9;    /* purple for link text */
text-decoration: none;
}

.Columns a:visited {
color: #9b00b9;
text-decoration: none;
}

.Columns a:hover {
color: #ff0473;	   /* magenta for link hover */
text-decoration: none;
}

.lyrics {    /* used for song video lyrics */
font-size: 100%;
line-height: 180%;
}