/*----------------- PAGE RESET ---------------------------------------------------------------------------------- */

*
{
margin: 0;
padding: 0;
}

img
{
border: none;
}

.clear
{
clear: both;
}

/*----------------- MOBILE  ---------------------------------------------------------------------------------- */


body
{
background-color: #182325;
text-align: center;
font-family:Georgia, "Times New Roman", Times, serif;
font-size: 62.5%;
}

#wrapper
{
width: 300px;
position: relative;
margin: 20px auto auto auto;
}

#header
{
width: 300px;
height: 60px;
position: relative;
margin: 0 0 10px 0;


}

#header .header_background {
  width:  0; 
  height: 0;
  display: none;

}


#header h1 a
{
width: 160px;
height: 39px;
text-indent: -5000px;
background: url(images/richard_sprite.png) no-repeat 0 -42px;
display: block;


}

#header h1 a:hover
{

background: url(images/richard_sprite.png) no-repeat 0 -79px;

}


#content
{
position: relative;
text-align: left;
padding: 10px 10px 40px 10px;
min-height: 450px;
background: #161817;
border-top: 1px solid #FFFFFF;
border-bottom: 1px solid #FFFFFF;
}

.content_background
{
 background: url(images/richard_sprite.png) -640px -100px;
  width:  300px; /* width and height of the sprite image you want to display */
  height: 35px;
  position: absolute;
  bottom: 1px;
  left: 0;
}

.pagepicright
{

width: 100%;
max-width: 280px;
height: auto;
padding: 0 0 10px 0;
}

.videothumb{
width: 280px;
max-width: 280px;
height: auto; 
border: none;
}

/*----------------- CYCLE ---------------------------------------------------------------------------------- */


/* set border-box so that percents can be used for width, padding, etc (personal preference) */
.cycle-slideshow, .cycle-slideshow * { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }


.cycle-slideshow { width: 100%; padding: 0; position: relative;
    background: #000000;
	margin: 15px 0 5px 0;

 }

/* slideshow images (for most of the demos, these are the actual "slides") */
.cycle-slideshow img { 
    /* 
    some of these styles will be set by the plugin (by default) but setting them here
    helps avoid flash-of-unstyled-content
    */
    position: absolute; top: 0; left: 0;
    width: 100%; padding: 0; display: block;
}

/* in case script does not load */
.cycle-slideshow img:first-child {
    position: static; z-index: 100;
}

/* overlay */
.cycle-overlay { 
 font-size: 1.6em;
    
    position: absolute; top: 0; width: 100%; z-index: 600;
    background-color: rgba(0, 0, 0, 0.5); color: white; padding: 10px; 
}

.videocontrols
{
width: 100%; 
min-width: 280px; 
max-width: 480px;
height: 50px;
position: relative;
}

a.prev {
background: url(images/fredsprite.png) no-repeat transparent;
	width: 45px;
	height: 50px;
	display: block;
	position: absolute;
	top: 0;
	right: 52px;
					background-position: 0 0; }
a.prev:hover {		background-position: 0 -50px; }
a.prev.disabled {	background-position: 0 -100px !important;  }

a.next {	background: url(images/fredsprite.png) no-repeat transparent;
	width: 45px;
	height: 50px;
	display: block;
	position: absolute;
	top: 0;
	right: 0;
					background-position: -50px 0; }
a.next:hover {		background-position: -50px -50px; }
a.next.disabled {	background-position: -50px -100px !important;  }
a.prev.disabled, a.next.disabled {
	cursor: default;
}

a.prev span, a.next span {
	display: none;
}

/* 
    media queries 
    some style overrides to make things more pleasant on mobile devices
*/




#bottom
{
 text-align:center;
 padding: 5px 0 10px 0;
 height: 25px;
 width:300px;
 margin: auto auto auto auto;
 
}

#bottomfloat
{
position: relative;

width: 150px;

}

#bottom p {
text-align: right;
font-size: 1.1em;
color: #999;


}

#bottom a:link, #bottom a:visited, #bottom a:active {

color:#0098A8;
text-decoration:none;}

#bottom a:hover{color:#fff;}

#bottom p.adminlink, #bottom a:link.adminlink, #bottom a:visited.adminlink, #bottom a:active.adminlink {color:#999; text-decoration:none; margin-top: 5px;}

#bottom a:hover.adminlink {color:#666;}

#bottom p.maillink, #bottom a:link.maillink, #bottom a:visited.maillink, #bottom a:active.maillink {color:#ccc; text-decoration:none; margin-top: 5px;}

#bottom a:hover.maillink {color:#333;}


/*------------------  MOBILE MENU --------------------------------------------------*/


.MenuClicker {
  display: inline-block;
  text-indent: -5000px;  
  position: absolute;
top: 0;
left: 287px;

font-size:34px;
cursor:pointer;
text-align: left;
  
}



.bar1, .bar2, .bar3 {
  width: 35px;
  height: 5px;
  background-color: #333;
  margin: 6px 0;
  transition: 0.4s;
}



/* Rotate first bar */
.change .bar1 {
  -webkit-transform: rotate(-45deg) translate(-9px, 6px) ;
  transform: rotate(-45deg) translate(-9px, 6px) ;
}

/* Fade out the second bar */
.change .bar2 {
  opacity: 0;
}

/* Rotate last bar */
.change .bar3 {
  -webkit-transform: rotate(45deg) translate(-8px, -8px) ;
  transform: rotate(45deg) translate(-8px, -8px) ;
}


.hovered .bar1, .hovered .bar2, .hovered .bar3
{
background-color: #FF0000;

}




