﻿*{
	padding: 0;
	margin: 0;
	float: none;
}

/*
Color Maps: (Search and replace for use)
	Black:  #000000;  Main Page background
	Dark Grey: #101010; Outside page boarder/fill
	Mid Grey: #404040;  Used for nav boarders 
	Light Grey: #808080; Used on line boarders 
	Bright Grey: #B0B0B0; Used for main text
	White:	#DEF; Used on main page boarder and nav text
	
	Dark Blue:		#000040;	Nav Normal and top bar
	Light Blue:		#000080;	Nav hover
*/

/* CSS layout */
#pageboarder{
	background-color: #000000;/*main page fill*/;
	font-family: Helvetica, Arial, sans-serif;
	width: 850px;/*min-width: 600px;*/;
	min-height: 600px;
	border: 1px solid #DEF;
	/*main page boarder*/
	margin-left: auto;/*2px*/
	margin-right: auto;/*2px*/
	margin-top: 2px;
	margin-bottom: 2px;
}

body {
	background-color: #101010; /*outside page boarder*/
	color: #B0B0B0; /*Main text color*/
 
}

/*Link formatting for whole site*/
a:link{color:#A5A5FF;}/*try: A5A5FF  default: 0000FF*/
a:visited{color:#B050FF;}/*800080*/ 
a:hover{color:#FFFFFF;} /*??*/
a:active{color:#FF0000;}/*FF0000*/

.IndexHead
{
	font-size:large;
	text-decoration:underline;
	font-weight:bold;
}

#page_content
{
	min-height: 480px;
}

#h1/*masthead*/ {
	min-width: 600px;
	height: 105px;
	margin-left: 4px;
	margin-right: 4px;
	margin-top: 2px;
	margin-bottom: 2px;

}

#MasterLogo {
	width: 180px;
	float: left;
}

#Header {
	text-align: right;
	margin-left: 180px;
	margin-right: 20px;
}

#top_nav{
	margin-left: 4px;
	margin-right: 4px;
	margin-top: 2px;
	margin-bottom: 0px; /*2*/
}

#top_nav hr{
	background-color: #000040;/*top bar color*/
	height: 4px;
	border: 1px solid #404040; /*top bar boarder*/
}

#container {
	min-height: 300px;
	margin-left: 4px;
	margin-right: 4px;
	margin-top: 4px;
	margin-bottom: 2px;
}
GuitarGallery{
	 
}
#left_col {
	width: 175px;
	float: left;
	margin-top: -17px;
	color: #DEF;
	font-size: small;
}
#left_col img { display: block; }
 
#left_col ul, li{
	list-style: none;
	color: #DEF; /*Nav text color*/
	background-color: #000040; /*nav normal*/
	border: 1px solid #808080; /*nav boarder*/
	text-align: center;
}

#left_col li:hover {
	background-color: #000080; /*Nav hover*/
	-ms-transform: translate(-1px) scale(1.05);
	-moz-transform: translate(-1px) scale(1.05);
	-webkit-transform: translate(-1px) scale(1.05);
	-o-transform: translate(-1px) scale(1.05);
}

#page_content {
	margin-left: 185px;
	margin-top: 5px;
	/*float: left;*/

}

#fullpage_content {
	margin-left: 5px;
	margin-top: 5px;
	/*float: left;*/

}

#form table{
	boarder: 1px;
}

.floatright
 {
 	float: right;
	margin: 10px 10px 10px 10px;
	border: 1px solid #666;
 }


#footer {
	clear: both;
	text-align: center;
}

/*START New Board*/
#WP_sidebar
{
		background-color: #101010; /*outside page boarder*/
	color: #B0B0B0; /*Main text color*/

}




/*START CONTACT US FORM*/
#contact_form_wrap {
  margin:0 auto;
 /* margin-top:50px;
  padding:10px;*/
  width:450px;
}
.message {
  font-weight:bold;
  font-size:small;
}
.errors {
  color:#af1010;
}
label {
    font-weight:bold;
}
.textfield {
    padding:5px 0 0 3px;
    width:297px;
    height:20px;
    border: 1px solid #e9e9e9;
    background-color:#101010;
    color:#fff;
}
.textarea {
    padding:3px;
    width:350px;
    height:200px;
    border: 1px solid #e9e9e9;
    background-color:#101010;
	/*    
	font-family:Arial, Helvetica, sans-serif;
    font-size:12px;
    */
    color:#fff;
}
.button {
    padding:3px 0 5px 0;
    width:75px;
    height:25px;
    border: 1px solid #e9e9e9;
    background-color:#000040;
    font-weight:bold;
    cursor:pointer;
    color: #DEF;
   /* font-family:Arial, Helvetica, sans-serif;*/
}
.button:hover {
    background-color:#000080;
    -ms-transform: translate(-1px) scale(1.05);
	-moz-transform: translate(-1px) scale(1.05);
	-webkit-transform: translate(-1px) scale(1.05);
	-o-transform: translate(-1px) scale(1.05);
}	



.expand {position:relative; margin-left:10px; margin-bottom:100px; z-index:500;}
.positioner {position:absolute; left:0; top:0;}
.slide {display:block; border:0; margin-left:10px; text-decoration:none; float:left;}
.last {border:0;}
.slide img {display:block; border:0; max-width:80px; max-height:100px; cursor:pointer;}
.slide:hover img {z-index:1000; height:100%; width:100%; max-height:500px;
-ms-transform:scale(1.0);/*translate(0px, 100px) */
-webkit-transform:scale(1.0); /*Webkit: Scale up image to 1.2x original size*/
-moz-transform:scale(1.0); /*Mozilla scale version*/
-o-transform:scale(1.0); /*Opera scale version*/
box-shadow:0px 0px 30px gray; /*CSS3 shadow: 30px blurred shadow all around image*/
-webkit-box-shadow:0px 0px 30px gray; /*Safari shadow version*/
-moz-box-shadow:0px 0px 30px gray; /*Mozilla shadow version*/
}


