html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,font,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td {
	margin:0;
	padding:0;
	border:0;
	outline:0;
	font-size:100%;
	vertical-align:baseline;
	background:transparent
}
ol,ul {
	list-style:none
}
blockquote,q {
	quotes:none
}
blockquote:before,blockquote:after,q:before,q:after {
	content:'';
	content:none
}
:focus {
	outline:0
}
ins {
	text-decoration:none
}
del {
	text-decoration:line-through
}
table {
	border-collapse:collapse;
	border-spacing:0
}
button,.button {
	font:0.7100em 'Open Sans','Lucida Sans Unicode',Calibri,AppleGothic,sans-serif;
}
h1 {
	font-size:25px
}
h2 {
	font-size:22px
}
h3 {
	font-size:15px
}
h4 {
	font-size:13px
}
h5 {
	font-size:13px
}
h6 {
	font-size:12px
}
h1,h2,h3,h4,h5,h6 {
	margin-bottom:5px;
	line-height:22px;
	font-weight:normal;
}
.center {
	text-align:center
}
.visible {
	display:block;
}
.hidden {
	display:none;
	visibility:hidden
}
.invisible {
	visibility:hidden
}
.alignright {
	float:right
}
.alignleft {
	float:left
}
.aligncenter {
	margin-left:auto;
	margin-right:auto
}
.clearboth {
	clear:both;
	display:block;
	font-size:0;
	height:0;
	line-height:0;
	width:100%;
	overflow:hidden
}
body {
	font-style:normal;
	font-weight:400;
	text-shadow:none;
	text-decoration:none;
	text-transform:none;
	letter-spacing:0em;
	word-spacing:0em;
	line-height:20px;
	font:0.7100em 'Open Sans','Lucida Sans Unicode',Calibri,AppleGothic,sans-serif;
	line-height:20px;
	

}
p {
	margin-bottom:15px;
}
a {
	text-decoration:none;
}

.cufon-loading h1 {
	visibility:hidden !important;
}
/*------------------------------ -FORMS-------------------------------*/ 
.form-item {
	margin:0 0 10px;
}
.form-item label {
	cursor:pointer;
}
fieldset {
	padding:1em;
	border:1px solid #ccc;
}
legend {
	padding:0 .8em;
	font-weight:bold;
	font-size: 1.2em;
}
textarea,input[type=text],input[type=password],input[type=email],select {
	resize:vertical;
	font-size:inherit;
	padding:7px;
	font-size:12px;
	font-family:'Lucida Sans Unicode',Calibri,AppleGothic,"MgOpen Modata",sans-serif;
}

input,select {
	cursor:pointer;
}
input[type=text],input[type=password],input[type=email] {
	cursor:text;
}
textarea {
	overflow:auto;
}
textarea,input {
	outline:none;
}
select {
	padding:2px;
}
option {
	padding:0 4px;
}
input[type=button],button {
	padding:4px;
	cursor:pointer;
	vertical-align:middle;
}

input:invalid, textarea:invalid{

-moz-box-shadow: none;

}

input.invalid, textarea.invalid{

background-color:#ef5151 !important;

}


/*------------------------------ -BUTTONS-------------------------------*/ .button {
	border:none;
	font-size:12px;
	text-decoration:none;
	vertical-align:middle;
	padding:6px 14px;
}

/* Dividers */
.divider_line {
	position:relative;
	clear:both;
	display:block;
	padding-top:10px;
	margin-bottom:30px;
}
.divider_padding {
	position:relative;
	clear:both;
	display:block;
	padding-top:30px;
}
.divider_dashed {
	position:relative;
	clear:both;
	display:block;
	padding-top:10px;
	margin-bottom:30px;
}
/* Lists */
ul.list1,ul.list2,ul.list3,ul.list4 {
	list-style-type:none;
	margin-left:5px;
}
ul.list1 li,ul.list2 li,ul.list3 li,ul.list4 li {

	padding-left:28px;
	margin:3px 0;
}

/* Highlight */
.highlight {
	color:#ffffff;
	padding:0 2px;
	background:#000000;
}
.highlight.black {
	background:#000000;
}
.highlight.red {
	background:#f32c27;
}
.highlight.gray {
	background:#999999;
}
.highlight.yellow {
	background:#ffde42;
}
.highlight.blue {
	background:#31b2ed;
}
.highlight.pink {
	background:#f930c3;
}
.highlight.green {
	background:#55dd2c;
}
.highlight.orange {
	background:#f09523;
}
.highlight.magenta {
	background: #9a2bf1;
}
/* Blockquotes */
blockquote {
	line-height:24px;
	padding:20px 20px 10px 45px;
	font-family:'Georgia',serif;
	font-size:16px;
	font-weight:400;
	font-style:italic;
}
blockquote p {
	margin-bottom:8px
}
blockquote.alignleft {
	margin:10px 20px 0 0;
	width:220px;
}
blockquote.alignright {
	margin:10px 0 0 20px;
	width:220px;
}
blockquote cite {
	font-size:12px;
}

#caption_container{
	position:fixed;
	right:100px;
	bottom:160px;
	width:500px;
	text-align:right;


}

#slidecaption {

	
	color:white;
	line-height:0px;
	opacity:0;
	font-size:55px;
	float:right;
	margin:0;
	
	display:none;
	

	padding:10px;
	//border:1px solid rgba(255,255,255,0.3);


	
//background-color:rgba(0,0,0,0.4);


}