/* The side navigation menu */
.sidenav {



    height: 100%; /* 100% Full-height */
    width: 0; /* 0 width - change this with JavaScript */
    position: fixed; /* Stay in place */
    z-index: 2000; /* Stay on top */
    top: 0;
    left: 0;
	background-color:rgba(0,0,0,0.9);

    overflow-x: hidden; /* Disable horizontal scroll */
    padding-top: 60px; /* Place content 60px from the top */
    transition: 0.5s; /* 0.5 second transition effect to slide in the sidenav */
	text-align: left;
}

.MenuOpen
{
width: 250px;

}



/* The navigation menu links */
.sidenav a {
    padding: 8px 8px 8px 22px;
    text-decoration: none;
    font-size: 25px;
    color: #E91E78;
    display: block;
    transition: 0.3s
}



/* When you mouse over the navigation links, change their color */
.sidenav a:hover, .offcanvas a:focus{
    color: #f1f1f1;
}

/* Position and style the close button (top right corner) */
.sidenav .closebtn {
    position: absolute;
    top: 0;
    right: 25px;
    font-size: 36px;
    margin-left: 50px;
}



/*------------------ END MOBILE MENU --------------------------------------------------*/


/* ------------------------------------------- MAIN MENU -------------------------------------------------*/

#navcontainer
{

width: 300px;
}

#navcontainer #wheel {
width: 280px;
height: 22px;
display: block;
background: url(images/richard_sprite.png) -650px -150px;
cursor: pointer;
margin: 0 0 8px 0;



}



#navcontainer #wheel:hover{
background: url(images/richard_sprite.png) -650px -170px;
}

#navcontainer.BigMenu #wheel
{
background: url(images/richard_sprite.png) -650px -190px;
}

#navcontainer.BigMenu #wheel:hover
{
background: url(images/richard_sprite.png) -650px -210px;
}


#navcontainer ul
{


}

.BigMenu
{
min-height: 278px;
}

.SmallMenu
{
min-height: 30px;

}

.HiddenNav
{
display: none;
}



#navcontainer li
{
list-style-type: none;
float: left;
}

#navcontainer li a
{
margin-top: 0;
}

#navcontainer .homelink, 
#navcontainer .aboutlink,
#navcontainer .chapslink,
#navcontainer .gigslink,
#navcontainer .musiclink,
#navcontainer .videolink,
#navcontainer .contactlink,
#navcontainer .gallerylink,
#navcontainer .linkslink,
#navcontainer .albumlink,
#navcontainer .lyricslink, 
#navcontainer .quizzeslink, 
#navcontainer .articleslink,
#navcontainer .sketcheslink,
#navcontainer .sillythingslink,
#navcontainer .voiceoverlink

{
width: 140px;
height: 25px;
float: left;
margin: 0 5px 0 0;
padding: 5px 0 0 5px;
text-indent: -5000px;
border-top: 1px solid #FFFFFF;

}
#navcontainer .linkslink

{
border-bottom: 1px solid #FFFFFF;
}
#navcontainer .homelink a
{
width: 53px;
height: 20px;
background: url(images/richard_sprite.png) no-repeat 0 0;
display: block;
}

#navcontainer .homelink a:hover
{
background: url(images/richard_sprite.png) no-repeat 0 -20px;
}


#homepage #navcontainer .homelink a
{
background: #161817 url(images/richard_sprite.png) no-repeat 0 -20px;
}


#navcontainer .aboutlink a
{
width: 91px;
height: 20px;
background: url(images/richard_sprite.png) no-repeat -53px 0;
display: block;
}

#navcontainer .aboutlink a:hover
{
background: url(images/richard_sprite.png) no-repeat -53px -20px;
}

#aboutpage #navcontainer .aboutlink a
{
background: #161817 url(images/richard_sprite.png) no-repeat -53px -20px;
}

#navcontainer .chapslink a
{
width: 98px;
height: 20px;
background: url(images/richard_sprite.png) no-repeat -144px 0;
display: block;
}

#navcontainer .chapslink a:hover
{
background: url(images/richard_sprite.png) no-repeat -144px -20px;
}

#chapspage #navcontainer .chapslink a
{
background: #161817 url(images/richard_sprite.png) no-repeat -144px -20px;
}

#navcontainer .gigslink a
{
width: 44px;
height: 20px;
background: url(images/richard_sprite.png) no-repeat -242px 0;
display: block;
}

#navcontainer .gigslink a:hover
{
background: url(images/richard_sprite.png) no-repeat -242px -20px;
}

#gigspage #navcontainer .gigslink a
{
background: #161817 url(images/richard_sprite.png) no-repeat -242px -20px;
}

#navcontainer .albumlink a
{
width: 70px;
height: 20px;
background: url(images/richard_sprite.png) no-repeat -286px 0;
display: block;
}

#navcontainer .albumlink a:hover
{
background: url(images/richard_sprite.png) no-repeat -286px -20px;
}

#albumpage #navcontainer .albumlink a
{
background: #161817 url(images/richard_sprite.png) no-repeat -286px -20px;
}


#navcontainer .musiclink a
{
width: 56px;
height: 20px;
background: url(images/richard_sprite.png) no-repeat -386px 0;
display: block;
}

#navcontainer .musiclink a:hover
{
background: url(images/richard_sprite.png) no-repeat -386px -20px;
}

#musicpage #navcontainer .musiclink a
{
background: #161817 url(images/richard_sprite.png) no-repeat -386px -20px;
}


#navcontainer .videolink a
{
width: 55px;
height: 20px;
background: url(images/richard_sprite.png) no-repeat -442px 0;
display: block;
}

#navcontainer .videolink a:hover
{
background: url(images/richard_sprite.png) no-repeat -442px -20px;
}

