/* -----------------------------------------------------------------------------------
--------------------------------------------------------------------------------------
	
	Domain: www.missderringer.com
	Stylesheet: main.css
	Author: Brent White, chicowebdesign.com
	Version: JULY 11, 2010
	
--------------------------------------------------------------------------------------
----------------------------------------------------------------------------------- */

/* ----------------------------------------------------------------------------------- 
GLOBAL RESET
----------------------------------------------------------------------------------- */
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, font, 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, textarea, table, br, caption, input, tbody, tfoot, thead, tr, th, td {margin: 0;padding: 0;border: none;font-size: 100%;vertical-align: baseline;background: transparent;zoom: 1;text-decoration: none;font-family: "Trebuchet MS", Trebuchet, arial, sans-serif;}
body {line-height: 1;}
ul li {list-style: none;}
ol li { list-style: inside decimal !important; display: list-item !important; }
blockquote, q {quotes: none;}
:focus, :active, a:focus, a:active {outline: none;}
input[type="submit"]::-moz-focus-inner, input[type="button"]::-moz-focus-inner { border: 0; }
input[type="submit"]:focus, input[type="button"]:focus, { outline: none; }
img {display: block;}

/* -----------------------------------------------------------------------------------
CLEAR CLASS FOR FLOATING CHILD ELEMENTS 
----------------------------------------------------------------------------------- */
.clear:after {content: "."; display: block; height: 0; clear: both; visibility: hidden;}
* html .clear {height: 1%;}
.clear {display: block;}
/* -----------------------------------------------------------------------------------
CLEAR SPAN FOR FLOATING ELEMENTS WITH NO WRAPPER 
----------------------------------------------------------------------------------- */
span.clear{clear: both;height: 0;overflow: hidden;}

/* ----------------------------------------------------------------------------------- 
GENERAL STYLES
----------------------------------------------------------------------------------- */
.fleft{float:left;}
.fright{float:right;}
.fnone{float:none;}
.tleft{text-align:left;}
.tright{text-align:right;}
.tcenter{text-align:center;}

/* -----------------------------------------------------------------------------------
HTML
----------------------------------------------------------------------------------- */
html {
	display: block;
	width: 100%;
	height: 100%;
	}
/* -----------------------------------------------------------------------------------
BODY
----------------------------------------------------------------------------------- */
body {
	background: #000000 url(/ui/image/layout/body.jpg) no-repeat fixed 50% 0;
	min-width: 990px;
	font-size: 12px;
	line-height: 15px;
	color: #334148;
	}
	
/* -----------------------------------------------------------------------------------
COMING SOON
----------------------------------------------------------------------------------- */
#coming_soon {
	position: absolute;
	top: 50%;
	left: 50%;
	background: rgba(0,0,0,0.9) url(/ui/image/layout/logo.png) no-repeat 65px 20px;
	width: 600px;
	height: 100px;
	margin: -150px 0 0 -300px;
	padding: 200px 0 0;
	text-align: center;
	text-transform: uppercase;
	color: #ffffff;
	font-weight: bold;
	letter-spacing: -1px;
	font-size: 16px;
	border-radius: 10px;
	-moz-border-radius: 10px;
	-webkit-border-radius: 10px;
	}
			
/* -----------------------------------------------------------------------------------
CONTAINER
----------------------------------------------------------------------------------- */
.container {
	position: relative;
	width: 980px;
	margin: 0 auto;
	}
/* -----------------------------------------------------------------------------------
MODULE
----------------------------------------------------------------------------------- */
.module {
	position: relative;
	top: -50px;
	background: #252525;
	background: rgba(37,37,37,0.9);
	}
	
/* -----------------------------------------------------------------------------------
HEADER -- LOGO
----------------------------------------------------------------------------------- */
#header .logo {
	display: block;
	background: url(/ui/image/layout/logo.png) no-repeat 0 0;
	width: 440px;
	height: 145px;
	margin: 35px 50px 60px;
	overflow: hidden;
	text-indent: -9999px;
	}
