/*
Item Name : CSS3 Side Menu
Author URI : http://codecanyon.net/user/Pixelworkshop/
Version : 1.0
*/

/*

TABLE OF CONTENTS

00. Page Styling (Removable)
01. Side Menu Bar
02. Side Menu Panels
03. Side Menu Columns
04. Side Menu Typography
05. Side Menu Gallery
06. Side Menu Form Elements
07. Light Color Scheme
08. Dark Color Scheme

*/



/* 00. Page Styling (Removable) 


body{font-family:Arial,Helvetica,sans-serif;background:url(../img/page_bg.gif) repeat}
.dummy_content p{font-size:12px;line-height:21px;margin-bottom:18px}
.dummy_content{width:780px;margin:50px auto}
.dummy_content p,.dummy_content li{color:#666;font-size:12px;line-height:18px}
.dummy_content .pusher{width:100%;height:50px}
.dummy_content a{color:#999;text-decoration:none}
.dummy_content h1,.dummy_content h3{color:#222}
.dummy_content h1{margin-bottom:28px;}
.dummy_content ul{margin:0 0 0 15px;padding:0;}

*/

/* 01. Side Menu Bar */



#sidemenu_wrapper .sidemenu_left {
	left:0;
    -webkit-border-radius: 0px 3px 3px 0px;
	-moz-border-radius: 0px 3px 3px 0px;
    border-radius: 0px 3px 3px 0px;
	
}
#sidemenu_wrapper .sidemenu_right {
	right:0;
    -webkit-border-radius: 3px 0px 0px 3px;
	-moz-border-radius: 3px 0px 0px 3px;
    border-radius: 3px 0px 0px 3px;

}
#sidemenu {
	width:10px;
	height:500px;
	position:fixed;
	padding:0;
	margin:0;
	top:150px;
	z-index:9999;
	list-style:none;
	font-family:Arial, Helvetica, sans-serif;
	font-size:11px;
	background-color: rgba(1, 0, 0, 0.6);
}
	#sidemenu > li {
		width:22px;
		height:490px;
		padding:6px;
		position:relative;
	}
	#sidemenu .bottom_panel,
	#sidemenu .top_panel {
		position: static !important;
	}
		#sidemenu li:hover {
			cursor:pointer;
		}
	#sidemenu li span {
		width:32px;
		height:0px;
		display:block;
	}		
	#sidemenu_wrapper .sidemenu_left li span {
		padding-right:9px;
		background-position:left top;
	}		
	#sidemenu_wrapper .sidemenu_right li span {
		margin-left:-18px;
		padding-left:9px;
		background-position:right top;
	}		
	#sidemenu li span {
		-webkit-transition:background-position 0.2s;
		-moz-transition:background-position 0.2s;
		-o-transition:background-position 0.2s;
		-ms-transition:background-position 0.2s;
		transition:background-position 0.2s;
		background-repeat:no-repeat;
	}
	#sidemenu_wrapper .sidemenu_left li:hover span {
		background-position:left bottom;
	}		
	#sidemenu_wrapper .sidemenu_right li:hover span {
		background-position:right bottom;
	}		
	#sidemenu li:hover span {
	}
	#sidemenu li #sidemenu_home {
		background-image:url("../img/icons/sidemenu_home.png");
	}
	#sidemenu li #sidemenu_search {
		background-image:url("../img/icons/sidemenu_search.png");
	}
	#sidemenu li #sidemenu_mail {
		background-image:url("../img/icons/sidemenu_mail.png");
	}
	#sidemenu li #sidemenu_bookmarks {
		background-image:url("../img/icons/sidemenu_bookmarks.png");
	}
	#sidemenu li #sidemenu_help {
		background-image:url("../img/icons/sidemenu_help.png");
	}
	#sidemenu li #sidemenu_kate {
		background-image:url("../img/icons/sidemenu_kate.png");
	}
	
	
	#sidemenu li #sidemenu_videos {
			background-color: rgba(1, 1, 0, 0.6);
	}