#videopage #navcontainer .videolink a
{
background: #161817 url(images/richard_sprite.png) no-repeat -442px -20px;
}

#navcontainer .gallerylink a
{
width: 78px;
height: 20px;
background: url(images/richard_sprite.png) no-repeat -497px 0;
display: block;
}

#navcontainer .gallerylink a:hover
{
background: url(images/richard_sprite.png) no-repeat -497px -20px;
}

#gallerypage #navcontainer .gallerylink a
{
background: #161817 url(images/richard_sprite.png) no-repeat -497px -20px;
}

#navcontainer .quizzeslink a
{
width: 74px;
height: 20px;
background: url(images/richard_sprite.png) no-repeat -575px 0;
display: block;
}

#navcontainer .quizzeslink a:hover
{
background: url(images/richard_sprite.png) no-repeat -575px -20px;
}

#quizzespage #navcontainer .quizzeslink a
{
background: #161817 url(images/richard_sprite.png) no-repeat -575px -20px;
}

#navcontainer .lyricslink a
{
width: 61px;
height: 20px;
background: url(images/richard_sprite.png) no-repeat -649px 0;
display: block;
}

#navcontainer .lyricslink a:hover
{
background: url(images/richard_sprite.png) no-repeat -649px -20px;
}


#lyricspage #navcontainer .lyricslink a
{
background: #161817 url(images/richard_sprite.png) no-repeat -649px -20px;
}

#navcontainer .articleslink a
{
width: 83px;
height: 20px;
background: url(images/richard_sprite.png) no-repeat -710px 0;
display: block;
}

#navcontainer .articleslink a:hover
{
background: url(images/richard_sprite.png) no-repeat -710px -20px;
}


#articlespage #navcontainer .articleslink a
{
background: #161817 url(images/richard_sprite.png) no-repeat -710px -20px;
}

#navcontainer .sketcheslink a
{
width: 88px;
height: 20px;
background: url(images/richard_sprite.png) no-repeat -793px 0;
display: block;
}

#navcontainer .sketcheslink a:hover
{
background: url(images/richard_sprite.png) no-repeat -793px -20px;
}


#sketchespage #navcontainer .sketcheslink a
{
background: #161817 url(images/richard_sprite.png) no-repeat -793px -20px;
}


#navcontainer .sillythingslink a
{
width: 115px;
height: 20px;
background: url(images/richard_sprite.png) no-repeat 0 -130px;
display: block;
}

#navcontainer .sillythingslink a:hover
{
background: url(images/richard_sprite.png) no-repeat 0 -150px;
}


#sillythingspage #navcontainer .sillythingslink a
{
background: #161817 url(images/richard_sprite.png) no-repeat 0 -150px;
}

#navcontainer .voiceoverlink a
{
width: 108px;
height: 20px;
background: url(images/richard_sprite.png) no-repeat -881px 0;
display: block;
}

#navcontainer .voiceoverlink a:hover
{
background: url(images/richard_sprite.png) no-repeat -881px -20px;
}


#voiceoverpage #navcontainer .voiceoverlink a
{
background: #161817 url(images/richard_sprite.png) no-repeat -881px -20px;
}

#navcontainer .contactlink a
{
width: 88px;
height: 20px;
background: url(images/richard_sprite.png) no-repeat -989px 0;
display: block;
}

#navcontainer .contactlink a:hover
{
background: url(images/richard_sprite.png) no-repeat -989px -20px;
}

#contactpage #navcontainer .contactlink a
{
background: #161817 url(images/richard_sprite.png) no-repeat -989px -20px;
}




#navcontainer .linkslink a
{
width: 51px;
height: 20px;
background: url(images/richard_sprite.png) no-repeat -1077px 0;
display: block;
}

#navcontainer .linkslink a:hover
{
background: url(images/richard_sprite.png) no-repeat -1077px -20px;
}

#linkspage #navcontainer .linkslink a
{
background: #161817 url(images/richard_sprite.png) no-repeat -1077px -20px;
}



#homepage #navcontainer .homelink, 
#aboutpage #navcontainer .aboutlink, 
#gigspage #navcontainer .gigslink,
#musicpage #navcontainer .musiclink,
#contactpage #navcontainer .contactlink,
#gallerypage #navcontainer .gallerylink,
#videopage #navcontainer .videolink,
#linkspage #navcontainer .linkslink,
#lyricspage #navcontainer .lyricslink,
#articlespage #navcontainer .articleslink,
#quizzespage #navcontainer .quizzeslink,
#albumpage #navcontainer .albumlink,
#sketchespage #navcontainer .sketcheslink,
#voiceoverpage #navcontainer .voiceoverlink, 
#chapspage #navcontainer .chapslink,
#sillythingspage #navcontainer .sillythingslink
{
background: #161817;

}


/*----------------- TEXT STYLES ---------------------------------------------------------------------------------- */