/* -----------------------------------------------------------------------------------
HEADER -- NAVIGATION
----------------------------------------------------------------------------------- */
#header .navigation {
	display: block;
	background: #000000;
	background: rgba(0,0,0,0.9);
	margin: 0 0 20px;
	}
	#header .navigation li {
		display: block;
		float: left;
		}
		#header .navigation li a {
			display: block;
			float: left;
			font-weight: bold;
			font-size: 25px;
			line-height: 50px;
			text-transform: uppercase;
			letter-spacing: -2px;
			color: #7f796b;
			}
		#header .navigation li a {
			display: block;
			float: left;
			padding: 0 40px;
			font-weight: bold;
			font-size: 25px;
			line-height: 50px;
			text-transform: uppercase;
			letter-spacing: -3px;
			color: #7f796b;
			}
		#header .navigation li a:hover {
			color: #ffffff;
			}
		#header .navigation li a.active {
			background: #571032;
			color: #ffffff;
			cursor: default;
			}
/* -----------------------------------------------------------------------------------
CONTENT
----------------------------------------------------------------------------------- */
#content {
	background: #000000;
	background: rgba(0,0,0,0.8);
	margin-top: 50px;
	}

/* -----------------------------------------------------------------------------------
HEADING
----------------------------------------------------------------------------------- */
.heading {
	display: block;
	padding: 10px 25px;
	font-weight: bold;
	font-size: 20px;
	line-height: 40px;
	color: #7f796b;
	text-transform: uppercase;
	letter-spacing: -2px;
	cursor: default;
	}
	.heading strong {
		color: #ffffff;
		}