#outer {height: 400px; overflow: hidden; position: relative;}
#outer[id] {display: table; position: static;}

#middle {position: absolute; top: 50%;} /* for quirk explorer only*/
#middle[id] {display: table-cell; vertical-align: middle; width: 100%; position: static;}

#inner {position: relative; top: -50%} /* for quirk explorer only */
/* optional: #inner[id] {position: static;} */
	
	
	
/* 02. Side Menu Panels */



#sidemenu li .sidemenu_container {
	position:absolute;
	margin:0;
	top:-3px;
	left:-9999em;
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
	filter: alpha(opacity=0.5);
	opacity: 0.5;
	-webkit-transition: opacity 0.5s;
	-moz-transition: opacity 0.5s;
	-o-transition: opacity 0.5s;
	-ms-transition: opacity 0.5s;
	transition: opacity 0.5s;
	
}
#sidemenu_wrapper .sidemenu_left li .sidemenu_container {
	padding-left: 14px;
}
#sidemenu_wrapper .sidemenu_right li .sidemenu_container {
	padding-right: 14px;
}
#sidemenu .bottom_panel .sidemenu_container {
	bottom:-3px;
	top:auto;
}
#sidemenu_wrapper #sidemenu li:hover .sidemenu_container {
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
	filter: alpha(opacity=100);
	opacity: 1;
}
	#sidemenu_wrapper .sidemenu_left li:hover .sidemenu_container {
		left: 30px;
	}
	#sidemenu_wrapper .sidemenu_right li:hover .sidemenu_container {
		left: auto;
		right:30px;
	}



/* 03. Side Menu Columns */



#sidemenu .sidemenu_container .sidemenu_1col,
#sidemenu .sidemenu_container .sidemenu_2col,
#sidemenu .sidemenu_container .sidemenu_3col,
#sidemenu .sidemenu_container .sidemenu_4col {
	padding:10px 10px 0px 5px;
	position:relative;
	float:left;
    -webkit-border-radius: 3px;
	-moz-border-radius: 3px;
    border-radius: 3px;
}
#sidemenu .sidemenu_container .sidemenu_1col {width: 155px;}
#sidemenu .sidemenu_container .sidemenu_2col {width: 440px;}
#sidemenu .sidemenu_container .sidemenu_3col {width: 465px;}
#sidemenu .sidemenu_container .sidemenu_4col {width: 520px;}

#sidemenu .col_1,
#sidemenu .col_2,
#sidemenu .col_3,
#sidemenu .col_4 {
	display:inline;
	float: left;
	position: relative;
	margin-left: 5px;
	margin-right: 5px;
}
#sidemenu .col_1 {width:145px;}
#sidemenu .col_2 {width:430px;}
#sidemenu .col_3 {width:455px;}
#sidemenu .col_4 {width:510px;}



/* 04. Side Menu Typography */



#sidemenu p,
#sidemenu h5,
#sidemenu h6 {
	margin:0 0 10px 0;
}
#sidemenu p {
	font-size:11px;
	line-height:16px;
}
#sidemenu h5 {
	font-size:16px;
	line-height:21px;
	margin:0 0 16px 0;
}
#sidemenu h6 {
	font-size:16px;
	line-height:20px;
}

#sidemenu .sidemenu_list {
	margin:0;
	padding:0 0 6px 0;
	list-style:none;
	
}
	#sidemenu .sidemenu_list li {
		line-height:18px;
		border:none;
		padding:6px 6px 6px 24px;
		-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";
		filter: alpha(opacity=80);
		opacity: 0.8;
		-webkit-transition: opacity 0.5s;
		-moz-transition: opacity 0.5s;
		-o-transition: opacity 0.5s;
		-ms-transition: opacity 0.5s;
		transition: opacity 0.5s;
		
	}
	#sidemenu .sidemenu_list li:hover {
		-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
		filter: alpha(opacity=100);
		opacity: 1;
	}



