/*
   doodledo MOTION
   Default screen stylesheet
   Powered by Prego
*/


/* PAGE STRUCTURE
 * ----------------------------------- */
 
/** Global **/
html, body
{
	width:100%;
	height:100%;
}
 
body, textarea, input
{
	font-family:"Helvetica Neue", arial, helvetica;
	font-size:small;
}
 
body
{
	background:url('../images/stripes.gif') 50% 0 #000;
	color:#fff;
}

#container
{
	position:relative;
	background:url('../images/faux-columns.gif') 50% 0 repeat-y;
	min-height:100%;
	width:893px;
	padding:0 36px;
	margin:0 auto;
}
 
/** Accessibility links **/
#accessibility
{
	position:absolute;
	top:-5em;
	left:0;
}

#accessibility a
{
	position:absolute;
	display:block;
	background:#000;
	top:0;
	width:10em;
	padding:0.5em;
	text-align:center;
}

#accessibility a:active,
#accessibility a:focus
{
	margin-top:5em;
}

/** Page header **/
#header
{
}

#header h1,
#header h2
{
	position:absolute;
	top:15px;
	right:36px;
	width:287px;
	height:0;
	padding:50px 0 0;
	overflow:hidden;
	background:url('../images/logo.gif');
}

/** Main navigation **/
#navigation
{
	padding:13em 0 0 0;
}

#navigation ul
{
	padding:0;
	list-style:none;
}

#navigation li
{
	display:block;
	float:left;
	padding:0 13px 3px 0;
}

#navigation li.contact
{
	padding-right:0;
}

#navigation li a
{
	display:block;
	width:289px;
	background-position:0 0;
	background-repeat:no-repeat;
	overflow:hidden;
	height:0;
	padding:20px 0 0 0;
}

#navigation li.selected a,
#navigation li a:hover
{
	background-position:0 -20px;
}

#navigation li.news a {background-image:url('../images/nav-news.gif');}
#navigation li.blog a {background-image:url('../images/nav-blog.gif');}
#navigation li.work a {background-image:url('../images/nav-work.gif');}
#navigation li.contact a {background-image:url('../images/nav-contact.gif');}

#navigation li.client
{
	position:absolute;
	top:15px;
	left:40px;
	z-index:2;
}

#navigation li.client a,
#navigation li.client a:hover,
#intro .logout a
{
	width:auto;
	height:auto;
	padding:0 15px 0 0;
	overflow:visible;
	background:url('../images/icon-login.gif') 100% 50% no-repeat;
	color:#999;
}

/** Introduction **/
#intro
{
	font-size:0.9em;
	width:289px;	
	position:absolute;
	z-index:1;
	top:15px;
	padding-top:35px;
	left:40px;
	height:8em;
	overflow:hidden;
	line-height:1.3em;
	color:#999;
}

#intro .logout
{
	position:absolute;
	top:0;
	left:0;
	height:1em;
}

#intro h2
{
	color:#c00;
	margin-bottom:0.2em;
}

/** Sidebar and sub navigation **/
#pre-content
{
	float:left;
	padding:15px;
	width:259px;
	background:url('../images/gradient.gif') repeat-x;
	min-height:396px;
	margin-top:-3px;
}

#pre-content h1
{
	background:#c00;
	margin:0 -15px 1em;
	padding:0 15px;
	font-size:1.25em;
	line-height:1.3em;
}

#pre-content ul
{
	font-size:1.3em;
	margin:0 -15px;
	padding:0;
	list-style:none;
}

#pre-content ul a
{
	display:block;
	padding:2px 15px;
	color:#fff;
}

#pre-content ul a:hover,
#pre-content ul a:focus,
#pre-content ul a:active
{
	color:#c00;
	text-decoration:none;
}

#pre-content ul li.selected a
{
	background:#c00;
}

#pre-content ul li.selected a:hover,
#pre-content ul li.selected a:focus,
#pre-content ul li.selected a:active
{
	background:#fff;
}

#pre-content ul ul
{
	margin:0;
	padding:1em 0 0.25em 0;
	font-size:0.7em;
	background:#333;
}