/* -----------------------------------------------------------------------------------
SUBJECT MATTER
----------------------------------------------------------------------------------- */
.subject_matter {
	padding: 25px;
	}
	/* -----------------------------------------------------------------------------------
	SUBJECT MATTER > (STYLES) -- H1
	----------------------------------------------------------------------------------- */
	.subject_matter h1 {
		padding: 5px 0;
		font-weight: bold;
		font-size: 20px;
		line-height: 26px;
		color: #ffffff;
		}
	/* -----------------------------------------------------------------------------------
	SUBJECT MATTER > (STYLES) -- H2
	----------------------------------------------------------------------------------- */
	.subject_matter h2 {
		display: block;
		padding: 0 0 10px;
		font-weight: bold;
		font-size: 30px;
		line-height: 34px;
		letter-spacing: -2px;
		color: #ffffff;
		}
	/* -----------------------------------------------------------------------------------
	SUBJECT MATTER > (STYLES) -- H3
	----------------------------------------------------------------------------------- */
	.subject_matter h3 {
		display: block;
		padding: 0 0 10px;
		font-weight: bold;
		font-size: 26px;
		line-height: 30px;
		color: #ffffff;
		}
	/* -----------------------------------------------------------------------------------
	SUBJECT MATTER > (STYLES) -- H4
	----------------------------------------------------------------------------------- */
	.subject_matter h4 {
		display: block;
		padding: 0 0 10px;
		font-weight: bold;
		font-size: 20px;
		line-height: 24px;
		color: #ffffff;
		}
	/* -----------------------------------------------------------------------------------
	SUBJECT MATTER > (STYLES) -- H5
	----------------------------------------------------------------------------------- */
	.subject_matter h5 {
		display: block;
		padding: 0 0 15px;
		font-weight: bold;
		font-size: 16px;
		line-height: 20px;
		color: #ffffff;
		}
	/* -----------------------------------------------------------------------------------
	SUBJECT MATTER > (STYLES) -- h6
	----------------------------------------------------------------------------------- */
	.subject_matter h6 {
		display: block;
		padding: 0 0 15px;
		font-weight: bold;
		font-size: 12px;
		line-height: 16px;
		color: #ffffff;
		}
	/* -----------------------------------------------------------------------------------
	SUBJECT MATTER > (STYLES) -- A
	----------------------------------------------------------------------------------- */
	.subject_matter a {
		text-decoration: none;
		color: #571032;
		}
	.subject_matter a:hover {
		color: #87104b;
		text-decoration: underline;
		}
	/* -----------------------------------------------------------------------------------
	DIVISION -- BODY > (STYLES) -- A . BUTTON
	----------------------------------------------------------------------------------- */
	.button {
		display: -moz-inline-box;
		display: inline-block;
		position: relative;
		margin: 10px auto;
		border-style: solid;
		border-width: 1px;
		border-radius: 2px;
		-webkit-border-radius: 2px;
		-moz-border-radius: 2px;
		font-weight: normal;
		text-decoration: none;
		text-shadow: 0 2px 2px rgba(0, 0, 0, 0.25);
		text-align: center;
		cursor: pointer;
		height: auto;
		text-indent: 0;
		}
	.button:hover {
		color: inherit;
		text-decoration: none !important;
		/* text-shadow: 0 -2px -2px rgba(0, 0, 0, 0.25); */
		}
		/* -----------------------------------------------------------------------------------
		DIVISION -- BODY > (STYLES) -- A . BUTTON > (TYPES)
		----------------------------------------------------------------------------------- */
		.button.type_01 {
			font-size: 16px;
			line-height: 16px;
			padding: 8px 15px;
			}
		/* -----------------------------------------------------------------------------------
		DIVISION -- BODY > (STYLES) -- A . BUTTON > (STYLES)
		----------------------------------------------------------------------------------- */
		.button.style_01 {
			background-color: #571032;
			border-color: #6b2c4a #43001a #350008 #611e3e;
			color: #ffffff !important;
			}
		.button.style_01:hover {
			background-color: #87104b;
			}
		.button.style_02 {
			background-color: #ecf6ff;
			background-image: url(/design/ui/image/layout/button/style_02.gif);
			border-color: #f1f9ff #a3a9af #74787d #bbc1c7;
			color: #152129 !important;
			}
	/* -----------------------------------------------------------------------------------
	SUBJECT MATTER > (STYLES) -- P
	----------------------------------------------------------------------------------- */
	.subject_matter p {
		color: #ffffff;
		padding: 5px 0 15px;
		line-height: 20px;
		font-size: 12px;
		text-transform: none;
		}
	/* -----------------------------------------------------------------------------------
	SUBJECT MATTER > (STYLES) -- IMG
	----------------------------------------------------------------------------------- */
	.subject_matter img {
		border: solid 10px;
		border-color: #1c1c1c;
		}
	.subject_matter img.fleft {
		margin: 0 0 30px 30px;
		}
	.subject_matter img.fright {
		margin: 0 0 30px 30px;
		}
	/* -----------------------------------------------------------------------------------
	SUBJECT MATTER > (STYLES) -- UL
	----------------------------------------------------------------------------------- */
	.subject_matter ui {
		display: block;
		padding: 0 0 10px;
		}
	/* -----------------------------------------------------------------------------------
	SUBJECT MATTER > (STYLES) -- OL
	----------------------------------------------------------------------------------- */
	.subject_matter ol {
		display: block;
		padding: 0 0 10px;
		}
	/* -----------------------------------------------------------------------------------
	SUBJECT MATTER > (STYLES) -- LI
	----------------------------------------------------------------------------------- */
	.subject_matter li {
		padding: 0 0 10px;
		}
	/* -----------------------------------------------------------------------------------
	SUBJECT MATTER > (STYLES) -- UL -- LI
	----------------------------------------------------------------------------------- */
	.subject_matter ul li {
		background: url(/design/ui/image/layout/content/list_item.gif) no-repeat 0 6px;
		padding-left: 10px;
		}
	/* -----------------------------------------------------------------------------------
	SUBJECT MATTER > (STYLES) -- FIELDSET
	----------------------------------------------------------------------------------- */
	.subject_matter fieldset {
		display: block;
		}
		/* -----------------------------------------------------------------------------------
		SUBJECT MATTER > (STYLES) -- FIELDSET -- LEGEND
		----------------------------------------------------------------------------------- */
		.subject_matter legend {
			display: none;
			}
		/* -----------------------------------------------------------------------------------
		SUBJECT MATTER > (STYLES) -- FIELDSET -- HIDDEN
		----------------------------------------------------------------------------------- */
		.subject_matter fieldset .hidden {
			display: none;
			}
		/* -----------------------------------------------------------------------------------
		SUBJECT MATTER > (STYLES) -- FIELDSET -- REQUIRED
		----------------------------------------------------------------------------------- */
		.subject_matter fieldset .required {
			color: #ff0000;
			}
		/* -----------------------------------------------------------------------------------
		SUBJECT MATTER > (STYLES) -- FIELDSET -- SET
		----------------------------------------------------------------------------------- */
		.subject_matter fieldset .set {
			display: block;
			padding: 0 0 10px;
			}
		/* -----------------------------------------------------------------------------------
		SUBJECT MATTER > (STYLES) -- FIELDSET -- FIELD
		----------------------------------------------------------------------------------- */
		.subject_matter fieldset .field {
			display: block;
			padding: 0 0 5px;
			}
		/* -----------------------------------------------------------------------------------
		SUBJECT MATTER > (STYLES) -- FIELDSET --  LABEL
		----------------------------------------------------------------------------------- */
		.subject_matter fieldset div label {
			display: block;
			float: left;
			color: #ffffff;
			width: 180px;
			padding: 10px 20px 10px 0;
			font-size: 18px;
			line-height: 18px;
			text-align: right;
			}
		/* -----------------------------------------------------------------------------------
		SUBJECT MATTER > (STYLES) -- FIELDSET -- INPUT
		----------------------------------------------------------------------------------- */
		.subject_matter fieldset div .input {
			display: block;
			float: left;
			background: #111111;
			width: 400px;
			padding: 10px;
			border: solid 1px #333333;
			font-size: 16px;
			line-height: 20px;
			color: #cccccc;
			}
		/* -----------------------------------------------------------------------------------
		SUBJECT MATTER > (STYLES) -- FIELDSET -- TEXTAREA
		----------------------------------------------------------------------------------- */
		.subject_matter fieldset div textarea {
			display: block;
			float: left;
			background: #111111;
			width: 700px;
			height: 200px;
			padding: 10px;
			font-size: 16px;
			line-height: 20px;
			color: #cccccc;
			border: solid 1px #333333;
			}
		/* -----------------------------------------------------------------------------------
		SUBJECT MATTER > (STYLES) -- FIELDSET -- BUTTON
		----------------------------------------------------------------------------------- */
		.subject_matter fieldset div .button {
			margin-left: 200px;
			}
		/* -----------------------------------------------------------------------------------
		SUBJECT MATTER > (STYLES) -- FIELDSET -- P
		----------------------------------------------------------------------------------- */
		.subject_matter fieldset div p {
			display: block;
			line-height: 33px;
			padding: 10px 30px;
			}
		/* -----------------------------------------------------------------------------------
		SUBJECT MATTER > (STYLES) -- FIELDSET -- STATUS
		----------------------------------------------------------------------------------- */
		.subject_matter p.status {
			display: block;
			font-size: 16px;
			line-height: 30px;
			
			}
			.subject_matter p.error {
				color: #ff0000;
				}
