/*element*/
body 
	{
	background-color: #add8e6; 
	text-align: center;
	} 

#indexYear
	{
	margin: auto;
	height: auto;
	width: 60%;
	}
.listYear
	{
	list-style:none;
	border: 1px solid;
	padding: 3px;
	margin: auto;
	margin-right: -1px;
	width: auto;
	float: left;
	font-size: 10pt;
	}

	
	
	
/*social media icons*/
#containerSocialMedia
	{
	width: 200px;
	height: 45px;
	margin: auto;
	}

#socialmedia  {position:relative; left:300;margin:0;}
#socialmedia li {margin:0px;padding:0px;list-style:none;position:absolute;top:0px;}
#socialmedia li, #socialmedia a {width:40px;height:45px;display:block;}
	
#youtube, #tumblr, #twitter, #steam
	{
	
	}
#youtube{left:0px;background:url(./images/img_socialmediaicons.png) 0 0;}
#tumblr{left:50px;background:url(./images/img_socialmediaicons.png) -43px 0;}
#twitter{left:100px;background:url(./images/img_socialmediaicons.png) -86px 0;}
#steam{left:150px;background:url(./images/img_socialmediaicons.png) -129px 0;}	

.containerButtonLinks
	{
	width: 200px;
	height: 30px;
	border: 1px solid;
	position:absolute;
	right: 0;
	}
	
.buttonLinks  {position:relative;right:0;margin:0;}
.buttonLinks li  {margin:0px;padding:0px;list-style:none;position:absolute;top:0px;}
.buttonLinks li, .buttonLinks a  {width:50px;height:30px;display:block;}

