/* 

TITLE: VAULLT.COM
DATE: FEBRUARY 2010
CODE: tejpotter.com

COLOURS:

LIGHT-GRAY: #dedede
MID-GRAY: #8d8d8d
DARK-GRAY: #555555
RED: #ff0000

*

/*------------------------ GLOBAL STYLES ------------------------*/

body {font:12px Geneva, Verdana, sans-serif;}

header, footer, section, aside, nav, article {display: block;}

h1, h2, h3, h4, h5, h6 {font-family:Georgia, "Times New Roman", Times, serif; font-weight:normal; text-transform:uppercase;}

header h2 {font-size:28px;}

section h2 {font-size:17px; letter-spacing:4px; padding:20px 0 10px 0;}

section em {text-transform:lowercase;}

h3 {letter-spacing:4px; font-size:14px;}

h4 {letter-spacing:2px; font-size:11px;  padding:10px 0;}

section p.featured {font:18px Geneva, Verdana, sans-serif; letter-spacing:6px; text-transform:uppercase; float:left; margin-top:18px;}

p {color:#555555; line-height:1.4em; margin: 10px 0;}

a {color:#555; text-decoration:none; border-bottom:1px dotted #555; padding-bottom:2px;}

/*------------------------ TYPOGRAPHY ------------------------*/

header h2, header p {text-align:center;}

header img {display: block; margin-left: auto; margin-right: auto;}

.logo {border-bottom: 1px solid #dedede; margin-bottom:30px;}

.subtitle {font-size:10px; letter-spacing:2px;}

.intro {font:18px Georgia, "Times New Roman", Times, serif; font-style:italic; color:#000; margin:0px;}

footer .intro {font-size:16px; color:#999;}

/*footer p.dropcap:first-of-type::first-letter {font:64px Georgia, "Times New Roman", Times, serif; font-style:italic; color:#000; color:#555; text-transform:lowercase; float:left; padding:3px; top:0;}*/

small {font-size:9px; text-transform:uppercase; letter-spacing:1px; padding-bottom:20px; display:block;} 

span.amp {font-family: "Baskerville","Georgia",serif; font-style:italic; font-size:150%;}


/*------------------------ PAGE LAYOUT ------------------------*/

#container, .wrapper {width:1020px; margin:0 auto;}

nav {background-color:#000; left:0;  position:absolute; width:100%; height:20px;}

nav span.affiliate {width:1020px; margin:0 auto; display:block; text-align:right;}

nav span.affiliate a {border:none;}

header, section#main {padding-top:60px;}

aside {width:330px; float:left;}

aside section {display: table; width:300px; margin:0 auto;  border-top: 1px solid #dedede;}

aside section img {margin:20px 10px 0 5px; border:3px solid #dedede; float:left;}

aside section a img {-webkit-transition:.4s linear;}

aside section a:hover img {border-color: #fff; box-shadow:0px 0px 10px #999; -moz-box-shadow:0px 0px 10px #999; -webkit-box-shadow:0px 0px 10px #999;}

aside h3 {padding-top:30px; font-size:12px;}

section#main  {width:640px; float:right;}

footer {width: 100%; background: #000; clear:both;}

#hidden_header p { text-align:center; color: #282828; text-shadow: 0px 1px 1px #AEAEAE; padding:5px 0 0; text-transform:uppercase; font-size:10px; letter-spacing:2px;}

#hidden_header a {color:#FFF;}

nav .expand  {padding-bottom:0;}

#main {padding-bottom:60px;}

#effects {position:relative; width:640px; padding-top:29px; text-align:right;}

.cast {background:url(../images/cast_star.gif) no-repeat right;}

.camera {background:url(../images/sony_camera.jpg) no-repeat right;}

.laptop {background:url(../images/laptop.gif) no-repeat right;}

footer section img {border:3px solid #dedede;}


/*------------------------ BORDER CLASSES ------------------------*/

.border {border-bottom: 1px solid #dedede;}

h2.border {margin-bottom:20px;}

h3.border {margin-bottom:10px;}


/*------------------------ JQUERY ACCORDION ------------------------*/

h3.expand_link {padding:10px 20px; background: url(../images/left.png) center left no-repeat;}
	
.expand_link {cursor: pointer;}
	
.expand {display:none; padding-bottom:20px;}

.expand p {	margin:0; padding-bottom:10px;}

nav blockquote {height:20px;}

nav .expand {background-color: rgba(0, 0, 0, 0.4);}


/*------------------------ OVERLAY EFFECTS ------------------------*/

#sepia, #oldfilm, #letterbox, #vignette, #cooling {position:absolute; right:0; width:640px; text-align:right; float:right;}

#sepia .expand {background-color: rgba(172, 122, 51, 0.3); height:340px;}

#oldfilm .expand {background-image:url(../images/static.gif); opacity:0.2; height:340px;}

#letterbox .expand {height:340px;}

#letterbox .banner {position:absolute; height:40px; background-color:#000; width:640px;}
 
#vignette .expand {box-shadow:inset 0px 0px 60px black; background:url(../images/vignette_border.png) no-repeat top left; -moz-box-shadow:inset 0px 0px 60px black; height:340px;}

#cooling .expand {background-color: rgba(0, 180, 253, 0.1); height:340px;}

video { background:url(../images/stills/loading_video.png) no-repeat top left; z-index:1103;}


/*------------------------ LISTS ------------------------*/

aside ul{padding:10px 0 30px 0;}

aside li {list-style:none; display:inline; color:#8d8d8d; font-size:8px; text-transform:uppercase; letter-spacing:1px; border-right:1px solid #8d8d8d; padding-right:3px;}

aside li:nth-child(2) {border:none;}

#main ul {padding: 1em 0;}

#main li, footer li {list-style:none; padding:0.5em 1em; color: #555; border-bottom:1px dotted #dedede; color:#777;}

#main li:nth-of-type(odd), footer li:nth-of-type(odd) {background-color:rgba(0, 0, 0, 0.05);}

ol.footnote li {border:none; list-style-type:decimal; font-size:8px; color:#333; list-style-position:inside;}


/*------------------------ COLUMNS ------------------------*/

.columns {-moz-column-count: 3; -moz-column-gap: 20px; -webkit-column-count: 3; -webkit-column-gap: 20px; column-count: 3; column-gap: 20px;}
	

/*------------------------ FOOTER ------------------------*/

footer {padding:15px 0 10px;}

footer p {line-height:1.6em;}

footer img {margin-bottom:10px;}

footer div {display: table;	margin: 0 auto;}
		
footer div section {display: table-cell; width:33%; padding:20px 20px 0;}

footer header {padding-top:0;}
			
footer h3 {color: #FFF; padding-bottom:10px; font-size:18px;}

footer #fx h3 {padding-left:20px;}
	
footer a {color: #999;}

footer a:hover {color: #FFF; text-decoration: none;}

footer #fx a {border:none;}

footer ul {padding-top:10px;}

footer li {padding:0;}

footer li a {border:none; display:block; padding:5px; -webkit-transition:.4s linear;}

footer li a:hover {background-color:rgba(255, 255, 255, 0.1);}
	
footer small {padding-top:40px; color:#333; font-size:8px;}


/*------------------------ USEFUL CLASSES ------------------------*/	

sup {font-size:0.6em; left:0.2em; padding-right:0.2em; position:relative; top:-0.6em; vertical-align:baseline;}


/*------------------------ TOOLTIPS ------------------------*/	

.tooltip {position:absolute; top:-2000px; border-radius:10px; -moz-border-radius:10px; -webkit-border-radius:10px; margin-top:-8px; border: 2px solid #fff; box-shadow: 2px 2px 6px #666; -moz-box-shadow: 2px 2px 6px #666; -webkit-box-shadow: 2px 2px 6px #666; background-color:#000;}	
		
.tooltip p{ margin:0; padding:0; color:#fff; padding:4px 8px; font-size:8px; letter-spacing:1px; font-family:Verdana, Geneva, sans-serif;}


/*------------------------ FANCYBOX ------------------------*/

#fxdemo {position:relative; width:640px; font:12px Geneva, Verdana, sans-serif; color:#555; background-color:#000; padding:20px; border-radius:15px; -moz-border-radius:15px; -webkit-border-radius:15px; }

#fxdemo h3 {font-size:18px; color:#FFF; padding-bottom:15px;}

#fxdemo p {line-height:1.5em;}

#fxdemo ol {color:#333; font-size:8px;}

#fxdemo ol li {margin-left:30px;}

#fancybox-loading {position: fixed; top:50%; left:50%;	height:40px; width:40px; margin-top:-20px; margin-left:-20px; cursor:pointer; overflow:hidden; background:transparent; z-index:1104;	display:none;}

#fancybox-loading div {position:absolute; top:0; left:0; width:40px; height:480px; background:transparent url(../images/fancy_loading.png) no-repeat;}

#fancybox-overlay {position:fixed; top:0; left:0; bottom:0;	right:0; z-index:1100; display:none;}

#fancybox-tmp {padding:0; margin:0;	border:0; overflow:auto; display:none;}

#fancybox-wrap {position:absolute; top:0; left:0; margin:0;	z-index:1101; display:none;	box-shadow:0px 0px 10px #000; -moz-box-shadow:0px 0px 10px #000;	-webkit-box-shadow:0px 0px 10px #000; border-radius:15px; -moz-border-radius:15px; -webkit-border-radius:15px;}

#fancybox-close  {position:absolute; top:10px; right:10px; width:32px; height:32px;	background:url(../images/fancy_close.png) top left no-repeat; cursor:pointer; z-index:1103; display:none;}

#fancybox_error {color:#444; font:normal 12px/20px Arial;}

#fancybox-content {height:auto;	width:auto;	padding:0; margin:0;}