p {color:#FFFFFF; font-size: 1.6em; padding-bottom: 5px;}

a{text-decoration:none;}
a:link, a:active, a:visited {color: #0098A8;

  }
a:hover{color: #fff;}


h2{font-size: 1.8em; color: #0098A8; margin-bottom: 10px;}

h3{font-size: 1.6em; color: #005874; padding: 5px 0;}

#homepage h3{padding: 15px 0 5px 0;}



/*---- EASY TABS STYLE ---*/
#tab-container { 
min-height: 300px;
padding: 0;
background: url(images/hr_bg_long.png);
background-repeat: no-repeat;
background-position: right top; 
}

#gigspage #tab-container h2
{
padding: 25px 0 0 0;
background: url(images/hr_bg_l.png);
background-repeat: no-repeat;
background-position: left top;

}	

#chapspage #tab-container ul
{
padding: 25px 0 15px 0;
background: url(images/hr_bg_l.png);
background-repeat: no-repeat;
background-position: left top;

}	


			#tab-container ul { margin: 0; padding: 0; font-size: 1.8em; float:left; width: 100%;}
			#tab-container ul li { display: inline-block;}
			#tab-container ul li a { display: block; padding: 4px 5px;  }
			#tab-container ul li a:hover { text-decoration: none; }
			#tab-container ul li.active {   }
			#tab-container ul li a.active { font-weight: bold; color:#FFFFFF; }
			#tab-container .panel-container { padding: 10px 0 0 0; }
			#tab-container .panel-container ul { font-size: 1.4em; text-align: left; padding: 0;}
			#tab-container .panel-container ul li {  padding: 0;}
			#tab-container .panel-container ul li a { display:inline;  padding: 0;}
			
			#tab-container ul  .hiddentab {  display: none;}
			
		.chapimage { 
		width: 48%;
max-width: 250px;
    display:block;
    float:left;
    position:relative;
    overflow:hidden;
	margin: 0 4px 4px 0;
		
		}
		
		 .capty {width: 100%;
max-width: 250px;
height: auto;
float: left; }
		 
		 .imageCaption{
    display:none;
    position:absolute;
    background: url(images/image_hover.png) repeat 0 0;
    bottom:-50px;
    width: 100%;
    color:#fff;
	text-align: center;
	font-weight:bold;
	font-size: 0.8em;
	padding: 10px 0 10px 0;
}
		 	

/* ------------------------------ SOCIAL NETWORKING BUTTONS (FOOTER) ------------------------------------- */

#bottomfloat .facebooklink a
	{
width: 25px;
height: 25px;
text-indent: -5000px;
background: url(images/richard_sprite.png) no-repeat -260px -125px;
display: block;
position: relative;
margin-right: 5px;
float: left;
top: 0;
left: 0;


}

#bottomfloat .facebooklink a:hover
{
background: url(images/richard_sprite.png) no-repeat -260px -100px;

}

#bottomfloat .twitterlink a
	{
width: 25px;
height: 25px;
text-indent: -5000px;
background: url(images/richard_sprite.png) no-repeat -310px -125px;
display: block;
position: relative;
margin-right: 5px;
float: left;
top: 0;
left: 0;

}

#bottomfloat .twitterlink a:hover
{
background: url(images/richard_sprite.png) no-repeat -310px -100px;

}

#bottomfloat .youtubelink a
	{
width: 25px;
height: 25px;
text-indent: -5000px;
background: url(images/richard_sprite.png) no-repeat -285px -125px;
display: block;
position: relative;
margin-right: 5px;
float: left;
top: 0;
left: 0;

}

#bottomfloat .youtubelink a:hover
{
background: url(images/richard_sprite.png) no-repeat -285px -100px;

}

#bottomfloat .myspacelink a
	{
width: 25px;
height: 25px;
text-indent: -5000px;
background: url(images/richard_sprite.png) no-repeat -335px -125px;
display: block;
position: relative;
margin-right: 5px;
float: left;
top: 0;
left: 0;

}

#bottomfloat .myspacelink a:hover
{
background: url(images/richard_sprite.png) no-repeat -335px -100px;

}

#bottomfloat .bandcamplink a
	{
width: 25px;
height: 25px;
text-indent: -5000px;
background: url(images/richard_sprite.png) no-repeat -360px -125px;
display: block;
position: relative;
margin-right: 5px;
float: left;
top: 0;
left: 0;

}

#bottomfloat .bandcamplink a:hover
{
background: url(images/richard_sprite.png) no-repeat -360px -100px;

}

/*----------------- CONTACT FORM - UNTIDY! ---------------------------------------------------------------------------------- */

#showketchup
{
min-height: 350px;
padding-top: 20px;
}

#contact_form {width: 280px; height: 300px; }

#commentForm fieldset
{
border: none;

}


#commentForm div{ text-align: center;
clear: both;
min-height: 32px;
padding-top: 3px;

position: relative;
}

#commentForm div.bigbox{ text-align: center;
clear: both;
min-height: 110px;

position: relative;
}

#commentForm input
{float: left;

margin: 4px 0 4px 4px;
width: 150px;
min-height: 20px;
font-size: 16px;

    border: 1px solid #c4c4c4;
    border-radius: 2px;
    -moz-border-radius: 2px;
    -webkit-border-radius: 2px;
    box-shadow: 0px 0px 4px #d9d9d9;
    -moz-box-shadow: 0px 0px 4px #d9d9d9;
    -webkit-box-shadow: 0px 0px 4px #d9d9d9;
	}
	
	#commentForm input#verif_box
	{
	width: 100px;
	
	}

#commentForm textarea
 {
float: left;
 resize:none;
margin: 4px 0 4px 4px;
width: 150px;
min-height: 90px;
font-size: 16px;
border: 1px solid #c4c4c4;
    border-radius: 2px;
    -moz-border-radius: 2px;
    -webkit-border-radius: 2px;
    box-shadow: 0px 0px 4px #d9d9d9;
    -moz-box-shadow: 0px 0px 4px #d9d9d9;
    -webkit-box-shadow: 0px 0px 4px #d9d9d9;


}

#commentForm label { width: 80px; padding-top: 3px; float: left; font-size: 1.6em; color:#FFFFFF; }

div.message{
    
}

#commentForm div.error{
min-height: 10px;

      background: #0098A8;
  background: rgba(0, 152, 168, 0.6);
  
  -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px;
    
    padding: 5px;
	font-size: 1.0em;
}