#pre-content ul ul a,
#pre-content ul li.selected ul a
{
	padding:0 0 0 20px;
	background:transparent;
}

#pre-content ul ul li.selected a,
#pre-content ul ul li.selected a:hover,
#pre-content ul ul li.selected a:focus,
#pre-content ul ul li.selected a:active
{
	background:url('../images/bullet.gif') 5px 50% no-repeat;
	color:#999;
}

#pre-content ul ul li a:hover,
#pre-content ul ul li a:focus,
#pre-content ul ul li a:active,
#pre-content ul li.selected ul a:hover,
#pre-content ul li.selected ul a:focus,
#pre-content ul li.selected ul a:active
{
	color:#999;
	background-color:transparent;
}

/** Main content **/
#content
{	
	position:relative;
	padding:15px;
	margin:23px 0 0 302px;
	width:561px;
	background:url('../images/gradient.gif') repeat-x;
	min-height:396px;
}

/** Copyright notice **/
#copyright
{
	position:absolute;
	bottom:5px;
	left:0;
	width:890px;
	text-align:right;
	font-size:0.8em;
	color:#777;
	
	clear:both;
}

/** Video player **/
#video-player
{
	background:url('../images/frame.png') 0 0 no-repeat;
	width:512px;
	height:327px;
	padding:47px 48px 47px 52px;
	position:absolute;
	left:50%;
	top:50%;
	margin:-215px 0 0 -306px;
}

#video-player .top-bar
{
	background:#c00;
	height:18px;
	border-bottom:1px solid white;
	position:relative;
}

#video-player .top-bar a.close
{
	color:#fff;
	cursor:pointer;
	background:url('../images/button-close.gif') 0 0 no-repeat;
	position:absolute;
	top:2px;
	left:2px;
	width:48px;
	height:0;
	padding-top:14px;
	overflow:hidden;
}

#video-player-flash
{
	width:512px;
	height:308px;
}

#video-player-flash p
{
	text-align:center;
	font-size:2em;
	padding:20px;
	background:#000;
	height:387px;
}



/* PAGE SPECIFIC STYLES
 * ----------------------------------- */
 
/** News page **/

.news .entry
{
	position:relative;
	clear:right;
	overflow:visible;
	margin:0 -8px 4em 0;
	padding-right:293px;
}

.news .entry .image-box
{
	position:relative;
	float:right;
	margin:-4em -293px 10px 13px;
}
 

/** Services page **/

.services-container
{
	margin-right:-8px;
}

dl.services
{
	width:270px;
}


/** Portfolio page **/

.portfolio-copy
{
	position:relative;
	margin-right:-8px;
	padding-right:293px;
}

.portfolio-copy .image-list
{
	margin-top:-4em;
	margin-right:-298px;
}

.portfolio-copy h3
{
	margin:0 70px 0 0;
}

.portfolio-copy a.video
{
	position:absolute;
	top:0;
	right:295px;
	width:61px;
	height:0;
	overflow:hidden;
	padding-top:11px;
	background:url('../images/button-play.gif') 0 0 no-repeat;
	cursor:pointer;
}

.portfolio-copy a.video:hover,
.portfolio-copy a.video:focus,
.portfolio-copy a.video:active
{
	border:1px solid #c00;
	margin:-1px -1px 0 0;
}


/** Clients page **/
ul.clients
{
	list-style:none;
	padding:0;
	margin:0 -11px;
}

ul.clients li
{
	position:relative;
	z-index:1;
	background:#333;
	float:left;
	width:139px;
	height:82px;
	border:1px solid #fff;
	margin:0 0 4px 4px;
	text-align:center;
}

ul.clients li.hover
{
	z-index:2;
}

ul.clients li.first
{
}

ul.clients li.last
{
	margin-right:0;
}

ul.clients li img
{
	vertical-align:bottom;
}

ul.clients li .details
{	
	position:absolute;
	top:20px;
	left:-150px;
	color:#fff;
	width:213px;
	margin:0;
	visibility:hidden;
	text-align:left;
	font-size:0.9em;
}

