/*
	NAME: NorthStar Media Inc.
	DATE: Jan. 28, 2010
	DESCRIPTION: NorthStar Media Inc Website
	URL: http://www.northstarmediainc.com
	VERSION: 2.0
	DESIGNER: Ryan Bradley
	CODER / PROGRAMMER: Andrew Champ
*/


/*----------GLOBAL RESETS----------*/
*{
	padding:0;
	margin:0;
	outline:0;
	border:0;
}


/*----------GLOBAL DEFAULTS----------*/
html{
	min-height:100%;
	height:auto;
	overflow-y:scroll;
}

body{
	background:#212121 url(../images/bg.jpg) top left fixed no-repeat;
	font-family: Arial, Verdana, sans-serif;
	font-size:12px;
	letter-spacing:1px;
	color:#FFFFFF;
}

a{color:#999; text-decoration:none;}
a:hover{color:#666666;}

::selection{background:#F7EC21; color:#000;}
::-moz-selection{background:#F7EC21; color:#000;}

/* :target{
	box-shadow: 0px 0px 10px #000;
	-webkit-box-shadow: 0px 0px 10px #000;
	-moz-box-shadow: 0px 0px 10px #000;
} */


/*----------ALL YOUR BASE ARE BELONG TO US----------*/
#container{
	width:870px;
	height:auto;
	margin:0 auto;
	text-align:left;
}


/*----------SIDEBAR STYLES----------*/
#sidebar{
	width:255px;
	height:100%;
	float:left;
	background:url(../images/sidebar-bg.jpg) top center repeat-y;
	overflow:hidden;
	padding-bottom:600px;
	border-radius:0 0 20px 20px;
	-moz-border-radius:0 0 20px 20px;
	-webkit-border-radius:0 0 20px 20px;
}

#sidebar h1 a{
	display:block;
	text-indent:-9999px;
	background:url(../images/nsm-logo_1.png) top center no-repeat;
	width:250px;
	height:190px;
}

#sidebar h2{ /*PORTFOLIO TITLE*/
	text-indent:-9999px;
	background:url(../images/sidebar-portfolio_title.png) 50% 50% no-repeat;
	display:block;
	width:231px;
	height:32px;
	margin:30px 0 10px 12px;
}

#sidebar h3{ /*CLIENTS ONLY TITLE*/
	text-indent:-9999px;
	background:url(../images/sidebar-clientsonly_title.png) 50% 50% no-repeat;
	display:block;
	width:229px;
	height:34px;
	margin:30px 0 10px 12px;
}

#sidebar li{
	list-style-type:none;
	width:100%;
}
	#sidebar li a{
		display:block;
		padding:14px 0 10px 10px;
		margin:5px 0 5px 0; /* ieonly.css has IE version of this margin */
		color:#FFF;
		font-size:15px;
		text-transform:uppercase;
		letter-spacing:1px;
		width:245px;
		background:url(../images/sidebar-nav_bg.png) no-repeat;
		background-position:0 0;
	}
	#sidebar li a:hover{background-position:0 -40px;}
	#sidebar li a:active{background-position:0 -80px; color:#1C1C1C;}


/*----------MAIN CONTENTS----------*/
#wrapper{
	width:530px;
	height:auto;
	float:right;
	background:#333 url(../images/wrapper-bg.png) top left no-repeat;
	padding:0 24px 0 24px;
}

.bigbutton{
	background:url(../images/buttons-onlinespecials.png) no-repeat;
	display:inline-block;
	width:339px;
	height:34px;
	text-align:center;
	margin:14px 0 0 0;
	padding:9px 0 0 0;
	float:left;
	text-transform:uppercase;
	font-size:10px;
	cursor:pointer;
	color:#FFF;
}
	.bigbutton a{color:#FFF; display:block;}
	.bigbutton:hover{color:#CCC;}
	.bigbutton:active{position:relative; top:1px;}

.smallbutton{
	background:url(../images/buttons-small_bg.jpg) no-repeat;
	display:inline-block;
	width:86px;
	height:34px;
	text-align:center;
	margin:14px 0 0 8px;
	padding:9px 0 0 0;
	float:right;
	text-transform:uppercase;
	font-size:10px;
	cursor:pointer;
	color:#FFF;
}
	.smallbutton a{color:#FFF; display:block;}
	.smallbutton:hover{color:#CCC;}
	.smallbutton:active{position:relative; top:1px;}
	
.button{ /*Change Request - CMS button*/
	background:url(../images/buttons_bg.jpg) top center repeat-x;
	display:inline-block;
	width:150px;
	height:27px;
	text-align:center;
	line-height:2.2;
	border:1px solid #FCE700;
	color:#534A00;
	font-weight:bold;
}
	.button a{color:#4C4400;}
	.button:hover{color:#2B2700;}
	.button:active{position:relative; top:1px;}
.extracushion{margin-left:120px;}
.forthepushin{margin-left:190px;}

#masthead{
	margin:150px 0 0 0;
	display:block;
	width:100%;
}

.latestproject{
	display:inline-block;
	background:url(../images/wrapper-latestproject.png) 50% 50% no-repeat;
	width:173px;
	height:40px;
}

.latestclient{
	display:inline-block;
	background:url(../images/wrapper-latest_parkan.png) 50% 50% no-repeat;
	width:191px;
	height:40px;
	margin-left:12px;
}

#wrapper h1{
	background:url(../images/wrapper-title_bg.jpg) no-repeat;
	width:100%;
	height:42px;
	display:block;
	line-height:1.9;
	padding:0 0 0 10px;
	margin:30px 0 30px 0;
	font-weight:normal;
	font-size:22px;
	text-transform:uppercase;	
	color:#CB262C;
}
	#wrapper h1 img{float:right; margin:5px 20px 0 0;}
	#wrapper h1 img:active{position:relative; top:1px;}
	
#wrapper h2{
	width:100%;
	display:block;
	padding:10px 0 20px 0;
	font-weight:normal;
	font-size:14px;
	text-transform:uppercase;
	color:#B5B5B5;
}
	#wrapper h2 span{
		font-size:10px;
		color:#FFF;
		float:right;
	}

#wrapper h3{
	width:100%;
	display:block;
	padding:20px 0 10px 0;
	font-weight:bold;
	font-size:14px;
	text-transform:uppercase;
	color:#F7EC21;
}
	
#wrapper p{
	margin:0;
	line-height:1.3;
	padding:0 0 20px 0;
}
	#wrapper p span{
		font-weight:bold;
		text-transform:uppercase;
	}