/* -----------------------------------------------------------------------------------
GALLERY
----------------------------------------------------------------------------------- */
.gallery {
	display: block;
	padding: 0px 0px 0px 15px;
	}
	.gallery li {
		display: block;
		float: left;
		width: 160px;
		height: 160px;
		padding: 0 !important;
		}
	.gallery li a {
		display: block;
		float: left;
		padding: 0 10px 10px 0;
		}
/* -----------------------------------------------------------------------------------
PRODUCT BROWSE
----------------------------------------------------------------------------------- */
#product_browse {
	display: block;
	padding: 0;
	}
	#product_browse li {
		display: block;
		background: none;
		padding: 0 0 30px 0 !important;
		}
		#product_browse li .product_images {
			display: block;
			float: left;
			}
		#product_browse li .product_images a {
			display: block;
			float: left;
			padding: 0 10px 0 0;
			}
	/* -----------------------------------------------------------------------------------
	PRODUCT BROWSE -- FIELDSET
	----------------------------------------------------------------------------------- */
	#product_browse fieldset {
		float: left;
		padding: 20px 0 0 20px;
		}
		/* -----------------------------------------------------------------------------------
		PRODUCT BROWSE -- FIELDSET -- REQUIRED
		----------------------------------------------------------------------------------- */
		#product_browse fieldset .required {
			color: #ff0000;
			}
		/* -----------------------------------------------------------------------------------
		PRODUCT BROWSE -- FIELDSET -- SET
		----------------------------------------------------------------------------------- */
		#product_browse fieldset .set {
			display: block;
			padding: 0 0 10px;
			}
		#product_browse fieldset .set.style_02 {
			float: left;
			width: 270px;
			margin-right: 20px;
			}
		#product_browse fieldset .set.style_03 {
			float: left;
			width: 170px;
			margin: 50px 0;
			}
		/* -----------------------------------------------------------------------------------
		PRODUCT BROWSE -- FIELDSET -- FIELD
		----------------------------------------------------------------------------------- */
		#product_browse fieldset .field {
			display: block;
			padding: 0;
			height: 50px;
			}
		#product_browse fieldset .set.style_01 .field {
			display: block;
			float: left;
			margin: 50px 0;
			}
		/* -----------------------------------------------------------------------------------
		PRODUCT BROWSE -- FIELDSET --  LABEL
		----------------------------------------------------------------------------------- */
		#product_browse fieldset div label {
			display: block;
			float: left;
			color: #ffffff;
			font-weight: bold;
			font-size: 20px;
			line-height: 50px;
			letter-spacing: -2px;
			width: 70px;
			padding: 0 20px 0 0;
			text-align: left;
			}
		/* -----------------------------------------------------------------------------------
		PRODUCT BROWSE -- FIELDSET --  INPUT
		----------------------------------------------------------------------------------- */
		#product_browse fieldset div input {
			display: block;
			}
		#product_browse fieldset .set.style_03 input {
			margin: 30px 0;
			}
		/* -----------------------------------------------------------------------------------
		PRODUCT BROWSE -- FIELDSET --  SELECT
		----------------------------------------------------------------------------------- */
		#product_browse fieldset div select {
			display: block;
			float: left;
			height: 20px;
			margin: 15px 0;
			}
		/* -----------------------------------------------------------------------------------
		PRODUCT BROWSE -- FIELDSET -- P
		----------------------------------------------------------------------------------- */
		#product_browse fieldset p {
			display: block;
			padding: 0 50px 0 0 !important;
			font-weight: bold;
			font-size: 30px;
			line-height: 50px;
			letter-spacing: -2px;
			color: #ffffff;
			}
		/* -----------------------------------------------------------------------------------
		PRODUCT BROWSE -- FIELDSET -- IMG
		----------------------------------------------------------------------------------- */
		#product_browse fieldset img {
			border: none;
			}
		
