/*  
Theme Name: Portfolio
Theme URI: http://mikecohenmedia.com/
Description: Custom Theme
Author: Mike Cohen
Author URI: http://mikecohenmedia.com/
Version: 1.0
Tags: Clean.
Released under the <a href="http://www.opensource.org/licenses/gpl-license.php">GPL</a>.
*/

/*
Colors
#201C6F blue
#58595B gray
#DAD8D6 lightgray
*/

/* Reset */
html{color:#000;}body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td{margin:0;padding:0;}table{border-collapse:collapse;border-spacing:0;}fieldset,img{border:0;}address,caption,cite,code,dfn,em,strong,th,var{font-style:normal;font-weight:normal;}caption,th{text-align:left;}h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal;}q:before,q:after{content:'';}abbr,acronym{border:0;font-variant:normal;}sup{vertical-align:text-top;}sub{vertical-align:text-bottom;}input,textarea,select{font-family:inherit;font-size:inherit;font-weight:inherit;}input,textarea,select{*font-size:100%;}legend{color:#000;}del,ins{text-decoration:none;}body{font:13px/1.231 arial,helvetica,clean,sans-serif;*font-size:small;*font:x-small;}select,input,button,textarea{font:99% arial,helvetica,clean,sans-serif;}table{font-size:inherit;font:100%;}pre,code,kbd,samp,tt{font-family:monospace;*font-size:108%;line-height:100%;}


/* 

Font sizes 

{font-size:77%;}  	renders 10px 
{font-size:85%;}  	renders 11px 
{font-size:100%;} 	renders 13px  
{font-size:108%;} 	renders 14px 
{font-size:123.1%;} 	renders 16px 
{font-size:138.5%;} 	renders 18px 
{font-size:146.5%;}  	renders 19px 
{font-size:153.9%;}  	renders 20px 
{font-size:182%;}  	renders 24px 

above this just use trial and error with any percentage

*/

html{
	/* forces scroll bar */
	overflow-y: scroll;
}

html, body{
	height:100%;
}

body{
	margin:0;
	padding:0;
	color:#ccc;
	font-family:arial,helvetica,sans-serif;
	background:#696566;
}

strong{
	font-weight:bold;
}

em{
	font-style:italic;
}

h1,h2{
	font-size:160%;
	font-weight:normal;
	margin:0 0 20px 0;
	color:#fff;
}

h1{
	margin:30px 0 0 0;
}

h3{
	border-top:solid 1px #999;
}

h3,h4,h5{
	font-size:130%;
	font-weight:normal;
	color:#fff;
	margin:24px 0 12px 0;
	padding: 24px 0 0 0;
}

h6{
	font-size:92%;
	margin:0;
	font-weight:normal;
}

blockquote{
	padding:8px 15px;
	margin:20px 0 20px 0;
	line-height:14pt;
	clear:both;
}

blockquote p{
	margin:0;
	padding:0;
}

p{
	margin:0 0 12px 0;
}

img{
	border:0;
}

:focus{
	outline:0;
}

a,a:link{
	color: #ccc;
}

a:active{
	color:#fff;
}

a:visited{
	color: #ccc;
}

a:hover{  
	color:#ececec;
}

ul{
	margin:20px;
}

ol li{
	margin-bottom:4px;
	margin-left:20px;
}

.content b, .content strong, .content i, .content em{
	color:#fff;
}


/* --- Main skeleton --- */


	#header{
		height:57px;
		width:100%;
   		box-shadow-bottom: 0px 1px 4px #333;
    	-moz-box-shadow: 0px 1px 4px #333;
    	-webkit-box-shadow: 0px 1px 4px #333;
	}
	
	.page-template-page-home-php #header{
		/*background: rgba(0, 0, 0, 0.4);*/
		position:fixed;
		background:#696566;
		top:0;
		z-index:100;
	}
	
	.page-template-page-home-php #main{
		position:relative;
		z-index:50;
	}
	
	#main{
		padding:0 0 50px 0;
	}



	#top{

		min-height: 100%;
		height: auto !important;
		height: 100%;
		margin: 0 auto -24px;	
	}

	.bunnie{
		padding-top:12px;
		max-width:800px;
	}
	
	.content{
		padding-top:12px;
		max-width:800px;
	}
	
	#slideshow-wrap{
		position:relative;
		overflow:hidden;
	}

	#footer{
		font-size:77%;
		font-family:arial,helvetica,sans-serif;
		height:24px;
		line-height:24px;	
		color:#ccc;	
		display:none;
	}
	
	.page-template-page-home-php #footer{
		display:block;
	}
	
	.wrap{
		width:1200px;
		margin:0 auto;
	}
	
	.sidebar{
		padding:30px 15px;
		text-align:center;
/*		background:#999; */
		background:#615d5f; /* Bunnie */
		color:#fff;
		margin-top:12px;
	}
	.sidebar a{
		text-decoration:none;
	}


