/* ------------------------------------------- 

 Hrabalcreative.com Styles
 Made by McWeen 

 Global Layout
 
---------------------------------------------- */

@charset "UTF-8";

html {
	height: 100%;
}

body {
	color: #333333;
	text-align: left;
	background: #fff url(../images/header_bg.gif) repeat-x;
	height: 100%;
	font: 10px/14px 'Lucida Grande', Arial, Helvetica, sans-serif;
}

body,div,p { margin:0; padding:0; }
img { border: 0; }

ul {
	list-style: none;
	padding: 0;
	margin: 0;
	overflow: hidden;
}

li { 
	float: none; 
	overflow: hidden; 
	font: 12px/19px 'Lucida Grande', Arial, Helvetica, sans-serif;
	padding: 0 10px 0 0;	
}

/* ----- UI ----- */

a {text-decoration: none;}

a:link, a:active, a:visited {
	color: #666;
	text-decoration: none;
	background-color: transparent;
}

a:hover {
	text-decoration: none;
	background-color: transparent;
}

a.thumb {background-color:#fff;}
a.thumb:active {background-color:#fff;}
a.thumb:visited {background-color:#ccc;}
a.thumb:hover {background-color:#666;}

a.banner {background-color:#fff;}
a.banner:active {background-color:#fff;}
a.banner:visited {background-color:#ccc;}
a.banner:hover {background-color:#fff; text-decoration: underline;}

a.agency {color: #004680; border-bottom: 1px solid #999;}
a.agency:active {color: #004680; border-bottom: 1px solid #999;}
a.agency:visited {color: #666; border-bottom: 1px solid #999;}
a.agency:hover {color: #f37322; border-bottom: 1px solid #666;}

a.news {color: #004680; border-bottom: 1px solid #ccc;}
a.news:active {color: #004680; border-bottom: 1px solid #ccc;}
a.news:visited {color: #666; border-bottom: 1px solid #ccc;}
a.news:hover {color: #f37322; border-bottom: 1px solid #ccc;}

a.pageui {color: #999; border-bottom: 1px solid #999;}
a.pageui:active {color: #999; border-bottom: 1px solid #999;}
a.pageui:visited {color: #999; border-bottom: 1px solid #999;}
a.pageui:hover {color: #f37322; border-bottom: 1px solid #666;}

a.cleanui {color: #999;}
a.cleanui:active {color: #999;}
a.cleanui:visited {color: #999;}
a.cleanui:hover {color: #000; border-bottom: 1px solid #666;}

a.emailui {color: #333;} /* border-bottom: 1px dotted #999; */
a.emailui:active {color: #333;}
a.emailui:visited {color: #999;}
a.emailui:hover {color: #004680; border-bottom: 1px solid #bababa;}

a.listui {color: #666;} /*004680*/
a.listui:active {color: #666;}
a.listui:visited {color: #999;}
a.listui:hover {color: #000; border-bottom: 1px solid #bababa;}

.floater { float: left; }
.clear { clear: both; }
.fullbox:after {
    content: "."; 
    display: block;
    height: 0;
    clear: both; 
    visibility: hidden;
}

.fullbox {display: inline-table;}

/* Hides from IE-mac \*/
* html .fullbox {height: 1%;}
.fullbox {display: block;}
/* End hide from IE-mac */

/* ----- Content Area ----- */

#page-wrapper {
	width: 900px; 
	margin: 0 auto; 
	padding: 0;
	min-height: 100%;
	height: auto !important;
	height: 100%;
	/* overflow: hidden; */
}

#content-wrapper {
	position:relative; 
	padding: 0;
	text-align: left;
	overflow:hidden;
}

#header {
	position:relative;
	width: 900px;
	height: 85px;
	margin: 0 left;
	padding: 0;
	text-align: left;
}

#logo {
	margin: 30px 0 0 0;
	padding: 0;
	float: right;
}

#nav {
	position: absolute;
	top: 40px;
	left: 0;
	/* width: 320px; */
	margin: 0;
	padding: 0;
	float: left;
	vertical-align: bottom;
}

#sub-nav {
	position: relative;
	width: 898px;
	height: 34px;
	margin: 0 0 20px 0;
	padding: 0;
	float: left;
	border-left: 1px solid #bfc5d3; /* bfc5d3 */
	border-right: 1px solid #bfc5d3;
	border-bottom: 1px solid #bfc5d3;
	background-color: #f1f3f8;
}

/* Width: 590px */

#main-content {
	position:relative;
	float: left;
	width: 574px;
	border-right: 1px solid #ccc;
	margin: 15px 0 0 0;
	padding: 0 0 0 15px;
	x-overflow: hidden;
}


/* ----- Pagination ----- */

#pagination-footer {
	position: relative;
	width: 893px; 
	margin: 15px 0 15px 0;
	height: 20px;
	padding: 15px 0 30px 7px;
	float: left;
}

#pagination-footer p {padding-left: 8px;}
#pagination-footer .left {width: 800px; float: left;}
#pagination-footer .right {width: 45px; float: left;}
#pagination-footer .spacer {height: 35px;}

#footer-small-spacer {
	position: relative; 
	height: 140px;
	width: 100%;
	overflow: hidden;
	clear: both;
}

#footer {
	position: relative;
	height: 67px;
	/* margin-top: -70px; */
	width: 100%;
	background: transparent url(../images/dsb.gif) repeat-x;
	overflow: hidden;
	clear: both;
}

#footer-contact {
	position: relative;
	bottom:0px; /* stick to bottom */
	padding: 0;
	height: 70px;
	margin-top: -70px;
	width: 100%;
	background: #f0f0f0 url(../images/footer_bg.gif) repeat-x;
	overflow: hidden;
}

.footer-content { width:885px; margin:0 auto; padding: 15px 0 0 15px; font-size: 10px; color: #999;}
.footer-content p { padding: 3px 0 0 0;}
.footer-content p .copy { padding: 3px 0 0 12px;}

/* ----- Work/Projects ----- */

#main-content .pagetitle {
	width: 540px;
	height: 25px;
	border-bottom: 1px solid #999;
}

#main-content .headercopy {
	width: 540px;
	padding: 30px 0 30px 0;
	border-bottom: 1px solid #ccc;
	font: 16px/22px 'HelveticaNeue', Arial, Helvetica, sans-serif;
	vertical-align: top;
	overflow: hidden;
}

#main-content .project {
	width: 540px;
	height: 180px;
	padding: 25px 0 25px 0;
	border-bottom: 1px solid #999;
	background: transparent url(../images/project_bottom.gif) left bottom repeat-x;
}

.project-start { margin-top: 15px; }
.project-odd { background-color: #f3f7fd; }

#main-content .project .thumb {
	width: 140px;
	height: 155px;
	float: left;
	padding: 0 15px 5px 0;
}

#main-content .project .title {
	width: 365px;
	height: 25px;
	float: right;
	font: 18px/22px 'HelveticaNeue', Arial, Helvetica, sans-serif;
	color: #f37322;
	border-bottom: 1px solid #e5e5e5;
	margin: 0 0 10px 0;
}

#main-content .project .desc {
	width: 365px;
	/* height: 85px; */
	float: right;
	color: #666;
	font: 12px/17px 'Lucida Grande', Arial, Helvetica, sans-serif;
}

.thumb-rule {
	width: 540px;
	height: 3px;
	float: left;
	padding: 0 0 1px 0;
	background-color: transparent;
	border-bottom: 1px solid #e5e5e5;
}

#leaderboard {
	width: 728px;
	height: 90px;
	background-color: #ffffff;
}

#rectangle {
	margin: 0;
	padding: 0;
	width: 300px;
	height: 250px;
	background-color: #ffffff;
}

/* ----- Side Content ----- */

/* Width: 310px */

#side-content {
	float: right;
	width: 265px;
	height: auto;
	margin: 15px 0 0 0;
	padding: 0 15px 0 30px;
	overflow: hidden;
}

.sidetitle {
	height: 25px;
	border-bottom: 1px solid #999;
}

#side-content .project {
	width: 265px;
	height: 70px;
	padding: 10px 0 10px 0;
	margin: 10px 0 0 0;
	border-bottom: 1px solid #ccc;
	/* background: transparent url(../images/project_bottom.gif) left bottom repeat-x; */
}

#side-content .project-start { margin-top: 10px; }
#side-content .project-odd { background-color: #f3f7fd; }

#side-content .project .thumb {
	width: 95px;
	height: 70px;
	float: left;
	padding: 0 10px 5px 0;
}

#side-content .project .title {
	width: 160px;
	height: 20px;
	float: right;
	font: 14px/16px 'HelveticaNeue', Arial, Helvetica, sans-serif;
	color: #666;
	border-bottom: 1px solid #e5e5e5;
	margin: 0 0 10px 0;
}

#side-content .project .desc {
	width: 160px;
	float: right;
	color: #666;
	font: 11px/16px 'Lucida Grande', Arial, Helvetica, sans-serif;
}

#side-content .project .thumbs {width: 160px; float: right;}

.colheader-main {height:25px;width: 540px;overflow:hidden;border-bottom:1px solid #d4d8e3;}
.colheader-side {height:25px;width: 265px;overflow:hidden;border-bottom:1px solid #d4d8e3;margin:0 0 15px 0;}

.tempspacer { 
	margin: 10px 0 0 0;
	}

.newstitle {
	margin: 0 0 6px 0;
	padding: 0;
	height: 35px;
	font: 26px/24px 'HelveticaNeue', Arial, Helvetica, sans-serif;
	color: #999;
	border-bottom: 1px solid #999;
}

.newsbuffer { height: 0px; }

.newsdate {
	padding: 10px 0 0 0;
	color: #333;
	font: 12px/18px 'HelveticaNeue', Arial, Helvetica, sans-serif;
}

.newsdesc {
	padding: 0 0 10px 0;
	color: #666;
	font: 11px/16px 'Lucida Grande', Arial, Helvetica, sans-serif;
	border-bottom: 1px solid #ccc;
}

.newitem {
	color: #004680;
}

/* ----- Services ----- */

#main-content .services {
	width: 540px;
	height: 100%;
	padding: 20px 0 25px 0;
	border-bottom: 1px solid #999;
}

.services-desc {
	color: #333;
	font: 16px/24px 'HelveticaNeue', Arial, Helvetica, sans-serif;
	height: auto;
}

.services-desc-promo {
	color: #333;
	font: 14px/20px 'HelveticaNeue', Arial, Helvetica, sans-serif;
	margin: 30px 0 0 0;
	padding: 15px 0 15px 0;
	/* background-color: #f5f5f5; */
	border-top: 1px solid #ccc;
}

.servicesname-start {
	width: 480px;
	height: 30px;
	float: left;
	font: 16px/24px 'HelveticaNeue', Arial, Helvetica, sans-serif;
	color: #f37322;
	padding: 25px 0 0 0;
}

.servicetitle {
	padding: 0;
	width: 480px;
	height: 30px;
	font: 16px/24px 'HelveticaNeue', Arial, Helvetica, sans-serif;
	color: #f37322;
}

/* Team Copy Layout */

#teampanel {
	width: 480px;
	height: 94px;
	padding: 15px 0 0 0;
	background-color: #f7f9fd;
	border-bottom: 1px solid #999;
}

/*
#main-content .team {
	width: 540px;
	height: 100%;
	padding: 20px 0 25px 0;
	border-bottom: 1px solid #999;
}
*/

.teamrule-top {
	width: 480px;
	height: 5px;
	background: transparent url(../images/teamrule_top.gif) no-repeat;
}

.teamrule-sides {
	width: 480px;
	height: 100%;
	margin: 0 auto;
	overflow: hidden;
	background: transparent url(../images/teamrule_sides.gif) repeat-y;
}

.teamrule-bottom {
	width: 480px;
	height: 5px;
	background: transparent url(../images/teamrule_bottom.gif) no-repeat;
}

ul.teamlist-left {
	width: 257px;
	height: auto;
	padding: 0 0 0 12px;
	font: 13px/20px 'HelveticaNeue', Arial, Helvetica, sans-serif;
	float: left;
}

ul.teamlist-right {
	width: 188px;
	height: auto;
	padding: 0 0 0 12px;
	font: 13px/20px 'HelveticaNeue', Arial, Helvetica, sans-serif;
	/* font: 12px/19px 'Lucida Grande', Arial, Helvetica, sans-serif; */
	float: left;
	border-left: 1px solid #e5e5e5;
}

#main-content .team {
	width: 540px;
	padding: 10px 0 12px 0;
	overflow: hidden;
}

.teamspacer {
	width: 590px;
	height: 25px;
	background-color: #fff;
}

.name {
	padding: 10px 0 0 0;
	width: 540px;
	height: 30px;
	float: left;
	font: 16px/24px 'HelveticaNeue', Arial, Helvetica, sans-serif;
	color: #f37322;
}

.desc {
	color: #333;
	font: 12px/18px 'Lucida Grande', Arial, Helvetica, sans-serif;
}

.note {
	margin: 12px 0 0 0;
	padding: 0 40px 0 0;
	color: #666;
	font: 11px/16px 'Lucida Grande', Arial, Helvetica, sans-serif;
	font-weight: bold;
	/* border-left: 1px solid #e5e5e5; */
}

.notedesc {
	margin: 0 0 0 0;
	padding: 0 20px 0 0;
	color: #666;
	font: 11px/16px 'Lucida Grande', Arial, Helvetica, sans-serif;
	/* border-left: 1px solid #e5e5e5; */
}

.email {
	margin: 15px 0 0 0;
	padding: 6px 0 6px 0;
	width: 540px;
	color: #333;
	font: 10px/16px 'Lucida Grande', Arial, Helvetica, sans-serif;
	border-top: 1px solid #e5e5e5;
	border-bottom: 1px solid #999;
	float: left;
}

.contactui { width: 25px; height: 16px; float: left; background: url(../images/hrabalui_email.gif) no-repeat;}
.emailaddr { width: 404px; height: 16px; float: left; }
.emailtop { width: 38px; height: 16px; float: right; text-align: right; padding: 0 12px 0 0;}


/* ----- Contact ----- */

#contact {
	width: 540px;
	padding: 12px 0 0 0;
	margin: 8px 0 30px 0;
	border-bottom: 1px solid #ccc;
}

#main-content .contact {
	width: 540px;
	height: 100%;
	padding: 25px 0 25px 0;
	/* border-bottom: 1px solid #999; */
}

/* ----- Video Overlay (YouTube Integration) ----- */

.video-overlay { position:absolute; left:0; top:0; width:100%; height:100%; z-index:1; }

.video-lightbox { position:absolute; top:50%; left:50%; margin-left:-275px; z-index:2; width:550px; height:440px; background: url(../video/images/video-overlay.png) center center no-repeat; }
.video-lightbox .close-button { position:absolute; left:503px; top:30px; } /* left:40px; */
.video-lightbox .flash-content { margin:40px 0 0 75px; background:url(../video/images/small-spinner.gif) 190px center no-repeat; }
.video-lightbox .close_gif { display:none; }


/* ----- Twitter Newsfeed ----- */ 

#twitter_update_list a {color: #004680;}
#twitter_div p {padding:5px 0 5px 0; border-bottom:1px solid #ccc;}
#twitter_update_list li {
	font: 10px/14px 'Lucida Grande', Arial, Helvetica, sans-serif;
	color: #666;
	padding:7px 0 7px 0;
	margin:0;
	border-bottom:1px solid #ccc;
}
#twitter_div p a {
	color:#004680; 
	font: 10px/14px 'Lucida Grande', Arial, Helvetica, sans-serif;
	}