/* -----------------------------------------------------------------------------------
LEFT COLUMN
----------------------------------------------------------------------------------- */
#left_column {
	float: left;
	width: 710px;
	margin-right: 20px;
	}
/* -----------------------------------------------------------------------------------
LEFT COLUMN
----------------------------------------------------------------------------------- */
#right_column {
	float: left;
	width: 250px;
	}



/* -----------------------------------------------------------------------------------
FOOTER
----------------------------------------------------------------------------------- */
#footer {
	top: -50px;
	padding: 0 0 50px;
	}
	#footer .copyright {
		padding: 0 20px;
		font-size: 10px;
		line-height: 50px;
		color: #ffffff;
		text-align: right;
		cursor: default;
		}
/* -----------------------------------------------------------------------------------
SOCIAL NETWORKING
----------------------------------------------------------------------------------- */
#social_networking {
	display: block;
	}
#footer #social_networking {
	padding: 0 20px;
	}
#coming_soon #social_networking {
	width: 250px;
	height: 80px;
	margin: 0 auto;
	}
	#social_networking li {
		display: block;
		float: left;
		}
		#social_networking a {
			display: block;
			position: relative;
			float: left;
			background-repeat: no-repeat;
			background-position: 50% 50%;
			overflow: hidden;
			text-indent: -9999px;
			}
		#footer #social_networking a {
			top: 20px;
			width: 42px;
			height: 50px;
			}
		#coming_soon #social_networking a {
			width: 50px;
			height: 80px;
			}
		#social_networking a.apple {
			background-image: url(/ui/image/layout/coming_soon/social/apple.png);
			}
		#social_networking a.facebook {
			background-image: url(/ui/image/layout/coming_soon/social/facebook.png);
			}
		#social_networking a.myspace {
			background-image: url(/ui/image/layout/coming_soon/social/myspace.png);
			}
		#social_networking a.pandora {
			background-image: url(/ui/image/layout/coming_soon/social/pandora.png);
			}
		#social_networking a.twitter {
			background-image: url(/ui/image/layout/coming_soon/social/twitter.png);
			}
		
