/* default.css
	bring10 public view css
 */

/* OVERALL DOCUMENT & BACKGROUND */

body {
	/*background: #333 url(../../img/nyc_bg_fade.jpg) no-repeat fixed;
	background-size: 100%;*/
	background-color: #333;
}

body a {
	color: #ccc;
}

/* HEADER & FOOTER */

header #header_bg {
	/* header background color override */
	background: url(./../../img/nav_background_a40.png);
	/* image equiv to: background-color: rgba(0,0,0,0.4); */
}

#footer_wrapper {
	background: url(./../../img/nav_background_a40.png);
}

/* CONTENT */

.section_bg {
	z-index: 0;
	background: url(../../img/section_background_a70.png);
	/* &&& equiv to: background-color: rgba(0,0,0,0.7);*/
}

section h1 { /* &&& remove some of this stuff/change to simpler styling? */
	display: none; /* !!! */

	position: relative;
	z-index: 65;
	left: -40px;
		
	margin: 0;
	padding: 10px 0 10px 140px;
	font-size: 30px;
	background-color: #f88500;
	color: #fff;
	text-shadow: 1px 1px 1px #333;
	
	border-width: 1px;
	border-style: solid;
	border-top-color: #ffc37f;
	border-right-color: #d87500;
	border-bottom-color: #d87500;
	border-left-color: #ffc37f;
	
	border-radius: 2px;
	box-shadow: 4px 4px 6px rgba(0,0,0,0.3);
	-moz-box-shadow: 4px 4px 6px rgba(0,0,0,0.3);
	-webkit-box-shadow: 4px 4px 6px rgba(0,0,0,0.3);
}

.content_wrapper {
	position: relative;
	z-index: 60;
	min-height: 200px;
	padding: 25px 90px 10px;
}

section h2 {
	margin: 0 0 30px;
	color: #aabac5;
	font-size: 16px;
}

section p {
	margin: 0 0 30px;
	color: #eee;
}

section ul {
	margin: 0 0 30px;
}

section ul li {
	margin: 0 0 5px;
}

#copy_text {
	margin: 0;
}

#copy_text .spacer {
	height: 40px;
}

#copy_text h3 {
	margin: 0 0 20px;
	color: #aabac5;
	font-size: 30px;
	font-weight: normal;
}

#copy_text p, #copy_text ol, #copy_text ul {
	color: #eee;
}

#copy_text p a, #copy_text li a {
	color: #ccc;
	border-bottom: 1px dotted #aaa;
}

#copy_text p a:hover, #copy_text li a:hover {
	color: #ddd;
	border-color: #bbb;
}

/* index content */

#video_wrapper {
	position: relative;
	float: left;
	margin: 0 40px 0 0;
	/*width: 360px;
	height: 270px;
	start at full video size in case of broken js, shrink on page load using js:*/
	width: 780px;
	height: 438px;
}

#video_cover {
	position: absolute;
	z-index: 100;
	height: 100%;
	width: 100%;
	background: #000;
}

#video_cover #thumb {
	width: 360px;
	height: 270px;
	background: url(../../img/vendor_map_desaturated.png) no-repeat;
}

#video_cover #thumb_mask {
	position: relative;
	width: 100%;
	height: 100%;
	background: url(../../img/nav_background_a40.png);
	cursor: pointer;
}

#video_cover #play_button {
	position: absolute;
	width: 120px;
	height: 120px;
	top: 50%;
	left: 50%;
	margin-top: -60px;
	margin-left: -60px;
	
	z-index: 100;
	background: url(../../img/play_button.png) no-repeat;
	background-position: 50% 50%;
    overflow: hidden;
}

iframe#video_player {
	/*display: none;*/
	display: block;
	position: absolute;
	z-index: 200;
}

#close_video, #close_video:hover {
	display: none; /* to be shown with js */
	position: absolute;
	height: 20px;
	width: 20px;
	right: -23px;
	background: url(../../img/close_button.png) no-repeat;
}

#copy_text img {
	float: left;
	margin: 0 40px 0 0;
}

#copy_text .divider {
	clear: both;
	width: 80%;
	height: 40px;
	margin: 0 10% 40px 10%;
	border-bottom: 1px solid #888;	
}

#copy_text .primary_content h3, #copy_text .secondary_content h3 {
	font-size: 32px;
	color: #ff8500;
	font-weight: bold;
}

#copy_text .primary_content p {
	margin: 0 0 20px;
	font-size: 19px;
	line-height: 1.6;
	color: #eee;
}