/* 05. Side Menu Gallery */



#sidemenu .sidemenu_gallery {
	margin:0 0 0 5px;
	padding:0 0 10px 0;
	float:left;
	height:480px;
	list-style:none;
	overflow-y:scroll;
	
}
	#sidemenu .sidemenu_gallery li {
		width:auto;
		height:auto;
		float:left;
		border:none;
		margin:6px 10px 6px 6px;
	}
		#sidemenu .sidemenu_gallery .last_item {
			margin-right:0;
		}
	#sidemenu .sidemenu_gallery .sidemenu_thumbnail {
		opacity: 0.6;
		-webkit-transition: opacity 0.5s;
		-moz-transition: opacity 0.5s;
		-o-transition: opacity 0.5s;
		-ms-transition: opacity 0.5s;
		transition: opacity 0.5s;
		-webkit-box-shadow: rgba(0, 0, 0, 0.1) 0px 0px 6px;
		-moz-box-shadow: rgba(0, 0, 0, 0.1) 0px 0px 6px;
		box-shadow: rgba(0, 0, 0, 0.1) 0px 0px 6px;
	}
		#sidemenu .sidemenu_gallery .sidemenu_thumbnail:hover {
			opacity: 1;
		}



/* 06. Side Menu Form Elements */


#sidemenu li #search_box {
	margin:0;
	padding:0 0 10px 0;
	width:275px;
}
	#sidemenu li #search_box input {
		font-size:11px;
		outline:none;
		padding:6px;
		width:290px;
		float:left;
		margin:3px 0px 12px 0px;
	}

#sidemenu #contact_form {
	font-size:11px;
	width:300px;
	margin-left:10px;
}
	#sidemenu #contact_form input, 
	#sidemenu #contact_form textarea {
		padding: 6px;
		outline: 0;
		font-size:11px;
		width: 215px;
		margin-bottom:8px;
		-webkit-border-radius:3px;
		-moz-border-radius:3px;
		border-radius:3px;
	}
	#sidemenu #contact_form textarea {
		font-family:Arial, Helvetica, sans-serif;
		height: 100px;
		line-height: 150%;
	}

#sidemenu #contact_form label {
	width:60px;
	float:left;
	line-height:30px;
}
#sidemenu #contact_form #send,
#sidemenu #contact_form #reset {
	margin-top:9px;
    cursor:pointer;
    width:110px;
	float:right;
	margin-right:10px;
	color:#232323;
}



/* 07. Light Color Scheme */



.sidemenu_light,
.sidemenu_light .sidemenu_container .sidemenu_1col,
.sidemenu_light .sidemenu_container .sidemenu_2col,
.sidemenu_light .sidemenu_container .sidemenu_3col,
.sidemenu_light .sidemenu_container .sidemenu_4col {
	color:#232323;
	background-color:#f7f6f2;
	border:3px solid #EBEAE6;
	-webkit-box-shadow: 0px 0px 2px #CCCCCC, inset 0px 0px 1px #FFFFFF;
	-moz-box-shadow: 0px 0px 2px #CCCCCC, inset 0px 0px 1px #FFFFFF;
	box-shadow: 0px 0px 2px #CCCCCC, inset 0px 0px 1px #FFFFFF;	
}
#sidemenu_wrapper .sidemenu_left {
	border-left:none;
}		
#sidemenu_wrapper .sidemenu_right {
	border-right:none;
}		
	.sidemenu_light li {
		border-bottom:1px solid #DDDDDD;
		border-top:1px solid #FFFFFF;
		*border-top:none;
	}
		.sidemenu_light .sidemenu_first {
			border-top:none;
		}
		.sidemenu_light .sidemenu_last {
			border-bottom:none;
		}
