html, body {
	margin: 0px;
	padding:0px;
	background:#111 url(../images/background.png) top center fixed;
	font-size:14px;
  
}

h1, h2, h3, h4, h5, h6, p, form {
	margin: 0px;
	padding:0px;
}

ul{list-style:none;}

table{background:url(tippbg.png)}

tr th {padding:12px;
  border-bottom:1px solid black;
}

tr td {padding:8px;
  border:1px solid black;
}

a {color:#0820E1;
  text-shadow:#C6E0FF 1px 1px 1px;  
  text-decoration:none; font-size:100.2%;
  font-weight:bold;
}

a:visited{color:#151724; 	
}


a:hover {color:#111E5F; 
  text-decoration:underline;	
}

#wrapper {
	max-width:860px;
	margin:0px auto;
}

#content {
    background-image:url(tippbg.png);
}

#header {
	height:200px;
	padding:0;
	background-image:url(../images/bg_header.png);
    background-repeat:no-repeat;
    border-bottom:4px solid #F5F1F0;
	padding-bottom:10px;
}

/* The SF-logo */

#logo {
    float:left;
    border:0px solid yellow; 
	width:auto;
}

    #logo h1{
	    border:none;
	    font-family:serif;
	    font-size:14px;
	    color:#524343;
	    font-weight:normal;
	    text-decoration:none;
	    margin-left:30px;
	    padding:10px;
	  }
/* the navigation-bar atop the page */

#links {
	padding:8px;
	padding-bottom:-1px;
	margin-top:1ex; 
}

    #links ul {
      float:right;
	  width:200px;
	  height:auto;
	  padding:0px;
	  margin:0;
	}
    #links h1{
        float:right;
   }
    
    #links li{
	    float:right;
	    list-style-type:none;
	    width:150px;
	    height:3ex;
	    text-align:center;
	    background-color:#929292;
	    margin-left:1px;
	    border-top:1px solid black;
	    border-left:1px solid transparent;
	    padding-top:1px;
	    font-size:86%;
	 }

    #links a{
	    font-family: serif;
	    font-size:101%;
	    color:white;
	    font-weight:normal;
	    text-decoration:none;
	    text-shadow:#7F2C18 1px 1px 1px;
	}

	#links a:hover{
		color:blue;
		text-decoration:underline;
		}

/* The guitarix-banner */

#mainimg {
	background-image:url(../images/site_logo.png);
	background-repeat:no-repeat;
	height:78px;
	text-align:right;
	margin:14px auto;
	margin-top:94px;
	padding:12px;
	padding-top:20px;
	padding-right:22px;
	color:white;
}
	#mainimg h2 {
	    text-shadow:#622E0B 4px 1px 1px;
	    font-size:52px;
	    font-family:sans-serif;
	    font-weight:normal;
	    line-height:110%;
      }
	#mainimg h2 span#slogan {
	    text-shadow:#57140A 1px 1px 1px;
	    font-size:40%;
      }      
	#mainimg a {
	text-decoration:none;
	color:white;
	text-shadow:#622E0B 4px 1px 1px;
	text-transform:uppercase;
	letter-spacing:0.1em;
	font-style:italic;
      }
	#mainimg a:hover {
      text-decoration:none;
      color:#BCBDBC;
      }

#contentarea {
	clear:both;
	padding:12px 0px;
	font-size:101%;
}

/* Main content area */
#leftbar {
	float:left;
	width:602px;
	border-right:1px solid #F5F1F0;
	border-left:1px solid #F5F1F0;
	font-weight:lighter;
	font-family: sans-serif;	
  }

    #leftbar h2{
	max-width:768px;
  	padding:4px;
	margin-bottom:1ex; 
	color:#DD9700;
	background-color:#F2ECE0;
	font-family: sans-serif;
	font-size:190%;	
	font-weight:lighter;
	line-height:130%;
	text-align:center;
	letter-spacing:0.3em;
	text-shadow:#7F2C18 1px 1px 1px;
    }
  
    #leftbar h3{
	background-color:#F2ECE0;
	padding:6px;
	padding-bottom:2px;
	margin-bottom:1ex;
	font-size:130%;
	font-weight:normal;
	font-family:sans-serif;
	letter-spacing:0.2em;
    }

    #leftbar h4{
	background-color:#F2ECE0;
	padding:3px;
	text-indent:2em;
	margin-bottom:0.5ex;
	font-size:99%;
	font-weight:normal;
	font-family:sans-serif;
	letter-spacing:0.2em;
    }

  #leftbar p{
	font-family: serif;
	font-size:108%;
	color:#000000;
	font-weight:light;
	padding:8px 40px;
	margin-bottom:0.8ex;
    }

  #leftbar a {
	font-family: serif;
	padding:0px 12px;
    }

/* illustration only appeares on pages without right-bar so it can be wider than the initial leftbar */
	.illustration {
      width:660px;
      padding:6px;
      border:1px solid #797B7A;
      margin:12px auto;
      font-size:90%;
      
      }
      .illustrat {
      width:522px;
      padding:2px;
      margin:2px auto;
      font-size:90%;
      
      }
      .illustrata {
      width:858px;
      
      }
	  .illustration img{
	   display:block;
      border:2px solid #797B7A;
      margin:8px auto;
	  } 

/* The right bar is not on every page,  */

#rightbar {
	float:right;
	width:200px;
	margin: 0px;
	padding:25px;
	background-repeat:no-repeat;
	background-image:url(../images/glsh.png);
    background-position: 0px 150px;
	font-size:84%;
}

#rightbar h2{
	font-family: serif;
	font-size:130%;
	font-weight:normal;
	text-decoration:none;
	padding-left:10px;
	padding-bottom:1ex;
	letter-spacing:0.2em;
}

#rightbar p{
	font-family: serif;
	font-size:101%;
	padding:4px;
}

/* maybe we want to design these icons in the rightbar later on... */
#rightbar ul.icons {
	list-style:none;
  
}
#rightbar ul.icons li{
	
  
}
/* The sound-player in the right bar */
#rightbar  #player {
    margin:12px auto;
    padding:4px;
    border-top:1px solid black;
    border-bottom:1px solid black;
  }
  
  .makeway_vertical {
    text-align:center;
    height:580px;
  }

#bottom {
	clear:both;
	height:9ex;
	border-top:8px solid gray;
	border-bottom:8px solid gray;
	text-align:center;
	margin-top:25px;
	padding-top:1ex;
	color:#c5c5c5;
	background:#1A1B1B;
    background-image:url(../images/bg_bottom.png);
    background-repeat:repeat-x;
    
}
    #bottom strong{
      font-size:120%;
    }

#email {font-size:90%;

}

#email a{
	font-family: serif;
	font-size:101%;
	color:#fff;
	font-weight:normal;
	text-decoration:underline;
	padding:0px 40px;
}

#email a:hover{
	font-family:serif;
	font-size:101%;
	color:#fff;
	font-weight:normal;
	text-decoration:none;
	padding:0px 40px;
	
}

/* slideshow style */
#slideshow {
    position:relative;
    height:558px;
    width:858px;
}

#slideshow IMG {
    position:absolute;
    left: 50%;
    text-align: center;
    z-index:8;
    opacity:0.0;
    filter: alpha(opacity=0);
}

#slideshow IMG.active {
    z-index:10;
    opacity:1.0;
    filter: alpha(opacity=0);
}

#slideshow IMG.last-active {
    z-index:9;
}

.sc-box {
  overflow: hidden;
  position: relative;
}
.sc-text {
  text-align: center;
  font-size:250%;
  color:#fff;
  font-weight:bold;
  text-decoration:underline;
}