/* --- Header --- */

#logo{
	margin:7px 24px 0 0;
	text-align:left;
	float:left;
}

#logo a{
/*
	display:block;
	width:239px;
	height:71px;
	background: transparent url(./images/logo.png) 0 0 no-repeat;
	*/
}

#nav a,#social a,#footer a{
	text-decoration:none;
}

#nav-wrap{
		position: relative;
		z-index: 200;
		height:57px;
		font-size:100%;
		float:right;
}
	
	#nav ul{
		margin: 0;
		padding: 0;
		list-style-type: none;
		float: right;
	}
#social{
	float:right;
}	
#social ul{
	margin: 13px 0 0 0;
	padding: 0;
	list-style-type: none;
	float: right;
}

#social li{
	display:inline;
	float:left;
	margin-left:3px;
}

#social a{
	color:#ccc;
	display:block;
}

#social a:hover{
	color:#fff;
}

/* --- Content --- */

#content{}

#sidebar{}


.heading{
	overflow:hidden;
	clear:both;
}

.video-wrapper{
	padding:24px 0;
}

.share-item{
	float:left;
	display:inline;
	margin:0 5px 0 0;
}

.share{
	margin:0 0 7px 0;
}

.single-video .content{
	background:#f2f2f2;
	padding:7px;
}

.addthis-label{
	font-size: 85%;
	font-style:italic;
	padding:0 0 5px 0;
}


/* --- Footer --- */

#footer #copyright{
	text-align:left;
	float:left;
	color:#ccc;
}

#footer a{
	color:#fff;
}

#footer a:hover{
	color:#999;
}

#footer ul.menu{
	margin-left:90px;
}

/* --- Generic Menu --- */
ul.menu{
	list-style:none;
	margin:0;
	padding:0;
}
	
ul.menu li{
	float:left;
	display:inline;
}

	ul.menu li:nth-of-type(1) span.delim{
		display:none;
	}

/* --- Gallery --- */

.gallery-item{
	text-align:left;
	margin-bottom:20px;
}

.centered{
	text-align:center;
}

.gallery-image-wrap a {
	width: 100%;
	height: 100%;
	position:absolute;
	display:block;
}

.gallery-image-wrap a .over{
	width: 100%;
	height: 100%;
	position: absolute;
	opacity: 0;
	filter: alpha(opacity=0);
	z-index: 10;
}

.video-wrap a .over{
	background:#000 url(/images/button-play-over.png) center center no-repeat;
}

.photo-wrap a .over{
	background:#000 url(/images/button-magnify-over.png) center center no-repeat;
}

.gallery-item a {
	text-decoration:none;	
}

	/* bunnie */

.gallery-item .rollover {
	position:absolute;
	width: 100%;
	height: 100%;	
	/*opacity: 0;*/
	/*filter:alpha(opacity=0);*/

/*	z-index:30; */
	background-color:rgba(0,0,0,0.5);
}

.gallery-item .rollover h4 {
	color:#ececec;
}

.gallery-item .caption{
	position:absolute;	
	z-index:31;	
	bottom:10px;
	left:10px;
}

.gallery-item .rollover .excerpt{
	color:#ccc;
	font-size:77%;
}

.gallery-item .play-button{
	position:absolute;
	width: 100%;
	height: 100%;	
	z-index:2;
	background:url(/images/button-play.png) 10px 135px no-repeat;
}

/* -- bunnie -- JC tweaks to slide floats */
	
	.gallery-item a h4 {
		
		/* Main title text on slides */
	
		font-weight: bolder; 
		color:#fff;
	}
	
	.gallery-item a:hover, .gallery-item a:hover h4  {

	/* Main slide background color on hover */
	
	/*	 color:#35c;  */
		 background: #ca6;
		 opacity: 0.5;
		 
	}

	.gallery-item a:hover h4, .gallery-item a:hover div  { 
		
		/* Color of text on hover */
		
		opacity: 1.0; /* make text most visible */
		/*opacity: 0.0; /* make text dissaper on rollover */
		 color:#fff; 
		 background-color:transparent;
	}

