*{
padding: 0;
margin: 0;
}

img
{
border: 0;
}

.clear
{clear: both;}

/*----------------- GLOBALS        ---------------------------------------------------------------------------------- */


body
{
background-color: #000000;
	background-image: url(images/bg3.jpg);
	background-repeat: repeat-x;
	background-position: left top;
	background-attachment: fixed;
text-align: center;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 62.5%;


}

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

h2 {color: #399;
font-size: 1.9em;
padding: 5px 0;
}

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


A{text-decoration:none;}
A:link {color: #399;}
A:active {color: #399;}
A:visited {color: #399;}
a:hover{color: #999;}

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


#header
{
position: relative;
border-bottom: 1px solid white;
text-align: center;
clear: both;
}

#headbox
{
position: relative;
margin: auto auto auto auto;
width: 100%;
text-align: center;
}

#logo-container {
margin: 15px auto 0 auto;

	height: 25px;
	width: 300px;
}

#logo-container h1 a
{
width: 300px;
height: 18px;
text-indent: -5000px;
background: url(images/robinbaker4.png);
 background-position: 0 0;
    background-size: 100% auto;
    background-repeat: no-repeat;
display: block;
position: relative;
top: 0;
left: 0;

}

#logo-container h1 a:hover
{

background: url(images/robinbaker4.png);
 background-position: 0 -18px;
    background-size: 100% auto;
    background-repeat: no-repeat;

}


#navcontainer #wheel {
width: 300px;
height: 22px;
display: block;
background: url(images/menu.png) 0 0;
cursor: pointer;
margin: 0 auto 8px auto;



}



#navcontainer #wheel:hover{
background: url(images/menu.png) 0 -20px;
}

#navcontainer.BigMenu #wheel
{
background: url(images/menu.png) 0 -40px;
}

#navcontainer.BigMenu #wheel:hover
{
background: url(images/menu.png) 0 -60px;
}


#navcontainer ul
{


}

.BigMenu
{
height: 340px;
}

.SmallMenu
{
height: 30px;

}

.HiddenNav
{
display: none;
}


#navcontainer
{
position: relative;
margin: auto auto auto auto;
width: 100%;
text-align: center;
font-size: 1.6em;
}

#navlist
{
margin: 0 auto 0 auto;
padding: 6px 0 20px 0;

}

#navlist ul
{
margin: 0;
padding: 0;

}

#navlist li
{
margin: 0 0 9px 0;
border-bottom: 1px solid #CCCCCC;
padding-bottom: 6px;
}

#navlist a:link, #navlist a:visited
{
float: none;
line-height: 10px;
font-weight: bold;
margin: 0 10px 4px 10px;
text-decoration: none;
color: #fff;

}

 #navlist a:hover
{
border-bottom: 4px solid #fff;
padding-bottom: 2px;
background: transparent;
color: #399;
}

#homepage #navcontainer .homelink a, 
#biogpage #navcontainer .bioglink a,
#bandspage #navcontainer .bandslink a,
#musicpage #navcontainer .musiclink a,
#videopage #navcontainer .videolink a,
#gearpage #navcontainer .gearlink a,
#gallerypage #navcontainer .gallerylink a,
#contactpage #navcontainer .contactlink a,
#linkspage #navcontainer .linkslink a

{
float: none;
line-height: 10px;
font-weight: bold;
margin: 0 10px 4px 10px;
text-decoration: none;
color: #336699;
border-bottom: 4px solid #fff;
padding-bottom: 2px;
}







#content
{
width: 300px;
position: relative;
margin: auto auto auto auto;
clear: both;
text-align: left;

}

.pagepicleft
{
width: 300px;
height: auto;
float: none; 
padding-left: 0;
padding-bottom: 10px;
padding-top: 10px;
}

#footer
{
clear:both;
border-top: 1px solid white;
 text-align:center;
 font-size: 0.7em;

}


.tab-container ul { margin: 0; padding: 0; font-size: 1.8em; float:none; text-align: center;}
			.tab-container ul li { display: block;}
			.tab-container ul li a { display: block; padding: 4px 0;  }
			.tab-container ul li a.jp-play, .tab-container ul li a.jp-pause { display: block; padding: 0;  }
			.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 .panels-container { padding: 10px 0 10px 0; }


.videobox
{
display:block;
width: 300px;
height: 240px;
float: left;
margin: 0 0 0 0;

}

.videobox img
{
width: 288px;
height: 219px;

}







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

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

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

#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: 110px; padding-top: 3px; float: left; font-size: 1.6em; color:#ffffff; }

div.message{
    
}

#commentForm div.error{
min-height: 10px;
width: 150px;
      background: #2c6290;
  background: rgba(44, 98, 144, 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;
	}

.curFocus label
{
color:#0066ff;

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

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

#form_result
{
width: 280px;
min-height: 200px;

color:#0066ff;
font-size: 1.6em;
}



/*----------------- MEDIUM SIZE  ---------------------------------------------------------------------------------- */
@media (max-width: 650px) and (min-width: 551px) {
#headbox
{
position: relative;
margin: auto auto auto auto;
width: 98%;
text-align: center;
}

#navcontainer
{
position: relative;
margin: auto auto auto auto;
width: 100%;
text-align: center;
font-size: 1.5em;
}

#navlist a:link, #navlist a:visited
{
float: left;
line-height: 14px;
font-weight: bold;
margin: 0 10px 4px 0;
text-decoration: none;
color: #fff;
}

#homepage #navcontainer .homelink a, 
#biogpage #navcontainer .bioglink a,
#bandspage #navcontainer .bandslink a,
#musicpage #navcontainer .musiclink a,
#videopage #navcontainer .videolink a,
#gearpage #navcontainer .gearlink a,
#gallerypage #navcontainer .gallerylink a,
#contactpage #navcontainer .contactlink a,
#linkspage #navcontainer .linkslink a

{
float: left;
line-height: 14px;
font-weight: bold;
margin: 0 10px 4px 0;
text-decoration: none;
color: #336699;
border-bottom: 4px solid #fff;
padding-bottom: 2px;
}

}

@media (max-width: 950px) and (min-width: 651px) {
#headbox
{
position: relative;
margin: auto auto auto auto;
width: 90%;
text-align: center;
}

#navcontainer
{
position: relative;
margin: auto auto auto auto;
width: 100%;
text-align: center;
font-size: 1.6em;
}

#navlist a:link, #navlist a:visited
{
float: left;
line-height: 14px;
font-weight: bold;
margin: 0 12px 4px 0;
text-decoration: none;
color: #fff;
}

#homepage #navcontainer .homelink a, 
#biogpage #navcontainer .bioglink a,
#bandspage #navcontainer .bandslink a,
#musicpage #navcontainer .musiclink a,
#videopage #navcontainer .videolink a,
#gearpage #navcontainer .gearlink a,
#gallerypage #navcontainer .gallerylink a,
#contactpage #navcontainer .contactlink a,
#linkspage #navcontainer .linkslink a

{
float: left;
line-height: 14px;
font-weight: bold;
margin: 0 12px 4px 0;
text-decoration: none;
color: #336699;
border-bottom: 4px solid #fff;
padding-bottom: 2px;
}

}

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

#content
{
width: 90%;
position: relative;
margin: auto auto auto auto;
clear: both;
text-align: left;

}


.pagepicleft
{
width: 40%;
height: auto;
float: right; 
padding-left: 20px;
padding-bottom: 20px;
padding-top: 10px;
}

.gearpic
{
width: 30%;
max-width: 300px;
height: auto;
float: right; 
padding-left: 20px;
padding-bottom: 20px;
padding-top: 10px;
}




#logo-container {
margin: 15px 0 0 0;

	height: 29px;
	width: 500px;
}

#logo-container h1 a
{
width: 500px;
height: 29px;
text-indent: -5000px;
background: url(images/robinbaker4.png) no-repeat 0 0;
display: block;
position: relative;
top: 0;
left: 0;

}

#logo-container h1 a:hover
{

background: url(images/robinbaker4.png) no-repeat 0 -29px;


}



#navcontainer #wheel
{
width: 0;
height: 0;
display: none;

}

.BigMenu
{
height: 40px;
}

.SmallMenu
{
height: 40px;

}

.HiddenNav
{
display: block;
}




#navlist
{
margin: 0;
padding: 21px 0 20px 0;

}

#navlist ul, #navlist li
{
margin: 0;
padding: 0;
display: inline;
list-style-type: none;
}



 #navlist a:hover
{
border-bottom: 4px solid #fff;
padding-bottom: 2px;
background: transparent;
color: #399;
}

.tabpic
{
width: 40%;
height: auto;
float: right; 
padding-left: 20px;
padding-bottom: 20px;
padding-top: 10px;
}


}


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