#header {
	position:fixed;
	left:0px;
	top:0px;
	height:100%;
	width:169px;
	z-index:5;
	margin:0;
	overflow:visible;
}
#header.closed {
	left:-200px;
	display:none;
}
#header #logo {
	position:absolute;
}
#header #social_icons {
	position:absolute;
	bottom:50px;
	width:100%;
	text-align:center;
}
#header #social_icons li {
	display:inline-block;
	margin:0px 3px;
}
#header #searchform {
	position:absolute;
	left:13px;
	bottom:15px;
	width:120px;
}
#header #searchform input {
	padding:6px 10px;
	width:120px;
	text-align:right;
}
#close_btn_header {
	position:absolute;
	top:0px;
	width:50px;
	height:100%;
	right:-55px;
	cursor:pointer;
	z-index:5;
}
#main {
	width:755px;
	margin:0;
	display:block;
	position:absolute;
	left:172px;
	min-height:100%;
}
#main.closed {
	display:none;
	left:-800px;
}


#main_container{

overflow:hidden;
padding:0px 25px 20px;

}
#primary {
	float:left;
	width:439px;
	padding:0px;
	padding-right:20px;
}
#content_page {
	padding-top:20px;
}
#secondary {
	float:right;
	width:223px;
	padding:60px 0px 20px 20px;
	
	position:relative;
	
}

#sidebar_shadow{



position:absolute;
width:40px;
height:740px;
top:0px;
left:-41px;

background:transparent url(../images/sidebar_shadow.png) no-repeat right top;

}




#footer {
	clear:both;
	padding:50px 25px;
	//margin-top:20px;
	position:relative;
	

}




#main h1 {
	font-size:35px;
	margin-top:60px;
}
#metabox {
	margin-bottom:20px;
	padding:5px 0px;
	
	overflow:hidden;
	background-color:#363636;
	
	padding:5px;
}

#metabox .meta{

float:left;
margin-right:20px;
padding-left:18px;

}

#metabox .meta.date{

background:transparent url(../images/dark/date.png) no-repeat left center;

}

#metabox .meta.categories{

background:transparent url(../images/dark/tag.png) no-repeat left center;

}

#metabox .meta.comments{

background:transparent url(../images/dark/comments.png) no-repeat left center;

}


#about_the_author .author_content {
	padding:20px 0;
}
.author_info {
	overflow:hidden;
	padding-left:20px;
	position:relative;
	line-height:24px;
	font-family:'Georgia',serif;
	font-size:16px;
	font-weight:400;
	font-style:italic;
}
.author_name {
	font-size:13px;
}

#nav {
	margin-top:260px;
	text-align:right;
	margin-right:0px;
}
#nav li a {
	font-size:18px !important;
	margin-bottom:1px;
	height:30px;
	line-height:30px;
}
#nav>li>a {
	background:#3b3c3d;
	height:30px;
	line-height:30px;
	margin-bottom:0px;
	padding:1px 10px;
	position:relative;
	display:inline-block;
	border-right:none;
}

#nav li {
	position:relative;
}
#nav li ul {
	position:absolute;
	right:-250px;
	text-align:left;
	width:250px;
	top:0px;
	display:none;
	padding-left:5px;
}
#nav li ul li {
	display:block;
	overflow:hidden;
	position:relative;
}

#nav li ul li a {
	display:inline-block;
	padding:1px 10px;
	position:relative;
	right:200px;
	z-index:22;
	margin:0;
	border-left:none;
}

#entry_page {

overflow:hidden;
padding:0px 40px 0px 30px;
margin-left:172px;
position:relative;
top:0px;
left:0px;


	

}
#page_title {
	padding:15px 0 4px 0;
	font-size:34px;
	margin:10px 0px;
}
#page_description {
	position:relative;
	padding-bottom:15px;
	line-height:24px;
	font-family:'Georgia',serif;
	font-size:16px;
	font-weight:400;
	font-style:italic;
	width:600px;
}
#entry_list {
	margin-bottom:70px;
	clear:both;
}
#entry_list .entry_item {
	width:220px;
	margin:0 10px 10px 0;
	float:left;
	position:relative;
	opacity:0;
	line-height:0;
}
#entry_list .entry_item.gallery_item {
	margin:0 2px 2px 0;
}


.entry_item .entry_date {

	margin-top:10px;
	padding:1px 14px 1px 20px;
}
.entry_item .entry_comments {

	padding:1px 14px 1px 20px;

}
.entry_item .entry_categories {

	padding:1px 14px 1px 20px;
	margin-bottom:5px;

}

.entry_item .image_container {
	position:relative;
	top:20px;
	overflow:hidden;
	margin:0;
	display:block;
}
.entry_item .image_container img,.entry_item .image_container iframe {
	display:block;
}
.entry_item .grayscale_container {
	position:absolute;
	display:block;
	left:0px;
	top:0px;
	width:100%;
	height:100%;
	z-index:2;
	overflow:hidden;
}
.entry_item .entry_details {
	padding:14px 14px;
	overflow:hidden;
	line-height:18px;
	position:relative;

}
.entry_item .entry_details .entry_description {
	padding:4px 14px 8px 0px;
	margin:0;
}
.entry_item .entry_details .entry_description p {
	margin:0;
}
#pagination_container {
	position:fixed;
	bottom:0px;
	width:100%;
	height:45px;
	line-height:45px;
	padding-left:200px;
	overflow:auto;
	z-index:4;
}
#categories {
	overflow:hidden;
}
#categories {
	margin-bottom:10px;
}