#copy_text .secondary_content {
	height: 200px;
}

#copy_text .secondary_content .item {
	display: inline-block;
	height: 200px;
	width: 200px;
	margin: 0 26px;
	vertical-align: top;
}

#copy_text .secondary_content .item h3 {
	color: #aabac5;
	font-size: 22px;
	text-align: center;
}

#copy_text .secondary_content .item p {
	margin: 0 0 10px;
	padding: 0 10px;
	max-width: 100%;
	font-size: 16px;
	color: #eee;
}

#copy_text .secondary_content .item a {
	font-size: 14px;
	float: right;
}

#copy_text .secondary_content .divider {
	display: inline-block;
	vertical-align: top;
	margin: 20px 0;
	height: 160px;
	width: 0;
	border-bottom: none;
	border-right: 1px solid #888;
}

#copy_text .app_container {
	margin: 0 0 15px;
	padding: 0;
	/*margin: 0 0 25px;
	padding: 4px 0 8px;*/
	
	/*background-color: #fcfcfc;
	border-radius: 5px;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;*/
}

#copy_text .app {
	display: inline-block;
	/*margin: 10px 0 0 20px;*/
	margin: 0;
	padding: 0;
}

#copy_text .secondary_content .app a {
	float: none;
	display: block;
	/*height: 60px;
	width: 60px;*/
	height: 80px;
	width: 80px;
}

#copy_text .app a.iphone {
	/*background: url(../../img/iphone_sm.png) no-repeat;*/
	background: url(../../img/iphone_med_white.png) no-repeat;
	padding: 0 0 0 0;
}

#copy_text .app a.android {
	/*background: url(../../img/droid_sm.png) no-repeat;*/
	background: url(../../img/droid_med_white.png) no-repeat;
	margin-left: 10px;
	padding: 0 0 0 0;
}

#copy_text .app span {
	display: inline-block;
	width: 100%;
	color: #888;
	font-size: 12px;
	font-style: italic;
	text-align: center;
}

#copy_text .social {
	margin: 0;
	padding: 0;
}

#copy_text .social a {
	display: inline-block;
	height: 40px;
	width: 40px;
	margin: 0 0 10px 20px;
}

#copy_text .social a.facebook {
	background: url(../../img/f_logo_sm.png) no-repeat;
}

#copy_text .social a.twitter {
	background: url(../../img/twitter_newbird_blue_sm.png) no-repeat;
}

#copy_text .social span {
	display: inline-block;
	margin: 0;
	color: #555;
	font-size: 20px;
	vertical-align: top;
}

/* end index content */

.counter {
	height: 40px;
	width: 160px;
	margin: 20px 0 0;
	padding: 0 10px;
	font-size: 30px;
	color: #333;
	background-color: #fafafa;
	border: 2px solid #888;
	
	border-radius: 8px;
	-moz-border-radius: 8px;
	-webkit-border-radius: 8px;
}

.counter.time {
	width: 220px;
}

.counter span {
	position: relative;
	top: -7px;
	display: inline-block;
	font-size: 10px;
}

.macro_genres {
	min-height: 400px;
}

.macro_genres li {
	float: left;
	list-style: none;
}

.macro_genres li div {
	display: block;
	position: relative;
	height: 180px;
	width: 380px;
	margin: 5px;
	
	background-color: #fff;
	background-size: 100%; /* CHECK THIS OUT FOR COMPAT */
	background-repeat: no-repeat;
}

.macro_genres li div.food {
	background: url(../../img/photos/food.jpg);
}

.macro_genres li div.nightlife{
	background: url(../../img/photos/nightlife.jpg);
}

.macro_genres li div.drink {
	background: url(../../img/photos/drink.jpg);
}

.macro_genres li div.beauty {
	background: url(../../img/photos/beauty.jpg);
}

.macro_genres li div a {
	display: block;
	position: relative;
	height: 100%;
	width: 100%;
	
	text-align: right;
	font-size: 28px;
	color: #555;
}

.macro_genres li div.inactive a, section .macro_genres li div.inactive a:hover {
	color: #777;
}

.macro_genres li div a:hover {
	color: #333;
}

.macro_genres li div a div {
	position: relative;
	top: 115px;
	height: 65px;
	width: 360px;
	margin: 0;
	padding: 0px 20px 0 0;
	background: url(../../img/macro_genres_mask.png);
	/* image equiv to: background-color: rgba(255,255,255,0.7);*/	
}