.sidemenu_light p,
.sidemenu_light h5,
.sidemenu_light {
	text-shadow:1px 1px #ffffff;
}
	.sidemenu_light .sidemenu_gallery .sidemenu_thumbnail {
		border: 3px solid #ffffff;
	}
.sidemenu_light li .icon_contact {background:url("../img/icons/email.png") no-repeat 0 9px;}
.sidemenu_light li .icon_camera {background:url("../img/icons/camera.png") no-repeat 0 8px;}
.sidemenu_light li .icon_settings {background:url("../img/icons/settings.png") no-repeat 0 7px;}
.sidemenu_light li .icon_photos {background:url("../img/icons/photos.png") no-repeat 0 7px;}
.sidemenu_light li .icon_cloud {background:url("../img/icons/cloud.png") no-repeat 0 9px;}
.sidemenu_light li .icon_dropbox {background:url("../img/icons/dropbox.png") no-repeat 0 7px;}
.sidemenu_light li .icon_lock {background:url("../img/icons/lock.png") no-repeat 0 8px;}
.sidemenu_light li .icon_layers {background:url("../img/icons/layers.png") no-repeat 0 7px;}
.sidemenu_light li .icon_stats {background:url("../img/icons/stats.png") no-repeat 0 8px;}
.sidemenu_light li .icon_speech {background:url("../img/icons/speech.png") no-repeat 0 10px;}
.sidemenu_light li .icon_info {background:url("../img/icons/info.png") no-repeat 0 7px;}
.sidemenu_light li .icon_appreciate {background:url("../img/icons/appreciate.png") no-repeat 0 9px;}
.sidemenu_light li .icon_tag {background:url("../img/icons/tag.png") no-repeat 0 9px;}
.sidemenu_light li .icon_calendar {background:url("../img/icons/calendar.png") no-repeat 0 7px;}
.sidemenu_light li .icon_movies {background:url("../img/icons/movies.png") no-repeat 0 9px;}
.sidemenu_light li .icon_briefcase {background:url("../img/icons/briefcase.png") no-repeat 0 7px;}
.sidemenu_light li .icon_clock {background:url("../img/icons/clock.png") no-repeat 0 7px;}
.sidemenu_light li .icon_cart {background:url("../img/icons/cart.png") no-repeat 0 7px;}

.sidemenu_light input,
.sidemenu_light textarea {
	color:#BBBBBB;
	border: solid 1px #E5E5E5;
	background: #f9f9f9;
	-webkit-box-shadow: rgba(0,0,0, 0.1) 0px 0px 4px;
	-moz-box-shadow: rgba(0,0,0, 0.1) 0px 0px 4px;
	box-shadow: rgba(0,0,0, 0.1) 0px 0px 4px;
}
.sidemenu_light input:hover, 
.sidemenu_light textarea:hover {
	border-color: #C9C9C9;
	-webkit-box-shadow: rgba(0, 0, 0, 0.15) 0px 0px 8px;
	-moz-box-shadow: rgba(0, 0, 0, 0.15) 0px 0px 8px;
	box-shadow: rgba(0, 0, 0, 0.15) 0px 0px 8px;
}
	.sidemenu_light input:focus, 
	.sidemenu_light textarea:focus {
		background: #ffffff;
	}



/* 08. Dark Color Scheme */



.sidemenu_dark,
.sidemenu_dark .sidemenu_container .sidemenu_1col,
.sidemenu_dark .sidemenu_container .sidemenu_2col,
.sidemenu_dark .sidemenu_container .sidemenu_3col,
.sidemenu_dark .sidemenu_container .sidemenu_4col {
	color:#ECECEC;
	background-color:#161616;
	border:3px solid #121212;
	-webkit-box-shadow: 0px 0px 2px #222222, inset 0px 0px 1px #383838;
	-moz-box-shadow: 0px 0px 2px #222222, inset 0px 0px 1px #383838;
	box-shadow: 0px 0px 2px #222222, inset 0px 0px 1px #383838;	
}
#sidemenu_wrapper .sidemenu_left {
	border-left:none;
}		
#sidemenu_wrapper .sidemenu_right {
	border-right:none;
}		
	.sidemenu_dark li {
		border-bottom:1px solid #0A0A0A;
		border-top:1px solid #232323;
		*border-top:none;
	}
		.sidemenu_dark .sidemenu_first {
			border-top:none;
		}
		.sidemenu_dark .sidemenu_last {
			border-bottom:none;
		}