/* FRAMES STUFF */

html,
body {
	margin:0;
	padding:0;
	height:100%; /* 100 % height */
	
}
html>body #wrap {height:100%;} /* 100 % height */
#wrap {
	width:100%;
	margin:0 auto;
}
#header {
	width:100%;
	height:85px;
		border-bottom: 1px solid white;
		text-align: center;
		background: #000000;
		color: #000000;
}
html>body #header {
	position:fixed;
	z-index:10; /* Prevent certain problems with form controls */
}
html>body #content-wrap {height:100%;} /* 100 % height */
html>body #content {
padding-top: 96px;
padding-bottom: 48px;
padding-left: 16px;
padding-right: 16px;} /* 6em = height of #header and #footer + 1em, 1em = give the content some breathing space */
#footer {
	width:100%;
	height: 32px;
	background: #010042;
		
}
html>body #footer {
	position:fixed;
	bottom:0;
	z-index:10; /* Prevent certain problems with form controls */
}



#header
{
position: relative;
border-bottom: 1px solid white;
text-align: center;
clear: both;
}

#headbox
{
position: relative;
margin: auto auto auto auto;
width: 900px;
text-align: center;
}

#logo-container {
margin: 15px 0 0 0;

	height: 29px;
	width: 500px;
}

#logo-container h1 a
{
width: 500px;
height: 29px;
text-indent: -5000px;
background: url(images/robinbaker4.png) no-repeat 0 0;
display: block;
position: relative;
top: 0;
left: 0;

}

