/* CSS Document */
/* KULBARDI PRODUCTIONS */




/* PEERLESS */

* {
	margin:0;
	padding:0;}

body {
	background:#000 url(../images/bg2.jpg) no-repeat center top ;
	font:normal 11px/18px Arial, Helvetica, sans-serif;
	color:#b1b1b1;}

a {
	color:#ff0000;
	text-decoration:none;}
	
a:hover {
	text-decoration:underline;}

h1, h2 {
	padding:0 0 0 30px;
	margin:0;
	background:url(../images/title/arrow.gif) no-repeat left top;
	height:20px;}

h2 {
	color:#ff0000;
	font-weight:bold;
	font-size:11px;}
	
h4 {
	color:#fff;
	font-size:11px;
	font-weight:normal;
	margin:0 0 16px 0;}

h5 {color:#fff;
	font-size:12px;
	font-weight:normal;
	margin:0 0 16px;}

p {
	margin:0 0 16px 0;}

#container {
	width:750px;
	margin:auto;}

#nav-bg {
	background:url(../images/bg-nav.gif) repeat-x top;}

#showreel {
	width:550px;
	height:400px;
	margin:auto;
	padding:100px 0 0 0;}



/* NAVIGATION */

#nav { width:750px; height:38px; padding:8px 0 0 0;}
#nav ul { list-style-type:none; }
#nav ul li { float:left; }
#nav ul li a {	height:38px; display:block; text-decoration:none; } 
#nav ul li a:hover { background-position:0 -38px !important; } 
#nav ul li.active a { background-position:0 -38px !important; }

#nav ul li#home a {	background:url(../images/nav/home.gif);	width:101px; }
#nav ul li#company-profile a { background:url(../images/nav/company-profile.gif); width:161px; }
#nav ul li#pre-media a { background:url(../images/nav/pre-media.gif); width:127px; }
#nav ul li#services a {	background:url(../images/nav/services.gif); width:113px; }
#nav ul li#our-work a {	background:url(../images/nav/our-work.gif); width:119px; }
#nav ul li#contact-us a {	background:url(../images/nav/contact-us.gif); width:129px; }

.hidden { display:none;}



/* HEADER */

#logo {
	width:504px;
	padding:41px 0 25px 246px;}

#flash-placeholder {
	width:750px;}



/* CONTENT AREA */

#content-area {
	width:750px;
	margin:28px 0 0 0;}
	
#content-left {
	width:237px;
	float:left;}	
	
#content-right {
	width:494px;
	float:left;
	padding:0 0 0 19px;}

#cta-services {
	width:177px;
	height:37px;
	background:url(../images/cta-services.gif) no-repeat left top;
	padding:40px 0 0 60px;
	margin:0 0 19px 0;}

#cta-work {
	width:177px;
	height:37px;
	background:url(../images/cta-work.gif) no-repeat left top;
	padding:40px 0 0 60px;
	margin:0 0 19px 0;}
	
#cta-showreel {
	width:177px;
	height:37px;
	background:url(../images/cta-showreel.gif) no-repeat left top;
	padding:40px 0 0 60px;
	margin:0 0 19px 0;}

#left-text-panel {
	width:235px;
	padding:0 0 0 2px;}

.right-text-panel {
	width:492px;
	padding:0 0 20px 2px;}
	




/* CONTENT AREA TEXT STYLES */

#content-area ul {
	list-style-type:none;
	margin:0 0 16px 0;
	display:block;}
	
ul.two-column {
	width:246px;
	float:left;}	
	
#content-area li {
	background:url(../images/arrow.gif) no-repeat 15px 7px;
	padding:0 0 0 30px;}
	
#content-area h3 {
	color:#fff;
	font-weight:bold;
	font-size:12px;}	




/* TITLES */

.left-title {
	width:237px;
	background:url(../images/title/bg.gif) repeat-x top;
	margin:30px 0 20px 0;}

.right-title {
	width:494px;
	background:url(../images/title/bg.gif) repeat-x top;
	margin:0 0 20px 0;}
	
	
	
/* OUR WORK PAGE */

.our-work-item {
	width:492px;
	padding:0 0 0 2px;
	margin:0 0 20px 0;
	border-bottom:1px dotted #222;}
	
.our-work-pic {
	width:110px;
	float:left;
	margin:0 20px 0 0;}
	
.our-work-content {
	width:342px;
	float:left;}	
	
	
	
/* CONTACT PAGE */

#contact-form {
	margin:0 0 20px 0;}

.contact-form-row {
	width:494px;
	margin:0 0 10px 0;}
	
.contact-form-left {
	width:148px;
	float:left;
	padding:0 0 0 2px;}
	
.contact-form-right {
	width:324px;
	float:left;
	padding:0 0 0 20px;}	
	
.field {
	width:200px;
	height:15px;
	background:#0e0e0e;
	border:1px solid #222;
	color:#aaa;
	font-size:11px;}
	
.select {	
	height:15px;
	background:#0e0e0e;
	border:1px solid #222;
	color:#aaa;
	font-size:11px;}	
	
	

/* FOOTER */

#footer {
	width:750px;
	text-align:center;
	font-size:10px;
	color:#fff;
	height:42px;
	background:url(../images/footer-bottom.gif) no-repeat center bottom;
	margin:20px 0 20px 0;}
	
#footer a {
	color:#fff;
	text-decoration:none;
	padding:0 0 0 10px;}
	
#footer a:hover {
	text-decoration:underline;}



/* CLEARFIX */

.clearfix:after {
    content: "."; 
    display: block; 
    height: 0; 
    clear: both; 
    visibility: hidden;}

.clearfix {display: inline-block;}

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