/*
inspired by Jon Phillips
source: http://spyrestudios.com/how-to-create-a-sexy-vertical-sliding-panel-using-jquery-and-css3/
*/


h3 {
	font-size:14px;
	font-family:verdana, helvetica, arial, sans-serif;
	letter-spacing:-1px;
	color:#fff;
	font-weight: 700;
	text-transform:uppercase;
	margin:0;
	padding:8px 0 8px 0;
}


div.panel p {
	color:#cccccc;
	line-height:22px;
	padding: 0 0 10px;
	margin: 20px 0 20px 0;
}

.panel {
	position: fixed;
	top: 20px;
	left: -27px;
	display: block;
	background: #000000;
	border:1px solid #111111;
	-webkit-border-radius: 0px 20px 20px 0px;
	border-radius: 0px 20px 20px 0px;
	
	width: 330px;
	height: auto;
	padding: 30px 30px 30px 130px;
	
	filter: alpha(opacity=75);	
	opacity: .75;
	
	-moz-box-shadow: 0px 0px 3px 0px rgb(255,255,255), 0px 0px 5px 0px rgb(255,255,255) inset ;
	-webkit-box-shadow: 0px 0px 3px 0px rgb(255,255,255), 0px 0px 5px 0px rgb(255,255,255) inset ;
	-o-box-shadow: 0px 0px 3px 0px rgb(255,255,255), 0px 0px 5px 0px rgb(255,255,255) inset ;
	box-shadow: 0px 0px 3px 0px rgb(255,255,255), 0px 0px 5px 0px rgb(255,255,255) inset ;	
		
	-webkit-transition: left 0.7s ease-out, opacity 0.7s ease-out;
	-moz-transition: left 0.7s ease-out, opacity 0.7s ease-out;	
	-o-transition: left 0.7s ease-out, opacity 0.7s ease-out;
	transition: left 0.7s ease-out, opacity 0.7s ease-out;
	/*
	-webkit-transition: all 0.7s ease-out;
	-moz-transition: all 0.7s ease-out;	
	-o-transition: all 0.7s ease-out;
	transition: all 0.7s ease-out;
	*/
	
}
.panel:hover {
	left: -5px;
	filter: alpha(opacity=100);	
	opacity: 1;
}


.panel p{
	margin: 0 0 15px 0;
	padding: 0;
	color: #cccccc;
}

.panel a, .panel a:visited{
	margin: 0;
	padding: 0;
	color: #9FC54E;
	text-decoration: none;
	border-bottom: 1px solid #9FC54E;
}

.panel a:hover, .panel a:visited:hover{
	margin: 0;
	padding: 0;
	color: #ffffff;
	text-decoration: none;
	border-bottom: 1px solid #ffffff;
}

span.trigger{
	cursor:	pointer;
	position: fixed;
	display: block;
	text-decoration: none;
	top: 20px; left: -5px;
	font-size: 16px;
	letter-spacing:-1px;
	font-family: verdana, helvetica, arial, sans-serif;
	color:#fff;
	padding: 20px 40px 20px 15px;
	font-weight: 700;
	background:#333333 url(pics/plus.png) 85% 55% no-repeat;
	border:2px solid rgb(162,162,162);
	border-left: none;
	-webkit-border-radius: 0px 20px 20px 0px;
	border-radius: 0px 20px 20px 0px;
	
	text-shadow: 1px 1px 1px black;/*white rgb(255,255,255)*/
	filter: dropshadow(color=black, offx=1, offy=1);
	
	-moz-box-shadow: 0px 0px 3px 1px grey, 0px 0px 3px 0px grey inset ;
	-webkit-box-shadow: 0px 0px 3px 1px grey, 0px 0px 3px 0px grey inset;
	-o-box-shadow: 0px 0px 3px 1px grey, 0px 0px 3px 0px grey inset;
	box-shadow: 0px 0px 3px 1px grey, 0px 0px 3px 0px grey inset;
	
	-webkit-transition: all 0.7s ease-out;
	-moz-transition: all 0.7s ease-out;	
	-o-transition: all 0.7s ease-out;
	transition: all 0.7s ease-out;
	
}

span.trigger:hover{
	position: fixed;
	display: block;
	text-decoration: none;
	top: 20px; left: -5px;
	font-size: 16px;
	letter-spacing:-1px;
	font-family: verdana, helvetica, arial, sans-serif;
	color:#fff;
	padding: 20px 40px 20px 20px;
	font-weight: 700;
	background:#222222 url(pics/plus.png) 85% 55% no-repeat;
	border:	2px solid rgb(209,209,209);
	border-left: none;
	-webkit-border-radius: 0px 20px 20px 0px;
	border-radius: 0px 20px 20px 0px;
	
	text-shadow: 1px 1px 1px grey;/*white rgb(255,255,255)*/
	filter: dropshadow(color=grey, offx=1, offy=1);

	
	-moz-box-shadow: 0px 0px 3px 1px silver, 0px 0px 3px 0px silver inset ;
	-webkit-box-shadow: 0px 0px 3px 1px silver, 0px 0px 3px 0px silver inset;
	-o-box-shadow: 0px 0px 3px 1px silver, 0px 0px 3px 0px silver inset;
	box-shadow: 0px 0px 3px 1px silver, 0px 0px 3px 0px silver inset;
	
	
	-webkit-transition: all 0.7s ease-out;
	-moz-transition: all 0.7s ease-out;	
	-o-transition: all 0.7s ease-out;
	transition: all 0.7s ease-out;
}

span.active.trigger {
	background:#222222 url(pics/minus.png) 85% 55% no-repeat;
}

.columns{
	clear: both;
	width: 330px;
	padding: 0 0 20px 0;
	line-height: 22px;
}

.colleft{
	float: left;
	width: 130px;
	line-height: 22px;
}

.colright{
	float: right;
	width: 130px;
	line-height: 22px;
}

ul{
	padding: 0;
	margin: 0;
	list-style-type: none;
}

ul li{
	padding: 0;
	margin: 0;
	list-style-type: none;
}

hr{
	background-color: #333333;
	height: 1px;
}