.midi {left: 0;background: url(./images/links/sprite_button_links.png) 0 0;}
.midi:hover {left: 0;background: url(./images/links/sprite_button_links.png) 0 -30px;}
.mus {left:50px;background: url(./images/links/sprite_button_links.png) -50px 0;}
.mus:hover {left:50;background: url(./images/links/sprite_button_links.png) -50px -30px;}
.pdf {left:100px;background: url(./images/links/sprite_button_links.png) -100px 0;}
.pdf:hover {left:100;background: url(./images/links/sprite_button_links.png) -100px -30px;}
.zip {left:150px;background: url(./images/links/sprite_button_links.png) -150px 0;}
.zip:hover {left:150;background: url(./images/links/sprite_button_links.png) -150px -30px;}
.containerSong:hover{background:#B8E6E6;font-weight:bold;}

.newupdate  {position:relative;;left:0;margin:0;}
.newupdate li  {margin:0;padding:0px;list-style:none;position:absolute;top:1px;}
.newupdate li, .newupdate a {width:70px;height:30px;display:block;}

.updated {left: 0;background: url(./images/newupdated.png) 0 0;}
/*.updated:hover {left: 0;background: url(./images/newupdated.png) 0 -30px;}*/
.new  {left: 0;background: url(./images/newupdated.png) -70px 0;}
/*.new:hover {left: 0;background: url(./images/newupdated.png) -70px -30px;}*/

/*

.new {left:0;background: url{.images/new.png} 0 0;}
.updated {left:0;background: url{.images/updated.png} 0 0;}

*/
/*class*/

/*Cool Folk*/
#coolfolkContainer
	{
	width: 800px;
	margin: 0 auto;
	}
.coolfolkYoutube, .coolfolk
	{
	margin-top: -1px;
	text-align: center;
	height: 40px;
	border: 1px solid;
	padding: 10px;
	font-size: 12pt;
	background-color: #CCFFFF;
	}
.coolfolkYoutube
	{
	float: left;
	border:1px solid;
	width: 150px;
	}
.coolfolk
	{

	}

/*id*/
#notice
	{
	margin: auto;
	width: 60%;
	font-size: 18pt;
	color: red;
	padding: 10px;
	}
	
/*Menus*/

/*Sidebar*/
.navcontainerSidebar
	{
	position: fixed;
	top: 20px;
	bottom: 0px;
	left: 30px;
	width: 300px;
	height: 500px;
	}
.sidebar, .sidebarTitle, .sidebarPage
	{
	margin: -1px auto;
	padding: 3px 10px;
	border: 1px solid; 
	height: 18px;
	display: block;
	text-decoration: none;
	line-height: 20px;
	vertical-align: middle;
	}

.sidebarTop {border-top-left-radius: 15px;border-top-right-radius: 15px;}
.sidebarBottom {border-bottom-left-radius: 15px;border-bottom-right-radius: 15px;}

.sidebarTitle
	{
	background-color: #6CA6BA;
	font-weight: bold;
	font-size: 14pt;
	line-height: 20px;
	vertical-align: middle;
	}
.sidebar
	{
	background-color: #85CEE6;
	font-size: 11pt;
	text-align: left;
	}
a.sidebar:hover,
a.sidebarPage:hover,
div.sidebar:hover
	{
	background-color: #33CCFF;
	text-indent: 5px;
	}
div.sidebarPage
	{
	font-weight: bold; 
	text-align: left;
	text-indent: 10px;
	}
a.sidebar:link {text-decoration: none; color: black;}
a.sidebar:visited{text-decoration: none; color: black;}
a.sidebar:hover{text-decoration: none; font-weight:bold; color: black;}
a.sidebar:active{text-decoration: none; color: black;}

/*Recommended Software*/

#softwareRecommendation
	{
	margin: -1px auto; 
	display: block;
	width: 700px;
	}
.button, .software
	{
	margin-bottom: -1px;
	border: 1px solid;
	height: 30px;
	background-color: #CCFFFF;
	}
.button
	{
	float: left;
	width: 50px;
	}
.software
	{
	text-align: left;
	padding-left: 80px;
	font-size: 10pt;
	line-height: 30px;
	vertical-align: middle;
	}

/*Sheet Music*/

.buttonLink
	{
	
	}
.containerMain
	{
	position: absolute;
	right: 70px;
	float: right;
	width: 800px;
	}
.containerConsole
	{
	margin-left: auto;
	margin-right: auto;
	width: 800px;
	}
.gameTitle
	{
	margin-bottom: -1px;
	border: 1px solid;
	padding: 1px;
	background-color: #FF8533;
	font-size: 15pt;
	font-weight: bold;
	height: 30px;
	line-height: 30px;
	vertical-align: middle;
	}
.description
	{
	margin-bottom: -1px;
	border: 1px solid;
	height: auto;
	max-height:60px;
	background-color: #CCFFFF;
	font-size: 10pt;
	padding: 5px;
	}
.containerSong
	{
	margin-bottom: -1px;
	position: relative;
	display: block;
	text-align: center;
	height: 31px;
	width: 100%;
	background-color: #CCFFFF;
	}
.songTitle
	{
	margin-bottom: -1px;
	border: 1px solid;
	position: absolute;
	left: 0;
	width: 597px; 
	vertical-align: middle;
	text-align: center;
	line-height: 30px;
	font-size: 10pt;	
	}
.titlePart, .linksPart
	{
	background-color: #E6FFFF;
	}
.titlePart
	{
	position: relative;
	left: 5px;
	top: 0;
	float: left;
	}
.linksPart
	{
	
	}
.part
	{
	margin-top:1px;			
	background-color: #E6FFFF;
	}
.consoleTitle
	{
	padding: 20px;
	font-size: 18pt;
	font-weight: bold;
	}
span.showHide, .aka
	{
	font-size: 7pt;
	position: absolute;
	right: -20pt; /* the div's width */
    top: 0;
    width: 30%;
	line-height: 30px;
	vertical-align: middle;
	display: inline;
	}
.seealso
	{
	font-size: 7pt;
    top: 0;
    width: 30%;
	line-height: 30px;
	vertical-align: middle;
	display: inline;
	}