#commentForm .submit
{
margin: 5px 0 5px 105px; 
display:block; 
border:1px solid #000000; 
width:100px; 
height:20px;
font-family:Verdana, Arial, Helvetica, sans-serif; 
font-size:11px; 
padding: 0 2px 2px 2px;

line-height:14px; 
background-color:#EFEFEF;
}


/* inout hover styles */
div.curFocus {
	background: #121212;
	}

#commentForm .curFocus label
{
color:#0098A8;

}
#commentForm div.curFocus input, #commentForm div.curFocus select, #commentForm div.curFocus textarea, #commentForm div.curFocus checkbox
{
 outline: none;
    border: 1px solid #0098A8;
    box-shadow: 0px 0px 4px #0098A8;
    -moz-box-shadow: 0px 0px 4px #0098A8;
    -webkit-box-shadow: 0px 0px 4px #0098A8;
}

.curFocus .submitbutton
{
border: 2px solid #009900; 
}

#form_result
{
width: 250px;
min-height: 300px;

color:#0098A8;
font-size: 1.6em;
}

@media (min-width: 551px) {

.MenuClicker, .sidenav
{
width: 0;
height: 0;
display: none;

}

}

/*----------------- MEDIUM SIZE        ---------------------------------------------------------------------------------- */

@media (max-width: 920px) and (min-width: 551px) {

#wrapper
{
width: 90%;
position: relative;
margin: 20px auto auto auto;
}

#header
{
width: 100%;
height: 120px;
position: relative;
margin: 0 0 10px 0;


}

#header h1 a
{
width: 160px;
height: 39px;
text-indent: -5000px;
background: url(images/richard_sprite.png) no-repeat 0 -42px;
display: block;
position: absolute;
top: 35px;
left: 0;

}

#header h1 a:hover
{

background: url(images/richard_sprite.png) no-repeat 0 -79px;

}

#header .header_background {
  background: url(images/richard_sprite.png) -390px -100px;
  width:  120px; /* width and height of the sprite image you want to display */
  height: 120px;
  position: absolute;
  top: 0;
  right: 10px;
  display: block;
}

#navcontainer
{
position: relative;
float: left;
width: 150px;
margin: 0;

}

#navcontainer #wheel {
  background: url(images/richard_sprite.png) -160px -100px;
  width:  101px; /* width and height of the sprite image you want to display */
  height: 101px;
  position: absolute;
  top: 496px;
  left: 45px;
  cursor: default;
}

#navcontainer #wheel:hover{
  background: url(images/richard_sprite.png) -160px -100px;}

#navcontainer.BigMenu #wheel
{
  background: url(images/richard_sprite.png) -160px -100px;
}

#navcontainer.BigMenu #wheel:hover
{
  background: url(images/richard_sprite.png) -160px -100px;
}

#navcontainer ul
{

}

.HiddenNav
{
display: block;
}

#content
{



padding: 10px 10px 40px 10px;
min-height: 300px;
background: #161817;
border-top: 1px solid #FFFFFF;
border-bottom: 1px solid #FFFFFF;


text-align: left;
margin: 0 0 0 160px;
background-image: url(images/contentbg.png);
background-repeat: no-repeat;
background-position: right bottom;




}

.content_background
{
 background: url(images/richard_sprite.png) -160px -60px;
  width:  100px; /* width and height of the sprite image you want to display */
  height: 35px;
  position: absolute;
  bottom: 0;
  left: 0;
  display: block;
}

.pagepicright
{
width: 40%; max-width: 300px;
float: right; padding: 0 0 10px 10px;
}

#contactpage .pagepicright, #musicpage .pagepicright
{
width: 0;
height: 0;
display: none;

}

.cycle-slideshow { width: 100%; min-width: 250px; max-width: 480px; height: auto; padding: 0; position: relative;
    background: #000000;
	margin: 15px 0 5px 0;

 }
 
 
 .videothumb
 {
 width: 100%;
max-width: 100%;
height: auto; 

 
 }
 
 /*---- EASY TABS STYLE ---*/
#tab-container { 
min-height: 300px;
padding: 0;
background: url(images/hr_bg_long.png);
background-repeat: no-repeat;
background-position: right top; 
}

#gigspage #tab-container h2
{
padding: 25px 0 0 0;
background: url(images/hr_bg_l.png);
background-repeat: no-repeat;
background-position: left top;

}	

#chapspage #tab-container ul
{
padding: 25px 0 15px 0;
background: url(images/hr_bg_l.png);
background-repeat: no-repeat;
background-position: left top;

}	
			
			
			#tab-container ul { margin: 0; padding: 0; font-size: 1.8em; float: left; width: 100%;
		
			}

.chapimage {
width: 32%;
max-width: 300px;
    display:block;
    float:left;
    position:relative;
    overflow:hidden;
	margin: 0 4px 4px 0;
	
}
		
		 .capty { width: 100%;
max-width: 300px;
height: auto;
float: left;}

.clear
{clear: both;}

#bottom
{
text-align: center;
width: 100%;


 
}





#bottomfloat
{

margin: 0 0 0 160px;


}

#bottom p {
text-align: right;
font-size: 1.1em;
color: #999;


}

}


/*----------------- FUL SIZE        ---------------------------------------------------------------------------------- */


@media (min-width: 921px) {
/*----------------- GENERAL PAGE STYLES ---------------------------------------------------------------------------------- */

body
{
background-color: #182325;
text-align: center;
font-family:Georgia, "Times New Roman", Times, serif;
font-size: 62.5%;
}

#wrapper
{
width: 900px;
position: relative;
margin: 20px auto auto auto;
}

#header
{
width: 900px;
height: 120px;
position: relative;
margin: 0 0 10px 0;


}

#header .header_background {
  background: url(images/richard_sprite.png) -390px -100px;
  width:  120px; /* width and height of the sprite image you want to display */
  height: 120px;
  position: absolute;
  top: 0;
  left: 780px;
  display: block;
}