.macro_genres li div a .sub {
	display: block;
	padding-top: 4px;
	font-size: 14px;
	font-style: italic;
}

#progress_tracker {
	width: 780px;
	height: 40px;
	margin: 20px 0 30px;
	border-top: 1px solid #aaa;
	border-bottom: 1px solid #aaa;
}

#progress_tracker div.step {
	position: relative;
	display: inline-block;
	
	width: 193px;
	height: 21px;
	padding: 10px 20px 9px 40px;
	text-align: center;
	color: #888;
	vertical-align: text-bottom;
}

#progress_tracker div.step1 {
	margin-left: 20px;
}

#progress_tracker div.light {
	background-color: #f8f8f8;
	border-color: transparent transparent transparent #f8f8f8;
}

#progress_tracker div.dark {
	background-color: #f0f0f0;
	border-color: transparent transparent transparent #f0f0f0;
}

#progress_tracker div.active {
	background-color: #a1d5ff;
	border-color: transparent transparent transparent #a1d5ff;
	color: #333;
	font-weight: bold;
}

#progress_tracker div.active div.arrowtail-main {
	border-color: #a1d5ff transparent #a1d5ff;
}

#progress_tracker div div.tri {
	position: absolute;
    height: 0px;
    width: 0px;
	border-style: solid;
    border-width: 20px;
	border-color: transparent;
}

#progress_tracker div div.tri-main {
    z-index: 100;
	left: 253px;
	top: 0;
	border-color: inherit;
}

#progress_tracker div div.tri-outline {
    z-index: 90;
	left: 254px;
	top: 0;
	border-color: transparent transparent transparent #aaa;
}

#progress_tracker div div.arrowtail-main {
	position: absolute;
    z-index: -100;
	left: -20px;
	top: 0;
	border-color: #f8f8f8 transparent #f8f8f8;	
}

a.button, input.button {
	border-color: #c0c0c0 #c0c0c0 #b0b0b0;
	color: #444;
	background-color: #f5f5f5;
}

a.button:hover, input.button:hover {
	border-color: #b0b0b0 #b0b0b0 #a0a0a0;
}

a.button.accept {
	border-color: #d87500;
	padding: 10px;
	background-color: #f88500;
	color: #f5f5f5;
}

a.button.accept:hover {
	color: #fff;
}

/* 'terms' pages color/size overrides */

.terms h2 {
	color: #ddd;
	font-size: 18px;
}

#copy_text .terms h3 {
	color: #ddd;
	font-size: 15px;
	font-weight: bold;
}

/* end 'terms' pages color/size overrides */

/* FORMS */

.fieldset label {
	color: #333;
}

.fieldset label span.subtitle {
	color: #555;
}

/* forms color overrides */

.fieldset .note {
	color: #ccc;
}

.fieldset .terms {
	color: #fff;
}

.fieldset .terms a {
	color: #fff;
	border-bottom: 1px dotted #fff;
}

.fieldset .terms a:hover {
	color: #ddd;
	border-color: #ddd;
}

.fieldset h2 {
	border-bottom: 1px solid #888;
}

.fieldset label {
	color: #fff;
}

.fieldset label span.subtitle {
	color: #ccc;
}

.fieldset .text {
	color: #fff;
}

/* end forms color overrides */

#addr_wrapper {
	position: relative;
	height: 0;
	width: 100%;
}

#addr_fields, #loc_map {
	margin: 20px 0 0;
	height: 300px;
	width: 100%;
}

#addr_fields {
	position: absolute;
	z-index: 100;
	/*background-color: #333;*/
	background-image: url(../../img/nav_background.png);
}

#loc_map_wrapper {
	position: relative;
	margin: 20px 0 0 0;
	height: 300px;
	width: auto;
}

#loc_map_wrapper #target {
	position: absolute;
	z-index: 50;
	
	background-image: url(../../img/target_rose_sm.png);
	background-position: 50% 50%;
    background-repeat: no-repeat;
	width: 60px;
	height: 60px;
	top: 50%;
	margin-top: -30px;
	left: 50%;
	margin-left: -30px;
    overflow: hidden;
	
	pointer-events: none; /* NOTE: not supported by IE at time of inclusion */
}

#loc_map {
	height: 100%;
	width: 100%;
	background-color: #f5f5f5;
}

#loc_map div {
	margin: 0;
	padding: 0;
	height: auto;
	width: auto;
}