/* Following two Makes main titles dark orange - comment out for white */
/* */
	.gallery-item a h4 			{color:#C93;}
	.gallery-item a:hover h4  	{color:#fc8;}
/* */

/* -- end bunnie -- */

.gallery-image-wrap{
	position:relative;
	cursor:pointer;
}

.photo-wrap{
	width:300px;
	height:200px;
}

.video-wrap{
	width:300px;
	height:169px;
}

.gallery-item h4{
	font-size:92%;
	padding:3px 0 0 0;
	margin:0;
}

.gallery-item h4 a{
	color: #999;
}

.gallery-item h4 a:hover{
	color: #666;
}

.item-speaker,.item-date, .item-duration{
	font-size:85%;
	padding: 0 3px;
	font-style:italic;
	float:left;
	display:inline;
	margin: 0 7px 0 0;
}

/* --- Video Wrap to size player --- */

.video-wrapper {
	position: relative;
	padding-bottom: 56.25%; /* 16:9 */
	padding-top: 30px;
	height: 0;
}
.video-wrapper object,
.video-wrapper embed,
.video-wrapper iframe  {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}


/* --- MISC --- */
.clear{clear:both;height:0px;}


/* tooltip */


		.tooltip,.tooltip-top {
			position: relative;
		}
		.tooltip span, .tooltip-top span {
			margin-left: -999em;
			position: absolute;
		}
		.tooltip:hover span {
			border-radius: 5px 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; 
			box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.1); -webkit-box-shadow: 2px 2px rgba(0, 0, 0, 0.1); -moz-box-shadow: 2px 2px rgba(0, 0, 0, 0.1);
			position: absolute; left:32px; top: -5px; z-index: 999;
			margin-left: 0; width: 68px;height:26px;
			background: #009fd9;color:#fff;
			padding:3px 8px;
			font-family:RePublicStdRegular,georgia,times new roman,serif;
			font-size:85%;
		}
		
		.tooltip-top:hover span {
			border-radius: 5px 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; 
			box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.1); -webkit-box-shadow: 2px 2px rgba(0, 0, 0, 0.1); -moz-box-shadow: 2px 2px rgba(0, 0, 0, 0.1);
			position: absolute; left:0px; top: -38px; z-index: 999;
			margin-left: 0; width: 169px;height:26px;
			background: #009fd9;color:#fff;
			padding:3px 8px;
			font-family:RePublicStdRegular,georgia,times new roman,serif;
			font-size:85%;
			text-align:center;
		}

		* html a:hover { background: transparent; }
		
/* #Font-Face
================================================== */
/* 	This is the proper syntax for an @font-face file
		Just create a "fonts" folder at the root,
		copy your FontName into code below and remove
		comment brackets */

/*	@font-face {
	    font-family: 'FontName';
	    src: url('../fonts/FontName.eot');
	    src: url('../fonts/FontName.eot?iefix') format('eot'),
	         url('../fonts/FontName.woff') format('woff'),
	         url('../fonts/FontName.ttf') format('truetype'),
	         url('../fonts/FontName.svg#webfontZam02nTh') format('svg');
	    font-weight: normal;
	    font-style: normal; }
*/
		
		

		
/* NAV SUBMENUS */

/* remove the list style */
#nav {
    margin:0; 
    padding:0; 
    list-style:none;
    float: right;
}   
     
    /* make the LI display inline */
    /* it's position relative so that position absolute */
    /* can be used in submenu 

        float:left; 
        display:block; 
        width:100px; 
 

*/

	.nav-sep{
		background: #999;
		width: 1px;
		height: 15px;
		display: block;
		position: absolute;
		top: 17px;
		right: 0;
	}
    #nav li {
		float:left;
		display:inline;
		list-style:none;
		margin:0 0 1px;
		padding:0;
		height:28px;
		position:relative;
		z-index:500; 
		font-family:arial,helvetica,sans-serif;
		text-transform:lowercase;
	}
    
    /* this is the parent menu */
    #nav li a {
		display:block;
		margin:0;
		line-height: 50px;
		height: 57px;
		padding: 0 10px;
		color:#fff;
}
 
    #nav li a:hover,#nav li a.active {
		color:#ccc; 
    }
    
	/* Bunnie - JC Tweaks to navbar */
	
	 
    #nav li a:hover
	{
	/*	color:#0b0;  */
		color:#ca6;   
/*		color:#e22; */
    }

    #nav li.active a:hover
	{
/*		color:#900;  
		color:#0b0; */
		color:#ca6;  
    }


	#nav li.active a {
		font-weight: bold;
    }

	
	/* End bunnie
	 
    /* you can make a different style for default selected value */
     
        /* submenu, it's hidden by default */
        #nav ul {
            position:absolute; 
            left:0; 
            display:none; 
           /* margin:0 0 0 -1px; */
			margin:0;
            padding:0; 
            list-style:none;
        }
         
        #nav ul li {
            width:200px; 
            float:left; 
			text-align:left;
			text-transform:capitalize;
        }
		
		ul.submenu{width:200px;}
         
        /* display block will make the link fill the whole area of LI */
        #nav ul a{
            display:block;  
			padding:0 15px;
			color:#000;
			height:28px;
			line-height:28px;
			background-color:#f2f2f2;
			border-bottom:dotted 1px #e7e7e7;
			margin:0;
        }
         
        #nav ul a:hover,#nav ul a.subactive  {
			color:#999;  
			background:#f6f6f6;
        }
 