#header h1 a
{
width: 160px;
height: 39px;
text-indent: -5000px;
background: url(images/richard_sprite.png) no-repeat 0 -42px;
display: block;
position: absolute;
top: 35px;
left: 0;

}

#header h1 a:hover
{

background: url(images/richard_sprite.png) no-repeat 0 -79px;

}


#content
{
width: 720px;
position: relative;
left: 160px;
text-align: left;
padding: 10px 10px 40px 10px;
min-height: 450px;
background: #161817;
border-top: 1px solid #FFFFFF;
border-bottom: 1px solid #FFFFFF;
}

.content_background
{
 background: url(images/richard_sprite.png) -160px -60px;
  width:  740px; /* width and height of the sprite image you want to display */
  height: 35px;
  position: absolute;
  bottom: 0;
  left: 0;
}

.cycle-slideshow { width: 480px; height: 360px; padding: 0; position: relative;
    background: #000000;
	margin: 15px 0 5px 0;

 }

#bottom
{
 text-align:center;
 padding: 5px 0 10px 0;
 height: 25px;
 width:900px;
 margin: auto auto auto auto;
 
}

#bottomfloat
{
position: relative;
left: 160px;
width: 200px;

}

#bottom p {
text-align: right;
font-size: 1.1em;
color: #999;


}

#bottom a:link, #bottom a:visited, #bottom a:active {

color:#0098A8;
text-decoration:none;}

#bottom a:hover{color:#fff;}

#bottom p.adminlink, #bottom a:link.adminlink, #bottom a:visited.adminlink, #bottom a:active.adminlink {color:#999; text-decoration:none; margin-top: 5px;}

#bottom a:hover.adminlink {color:#666;}

#bottom p.maillink, #bottom a:link.maillink, #bottom a:visited.maillink, #bottom a:active.maillink {color:#ccc; text-decoration:none; margin-top: 5px;}

#bottom a:hover.maillink {color:#333;}

/* ------------------------------------------- MAIN MENU -------------------------------------------------*/

#navcontainer
{
position: absolute;
top: 130px;
left: 0;
min-height: 473px;
width: 150px;
}

#navcontainer #wheel {
  background: url(images/richard_sprite.png) -160px -100px;
  width:  101px; /* width and height of the sprite image you want to display */
  height: 101px;
  position: absolute;
  top: 496px;
  left: 50px;
  cursor: default;
}

#navcontainer #wheel:hover{
  background: url(images/richard_sprite.png) -160px -100px;}

#navcontainer.BigMenu #wheel
{
  background: url(images/richard_sprite.png) -160px -100px;
}

#navcontainer.BigMenu #wheel:hover
{
  background: url(images/richard_sprite.png) -160px -100px;
}

#navcontainer ul
{

}

.HiddenNav
{
display: block;
}

#navcontainer li
{
list-style: none;
}

#navcontainer li a
{
margin-top: 0;
}

#navcontainer .homelink, 
#navcontainer .aboutlink,
#navcontainer .chapslink,
#navcontainer .gigslink,
#navcontainer .musiclink,
#navcontainer .videolink,
#navcontainer .contactlink,
#navcontainer .gallerylink,
#navcontainer .linkslink,
#navcontainer .albumlink,
#navcontainer .lyricslink, 
#navcontainer .quizzeslink, 
#navcontainer .articleslink,
#navcontainer .sketcheslink,
#navcontainer .sillythingslink,
#navcontainer .voiceoverlink

{
width: 145px;
height: 25px;
float: left;
margin: 0;
padding: 5px 0 0 5px;
text-indent: -5000px;
border-top: 1px solid #FFFFFF;

}
#navcontainer .linkslink

{
border-bottom: 1px solid #FFFFFF;
}
#navcontainer .homelink a
{
width: 53px;
height: 20px;
background: url(images/richard_sprite.png) no-repeat 0 0;
display: block;
}

#navcontainer .homelink a:hover
{
background: url(images/richard_sprite.png) no-repeat 0 -20px;
}


#homepage #navcontainer .homelink a
{
background: #161817 url(images/richard_sprite.png) no-repeat 0 -20px;
}


#navcontainer .aboutlink a
{
width: 91px;
height: 20px;
background: url(images/richard_sprite.png) no-repeat -53px 0;
display: block;
}

#navcontainer .aboutlink a:hover
{
background: url(images/richard_sprite.png) no-repeat -53px -20px;
}

#aboutpage #navcontainer .aboutlink a
{
background: #161817 url(images/richard_sprite.png) no-repeat -53px -20px;
}

#navcontainer .chapslink a
{
width: 98px;
height: 20px;
background: url(images/richard_sprite.png) no-repeat -144px 0;
display: block;
}

#navcontainer .chapslink a:hover
{
background: url(images/richard_sprite.png) no-repeat -144px -20px;
}

#chapspage #navcontainer .chapslink a
{
background: #161817 url(images/richard_sprite.png) no-repeat -144px -20px;
}

#navcontainer .gigslink a
{
width: 44px;
height: 20px;
background: url(images/richard_sprite.png) no-repeat -242px 0;
display: block;
}

#navcontainer .gigslink a:hover
{
background: url(images/richard_sprite.png) no-repeat -242px -20px;
}

#gigspage #navcontainer .gigslink a
{
background: #161817 url(images/richard_sprite.png) no-repeat -242px -20px;
}

#navcontainer .albumlink a
{
width: 70px;
height: 20px;
background: url(images/richard_sprite.png) no-repeat -286px 0;
display: block;
}