ul.clients li .top
{
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:50px;
	background:url('../images/details-box-top.png') 1px 0 no-repeat;
}

ul.clients li .inner
{
	position:absolute;
	width:100%;
	top:50px;
	padding-bottom:50px;
}

ul.clients li .copy
{
	width:123px;
	padding:0 45px;
	background:url('../images/details-box-mid.png') -1px 0 repeat-y;
}

ul.clients li .bottom
{
	position:absolute;
	left:0;
	bottom:0;
	height:50px;
	width:100%;
	background:url('../images/details-box-bottom.png') 0 0 no-repeat;
}

ul.clients li.hover .details
{
	visibility:visible;
}

 
/** Contact page **/

#pre-content .vcard a
{
	color:#fff;
}

#pre-content .vcard dd
{
	font-size:0.9em;
}

#pre-content .adr span
{
	display:block;
}

#content h2.contact-form
{
	font-size:1.25em;
	line-height:1.3em;
	margin:0 -15px 0.5em;
	padding:0 0 0 303px;
	background:url('../images/contact-header-gradient.gif') 0 0 repeat-y;
	color:#c00;
}




 /* CLIENT PAGE
 * ----------------------------------- */

.client-section
{
	float:left;
	margin:200px 12px 0 0;
	padding:15px;
	width:259px;
	background:url('../images/gradient.gif') 0 0 repeat-x;
	min-height:396px;
	position:relative;
}

.client-section h2
{
	position:absolute;
	top:-25px;
	left:0;
	width:289px;
	height:0;
	padding-top:20px;
	overflow:hidden;
	background-repeat:no-repeat;
	background-position:0 0;
}

#login h2 {background-image:url('../images/title-login.gif');}
#previews h2 {background-image:url('../images/title-previews.gif');}
#downloads h2 {background-image:url('../images/title-download.gif');}
#upload h2 {background-image:url('../images/title-upload.gif');}



.client-section ul
{
	margin:0;
	padding:0;
	list-style:none;
}

.client-section li
{
	border-bottom:1px dotted #4d4d57;
}

.client-section a
{
	color:#fff;
}

.client-section a:hover
{
	color:#f00;
	text-decoration:none;
}

#previews li,
#downloads li
{
	font-style:italic;
	padding-bottom:0.75em;
	margin-bottom:0.75em;
}

#previews a
{
	font-style:normal;
	display:block;
	font-size:1.3em;
}

#downloads .filename
{
	font-style:normal;
	font-size:1.3em;
}

#downloads .download
{
	float:right;
	font-size:0.8em;
	padding-top:0.7em;
	color:#f00;
}

#upload
{
	margin-right:0;
}

#upload form ol
{
	text-align:left;
}

#upload form .buttons
{
	margin-left:35px;
}

#upload li
{
	border:none;
}

/* Upload progress indicator */
#upload-progress
{
	width:300px;
	position:absolute;
	top:50%;
	left:50%;
	margin:-2em 0 0 -160px;
	border:1px solid #ccc;
	padding:10px;
	background:#000;
}

#progress-bar-container
{
	height:20px;
	border:1px solid #ccc;
	width:300px;
	background:#eee;
}

#progress-bar
{
	background:#c00;
	height:20px;
	width:0;
}

#upload-progress span
{
	display:block;
	font-size:small;
	margin-top:10px;
}

#upload-progress .file
{
	float:left;
	font-weight:bold;
}

#upload-progress .progress
{
	float:right;
}

/* Login form */
#login form ol
{
	text-align:left;
}

#login form label,
#login form input
{
	margin:0;
	display:block;
}

#login form input
{
	width:254px;
}

#login form .buttons
{
	margin:0;
}
 
 
 
 /* GENERAL ELEMENTS
 * ----------------------------------- */
 
/** Images and captions **/
ul.image-list
{
	position:relative;
	right:7px;
	list-style:none;
	padding:0;
	float:right;
	margin:0 -5px 10px 13px;
}