/* fix ie6 small issue */
/* we should always avoid using hack like this */
/* should put it into separate file : ) */
*html #nav ul {
    margin:0 0 0 -2px;
}
		
.blog-content{
	width:640px;
	margin:0 auto 24px auto;
	padding: 0 0 24px 0;
	border-bottom:dotted #ccc 1px;
	text-align:left;
}

/* ------------------ CYCLE -------------------- */

/***** Cycle ********************/
.slideshow{

}

.slideshow div{
	display:none;
}

.page-template-page-gallery-php #slidenums,
.page-template-page-home-php #slidenums{
	overflow:hidden;
}

.page-template-page-gallery-php #slidenums div{
	float:left;
	margin: 0 0 3px 7px;
}

.page-template-page-gallery-php #slidenums img{
	width:48px;
	height:auto;
}

.page-template-page-gallery-php #slidenums .activeSlide{
	opacity:0.3;
	filter:alpha(opacity=30);
}

.page-template-page-gallery-php .slideshow{
	width:700px;
	height:525px;
	border:solid 1px #f2f2f2;
	overflow:hidden;
}

.page-template-page-home-php #slidenums {
	margin: 0 0 25px 0;
}

.page-template-page-home-php #slidenums div {
	width:8px;
	height:8px;
	margin:0 2px 0 0;
	float:left;	
}

.page-template-page-home-php #slidenums a{
	display:block;
	background:#ccc;
	width:8px;
	height:8px;
}

.page-template-page-home-php #slidenums a:hover{
	background:#999;
}

.page-template-page-home-php #slidenums .activeSlide a{
	background:#ff9501;
}

.page-template-page-home-php .slideshow{
	width:700px;
	height:390px;
	border:solid 1px #f2f2f2;
	overflow:hidden;
	position:relative;
}

.page-template-page-home-php .slideshow-item{
	width:700px;
	height:390px;
	overflow:hidden;
	position:relative;
}

.page-template-page-home-php .slideshow-item img{
	width:700px;
	height:auto;
}

.slide-desc,.slide-heading{
	position:absolute;
	right:0;
	text-align:left;
	background:#f2f2f2;
	opacity:0.8;
	filter:alpha(opacity=80);
	height:40px;
	line-height:40px;
	font-size:121%;
	padding:0 15px;
}

.slide-desc{
	bottom:20px;
}

.slide-heading{
	bottom:60px;
}

.slide-heading a,.slide-heading a:visited{
	color:#ff9501;
}

#gallery-nav{
	width:60px;
	height:20px;
	background:#f2f2f2;
	padding: 0 5px 0 25px;
	margin:20px 0 0 -20px;
	clear:both;
}

#gallery-nav a{
    background-image:url(/images/buttons-slideshow.png);
	background-repeat: no-repeat;	
	width: 20px;
	height: 20px;
	display:block;
	cursor:pointer;
	float:left;
}

#gallery-nav a span{
	display:none;
}

#gallery-nav a#prev{
	background-position: -44px 0;
}

#gallery-nav a#next{
	background-position: -66px 0;
}

#gallery-nav a#play{
	background-position: -1px 0;
}

#gallery-nav a#pause{
	background-position: -22px 0;
}

#gallery-nav a#prev:hover{
	background-position: -44px -20px;
}

#gallery-nav a#next:hover{
	background-position: -66px -20px;
}

#gallery-nav a#play:hover{
	background-position: -1px -20px;
}

#gallery-nav a#pause:hover{
	background-position: -22px -20px;
}

.gallery{
	overflow:hidden;
}

.panel{
	background:#f2f2f2;
	width:230px;
	float:right;
	display:none;
	position:absolute;
	top:50px;
	right:0;
	padding:15px;
}

#about,#contact{
	display:none;
}

ul.page-nav{
	list-syle:none;
	margin:0;
	padding:0;
}

