/*
Theme Name: Four+One Default
Theme URI: http://www.fourplusoneproductions.com/
Description: The default Four+One theme.
Version: 1.0
Author: Justin Barkhuff
Author URI: http://www.justinbarkhuff.com/
Tags: blue, custom header, fixed width, two columns, widgets
*/

* { margin:0; padding:0; }

body { background:#000; margin:0; padding:100px 0; }

body,
input,
textarea,
select,
option { font-family:Verdana, Arial, Helvetica, sans-serif; font-size:11px; color:#000; }

option { padding-right:15px; }

h2 { margin:0 0 10px 0; padding:0; font-size:30px; font-weight:bold; }
h3 { margin:0 0 15px 0; padding:0; font-size:18px; font-weight:normal; }
h4 { margin:0 0 20px 0; padding:0; font-size:12px; font-weight:bold; }

h5,
p { margin:0 0 20px 0; padding:0; line-height:20px; }

ul, ol { margin:0 0 10px 10px; padding:0 0 0 1em; }

body.page p { margin:20px 0 0 0; }

a { color:#666; text-decoration:none; border-bottom:1px solid #EEE; }
a:hover { border-bottom-color:#CCC; }

img { border:0; }
img, div, a { behavior: url(/wordpress/wp-content/themes/fourplusone/images/iepngfix.htc) }

hr { margin:0 0 20px 0; padding:0; color:#CCC; background:#CCC; height:1px; width:100%; border:none; }

button.paypal { border:none; width:162px; height:25px; background:#7F7F7F url("images/submitPaypal.gif") center center no-repeat; text-indent:-2000px; overflow:hidden; cursor:pointer; }

#pageBody form { margin:15px 0 0 0; padding:0; }
#pageBody form p { display:inline; }
#pageBody hr { margin:20px 0 0 0; }

#wrapper { position:relative; margin:0 auto; padding:0; width:750px; height:440px; background:#FFF; }

#header { position:absolute; top:20px; left:20px; margin:0; padding:0; }
#header h1 { margin:0; padding:0; }
#header h1 a { display:block; margin:0; padding:0; width:43px; height:43px; background:url("images/logo-mini.gif") no-repeat; text-decoration:none; text-indent:-2000px; overflow:hidden; border:none; }

#nav { position:absolute; top:18px; right:20px; margin:0; padding:0; width:650px; height:43px; border-bottom:1px solid #999; z-index:10; }
#nav ul { position:absolute; bottom:5px; right:0; margin:0; padding:0; list-style:none; text-align:right; }
#nav li { margin:0; padding:0; display:inline; }
#nav li a { margin:0 0 0 20px; padding:0 4px; text-decoration:none; color:#000; font-weight:bold; border:none; height:24px; line-height:24px; }

#content { position:absolute; bottom:60px; left:20px; margin:0; padding:0; }
#content li { line-height:20px; }

#pageHeader { position:absolute; bottom:0; left:0; width:200px; text-align:right; z-index:300; }
#pageHeader h2 { margin:0; }
#pageHeader .subtitle { margin:10px 0 0 43px; color:#666; }
#pageHeader .subtitle h4 { margin:0; padding:0; font-size:24px; color:#000; }
#pageBody { position:absolute; bottom:0; left:240px; margin:0; padding:0; width:470px; z-index:200; }
#pageChildren { margin:10px 0 0 0; padding:0; list-style:none; }
#pageChildren li { margin:0; padding:0; }
#pageSiblings { position:absolute; bottom:0; left:0; width:710px; height:330px; z-index:100; }
#pageSiblings ul { margin:20px 0 0 0; padding:0; list-style:none; text-align:right; }
#pageSiblings li { margin:0; padding:0; display:inline; }
#pageSiblings li a { margin:0 0 0 20px; padding:0; text-decoration:none; border:none; }
#pageSiblings li.current_page_item a { font-weight:bold; }

#main { float:left; width:455px; margin:0; padding:0; clear:both; }

#sidebar { margin:0 0 0 495px; padding:0; }
#sidebar ul { margin:0 0 10px 0; padding:0; list-style:none; }
#sidebar ul li { margin:0 0 20px 0; padding:0; }
#sidebar ul li li { margin:0; padding:0; }
#sidebar h4 { font-size:11px; margin:0 0 5px 0; padding:0; border-bottom:1px solid #CCC; color:#999; text-transform:uppercase; font-weight:bold; }
#sidebar p { margin:0; padding:0; }

#comment { width:400px; height:150px; }

body.splash #header,
body.splash #nav { display:none; }
body.splash #content { position:relative; top:0; left:0; margin:0; padding:0; background:#000; }
body.splash #splash { background:#FFF; }
body.splash #splash p { text-align:center; line-height:440px; }

div.skipIntro { text-align:center; margin:0 auto; padding:20px; }
div.skipIntro a { color:#FFF; border:none; }

body.home #header { display:none; }
body.home #pageHeader { height:215px; background:url("images/logo.gif") bottom right no-repeat; }
body.home #pageHeader * { display:none; }

body.home #nav li.home a,
body.reel #nav li.reel a,
body.page-3 #nav li.reel a,
body.workshops #nav li.workshops a,
body.page-6 #nav li.workshops a,
body.contact #nav li.contact a,
body.blog #nav li.blog a { border:1px solid #CCC; }

body.blog #wrapper { height:auto; }
body.blog #content { position:relative; margin:0; padding:103px 20px 20px 20px; bottom:auto; left:auto; }

p.postmetadata { padding:10px; background:#EEE; font-style:italic; }

ol.commentlist { margin:0 0 20px 0; padding:0; list-style:none; }
ol.commentlist li { margin:0; padding:10px; }
ol.commentlist li.odd { background:#EEE; }

.clear { margin:0; padding:0; display:block; height:1px; width:100%; clear:both; }

.jcarousel-container { position:absolute; bottom:0; left:0; background:#FFF; border:1px solid #000; width:444px; height:260px; margin:0; padding:0; }
.jcarousel-clip { z-index: 2; width:100%; height:100%; padding: 0; margin: 0; overflow: hidden; position: relative; }
.jcarousel-list { z-index: 1; overflow: hidden; position: relative; top: 0; left: 0; margin: 0; padding: 0; }
.jcarousel-list li,
.jcarousel-item { float: left; list-style: none; width:148px; text-align:center; margin:0; padding:100px 0 0 0; line-height:auto; }
.jcarousel-item a { border:none; }
.jcarousel-item-placeholder { background: #fff; color: #000; }

.jcarousel-next { z-index: 3; display: none; position: absolute; top:114px; right:-16px; width: 32px; height: 32px; cursor: pointer; background: transparent url(images/next-horizontal.png) no-repeat 0 0; }
.jcarousel-next:hover { background-position: -32px 0; }
.jcarousel-next:active { background-position: -64px 0; }

.jcarousel-next-disabled,
.jcarousel-next-disabled:hover,
.jcarousel-next-disabled:active { cursor: default; background-position: -96px 0; }

.jcarousel-prev { z-index: 3; display: none; position: absolute; top: 114px; left:-16px; width: 32px; height: 32px; cursor: pointer; background: transparent url(images/prev-horizontal.png) no-repeat 0 0; }
.jcarousel-prev:hover { background-position: -32px 0; }
.jcarousel-prev:active { background-position: -64px 0; }

.jcarousel-prev-disabled,
.jcarousel-prev-disabled:hover,
.jcarousel-prev-disabled:active { cursor: default; background-position: -96px 0; }

#tooltip { position:absolute; z-index:3000; }
#tooltip h3, #tooltip div { margin:0; }

/* Video styles
-------------------------------------------------------------- */
.video-js-box { text-align: left; position: relative; }
video.video-js { background-color: #FFF; position: relative; border:none; }
.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 { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 1001; }
.video-js-box.vjs-fullscreen .vjs-controls { z-index: 1002; }
.vjs-controls { display: none; position: absolute; margin: 0; padding: 0; border: none; left: 0; }
.video-js-box.vjs-controls-below .vjs-controls { background-color: #000; }
img.vjs-poster { display: block; position: absolute; left: 0px; top: 0px; width: 100%; height: 100%; }
.video-js-box p { font-size: small; }

/* DEFAULT SKIN */
/* Using all CSS to draw the controls. Images could be used to simplify the CSS if desired.

/* General controls styles */
.vjs-controls { list-style: none; height: 35px; opacity: 0.85; color: #fff; }
.vjs-controls > li { list-style: none; float: left; height: 25px; width: 25px; margin: 5px 5px 0 0; padding: 0; text-align: center;
  
  /* CONTROL ITEM BORDER AND BACKGROUND COLOR */
  
  background-color: #0B151A; border-radius: 5px; box-shadow: 0px 2px 2px #000;
  /* Webkit */
  -webkit-border-radius: 5px;
  background: #1F3744 -webkit-gradient(linear, left top, left bottom, from(#0B151A), to(#1F3744)) left 12px;
  -webkit-box-shadow: 0px 1px 3px #000;
  /* Firefox */
  -moz-border-radius: 5px;
  background: #1F3744 -moz-linear-gradient(top,  #0B151A,  #1F3744) left 12px;
  -moz-box-shadow: 0px 1px 3px #000; 
}

.vjs-controls > li:first-child { margin-left: 5px; }
.vjs-controls > li:last-child { margin-right: 0; }

/* Play/Pause */
.vjs-play-control span { display: block; font-size: 0px; line-height: 0; text-decoration: none; cursor: pointer !important; }
.vjs-play-control.vjs-play span { width: 0; height: 0; margin: 8px 0 0 8px; border-top: 5px solid #273F3E; border-left: 10px solid #fff; border-bottom: 5px solid #112129; }
.vjs-play-control.vjs-pause span { width: 3px; height: 10px; margin: 8px auto 0; border-top: 0px; border-left: 3px solid #fff; border-bottom: 0px; border-right: 3px solid #fff; }

/* Progress */
.vjs-progress-control ul { list-style: none; margin: 0; padding: 0; cursor: pointer !important; }
.vjs-progress-control .vjs-progress-holder { list-style: none; position: relative; float: left; height: 9px; border: 1px solid #777; margin: 7px 0 0 5px; padding: 0; background-color: #112129; overflow:hidden; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; }
.vjs-progress-control .vjs-play-progress { position: absolute; display: block; width: 0px; height: 9px; background: #fff; 
  -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px;
  background: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#777));
  background: -moz-linear-gradient(top,  #fff,  #777);
}
.vjs-progress-control .vjs-load-progress { position: absolute; display: block; width: 0px; height: 9px; background-color: #777; opacity: 0.5;
  -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; 
  background: -webkit-gradient(linear, left top, left bottom, from(#999), to(#ccc));
  background: -moz-linear-gradient(top,  #999,  #ccc);
}
.vjs-progress-control .vjs-progress-time { list-style: none; float: left; margin: 7px 0 0 5px; padding: 0; font-size: 10px; line-height: 1; font-weight: normal; font-family: Helvetica, Arial, sans-serif;  }

/* Volume */
.vjs-volume-control { width: 50px !important; cursor: pointer !important; }
.vjs-volume-control ul { display: block; margin: 0 5px 0 5px; padding: 4px 0 0 0; list-style: none; }
.vjs-volume-control ul li { float: left; margin: 0 2px 0 0; padding: 0; list-style: none; width: 5px; height: 0px; border-bottom: 18px solid #555; }
.vjs-volume-control ul li:last-child { margin-right: 0; }
.vjs-volume-control ul li:nth-child(1) { border-bottom-width: 2px; height: 16px; }
.vjs-volume-control ul li:nth-child(2) { border-bottom-width: 4px; height: 14px; }
.vjs-volume-control ul li:nth-child(3) { border-bottom-width: 7px; height: 11px; }
.vjs-volume-control ul li:nth-child(4) { border-bottom-width: 10px; height: 8px; }
.vjs-volume-control ul li:nth-child(5) { border-bottom-width: 14px; height: 4px; }

/* Fullscreen */
.vjs-fullscreen-control { display:none; }
.vjs-fullscreen-control ul { list-style: none; margin: 5px 0 0 5px; padding: 0; width: 20px; height: 20px; text-align: left; vertical-align: top; cursor: pointer !important; }
.vjs-fullscreen-control ul li { list-style: none; float: left; margin: 0; padding: 0; font-size: 0; line-height: 0; width: 0; text-align: left; vertical-align: top; }
.vjs-fullscreen-control ul li:nth-child(1) { margin: 0 3px 3px 0; border: none; border-top: 6px solid #fff; border-right: 6px solid #273F3E; }
.vjs-fullscreen-control ul li:nth-child(2) { border: none; border-top: 6px solid #fff; border-left: 6px solid #273F3E; }
.vjs-fullscreen-control ul li:nth-child(3) { clear: both; margin: 0 3px 0 0; border: none; border-bottom: 6px solid #fff; border-right: 6px solid #112129; }
.vjs-fullscreen-control ul li:nth-child(4) { border: none; border-bottom: 6px solid #fff; border-left: 6px solid #112129; }
.vjs-fullscreen .vjs-fullscreen-control ul li:nth-child(1) { border: none; border-bottom: 6px solid #fff; border-left: 6px solid #273F3E; }
.vjs-fullscreen .vjs-fullscreen-control ul li:nth-child(2) { border: none; border-bottom: 6px solid #fff; border-right: 6px solid #273F3E; }
.vjs-fullscreen .vjs-fullscreen-control ul li:nth-child(3) { border: none; border-top: 6px solid #fff; border-left: 6px solid #112129; }
.vjs-fullscreen .vjs-fullscreen-control ul li:nth-child(4) { border: none; border-top: 6px solid #fff; border-right: 6px solid #112129; }