.sidemenu_dark p,
.sidemenu_dark h5,
.sidemenu_dark {
	text-shadow:1px 1px #000000;
}
	.sidemenu_dark .sidemenu_gallery .sidemenu_thumbnail {
		border: 3px solid #ffffff;
	}
.sidemenu_dark li .icon_contact {background:url("../img/icons/email_dark.png") no-repeat 0 9px;}
.sidemenu_dark li .icon_camera {background:url("../img/icons/camera_dark.png") no-repeat 0 8px;}
.sidemenu_dark li .icon_settings {background:url("../img/icons/settings_dark.png") no-repeat 0 7px;}
.sidemenu_dark li .icon_photos {background:url("../img/icons/photos_dark.png") no-repeat 0 7px;}
.sidemenu_dark li .icon_cloud {background:url("../img/icons/cloud_dark.png") no-repeat 0 9px;}
.sidemenu_dark li .icon_dropbox {background:url("../img/icons/dropbox_dark.png") no-repeat 0 7px;}
.sidemenu_dark li .icon_lock {background:url("../img/icons/lock_dark.png") no-repeat 0 8px;}
.sidemenu_dark li .icon_layers {background:url("../img/icons/layers_dark.png") no-repeat 0 7px;}
.sidemenu_dark li .icon_stats {background:url("../img/icons/stats_dark.png") no-repeat 0 8px;}
.sidemenu_dark li .icon_speech {background:url("../img/icons/speech_dark.png") no-repeat 0 10px;}
.sidemenu_dark li .icon_info {background:url("../img/icons/info_dark.png") no-repeat 0 7px;}
.sidemenu_dark li .icon_appreciate {background:url("../img/icons/appreciate_dark.png") no-repeat 0 9px;}
.sidemenu_dark li .icon_tag {background:url("../img/icons/tag_dark.png") no-repeat 0 9px;}
.sidemenu_dark li .icon_calendar {background:url("../img/icons/calendar_dark.png") no-repeat 0 7px;}
.sidemenu_dark li .icon_movies {background:url("../img/icons/movies_dark.png") no-repeat 0 9px;}
.sidemenu_dark li .icon_briefcase {background:url("../img/icons/briefcase_dark.png") no-repeat 0 7px;}
.sidemenu_dark li .icon_clock {background:url("../img/icons/clock_dark.png") no-repeat 0 7px;}
.sidemenu_dark li .icon_cart {background:url("../img/icons/cart_dark.png") no-repeat 0 7px;}

.sidemenu_dark input,
.sidemenu_dark textarea {
	background-color:#E8E8E8;
	border:1px solid #000000;
	-webkit-box-shadow: 0 1px 1px #000000;
	-moz-box-shadow: 0 1px 1px #000000;
	-o-box-shadow: 0 1px 1px #000000;
	box-shadow: 0 1px 1px #000000;
}
.sidemenu_dark input:hover, 
.sidemenu_dark textarea:hover {
	background-color:#F4F4F4;
	-webkit-box-shadow: 0 2px 2px #000000;
	-moz-box-shadow: 0 2px 2px #000000;
	-o-box-shadow: 0 2px 2px #000000;
	box-shadow: 0 2px 2px #000000;
}
		.sidemenu_dark input:focus, 
		.sidemenu_dark textarea:focus {
			background-color:#ffffff;
		}