ul.page-nav li{
	display:inline;
	float:left;
	margin:0 3px 0 0;
}

ul.page-nav li a{
	font-size: 100%;
	font-weight: normal;
	margin: 0;
	color: #fff;
	display: block;
	padding: 5px 8px;
	background: #bbb;
	margin: 0;
	text-transform: lowercase;
}

/**/
ul.nav li a:hover{
	background: #ececec;
	color:#999; 
}

ul.page-nav li a.active{
	background: #ececec;
	color:#ff9501;
}

ul.page-nav li a.active:hover{
	background: #F2F2F2;
}
/**/
/*
ul.page-nav li a:hover{
	background: #ececec;
	color:#999;
}

ul.page-nav li a.active{
	background: #ececec;
	color:#ff9501;
}

ul.page-nav li a.active:hover{
	background: #F2F2F2;
}

.home-info{
	position:relative;
}

#toggle{
	position:absolute;
	top:-24px;
	right:0;
	z-index:100;
	height:24px;
	font-size:92%;
}

#toggle2{
	position:absolute;
	top:-20px;
	right:0;
	z-index:100;
	height:24px;
	font-size:92%;
}

#toggle a,#toggle2 a{
	display:block;
	padding:3px 12px;
	color:#ccc;
	background-color:rgba(0,0,0,0.5);
	text-decoration:none;
}
#toggle a:hover, #toggle2 a:hover{
	background-color:rgba(0,0,0,0.9);
	color:#fff;	
}
#description{
	background-color:rgba(65,65,65,0.9);
	position:absolute;
	top:0;
	right:0;
	z-index:200;
	margin-right:0;
	display:none;
}
#description-close{
	position:absolute;
	top:0px;
	right:0px;
	width:100%;
	height:24px;
	background-color:rgba(65,65,65,1);
}
#description-close a{
	padding:3px 12px;
	text-decoration:none;
	float:right;
}
#description-wrap{
	padding:30px 15px 15px 15px;
}
.slideshow-caption{
	position:absolute;
	right:0;
	bottom:-80px;
	background-color:rgba(0,0,0,0.5);
	text-align:left;
	margin-right:0;
	height:80px;
	font-size:92%;
	width:50%;
}
.slideshow-caption h5{
	font-weight:bold;
	font-size:100%;
	margin:0;
	padding:0;
}
.caption-wrap{
	padding:10px;
}

/*
 * CSS Styles that are needed by jScrollPane for it to operate correctly.
 *
 * Include this stylesheet in your site or copy and paste the styles below into your stylesheet - jScrollPane
 * may not operate correctly without them.
 */
.scroll-pane
{
	width: 100%;
	overflow: auto;
}

.jspContainer
{
	overflow: hidden;
	position: relative;
}

.jspPane
{
	position: absolute;
}

.jspVerticalBar
{
	position: absolute;
	top: 0;
	right: 6px;
	width: 6px;
	height: 100%;
	background: red;
}

.jspHorizontalBar
{
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 16px;
	background: red;
}

.jspVerticalBar *,
.jspHorizontalBar *
{
	margin: 0;
	padding: 0;
}

.jspCap
{
	display: none;
}

.jspHorizontalBar .jspCap
{
	float: left;
}

.jspTrack
{
	background: #666;
	position: relative;
}

.jspDrag
{
	background: #333;
	position: relative;
	top: 0;
	left: 0;
	cursor: pointer;
}

.jspHorizontalBar .jspTrack,
.jspHorizontalBar .jspDrag
{
	float: left;
	height: 100%;
}

.jspArrow
{
	background: #50506d;
	text-indent: -20000px;
	display: block;
	cursor: pointer;
}

.jspArrow.jspDisabled
{
	cursor: default;
	background: #80808d;
}

.jspVerticalBar .jspArrow
{
	height: 16px;
}

.jspHorizontalBar .jspArrow
{
	width: 8px;
	float: left;
	height: 100%;
}

.jspVerticalBar .jspArrow:focus
{
	outline: none;
}

.jspCorner
{
	background: #eeeef4;
	float: left;
	height: 100%;
}

/* Yuk! CSS Hack for IE6 3 pixel bug :( */
* html .jspCorner
{
	margin: 0 -3px 0 0;
}

#home-news{
position: fixed;
z-index: 1000;
width: 100%;
height: 100px;
bottom: 20px;
right: 0px;
}

#home-news a{
	display:block;
	background:url(/images/px3-logo.png) 0 0 no-repeat;
	width:210px;
	height:100px;
	float:right;
}

ul#supersized{
	margin:0;
}