ul.image-list li.image-box
{
	margin-bottom:10px;
}

.image-box
{
	border:1px solid #fff;
	width:280px;
	background:#333;
}

.image-box .caption
{
	display:block;
	padding:0 5px 5px;
	text-align:right;
	font-style:italic;
	font-size:0.9em;
	color:#ddd;
}
 
/** Block elements **/
p
{
	margin:0 0 1em 0;
}

p.meta
{
	font-size:1.25em;
	color:#c00;
}

ul
{
	margin:0 0 1em 0;
	padding:0 0 0 1.5em;
	list-style:disc;
}

ol
{
	margin:0 0 1em 0;
	padding:0 0 0 1.5em;
	list-style:decimal;
}

li
{
	margin-bottom:0.25em;
}

dl
{
}

dt
{
	color:#c00;
	font-size:1.25em;
}

dd
{
	margin:0 0 1em 0;
}

blockquote
{
}

/** Form components **/
form ol
{
	list-style:none;
	padding:0;
	text-align:right;
}

form li
{
	padding-bottom:3px;
}

form input,
form textarea
{
	border:none;
	padding:2px;
	margin:0 0 0 13px;
	width:269px;
	vertical-align:top;
}

form label
{
	font-size:0.9em;
	line-height:1.4em;
}

form p.feedback
{
	font-weight:bold;
	margin-left:288px;
}

form .buttons
{
	margin-left:288px;
}

form button
{
	border:none;
	background:#c00;
	color:#fff;
	text-align:left;
	font:inherit;
	font-size:1em;
	padding:2px 5px;
	min-width:80px;
	cursor:pointer;
	margin:0 5px 0 0;
}

form button.reset
{
	background:#933;
}

form .fake-file-input
{
	display:inline;
	position:relative;
}

form .fake-file-input input.file
{
	opacity:0;
	position:absolute;
	top:0;
	left:0;
	margin:0;
	z-index:2;
}

form .fake-file-input input.fake-file
{
	position:absolute;
	top:0;
	left:0;
	width:130px;
	padding:3px 2px 2px;
}

form .fake-file-input button.fake-file
{
	position:absolute;
	top:0;
	left:150px;
}


/** Inline elements **/
a
{
	color:#c00;
	text-decoration:none;
}

a:hover,
a:active,
a:focus
{
	text-decoration:underline;
}

#content a
{
	color:#ededed;
	text-decoration:underline;
}

#content a:hover,
#content a:active,
#content a:focus
{
	color:#c00;
}

strong
{
	font-weight:bold;
}

em
{
	font-style:italic;
}

q
{
}

cite
{
	font-size:0.9em;
	font-style:italic;
}

del
{
	color:#ccc;
	text-decoration:line-through;
}

ins
{
	text-decoration:none;
	font-size:1.2em;
}

code
{
}

var
{
}

abbr
{
}

acronym
{
}

small
{
	font-size:0.8em;
}

big
{
	font-size:1.5em;
}


/** Headers **/
h1
{
	font-size:2em;
}

h2
{
	font-size:1.5em;
}

h3
{
	font-size:1.5em;
}

h4
{
	font-size:1.25em;
	font-weight:500;
	margin-bottom:0.2em;
	color:#eee;
}

h5
{
}

h6
{
}




/* HACKS AND TRICKS
 * ----------------------------------- */

.hidden
{
	position:absolute;
	top:-10000px;
	left:-10000px;
	font-size:0.1em;
	height:1px;
}

.clearfix:after 
{
	content:".";
	display:block;
	height:0;
	line-height:0;
	clear:both;
	visibility:hidden;
}
.clearfix {display:inline-block;}
/* Hide from IE/mac \*/
.clearfix {display:block;}
/* Stop hiding */

.clearfix-right:after 
{
	content:".";
	display:block;
	height:0;
	line-height:0;
	clear:right;
	visibility:hidden;
}
.clearfix-right {display:inline-block;}
/* Hide from IE/mac \*/
.clearfix-right {display:block;}
/* Stop hiding */