#navcontainer .albumlink a:hover
{
background: url(images/richard_sprite.png) no-repeat -286px -20px;
}

#albumpage #navcontainer .albumlink a
{
background: #161817 url(images/richard_sprite.png) no-repeat -286px -20px;
}


#navcontainer .musiclink a
{
width: 56px;
height: 20px;
background: url(images/richard_sprite.png) no-repeat -386px 0;
display: block;
}

#navcontainer .musiclink a:hover
{
background: url(images/richard_sprite.png) no-repeat -386px -20px;
}

#musicpage #navcontainer .musiclink a
{
background: #161817 url(images/richard_sprite.png) no-repeat -386px -20px;
}


#navcontainer .videolink a
{
width: 55px;
height: 20px;
background: url(images/richard_sprite.png) no-repeat -442px 0;
display: block;
}

#navcontainer .videolink a:hover
{
background: url(images/richard_sprite.png) no-repeat -442px -20px;
}

#videopage #navcontainer .videolink a
{
background: #161817 url(images/richard_sprite.png) no-repeat -442px -20px;
}

#navcontainer .gallerylink a
{
width: 78px;
height: 20px;
background: url(images/richard_sprite.png) no-repeat -497px 0;
display: block;
}

#navcontainer .gallerylink a:hover
{
background: url(images/richard_sprite.png) no-repeat -497px -20px;
}

#gallerypage #navcontainer .gallerylink a
{
background: #161817 url(images/richard_sprite.png) no-repeat -497px -20px;
}

#navcontainer .quizzeslink a
{
width: 74px;
height: 20px;
background: url(images/richard_sprite.png) no-repeat -575px 0;
display: block;
}

#navcontainer .quizzeslink a:hover
{
background: url(images/richard_sprite.png) no-repeat -575px -20px;
}

#quizzespage #navcontainer .quizzeslink a
{
background: #161817 url(images/richard_sprite.png) no-repeat -575px -20px;
}

#navcontainer .lyricslink a
{
width: 61px;
height: 20px;
background: url(images/richard_sprite.png) no-repeat -649px 0;
display: block;
}

#navcontainer .lyricslink a:hover
{
background: url(images/richard_sprite.png) no-repeat -649px -20px;
}


#lyricspage #navcontainer .lyricslink a
{
background: #161817 url(images/richard_sprite.png) no-repeat -649px -20px;
}

#navcontainer .articleslink a
{
width: 83px;
height: 20px;
background: url(images/richard_sprite.png) no-repeat -710px 0;
display: block;
}

#navcontainer .articleslink a:hover
{
background: url(images/richard_sprite.png) no-repeat -710px -20px;
}


#articlespage #navcontainer .articleslink a
{
background: #161817 url(images/richard_sprite.png) no-repeat -710px -20px;
}

#navcontainer .sketcheslink a
{
width: 88px;
height: 20px;
background: url(images/richard_sprite.png) no-repeat -793px 0;
display: block;
}

#navcontainer .sketcheslink a:hover
{
background: url(images/richard_sprite.png) no-repeat -793px -20px;
}


#sketchespage #navcontainer .sketcheslink a
{
background: #161817 url(images/richard_sprite.png) no-repeat -793px -20px;
}

#navcontainer .sillythingslink a
{
width: 115px;
height: 20px;
background: url(images/richard_sprite.png) no-repeat 0 -130px;
display: block;
}

#navcontainer .sillythingslink a:hover
{
background: url(images/richard_sprite.png) no-repeat 0 -150px;
}


#sillythingspage #navcontainer .sillythingslink a
{
background: #161817 url(images/richard_sprite.png) no-repeat 0 -150px;
}

#navcontainer .voiceoverlink a
{
width: 108px;
height: 20px;
background: url(images/richard_sprite.png) no-repeat -881px 0;
display: block;
}

#navcontainer .voiceoverlink a:hover
{
background: url(images/richard_sprite.png) no-repeat -881px -20px;
}


#voiceoverpage #navcontainer .voiceoverlink a
{
background: #161817 url(images/richard_sprite.png) no-repeat -881px -20px;
}

#navcontainer .contactlink a
{
width: 88px;
height: 20px;
background: url(images/richard_sprite.png) no-repeat -989px 0;
display: block;
}

#navcontainer .contactlink a:hover
{
background: url(images/richard_sprite.png) no-repeat -989px -20px;
}

#contactpage #navcontainer .contactlink a
{
background: #161817 url(images/richard_sprite.png) no-repeat -989px -20px;
}




#navcontainer .linkslink a
{
width: 51px;
height: 20px;
background: url(images/richard_sprite.png) no-repeat -1077px 0;
display: block;
}

#navcontainer .linkslink a:hover
{
background: url(images/richard_sprite.png) no-repeat -1077px -20px;
}

#linkspage #navcontainer .linkslink a
{
background: #161817 url(images/richard_sprite.png) no-repeat -1077px -20px;
}



#homepage #navcontainer .homelink, 
#aboutpage #navcontainer .aboutlink, 
#gigspage #navcontainer .gigslink,
#musicpage #navcontainer .musiclink,
#contactpage #navcontainer .contactlink,
#gallerypage #navcontainer .gallerylink,
#videopage #navcontainer .videolink,
#linkspage #navcontainer .linkslink,
#lyricspage #navcontainer .lyricslink,
#articlespage #navcontainer .articleslink,
#quizzespage #navcontainer .quizzeslink,
#albumpage #navcontainer .albumlink,
#sketchespage #navcontainer .sketcheslink,
#voiceoverpage #navcontainer .voiceoverlink, 
#chapspage #navcontainer .chapslink
{
background: #161817;

}


