@charset "utf-8";

/*
Theme Name: Flow (Frame, Reveal)
Theme URI: contact info@rawilliamsdesign.com
Description: A fluid, fixed Wordpress theme by RWD, Inc.
Version: 0.1
Author: Ra Williams
Author URI: http://www.rawilliamsdesign.com
*/

/* ============================================================ */
/* INITILIZATION & RULE RESET --------------------------------- */
/* ============================================================ */

/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain) */

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, 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,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}

a:link, a:visited, a:hover, a:active { text-decoration:none }

/* ============================================================ */
/* FONTS ------------------------------------------------------ */
/* ============================================================ */

@font-face {
    font-family: 'BorisBlackBloxxRegular';
    src: url('/fonts/borisblackbloxx-webfont.eot');
    src: url('/fonts/borisblackbloxx-webfont.eot?#iefix') format('embedded-opentype'),
         url('/fonts/borisblackbloxx-webfont.woff') format('woff'),
         url('/fonts/borisblackbloxx-webfont.ttf') format('truetype'),
         url('/fonts/borisblackbloxx-webfont.svg#BorisBlackBloxxRegular') format('svg');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'Conv_blairmditc-tt-medium';
    src: url('/fonts/blairmditc-tt-medium.eot');
    src: url('/fonts/blairmditc-tt-medium.eot?#iefix') format('embedded-opentype'),
         url('/fonts/blairmditc-tt-medium.woff') format('woff'),
         url('/fonts/blairmditc-tt-medium.ttf') format('truetype'),
         url('/fonts/blairmditc-tt-medium.svg#Conv_blairmditc-tt-medium') format('svg');
    font-weight: normal;
    font-style: normal;

}

/* ==================================================== */
/* GLOBAL TEMPLATE STYLES ----------------------------- */
/* ==================================================== */

html, body, div, p, span, a, ul, li  { border:0px dotted #CCC }

html { position:relative; height:100% }

body {
	position:relative;
	background-color:transparent;
	height:100%;
	font-family:'Trebuchet MS',Verdana,Arial;
	font-size:10px;
	color:#999;
	/*z-index:-1*/
}

a { color:#333 }
a:link { color:#333 }
a:visited { color:#333 }
a:hover { color:#CA3FCA }

#illustration li.illustration a,
#prints li.prints a,
#blog li.blog a,
#links li.links a,
#about li.about a { color:#CA3FCA }

.container {
	position:absolute;
	height:100%;
	left:-415px
}

	.header {
		border-bottom:1px solid #eee;
		background:white;
		position:fixed;
		width:815px;
		top:0px;
		padding:22px 0px 22px 0px;
		z-index:1
	}

		.header .logo {
			width:auto;
			color:#333;
			font-size:33px;
			display:inline-block
		}
		
		.header .logo2 {
			color:#333;
			display:inline-block
		}
		
		.header .logo2#e {
			background:url('/images/e.gif') no-repeat;
			width:187px;
			height:8px
		}
		
		.header .separator { margin:0px 3px }
		
		.header .social {
			position:absolute;
			top:37px;
			display:block;
		}
		
		.header .social#facebook {
			background:url('/images/facebook.png') no-repeat;
			left:742px;
			width:12px;
			height:21px;
		}
		
		.header .social#facebook:hover {
			background:url('/images/facebook-over2.png') no-repeat;
		}
		
		.header .social#twitter {
			background:url('/images/twitter.png') no-repeat;
			left:782px;
			width:26px;
			height:23px;
		}
		
		.header .social#twitter:hover {
			background:url('/images/twitter-over.png') no-repeat;
		}
		
	.left {
		position:fixed;
		width:195px;
		top:88px; /* top:110px; */
		bottom:0px;
		min-height:275px;
	}

		.nav {
			border-bottom:1px solid #EEE;
			width:105px;
			padding-bottom:10px; /* 5 */
			margin:22px 0 25px; /* 20 */
		}
		
			.nav li {
				margin-bottom:15px;
			}
			
		.left p { margin-bottom:15px }
		
		.left p:last-child {
			position:absolute;
			bottom:0px
		}
	
	.right{
		position:absolute;
		width:620px;
		height:5px;
		left:195px;
		top:88px;
		bottom:0px
	}
		
		.overlay {
			background:url('/images/overlay.png') no-repeat;
			background-position:0px -2px;
			position:fixed;
			width:622px;
			height:7px;
			top:88px;
			z-index:1;
			display:none
		}
		
		.content {
			position:relative;
			width:520px; /* Default Width */
			margin:22px auto 15px;
			text-transform:uppercase;
			z-index:0
		}		

/* ==================================================== */
/* GENERAL STYLES ------------------------------------- */
/* ==================================================== */

/* Positioning */

.center {
	margin-left:50%;
	margin-right:50%
}

/* Box */

.curve-bottom {
	-moz-border-bottom-left-radius:8px;
	-webkit-border-bottom-left-radius:8px;
	border-bottom-left-radius:8px;
	-moz-border-bottom-right-radius:8px;
	-webkit-border-bottom-right-radius:8px;	
	border-bottom-right-radius:8px
}
	
.curve-top {
	-moz-border-top-left-radius:8px;
	-webkit-border-top-left-radius:8px;
	border-top-left-radius:8px;
	-moz-border-top-right-radius:8px;
	-webkit-border-top-right-radius:8px;	
	border-top-right-radius:8px
}
	
.shadow {
	-moz-box-shadow:-3px 0px 5px #666;
	-webkit-box-shadow:-3px 0px 5px #666;
	box-shadow:-3px 0px 5px #666;
	-moz-box-shadow:0px 1px 5px 0px #555;
	-webkit-box-shadow:0px 1px 5px 0px #555;
	box-shadow:0px 1px 8px 0px #333
}

/* Text */

.i { font-style:italic }
.yellow { color:#ffff8c }
.font1 { font-family:'Conv_blairmditc-tt-medium',Helvetica,Arial; text-transform:uppercase }
.font2 { font-family:'BorisBlackBloxxRegular','Arial Black',Verdana,Arial }
.font3 { font-family:'Trebuchet MS',Verdana,Arial }

/* Lists */

#first { border-left:0px }
#last { border-right:0px }

/* ==================================================== */
/* PAGE STYLES ---------------------------------------- */
/* ==================================================== */

/* ILLUSTRATION */

	#illustration .content {  }
		
		#illustration .content .gallery-icon { margin-bottom:12px }
		#illustration .content .gallery-caption { margin-bottom:40px }
		#illustration .content .gallery-caption span { margin-right:4px; display:inline-block }
		#illustration .label { color:#CCC }
		#illustration .client {  }
		#illustration .img-title { font-style:italic }
		#illustration .img-description { margin-top:10px; color:#CCC }
		
		/*.img-roll {  }
			.img-entry { height:auto; margin-bottom:40px }
				.img-container { height:auto; margin-bottom:10px }
					.img-container img {  } */
				

/* PRINTS */

	#prints .content { width:555px }
	#prints .content p { margin-bottom:10px }

/* LINKS */
	
	#links .content {  }
	#links .content li { margin-bottom:20px }
	#links .content li a { display:inline-block }
	
/* ABOUT */

	#about .content {  }
	#about .content p { margin-bottom:10px }
	#about .content p img { background-color:#999; width:160px; height:200px; margin:0px 20px 20px 0px; float:left }
	#about .content ul { margin-bottom:10px }
	#about .content li { list-style-type:circle; position:relative; left:30px; margin-bottom:5px }