#categories li:first-child {
	float:left;
	display:inline-block;
	padding:3px 14px;
	margin-right:10px;
}

#categories li {
	float:left;
}
#categories li a {
	display:inline-block;
	padding:3px 14px;
	cursor:pointer;
	
}


#close_btn {
	position:fixed;
	top:0px;
	left:929px;
	cursor:pointer;
	width:36px;
	height:100%;



}



#open_btn_header {
	position:fixed;
	top:0px;
	left:0px;
	cursor:pointer;
	width:50px;
	height:100%;
	z-index:4;
	overflow: auto;
}

#open_btn {

	position:fixed;
	top:0px;
	left:0px;
	cursor:pointer;
	width:50px;
	height:100%;
	z-index:4;
	overflow: auto;


}
/* Columns */
.one_half,.one_third,.two_third,.three_fourth,.one_fourth,.one_fifth,.two_fifth,.three_fifth,.four_fifth,.one_sixth,.five_sixth {
	position:relative;
	margin-right:4%;
	float:left;
}
.one_half {
	width:48%
}
.one_third {
	width:30.6666%
}
.two_third {
	width:65.3332%
}
.one_fourth {
	width:22%
}
.two_fourth {
	width:48%
}
.three_fourth {
	width:74%
}
.one_fifth {
	width:16.8%
}
.two_fifth {
	width:37.6%
}
.three_fifth {
	width:58.4%
}
.four_fifth {
	width:79.2%
}
.one_sixth {
	width:13.3333%
}
.two_sixth {
	width:30.6666%
}
.three_sixth {
	width:47.9998%
}
.four_sixth {
	width:65.3332%
}
.five_sixth {
	width:82.6665%
}
.last {
	margin-right:0!important;
	clear: right;
}
/* IMAGES */
.frame {

	padding:5px;
	text-align:center;
	display:block;
	position:relative;

}
.frame img {
	display:block;
}
.entry_item .shadow {
	height:7px;
	display:block;
}
.image_overlay {
	display:none;
	position:absolute;
	top:0px;
	left:0px;
	height:100%;
	width:100%;
	overflow:hidden;
	opacity:0;
	cursor:pointer;
}

a.no_link {
	cursor:default
}
#post_image {
	width:427px;
}
.media_container {
	line-height:0;
	margin-bottom:20px;
	display:block;
	position:relative;
}
.media_container.aligncenter .frame,.media_container.aligncenter .shadow {
	margin:0 auto;
	display:block;
}
.media_container.alignleft {
	margin-right:15px
}
.media_container.alignright {
	margin-left:15px
}
.media_container img {
	display: block
}
/* WIDGETS */
.widget_title {
	font-size:24px;
	margin-bottom:20px;
	color:white;
}
.heading {
	font-size:24px;
	margin-bottom:5px;
}
.widget {
	margin-bottom:30px;
}
.widget_archive li,.widget_categories li,.widget_subnav li,.widget_nav_menu li,.widget_links li,.widget_meta li,.widget_pages li {
	position:relative;
}
.widget_archive li a,.widget_categories li a,.widget_subnav li a,.widget_nav_menu li a,.widget_links li a,.widget_meta li a,.widget_pages li a {
	margin:0;
	line-height:20px;
	padding:2px 0 2px 22px;
	display:inline-block;
	position:relative;
}
.widget ul li ul {
	margin-left:20px;
}
.widget ul li ul li:last-child //border: none !important;
}
/* Calendar Widget */
table {
display:block;
}
.widget_calendar table {
margin:0;
width:100%;
line-height:15px;
}
.widget_calendar caption {
padding: 5px;
}

.widget_calendar td,.widget_calendar th {
padding:3px 5px;
text-align:right;
font-weight:normal;
}
.widget_calendar tbody td a {
display:block;
width:100%;
color:#fff;
}
.widget_calendar tfoot td {
padding:8px 0px;
font-size:11px;
}
.widget_calendar #prev {
text-align:left;
padding-left:5px;
}
.widget_calendar #next {
text-align:right;
padding-right: 5px;
}
/* Recent Posts,Popular Posts,Related Posts */
.posts {
list-style:none;
margin:0;
}
.posts p {
margin:0;
}
.posts li {
margin-bottom:15px;
position:relative;
}
.posts li a {
padding:0;
}
.posts .post_thumbnail {
display:block;
float:left;
margin:0 8px 0 0;
padding:3px;
line-height:0px;
}

.posts .post_info {
padding:0 0 0 85px;
line-height:16px;
}
.posts .post_info time {
display:block;
font-size:10px;
padding-top:5px;
}
/* Flickr Widget */
.flickr_wrap {
position:relative;
}
.flickr_wrap .flickr_badge_image {
float:left;
line-height:100%;
margin:0 3px 3px 0;
padding:3px;
}

.flickr_wrap .flickr_badge_image img {
width:70px;
height:50px;
display: block;
}
/* Portfolio Widget */
.widget_portfolio li {
float:left;
margin:0 3px 3px 0;
}
.widget_portfolio li .thumbnail {

padding:3px;
}

.thumbnail img {
display: block;
}
/* Twitter Widget*/
.widget_twitter .tweet_list {
margin-top:-10px;
}
.widget_twitter .tweet_list li {
padding:7px 5px 7px 25px;
line-height:18px;
word-wrap:break-word;
}
.tweet_list a {
background:none;
padding:0;
line-height:18px;
}
.twitter_wrap {
padding:5px 10px 20px 60px;
background:transparent;
margin-bottom:20px;
}
.twitter_wrap .tweet_list li {
padding-left: 30px;
}