.clickymcgee:hover{opacity:0.85;} /* ieonly.css has IE version of opacity */
	
#web{display:block; overflow:hidden; padding:20px 0 0 0;}
	#web .left{float:left; width:48%;}
	#web .right{float:right;	width:48%;}
	
#thanks{
	background:url(../images/wrapper-thanks_bg.jpg) 50% 50% no-repeat;
	width:100%;
	height:56px;
	text-indent:-9999px;
	margin-top:500px;
}

.center{
	margin:0 auto;
	text-align:center;
	padding:10px 0 0 0;
}

#copyright{
	text-transform:uppercase;
	text-align:center;
	color:#666;
	font-size:12px;
	padding:30px 0 40px 0;
}


/*==========================================================*/


/*Contact Form*/
#contact p, label, legend { font-size: 12px; }
#contact h1 { margin: 10px 0 10px; font-size: 16px; color: #FFF; }
#contact hr { color: inherit; height: 0; margin: 6px 0 6px 0; padding: 0; border: 1px solid #d9d9d9; border-style: none none solid; }
#contact { display: block; width: 520px; margin: 0 auto; padding: 0;}

/* Form style */
#contact label { display: inline-block; float: left; height: 26px; line-height: 26px; width: 105px; font-size: 14px;}
#contact input, select { width: 350px; margin: 0; padding: 5px; color: #000; background-color: #DFDFDF; border: 1px solid #000; margin: 5px 0; font:14px "Lucida Grande", "Lucida Sans Unicode", Arial, sans-serif;}
#contact textarea{ width: 280px; margin: 0; padding: 5px; color: #000; background-color: #DFDFDF; border: 1px solid #000; margin: 5px 0; font:14px "Lucida Grande", "Lucida Sans Unicode", Arial, sans-serif;}
#contact input:focus, textarea:focus, select:focus { border: 1px solid #000; background-color: #FFF; color:#333; }
#contact input.submit { width: 85px; cursor: pointer; border: 1px solid #222; background:#333; color:#fff; }
#contact input.submit:hover { background:#444; }
#contact input[type="submit"][disabled] { background:#888; }
#contact fieldset { padding:20px;}
#contact legend { padding:7px 10px; font-weight:bold; color:#000; margin-bottom:0 !important; margin-bottom:20px; }
#contact span.required{ font-size: 13px; color: #ff0000;} /* Select the colour of the * if the field is required. */
#message { margin: 10px 0; padding: 0; }
.error_message { display: block; height: 22px; line-height: 22px; background: #FBE3E4 url('../images/error.gif') no-repeat 10px center; padding: 3px 10px 3px 35px; color:#8a1f11;border: 1px solid #FBC2C4;}
.loader { padding: 0 10px; }
#contact #success_page h1 { background: url('../images/success.gif') left no-repeat; padding-left:22px; }
acronym { border-bottom:1px dotted #ccc; }


	
/*==========================================================*/

/* use a semi-transparent image for the overlay */
#overlay{
	background-image:url(../images/transparent.png);
	color:#efefef;
	height:450px;
}

/* container for external content. uses vertical scrollbar, if needed */
.contentWrap{
	height:441px;
	overflow-y:auto;
}



/* the overlayed element */
.apple_overlay{
	display:none; /* initially overlay is hidden */
	background-image:url(../images/white.png); /* growing background image */
	width:640px;  /* width after the growing animation finishes, height is automatically calculated */	
	padding:50px; /* some padding to layout nested elements nicely  */
	font-size:11px; /* a little styling */
}

/* default close button positioned on upper right corner */
.apple_overlay div.close{
	background-image:url(../images/close.png);
	position:absolute; right:5px; top:5px;
	cursor:pointer;
	height:35px;
	width:35px;
}




#outside-in h4{
	font-size:18px;
	text-align:center;
	border-bottom:1px dotted #F2EC20;
	text-transform:uppercase;
	color:#F2EC20;
	padding:5px;
	margin:5px;
}




#error{padding:100px 0 100px 0;}
#error h2{
	font-size:24px;
	color:#FFF;
	text-align:center;
	font-style:italic;
	text-shadow:1px 1px 10px #000;
	-moz-text-shadow:1px 1px 10px #000;
	padding:0 0 20px 0;
	margin:0 0 40px 0;
}
#error span{padding:0 10px 0 0;}
	#error span.red{color:#FF0000;}
	#error span.green{color:#66EF00;}
#error .status{
	padding:10px;
	margin:0 0 30px 0;
	background:#222;
	border:1px solid #111;
}
	#error .status a{color:#FFF; font-weight:bold; text-transform:uppercase; border-bottom:1px dotted #FFF;}
	#error .status a:hover{color:#CCC; border-bottom:1px dotted #CCC;}







.hidethisshit{text-indent:-9999px; position:absolute;}





/* Down w/ IE */