/*8888888888888888888888888888888888888888888888*/
@-webkit-keyframes supersize {
  0% { -webkit-transform:scale(.9); }
  100% { -webkit-transform:scale(1); }
}
nav {
  position:relative;
  width:100%; 
  /*position:absolute;
  width:100%;
  left:0
  top:20px;*/

  text-align:center;
}
nav a{
	color:black;
	border:none;
}
nav li {
  display:inline;
  margin:0 10px;
}
nav img {
height:60px;

  border-radius:4px;
  -moz-border-radius:4px;
  -webkit-box-shadow:0 1px 0 #fff;
  -moz-box-shadow:0 1px 0 #fff;
  box-shadow:0 1px 0 #fff;
  -webkit-transition:opacity .2s linear;
  -moz-transition:opacity .2s linear;
  -o-transition:opacity .2s linear;
  transition:opacity .2s linear;
}
nav a:hover img {opacity:.75;}
nav a:active img {margin-top:1px;}
li[id] {
  overflow:hidden;
  position:absolute;
  width:0;
  height:0;
  left:0;
  top:0;
  opacity:0;
  background:rgba(0,0,0,.8);
  -webkit-transition:opacity 1.2s cubic-bezier(0,0,0,1);
  -moz-transition:opacity 1.2s cubic-bezier(0,0,0,1);
  -o-transition:opacity 1.2s cubic-bezier(0,0,0,1);
  transition:opacity 1.2s cubic-bezier(0,0,0,1);
}
li[id] a:before {
  /*content:url(img/close.png);
  position:absolute;
  top:-26px;
  left:-26px;
  opacity:0;*/
}
li[id] a:hover:before {opacity:1;}
li[id]:target {
  width:100%;
  height:100%;
  opacity:1;
}
li[id]:target a {

   position:relative;
   top:10%;
 /*  top:120px;
  left:180px;
height:100%;
  margin:-220px 0 0 -380px;
  border:15px solid #fff;
  -webkit-box-shadow:0 1px 8px #000;
  -moz-box-shadow:0 1px 8px #000;
  box-shadow:0 1px 8px #000;
  -webkit-animation:supersize .8s cubic-bezier(0,0,0,1);*/
  z-index:1000; height:500px; 
box-shadow:0px 0px 30px gray; /*CSS3 shadow: 30px blurred shadow all around image*/
-webkit-box-shadow:0px 0px 30px gray; /*Safari shadow version*/
-moz-box-shadow:0px 0px 30px gray; /*Mozilla shadow version*/
}
li[id]:target img{
height:500px;z-index:1000;
}

.TutSectionHead
{
	font-weight:bold;
	font-size:x-large;
}
.TutCode
{/*Code snipets in tutorials*/
	color:#D0FFD0;/*204020*/
}
.TutCodeComment
{/*Code snipet comments in tutorials*/
	color:#408040;/*204020*/
}
.TutCodeOperation
{/*Operations in the Tutorial which need emphasis*/
	color:#FFFFFF;/*DEF*/
	font-style:italic;
	font-size:large;
}

/* begin css tabs */

ul#tabnav { /* general settings */
text-align: center; /* set to left, right or center */
margin: 1em 0 1em 0; /* set margins as desired */
font: bold 11px verdana, arial, sans-serif; /* set font as desired */
border-bottom: 1px solid #DEF; /* set border COLOR as desired */
list-style-type: none;
padding: 3px 10px 3px 10px; /* THIRD number must change with respect to padding-top (X) below */
}

ul#tabnav li { /* do not change */
display: inline;
}

div#tab1 li.tab1, div#tab2 li.tab2, div#tab2OSX li.tab2OSX, div#tab3 li.tab3, div#tab4 li.tab4, div#tab5 li.tab5, div#tab6 li.tab6 { /* settings for selected tab */
border-bottom: 1px solid #DEF; /* set border color to page background color */
background-color: #000000; /* set background color to match above border color */
}

div#tab1 li.tab1 a, div#tab2 li.tab2 a, div#tab2OSX li.tab2OSX a, div#tab3 li.tab3 a, div#tab4 li.tab4 a, div#tab5 li.tab5 a, div#tab6 li.tab6 a { /* settings for selected tab link */
background-color: #000000; /* set selected tab background color as desired */
color: #000; /* set selected tab link color as desired */
position: relative;
top: 1px;
padding-top: 4px; /* must change with respect to padding (X) above and below */
color:#B0B0B0;/*text color selected tab*/
}

ul#tabnav li a { /* settings for all tab links */
padding: 3px 4px; /* set padding (tab size) as desired; FIRST number must change with respect to padding-top (X) above */
border: 1px solid #DEF; /* set border COLOR as desired; usually matches border color specified in #tabnav */
background-color: #B0B0B0; /* set unselected tab background color as desired */
color: #666; /* set unselected tab link color as desired */
margin-right: 0px; /* set additional spacing between tabs as desired */
text-decoration: none;
border-bottom: none;
color:#000000;
}

ul#tabnav a:hover { /* settings for hover effect */
background: #fff; /* set desired hover color */
}

/* end css tabs */