/* Contact Form Widget*/
.widget_contact_form p {
margin-bottom:10px;
}
.widget_contact_form label {
padding-left:5px;
}
#footer .widget_contact_form input {
width:55%;
}
#footer .widget_contact_form textarea {
width:90%;
height: 60px;
}
/* shortcode */
.contact_form_wrap .contact_form input {
width:60%;
}
.contact_form_wrap .contact_form textarea {
width:95%;
height:100px;
}
.contact_form_wrap .contact_form label {
padding-left:5px;
}

/* Recent Comments Widget */
.widget_recent_comments ul li a {
background:none;
}
.recentcomments {
padding-left:25px !important;
}
.widget_recent_comments li {
padding: 4px 0;
}
/* Search Widget */
#searchform input {
padding:8px;
line-height:15px;
height:15px;
vertical-align:top;
margin-right:-4px;
width:100px;
}
#searchform button {
margin-left:0px;
vertical-align:top;
padding:0px 14px;
height:33px;
line-height:33px;
-webkit-border-radius:0px;
-moz-border-radius:0px;
border-radius:0px;
-webkit-border-top-right-radius:8px;
-webkit-border-bottom-right-radius:8px;
-moz-border-radius-topright:8px;
-moz-border-radius-bottomright:8px;
border-top-right-radius:8px;
border-bottom-right-radius:8px;
}
#footer #searchform .text_input {
width: 40%;
}
/* Tags Widget*/
.widget_tag_cloud {
overflow:hidden;
}
.widget_tag_cloud a {
padding:2px 10px;
font-size:12px !important;
float:left;
margin:0 5px 5px 0;
display:inline-block;
border:none;
padding:0px 10px;
height:25px;
line-height:25px;
vertical-align:middle;
}

/*------------------------------ -COLORBOX-------------------------------*/ #colorbox,#cboxOverlay,#cboxWrapper {
position:absolute;
top:0;
left:0;
z-index:9999;
overflow:visible;
}
#cboxOverlay {
position:fixed;
width:100%;
height:100%;
overflow:visible;
}
#cboxMiddleLeft,#cboxBottomLeft {
clear:left;
}
#cboxContent {
position:relative;
overflow:visible;
}
#cboxLoadedContent {
overflow:auto;
overflow:visible;
}
#cboxLoadedContent iframe {
display:block;
width:100%;
height:100%;
border:0;
overflow:visible;
}
#cboxTitle {
margin:0;
}
#cboxLoadingOverlay,#cboxLoadingGraphic {
position:absolute;
top:0;
left:0;
width:100%;
}
#cboxPrevious,#cboxNext,#cboxClose,#cboxSlideshow {
cursor: pointer;
}
/* ColorBox example user style The following rules are ordered and tabbed in a way that represents the order/nesting of the generated HTML,so that the structure easier to understand.*/
#colorbox {
}
#cboxContent {
margin-top:30px;
}
#cboxLoadedContent {
padding:8px;
text-align:center;
display:block;
position:relative;

}
#cboxTitle {
position:absolute;
top:-35px;
left:5px;
color:#fff;
font-size:34px;
}
#cboxDescription {
padding-top:5px;
line-height:24px;
font-family:'Georgia',serif;
font-size:16px;
font-weight:400;
font-style:italic;
text-align:right;
position:absolute;
top:100%;
right:5px;
}
#cboxCurrent {
position:absolute;
top:-20px;
right:0px;
color:#fff;
text-indent:-9999px;
}
#cboxSlideshow {
position:absolute;
top:-20px;
right:90px;
color:#fff;
}
#cboxPrevious {
position:absolute;
top:50%;
left:-32px;
margin-top:-42px;
width:32px;
height:85px;
text-indent:-9999px;
}

#cboxNext {
position:absolute;
top:50%;
right:-32px;
margin-top:-42px;
width:32px;
height:85px;
text-indent:-9999px;
}

#cboxClose {
position:absolute;
top:16px;
right:16px;
display:block;
width:36px;
height:35px;
text-indent:-9999px;
}
/* Comments */
.comment {
padding:16px 0px 16px 0px;
overflow:hidden;
}
.gravatar {
float:left;
padding:3px;


}
.gravatar img {
display:block
}
.comment_content {
overflow:hidden;
padding-left:20px;
position:relative;
min-height:80px;
}
.comment_content .comment_meta {
position:relative
}
.comment_content .comment_meta .comment_author {

float:left;
display:block;
margin-bottom:7px;
font-size:13px;
font-style:normal;
}

.comment_content .comment_meta time {

float:right;
border:none;
padding:0px 14px;
height:20px;
line-height:20px;
vertical-align:middle;
display:inline-block;
}
.comment_content .comment_text {
clear:both;
padding-top:5px;
overflow:hidden;
}
.reply {
text-align:center;
margin-top:2px;
}
#comments li ul li {
margin-left:20px;
margin-top:15px;
}
#respond {
margin-top:30px
}


#commentform{


width:459px;
position:relative;


}

#commentform label{

display:block;
margin:0 0 5px 2px;

}

#commentform input{


display:block;
width:180px;

}

#commentform textarea{


margin:20px 0;
display:inline-block;
width:420px;
height:100px;


}

