/**
 * Based on:
 * 	CSS3 Only Horizontal and Vertical Accordion
 * 	Author: Paul Underwood for Hongkiat.com
 *  Website: www.paulund.co.uk
 *  Date: 27/11/11
 *  Version: 1.0
 */

 
html,body {
	height:100%;
}

body {
	margin: 0;
	background-color: black;
	font-family: sans-serif;
}

h1 {
	font-weight: normal;
}

a {
	color: white;
}


/*Define Accordion box*/
.accordion {
	overflow: hidden;
	color: white;
	height: 100%;
	background-color: black;
	background-image: url('../img/logo.jpg');
	background-position: center;
	background-repeat: no-repeat;
}

section {
	display: block;
	background-color: black;
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
}


section td {
	margin: 10px;
	padding: 10px;
	vertical-align: top;
}

section table:hover {
	background-color:#111;
}

section div img {
	margin-top: 10px;
	margin-right: 10px;
}


/*Set style of open slide*/
.accordion section:target {
	background-color: black;
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	opacity: 1;
}
.accordion section:target:hover {
	background-color: black;
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	opacity: 1;
}
.accordion section:target h4 {
	display:none;
}
.accordion section:target content {
	display: block;
	padding: 10px;
	overflow-y: auto;
	height: 100%;
}
.accordion section:target iframe {
	display: block;
	position: fixed;
	bottom: 0px;
	opacity: 0.5;
	width: 75%;
}
.accordion section:target iframe:hover {
	opacity: 1;
}


.accordion section h4 a {
	padding:8px 10px;
	display:block;
	font-size:16px;
	font-weight:normal;
	color: white;
	text-decoration:none;
}



/*set style of closed slide*/
.accordion section {
	float:left;
	overflow:hidden;
	color:#AAA;
	cursor:pointer;
	background-color: black;
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	opacity: 0.5;
}
.accordion section:hover {
	background-color: black;
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	opacity: 0.8;
}
.accordion section content {
	display:none;
}

.accordion section iframe {
	display: none;
}

.horizontal section {
	width:5%;
	height:100%;
	-moz-transition:width 0.2s ease-out; 
	-webkit-transition:width 0.2s ease-out;
  	-o-transition:width 0.2s ease-out;
	-ms-transition:width 0.2s ease-out;
  	transition:width 0.2s ease-out;
}

/*Header of closed slide*/
.horizontal section h4 {
	width:240px;
	position:relative;
	left:-100px;
	top:85px;
	-webkit-transform:rotate(90deg);
	-moz-transform:rotate(90deg);
	-o-transform: rotate(90deg);
	-ms-transform: rotate(90deg);
	transform: rotate(90deg);
} 

/*On mouse over open slide*/
.horizontal :target {
	width:75%;
	height:100%;
}
.horizontal :target h4 {
	top:0px;
	left:0;
	-webkit-transform:rotate(0deg);
	-moz-transform:rotate(0deg);
	-o-transform: rotate(0deg);
	-ms-transform: rotate(0deg);
	transform: rotate(0deg); 
}



/* scroll bars */


::-webkit-scrollbar {
width: 10px;
height: 10px;
}

::-webkit-scrollbar-track {
      background-color: black;
}
::-webkit-scrollbar-thumb {
      background-color: #111;
} 
::-webkit-scrollbar-button {
      background-color: #111;
} 
::-webkit-scrollbar-corner {
      background-color: black;
} 


HTML,BODY
{
  scrollbar-face-color:#111;
  scrollbar-arrow-color:#111;
  scrollbar-track-color:black;
  scrollbar-shadow-color:black;
  scrollbar-highlight-color:black;
  scrollbar-3dlight-color:black;
  scrollbar-darkshadow-Color:black;
}