#logo-container h1 a:hover
{

background: url(images/robinbaker4.png) no-repeat 0 -29px;


}


#content
{
width: 900px;
position: relative;
margin: auto auto auto auto;
clear: both;
text-align: justify;

}

.banditem
{
border: 1px solid #CCCCCC;
padding: 10px 10px 10px 10px;
margin-bottom: 10px;
}

.pagepicleft
{
width: auto;
height: auto;
float: right; 
padding-left: 20px;
padding-bottom: 20px;
padding-top: 10px;
}

.gearpic
{float: right;
padding: 10px;
}


#navcontainer #wheel
{
width: 0;
height: 0;
display: none;

}

.BigMenu
{
height: 30px;
}

.SmallMenu
{
height: 30px;

}

.HiddenNav
{
display: block;
}


#navcontainer
{
position: relative;
margin: auto auto auto auto;
width: 900px;
text-align: center;
font-size: 1.6em;
}

#navlist
{
margin: 0;
padding: 21px 0 20px 0;

}

#navlist ul, #navlist li
{
margin: 0;
padding: 0;
display: inline;
list-style-type: none;
}

#navlist a:link, #navlist a:visited
{
float: left;
line-height: 14px;
font-weight: bold;
margin: 0 10px 4px 10px;
text-decoration: none;
color: #fff;
}

 #navlist a:hover
{
border-bottom: 4px solid #fff;
padding-bottom: 2px;
background: transparent;
color: #399;
}

#homepage #navcontainer .homelink a, 
#biogpage #navcontainer .bioglink a,
#bandspage #navcontainer .bandslink a,
#musicpage #navcontainer .musiclink a,
#videopage #navcontainer .videolink a,
#gearpage #navcontainer .gearlink a,
#gallerypage #navcontainer .gallerylink a,
#contactpage #navcontainer .contactlink a,
#linkspage #navcontainer .linkslink a

{
float: left;
line-height: 14px;
font-weight: bold;
margin: 0 10px 4px 10px;
text-decoration: none;
color: #336699;
border-bottom: 4px solid #fff;
padding-bottom: 2px;
}




#footer
{
clear:both;
border-top: 1px solid white;
 text-align:center;
 font-size: 0.7em;

}