/* Video Backgrounds */
#centered {
position:fixed;
top:0px;
left:0px;
width:100%;
height:100%;
border:none;
background-color:#000;
z-index:0 !important;
}
#centered .vjs-fullscreen {
z-index:0 !important;
overflow:auto !important;
}
#centered .vjs-controls {
position:fixed;
z-index:2;
width:500px;
left:50%;
margin-left:-250px;
border:none;
height:25px;


}
#centered .video-js {
z-index:0 !important;
}
#centered .video-js-box .vjs-controls>div {
top:0px;
-webkit-border-radius:0px;
-moz-border-radius:0px;
border-radius:0px;
}
#centered .vjs-controls>div.vjs-play-control {
left:0px;
width:25px;
display:none !important;
}
#centered .vjs-controls>div.vjs-progress-control {
left:0px;
right: 125px;
padding-left:16px;
padding-right:20px;
border:1px solid #676d68;
}
/* Using left & right so it expands with the width of the video */
#centered .vjs-controls>div.vjs-time-control {
width:75px;
right: 50px;
display:none !important;
}
/* Time control and progress bar are combined to look like one */
#centered .vjs-controls>div.vjs-volume-control {
width:50px;
right:0px;
display:none !important;
}
#centered .vjs-controls>div.vjs-fullscreen-control {
display:none !important;
}
#centered #flash_fallback_1 {
z-index: 0 !important;
}
/* VideoJS Default Styles (http://videojs.com)Version 2.0.2REQUIRED STYLES (be careful overriding)================================================================================ */
/* Box containing video,controls,and download links. Will be set to the width of the video element through JS If you want to add some kind of frame or special positioning,use another containing element,not video-js-box. */
.video-js-box {
text-align:left;
position:relative;
line-height:0 !important;
margin:0;
padding:0 !important;
border: none !important;
}
/* Video Element */
video.video-js {
background-color:#000;
position:relative;
padding:0;
}
.vjs-flash-fallback {
display: block;
}
/* Poster Overlay Style */
.video-js-box img.vjs-poster {
display:block;
position:absolute;
left:0;
top:0;
width:100%;
height:100%;
margin:0;
padding:0;
cursor: pointer;
}
/* Subtiles Style */
.video-js-box .vjs-subtitles {
color:#fff;
font-size:20px;
text-align:center;
position:absolute;
bottom:40px;
left:0;
right: 0;
}
/* Fullscreen styles for main elements */
.video-js-box.vjs-fullscreen {
position:fixed;
left:0;
top:0;
right:0;
bottom:0;
overflow:hidden;
z-index:1000;
}
.video-js-box.vjs-fullscreen video.video-js,.video-js-box.vjs-fullscreen .vjs-flash-fallback {
position:relative;
top:0;
left:0;
width:100%;
height:100%;
z-index:1000;
}
.video-js-box.vjs-fullscreen img.vjs-poster {
z-index:1001;
}
.video-js-box.vjs-fullscreen .vjs-spinner {
z-index:1001;
}
.video-js-box.vjs-fullscreen .vjs-controls {
z-index:1003;
}
.video-js-box.vjs-fullscreen .vjs-big-play-button {
z-index:1004;
}
.video-js-box.vjs-fullscreen .vjs-subtitles {
z-index: 1004;
}
/* Styles Loaded Check */
.vjs-styles-check {
height:5px;
position: absolute;
}
/* Controls Below Video */
.video-js-box.vjs-controls-below .vjs-controls {
position:relative;
opacity:1;
background-color:#000;
}
.video-js-box.vjs-controls-below .vjs-subtitles {
bottom: 75px;
}
/* Account for height of controls below video */
/* DEFAULT SKIN (override in another file)================================================================================Using all CSS to draw the controls. Images could be used if desired.Instead of editing this file,I recommend creating your own skin CSS file to be included after this file,so you can upgrade to newer versions easier. */
/* Controls Layout Using absolute positioning to position controls */
.video-js-box .vjs-controls {
position:absolute;
margin:0;
opacity:0.85;
color:#fff;
display:none;
/* Start hidden */
left:0;
right:0;
/* 100% width of video-js-box */ width:100%;
bottom:0px;
/* Distance from the bottom of the box/video. Keep 0. Use height to add more bottom margin. */
height:35px;
/* Including any margin you want above or below control items */
padding:0;
/* Controls are absolutely position,so no padding necessary */
-webkit-transition:opacity 0.5s linear;
-moz-transition:opacity 0.5s linear;
-o-transition:opacity 0.5s linear;
-ms-transition:opacity 0.5s linear;
transition:opacity 0.5s linear;
position:absolute;
z-index:2;
width:100%;
border:1px solid #888888;
height:25px;
overflow:visible;
}
.vjs-hide {
opacity:0 !important;
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
/* IE8 */
filter:alpha(opacity=0);
/* IE5-7 */
}
.vjs-show {
opacity:1 !important;
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
/* IE8 */
filter:alpha(opacity=100);
/* IE5-7 */
}
.video-js-box .vjs-controls>div {
/* Direct div children of control bar */
position:absolute;
/* Use top,bottom,left,and right to specifically position the control. */
text-align:center;
margin:0;
padding:0;
height:25px;
/* Default height of individual controls */
top:5px;
/* Top margin to put space between video and controls when controls are below */
/* CSS Background Gradients Using to give the aqua-ish look. */
/* Default */ background-color:#444444;
/* Webkit */ background:#1F3744 -webkit-gradient(linear,left top,left bottom,from(#444444),to(#555555)) left 12px;
/* Firefox */ background:#1F3744 -moz-linear-gradient(top,#444444,#555555) left 12px;
/* CSS Curved Corners */
-webkit-border-radius:5px;
-moz-border-radius:5px;
border-radius:5px;
/* CSS Shadows */
-webkit-box-shadow:1px 1px 2px #000;
-moz-box-shadow:1px 1px 2px #000;
box-shadow:1px 1px 2px #000;
top:0px;
-webkit-border-radius:0px;
-moz-border-radius:0px;
border-radius:0px;
}
/* Placement of Control Items - Left side of pogress bar,use left & width - Rigth side of progress bar,use right & width - Expand with the video (like progress bar) use left & right */
.vjs-controls>div.vjs-play-control {
left:0px;
width:25px;
}
.vjs-controls>div.vjs-progress-control {
left:25px;
right: 150px;
}
/* Using left & right so it expands with the width of the video */
.vjs-controls>div.vjs-time-control {
width:75px;
right: 75px;
}
/* Time control and progress bar are combined to look like one */
.vjs-controls>div.vjs-volume-control {
width:50px;
right:25px;
}
.vjs-controls>div.vjs-fullscreen-control {
width:25px;
right: 0px;
}
/* Removing curved corners on progress control and time control to join them. */
.vjs-controls>div.vjs-progress-control {
-webkit-border-top-right-radius:0;
-moz-border-radius-topright:0;
border-top-right-radius:0;
-webkit-border-bottom-right-radius:0;
-moz-border-radius-bottomright:0;
border-bottom-right-radius:0;
}
.vjs-controls>div.vjs-time-control {
-webkit-border-top-left-radius:0;
-moz-border-radius-topleft:0;
border-top-left-radius:0;
-webkit-border-bottom-left-radius:0;
-moz-border-radius-bottomleft:0;
border-bottom-left-radius: 0;
}
/* Play/Pause-------------------------------------------------------------------------------- */
.vjs-play-control {
cursor: pointer !important;
}
/* Play Icon */
.vjs-play-control span {
display:block;
font-size:0;
line-height: 0;
}
.vjs-paused .vjs-play-control span {
width:0;
height:0;
margin:8px 0 0 8px;
/* Drawing the play triangle with borders - http://www.infimum.dk/HTML/slantinfo.html */
border-left:10px solid #fff;
/* Width & Color of play icon */
/* Height of play icon is total top & bottom border widths. Color is transparent. */
border-top:5px solid rgba(0,0,0,0);
border-bottom:5px solid rgba(0,0,0,0);
}
.vjs-playing .vjs-play-control span {
width:3px;
height:10px;
margin:8px auto 0;
/* Drawing the pause bars with borders */
border-top:0px;
border-left:3px solid #fff;
border-bottom:0px;
border-right:3px solid #fff;
}
/* Progress-------------------------------------------------------------------------------- */
.vjs-progress-holder {
/* Box containing play and load progresses */
position:relative;
padding:0;
overflow:hidden;
cursor:pointer !important;
height:9px;
border:1px solid #777;
margin:7px 1px 0 5px;
/* Placement within the progress control item */
-webkit-border-radius:5px;
-moz-border-radius:5px;
border-radius:5px;
}
.vjs-progress-holder div {
/* Progress Bars */
position:absolute;
display:block;
width:0;
height:9px;
margin:0;
padding:0;
-webkit-border-radius:5px;
-moz-border-radius:5px;
border-radius:5px;
}
.vjs-play-progress {
/* CSS Gradient */
/* Default */ background:#fff;
}
.vjs-load-progress {
opacity:0.8;
/* CSS Gradient */
/* Default */ background-color:#222;
}
/* Time Display-------------------------------------------------------------------------------- */
.vjs-controls .vjs-time-control {
font-size:10px;
line-height:1;
font-weight:normal;
font-family:Helvetica,Arial,sans-serif;
}
.vjs-controls .vjs-time-control span {
line-height: 25px;
/* Centering vertically */
}
/* Volume-------------------------------------------------------------------------------- */
.vjs-volume-control {
cursor:pointer !important;
}
.vjs-volume-control div {
display:block;
margin:0 5px 0 5px;
padding: 4px 0 0 0;
}
/* Drawing the volume icon using 6 span elements */
.vjs-volume-control div span {
/* Individual volume bars */
float:left;
padding:0;
margin:0 2px 0 0;
/* Space between */
width:5px;
height:0px;
/* Total height is height+bottom border */
border-bottom:18px solid #555;
/* Default (off) color and height of visible portion */
}
.vjs-volume-control div span.vjs-volume-level-on {
border-color: #fff;
/* Volume on bar color */
}
/* Creating differnt bar heights through height (transparent) and bottom border (visible). */
.vjs-volume-control div span:nth-child(1) {
border-bottom-width:2px;
height:16px;
}
.vjs-volume-control div span:nth-child(2) {
border-bottom-width:4px;
height:14px;
}
.vjs-volume-control div span:nth-child(3) {
border-bottom-width:7px;
height:11px;
}
.vjs-volume-control div span:nth-child(4) {
border-bottom-width:10px;
height:8px;
}
.vjs-volume-control div span:nth-child(5) {
border-bottom-width:14px;
height:4px;
}
.vjs-volume-control div span:nth-child(6) {
margin-right: 0;
}
/* Fullscreen-------------------------------------------------------------------------------- */
.vjs-fullscreen-control {
cursor: pointer !important;
}
.vjs-fullscreen-control div {
padding:0;
text-align:left;
vertical-align:top;
cursor:pointer !important;
margin:5px 0 0 5px;
/* Placement within the fullscreen control item */
width:20px;
height:20px;
}
/* Drawing the fullscreen icon using 4 span elements */
.vjs-fullscreen-control div span {
float:left;
margin:0;
padding:0;
font-size:0;
line-height:0;
width:0;
text-align:left;
vertical-align: top;
}
.vjs-fullscreen-control div span:nth-child(1) {
/* Top-left triangle */
margin-right:3px;
/* Space between top-left and top-right */
margin-bottom:3px;
/* Space between top-left and bottom-left */
border-top:6px solid #fff;
/* Height and color */
border-right:6px solid rgba(0,0,0,0);
/* Width */
}
.vjs-fullscreen-control div span:nth-child(2) {
border-top:6px solid #fff;
border-left:6px solid rgba(0,0,0,0);
}
.vjs-fullscreen-control div span:nth-child(3) {
clear:both;
margin:0 3px 0 0;
border-bottom:6px solid #fff;
border-right:6px solid rgba(0,0,0,0);
}
.vjs-fullscreen-control div span:nth-child(4) {
border-bottom:6px solid #fff;
border-left: 6px solid rgba(0,0,0,0);
}
/* Icon when video is in fullscreen mode */
.vjs-fullscreen .vjs-fullscreen-control div span:nth-child(1) {
border:none;
border-bottom:6px solid #fff;
border-left:6px solid rgba(0,0,0,0);
}
.vjs-fullscreen .vjs-fullscreen-control div span:nth-child(2) {
border:none;
border-bottom:6px solid #fff;
border-right:6px solid rgba(0,0,0,0);
}
.vjs-fullscreen .vjs-fullscreen-control div span:nth-child(3) {
border:none;
border-top:6px solid #fff;
border-left:6px solid rgba(0,0,0,0);
}
.vjs-fullscreen .vjs-fullscreen-control div span:nth-child(4) {
border:none;
border-top:6px solid #fff;
border-right: 6px solid rgba(0,0,0,0);
}
/* Download Links - Used for browsers that don't support any video.---------------------------------------------------------*/
.vjs-no-video{font-size:small;line-height: 1.5;}/* Big Play Button (at start)---------------------------------------------------------*/
div.vjs-big-play-button{display:none;/* Start hidden */ z-index:2;position:absolute;top:50%;left:50%;width:80px;height:80px;margin:-43px 0 0 -43px;text-align:center;vertical-align:center;cursor:pointer !important;border:3px solid #fff;opacity:0.9;-webkit-border-radius:20px;-moz-border-radius:20px;border-radius:20px;/* CSS Background Gradients */
/* Default */ background-color:#0B151A;/* Webkit */ background:#1F3744 -webkit-gradient(linear,left top,left bottom,from(#0B151A),to(#1F3744)) left 40px;/* Firefox */ background:#1F3744 -moz-linear-gradient(top,#0B151A,#1F3744) left 40px;/* CSS Shadows */
-webkit-box-shadow:4px 4px 8px #000;-moz-box-shadow:4px 4px 8px #000;box-shadow:4px 4px 8px #000;}div.vjs-big-play-button span{display:block;font-size:0;line-height:0;width:0;height:0;margin:20px 0 0 23px;/* Drawing the play triangle with borders - http://www.infimum.dk/HTML/slantinfo.html */
border-left:40px solid #fff;/* Width & Color of play icon */
/* Height of play icon is total top & bottom border widths. Color is transparent. */
border-top:20px solid rgba(0,0,0,0);border-bottom:20px solid rgba(0,0,0,0);}/* Big Play Button (at start)---------------------------------------------------------*/
div.vjs-big-play-button{width:130px;height:80px;margin:-40px 0 0 -65px;border:none;opacity:0.9;-webkit-border-radius:10px;-moz-border-radius:10px;border-radius:10px;background:rgba(23,35,34,0.746094);/* CSS Shadows */
-webkit-box-shadow:none;-moz-box-shadow:none;box-shadow:none;}div.vjs-big-play-button:hover{background:#333;opacity: 1;}div.vjs-big-play-button span{margin:22px 0 0 48px;/* Drawing the play triangle with borders - http://www.infimum.dk/HTML/slantinfo.html */
border-left:36px solid #fff;/* Width & Color of play icon */
/* Height of play icon is total top & bottom border widths. Color is transparent. */
border-top:18px solid rgba(0,0,0,0);border-bottom:18px solid rgba(0,0,0,0);}/* Spinner Styles---------------------------------------------------------*/
/* CSS Spinners by Kilian Valkhof - http://kilianvalkhof.com/2010/css-xhtml/css3-loading-spinners-without-images/ */
.vjs-spinner{display:none;position:absolute;top:50%;left:50%;width:100px;height:100px;z-index:1;margin:-50px 0 0 -50px;/* Scaling makes the circles look smoother. */
-webkit-transform:scale(0.5);-moz-transform:scale(0.5);transform:scale(0.5);}/* Spinner circles */
.vjs-spinner div{position:absolute;left:40px;top:40px;width:20px;height:20px;background:#fff;-webkit-border-radius:20px;-moz-border-radius:20px;border-radius:20px;border: 1px solid #ccc;/* Added border so can be visible on white backgrounds */}/* Each circle */
.vjs-spinner div:nth-child(1){opacity:0.12;-webkit-transform:rotate(000deg) translate(0,-40px) scale(0.1);-moz-transform:rotate(000deg) translate(0,-40px) scale(0.1);transform:rotate(000deg) translate(0,-40px) scale(0.1);}.vjs-spinner div:nth-child(2){opacity:0.25;-webkit-transform:rotate(045deg) translate(0,-40px) scale(0.2);-moz-transform:rotate(045deg) translate(0,-40px) scale(0.2);transform:rotate(045deg) translate(0,-40px) scale(0.2);}.vjs-spinner div:nth-child(3){opacity:0.37;-webkit-transform:rotate(090deg) translate(0,-40px) scale(0.4);-moz-transform:rotate(090deg) translate(0,-40px) scale(0.4);transform:rotate(090deg) translate(0,-40px) scale(0.4);}.vjs-spinner div:nth-child(4){opacity:0.50;-webkit-transform:rotate(135deg) translate(0,-40px) scale(0.6);-moz-transform:rotate(135deg) translate(0,-40px) scale(0.6);transform:rotate(135deg) translate(0,-40px) scale(0.6);}.vjs-spinner div:nth-child(5){opacity:0.62;-webkit-transform:rotate(180deg) translate(0,-40px) scale(0.8);-moz-transform:rotate(180deg) translate(0,-40px) scale(0.8);transform:rotate(180deg) translate(0,-40px) scale(0.8);}.vjs-spinner div:nth-child(6){opacity:0.75;-webkit-transform:rotate(225deg) translate(0,-40px) scale(1.0);-moz-transform:rotate(225deg) translate(0,-40px) scale(1.0);transform:rotate(225deg) translate(0,-40px) scale(1.0);}.vjs-spinner div:nth-child(7){opacity:0.87;-webkit-transform:rotate(270deg) translate(0,-40px) scale(1.1);-moz-transform:rotate(270deg) translate(0,-40px) scale(1.1);transform:rotate(270deg) translate(0,-40px) scale(1.1);}.vjs-spinner div:nth-child(8){opacity:1.00;-webkit-transform:rotate(315deg) translate(0,-40px) scale(1.3);-moz-transform:rotate(315deg) translate(0,-40px) scale(1.3);transform: rotate(315deg) translate(0,-40px) scale(1.3);}
/* Supersized */
#supersized{display:block;position:fixed;left:0;top:0;overflow:hidden;z-index:-999;height:100%;width:100%;overflow:auto;}
#supersized img{width:auto;height:auto;position:relative;display:none;outline:none;border:none;}
#supersized.speed img{-ms-interpolation-mode:nearest-neighbor;image-rendering: -moz-crisp-edges;}/*Speed*/
#supersized.quality img{-ms-interpolation-mode:bicubic;image-rendering: optimizeQuality;}/*Quality*/
#supersized li{display:block;list-style:none;z-index:-30;position:fixed;overflow:hidden;top:0;left:0;width:100%;height:100%;background:#111;}
#supersized a{width:100%;height:100%;display:block;}
#supersized li.prevslide{z-index:-20;}
#supersized li.activeslide{z-index:-10;}
#supersized li.image-loading{background:#efefef url(../images/loading.gif) no-repeat center center;width:100%;height:100%;}
#supersized li.image-loading img{visibility:hidden;}
#supersized li.prevslide img,#supersized li.activeslide img{display:inline;}
/* Thumbnail Tray ----------------------------*/ #thumb-tray{display:none;position:fixed;bottom:-80px;bottom:-150px;left:0;z-index:6;background:#444444 url(../images/bg.png);height:80px;width:100%;text-align:center;border-top:1px solid #676d68;}
#thumb-back,#thumb-forward{position:absolute;bottom:0px;height:100%;width:40px;z-index:7;}
#thumb-back{left:0;background:#444 url('../images/thumb_left.png') no-repeat center center;}
#thumb-forward{right:0;background:#444 url('../images/thumb_right.png') no-repeat center center;}
#thumb-back:hover,#thumb-forward:hover{cursor:pointer;}
#thumb-up{background-color:blue;position:absolute;height:50px;width:200px;top:-50px;left:50%;margin-left:-100px;z-index:7;background:transparent url(../images/up_arrow.png) no-repeat center bottom;}
ul#thumb-list{display:inline-block;list-style:none;position:relative;left:0px;padding:10px 60px 0px 60px;}
ul#thumb-list li{list-style:none;display:inline;width:80px;overflow:hidden;float:left;margin-right:10px;padding:3px;border:1px solid #333333;background-color:#363636;box-shadow:0 0 1px rgba(0,0,0,0.4);-moz-box-shadow:0 0 1px rgba(0,0,0,0.4);-webkit-box-shadow:0 0 1px rgba(0,0,0,0.4);-webkit-border-radius:1px;-moz-border-radius:1px;border-radius:1px;}ul#thumb-list li img{width:80px;display:block;}
ul#thumb-list li.current-thumb img,ul#thumb-list li:hover img{opacity:1;-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";filter:alpha(opacity=100);}
ul#thumb-list li:hover{cursor:pointer;background-color:#222222;}

#progress-bar{position:absolute;top:-5px;height:3px;z-index:5;width:100%;background:#333;border-top: 1px solid #676D68;}