/*----------------- TEXT STYLES ---------------------------------------------------------------------------------- */

p {color:#FFFFFF; font-size: 1.6em; padding-bottom: 5px;}

a{text-decoration:none;}
a:link, a:active, a:visited {color: #0098A8;

  }
a:hover{color: #fff;}


h2{font-size: 1.8em; color: #0098A8; margin-bottom: 10px;}

h3{font-size: 1.6em; color: #005874; padding: 5px 0;}

/*----------------- ODDS N SODS ---------------------------------------------------------------------------------- */


.leftaudioplayer 
{
text-align: left;
padding: 10px;
}  

.newsitem
{
padding: 10px 0;

}


hr{
min-height: 20px;
      background: url(images/richard_sprite.png) no-repeat -160px -42px;
      border: 0;
}

.pagepicright
{
float: right; padding: 0 0 10px 10px;
}

.videothumb{
width: 480px;
max-width: 480px; 
height: 360px; 
border: none;
}




/*---- EASY TABS STYLE ---*/
#tab-container { 
min-height: 300px;
padding: 0;
background: url(images/hr_bg_long.png);
background-repeat: no-repeat;
background-position: right top; 
}

#gigspage #tab-container h2
{
padding: 25px 0 0 0;
background: url(images/hr_bg_l.png);
background-repeat: no-repeat;
background-position: left top;

}	

#chapspage #tab-container ul
{
padding: 25px 0 15px 0;
background: url(images/hr_bg_l.png);
background-repeat: no-repeat;
background-position: left top;

}	




			#tab-container ul { margin: 0; padding: 0; font-size: 1.8em; float: left; width: 100%;}
			#tab-container ul li { display: inline-block;}
			#tab-container ul li a { display: block; padding: 4px 5px;  }
			#tab-container ul li a:hover { text-decoration: none; }
			#tab-container ul li.active {   }
			#tab-container ul li a.active { font-weight: bold; color:#FFFFFF; }
			#tab-container .panel-container { padding: 10px 0 0 0; }
			#tab-container .panel-container ul { font-size: 1.4em; text-align: left; padding: 0;}
			#tab-container .panel-container ul li {  padding: 0;}
			#tab-container .panel-container ul li a { display:inline;  padding: 0;}
			
			#tab-container ul  .hiddentab {  display: none;}
			
		
.chapimage {
width: 32%;
max-width: 300px;
    display:block;
    float:left;
    position:relative;
    overflow:hidden;
	margin: 0 4px 4px 0;
	
}
		
		 .capty { width: 100%;
max-width: 300px;
height: auto;
float: left;}
		 
		 
	
		
/*----------------- CONTACT FORM - UNTIDY! ---------------------------------------------------------------------------------- */

#showketchup
{
min-height: 350px;
padding-top: 20px;
}

#contact_form {width: 350px; height: 300px; }

#commentForm fieldset
{
border: none;

}


#commentForm div{ text-align: center;
clear: both;
min-height: 32px;
padding-top: 3px;

position: relative;
}

#commentForm div.bigbox{ text-align: center;
clear: both;
min-height: 110px;

position: relative;
}

#commentForm input
{float: left;

margin: 4px 0 4px 4px;
width: 200px;
min-height: 20px;
font-size: 16px;

    border: 1px solid #c4c4c4;
    border-radius: 2px;
    -moz-border-radius: 2px;
    -webkit-border-radius: 2px;
    box-shadow: 0px 0px 4px #d9d9d9;
    -moz-box-shadow: 0px 0px 4px #d9d9d9;
    -webkit-box-shadow: 0px 0px 4px #d9d9d9;
	}
	
	#commentForm input#verif_box
	{
	width: 100px;
	
	}

#commentForm textarea
 {
float: left;
 resize:none;
margin: 4px 0 4px 4px;
width: 200px;
min-height: 90px;
font-size: 16px;
border: 1px solid #c4c4c4;
    border-radius: 2px;
    -moz-border-radius: 2px;
    -webkit-border-radius: 2px;
    box-shadow: 0px 0px 4px #d9d9d9;
    -moz-box-shadow: 0px 0px 4px #d9d9d9;
    -webkit-box-shadow: 0px 0px 4px #d9d9d9;


}

#commentForm label { width: 100px; padding-top: 3px; float: left; font-size: 1.6em; color:#FFFFFF; }

div.message{
    
}

#commentForm div.error{
min-height: 10px;
width: 150px;
      background: #0098A8;
  background: rgba(0, 152, 168, 0.6);
  
  -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px;
    
    padding: 5px;
	font-size: 1.0em;
}




#commentForm .submit
{
margin: 5px 0 5px 105px; 
display:block; 
border:1px solid #000000; 
width:100px; 
height:20px;
font-family:Verdana, Arial, Helvetica, sans-serif; 
font-size:11px; 
padding: 0 2px 2px 2px;

line-height:14px; 
background-color:#EFEFEF;
}


/* inout hover styles */
div.curFocus {
	background: #121212;
	}

#commentForm .curFocus label
{
color:#0098A8;

}
#commentForm div.curFocus input, #commentForm div.curFocus select, #commentForm div.curFocus textarea, #commentForm div.curFocus checkbox
{
 outline: none;
    border: 1px solid #0098A8;
    box-shadow: 0px 0px 4px #0098A8;
    -moz-box-shadow: 0px 0px 4px #0098A8;
    -webkit-box-shadow: 0px 0px 4px #0098A8;
}

.curFocus .submitbutton
{
border: 2px solid #009900; 
}

#form_result
{
width: 300px;
min-height: 300px;

color:#0098A8;
font-size: 1.6em;
}

}