.clear
{clear:both;}

.videobox
{
display:block;
width: 300px;
height: 240px;
float: left;
margin: 0 0 0 0;

}

.videobox img
{
width: 288px;
height: 219px;

}

#my-title
{
width: 380px;
padding: 10px 10px 0 20px;
text-align: left;


}

/*------------------------------------- TAB STYLES ------------------------------------------------------------ */

#tab-side-container {z-index: 50;  min-height: 100px; }
#tab-side-container ul.tabmenu { font-size: 1.6em;  min-height: 100px; list-style: none; float: left; }
#tab-side-container ul.tabmenu li { width: 200px; text-align: center; min-height: 20px; background: url(css/bluem/ui-bg_gloss-wave_16_121212_500x100.png) 0 50%  repeat-x;
	

 border: 1px solid #999999; border-right: 1px solid #404040; margin-bottom: 1px;  }
#tab-side-container ul.tabmenu li a {min-height: 20px;  display: block; padding: 5px 5px 5px 7px; outline: none; color: #ffffff; text-decoration:none; }
#tab-side-container ul.tabmenu li a b { color: #000000;}
#tab-side-container ul.tabmenu li a:hover { text-decoration: none; color: #efefef; background:  url(css/bluem/ui-bg_inset-soft_15_121212_1x100.png) 0 50% repeat-x; }
#tab-side-container ul.tabmenu li a:hover b {color: #FFFFFF;}
#tab-side-container ul.tabmenu li.selected-tab { background: #121212; color: #ffffff; border-right: 1px solid #121212;}
#tab-side-container ul.tabmenu li:first-child.selected-tab {color: #000000;}
#tab-side-container ul.tabmenu li a.selected-tab { text-decoration: none; color: #ffffff;}
#tab-side-container ul.tabmenu li a.selected-tab b {color: #C93C04;}

#tab-side-container ul.tabmenu li a:hover.selected-tab { color: #efefef;}
#tab-side-container ul.tabmenu li a:hover.selected-tab b {color: #ffffff;}

#tab-side-container .panel-container {min-height: 100px; background-color:#121212; margin-left: 200px; color: #34290D; text-align: left; border: 1px solid #999999; padding: 3px 7px 3px 5px;  }

#tab-side-container .panel-container h3 {font-size: 1.8em; padding: 0 0 0 5px;}
#tab-side-container .panel-container h4 {font-size: 1.4em; padding: 0 0 0 10px;}

#tab-side-container .panel-container p { font-size: 1.6em;  padding: 10px 0 0 5px;}



.tabpic
{
float: right; 
padding: 5px 10px 20px 20px;
}

/*---- EASY TABS STYLE ---*/
.tab-container { min-height: 200px; }
			.tab-container ul { margin: 0; padding: 0; font-size: 1.8em; float:left;}
			.tab-container ul li { display: block;}
			
			.tab-container .jp-type-playlist ul li { display: block;}
			
			.tab-container ul li a { display: block; padding: 4px 5px;  }
			.tab-container ul li a.jp-play, .tab-container ul li a.jp-pause { display: block; padding: 0;  }
			.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 .panels-container { padding: 10px 0 0 0; }
			.tab-container .panels-container ul { font-size: 1.4em; text-align: left; padding: 0;}
			
			.tab-container .panels-container .jp-type-playlist ul { font-size: 0.9em; text-align: left; padding: 0;}
			
			.tab-container .panels-container ul li {  padding: 0;}
			.tab-container .panels-container ul li a { display:inline;  padding: 0;}
			
			.tab-container .panels-container .jp-playlist ul li a { display: block; padding: 4px 0;  }
			
			
			

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

#contact_form {width: 420px; height: 250px; }


#commentForm input
{float: left;

margin: 4px 0 4px 4px;
width: 250px;
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: 250px;
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: 110px; padding-top: 3px; float: left; font-size: 1.6em; color:#ffffff; }


#commentForm div.error{
min-height: 10px;
width: 150px;
      background: #2c6290;
  background: rgba(44, 98, 144, 0.6);
  
  -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px;
    
    padding: 5px;
	font-size: 1.0em;
}



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

color:#0066ff;
font-size: 1.6em;
}
			

}