/* -----------------------------------------------------------------------------------
COLORBOX
----------------------------------------------------------------------------------- */
#colorbox, #cboxOverlay, #cboxWrapper{position:absolute; top:0; left:0; z-index:9999; overflow:hidden;}
#cboxOverlay{display: none;}
#cboxMiddleLeft, #cboxBottomLeft{clear:left;}
#cboxContent{position:relative; overflow:hidden;}
#cboxLoadedContent{overflow:auto;}
#cboxLoadedContent iframe{display:block; width:100%; height:100%; border:0;}
#cboxTitle{margin:0;}
#cboxLoadingOverlay, #cboxLoadingGraphic{position:absolute; top:0; left:0; width:100%;}
#cboxPrevious, #cboxNext, #cboxClose, #cboxSlideshow{cursor:pointer;}

#colorbox {
	background: #000000;
	background: rgba(0,0,0,0.9);
	border: solid 1px #222222;
	border-radius: 5px;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	-khtml-border-radius: 5px;
	box-shadow: 0 4px 10px rgba(0,0,0,0.5);
	-webkit-box-shadow: 0 4px 10px rgba(0,0,0,0.5);
	-moz-box-shadow: 0 4px 10px rgba(0,0,0,0.5);
	-khtml-box-shadow: 0 4px 10px rgba(0,0,0,0.5);
	}
#cboxLoadedContent {
	margin: 20px 20px 65px;
	}
#cboxLoadingOverlay {
	display: none;
	}
#cboxLoadingGraphic{
	display: block;
	left: 50%;
	top: 45%;
	background: #ffffff url(/ui/image/layout/colorbox/loading.gif) no-repeat 50% 50%;
	width: 106px;
	height: 21px !important;
	margin: -5px 0 0 -53px;
	border-radius: 2px;
	-moz-border-radius: 2px;
	-webkit-border-radius: 2px;
	-khtml-border-radius: 2px;
	}
#cboxClose{
	position: absolute;
	top: 0;
	right: 0;
	background: url(/ui/image/layout/colorbox/close.png) 50% 50% no-repeat;
	width: 35px;
	height: 35px;
	text-indent: -9999px;
	}
#cboxPrevious{
	position: absolute;
	left: 20px;
	bottom: 20px;
	background: url(/ui/image/layout/colorbox/previous.png) 50% 50% no-repeat;
	width: 25px;
	height: 25px;
	text-indent: -9999px;
	}
#cboxNext{
	position: absolute;
	right: 20px;
	bottom: 20px;
	background: url(/ui/image/layout/colorbox/next.png) 50% 50% no-repeat;
	width: 25px;
	height: 25px;
	text-indent: -9999px;
	}
	#cboxCurrent{
		position: absolute;
		bottom: 18px;
		left: 45px;
		right: 45px;
		text-align: center;
		color:#949494;
		line-height: 25px;
		}