﻿/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/

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, 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,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}

/*
    Grid for formatting.

    Columns are 145px wide with 12px gutters. Example:

    <div class="row">
        <div class="span span2"></div>
        <div class="span span4"></div>
    </div>
*/

.row {
    letter-spacing: -4px;
    padding-bottom: 6px;
    padding-top: 6px;
    word-spacing: -4px;
}
.row:first-child {
    padding-top: 0;
}
.row:last-child {
    padding-bottom: 0;
}

.row > .span {
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    display: inline-block;
    letter-spacing: normal;
    margin-left: 6px;
    margin-right: 6px;
    vertical-align: top;
    word-spacing: normal;
}
.row > .span:first-child {
    margin-left: 0;
}
.row > .span:last-child {
    margin-right: 0;
}

.row > .span1 {
    width: 145px;
}
.row > .span2 {
    width: 302px;
}
.row > .span3 {
    width: 459px;
}
.row > .span4 {
    width: 616px;
}
.row > .span5 {
    width: 773px;
}
.row > .span6 {
    width: 930px;
}









/* jQuery Multiselect Styles */
a.multiSelect {
	background: #FFF url(dropdown-images/dropdown_active.gif) right center no-repeat;
	border: solid 1px #696969;
	padding: 5px;
	font-size: 10px;
	line-height: 10px;
	height: 10px;
}

a.multiSelect:link, a.multiSelect:visited, a.multiSelect:hover, a.multiSelect:active {
	color: black;
	text-decoration: none;
}

a.multiSelect span
{
	margin: 7px 0px 1px 3px;
	overflow: hidden;
	display: -moz-inline-stack;
	display: inline-block;
	white-space: nowrap;
	font-style: italic;
	font-size: 12px;
}

a.multiSelect.hover {
	background-image: url(dropdown-images/dropdown_hover.gif);
}

a.multiSelect.active, 
a.multiSelect.focus {

}

a.multiSelect.active {

}

.multiSelectOptions {
	margin-top: -1px;
	overflow-y: auto;
	overflow-x: hidden;
	border: solid 1px #B2B2B2;
	background: #FFF;
}

.multiSelectOptions label {
	padding: 5px;
	display: block;
	white-space: nowrap;
	font-weight: normal;	
}

.multiSelectOptions LABEL.optGroup
{
	font-weight: bold;
}

.multiSelectOptions .optGroupContainer LABEL
{
	padding-left: 10px;
}

.multiSelectOptions.optGroupHasCheckboxes .optGroupContainer LABEL
{
	padding-left: 18px;
}

.multiSelectOptions input{
	vertical-align: middle;
	margin: 0 10px 0 0;
}

.multiSelectOptions LABEL.checked {
	background-color: #dce5f8;
}

.multiSelectOptions LABEL.selectAll {
	border-bottom: dotted 1px #CCC;
}

.multiSelectOptions LABEL.hover {
	background-color: #3399ff;
	color: white;
}



/* General CSS */

body {
	background: #222 url('page_wrapper.png') no-repeat 50% top;
	font: 300 14px helvetica neue, helvetica, arial, sans-serif;
}
h1 {
	font-weight: 300;
	color: #0095d8;
	font-family: 'helvetica neue', helvetica, arial, sans-serif;
	margin-bottom: 10px;
	font-size: 24px;
	letter-spacing: 1px;
	padding-left: 15px;
	text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.4);
	letter-spacing: 0px;
}
h1.frontandcenter {
	text-align: center;
	padding: 10px 0;
	font-size: 42px;
	font-weight: 300;
}


/* Div to set proper height for floating divs */
.clear {
	clear: both;
}

.half_left {
	width: 445px;
	float: left;
}

.half_right {
	width: 445px;
	float: right;
}
.int_padding {
	padding: 0px;
	width: 420px;
}

.tinyhelper {
	display: block;
	margin-top: 5px;
	font-size: 12px;
	font-weight: 500;
	font-style: italic;
	color: #888;
}
.page_arrow {
	font-size: 28px;
	line-height: 28px;
	vertical-align: -3px;
/*	margin-top: 0px;*/
	font-weight: 100;	
}
.help_bubble {
	-webkit-border-radius: 100px;
	-moz-border-radius: 100px;
	border-radius: 100px;
	padding: 1px 5px;
	font-weight: 900;
	text-shadow: 1px 1px 1px rgba(255, 255, 255, 0.3);
	background-color: #ccc;
	font-size: 12px;
	vertical-align: 1px;
	color: #000;
	font-style: normal;
	margin-right: 5px;
}
.help_bubble:hover {
	background-color: lightblue;
	cursor: help;
}
.help_wrapper {
	color: #fff;
	font-style: italic;
	display: inline;
	font-size: 14px;
}
.help_info {
	position: absolute;
/*	margin: -105px 0px 0px 190px;*/
	background-color: #ddd;
	width: 200px;
	padding: 5px;
	display: none;
	border-radius: 5px;
	color: #000;
	top:-75px;
	right:20px;
}
/*
.help_wrapper:hover .help_info {
	color: #000;
	display: block;
}
*/
#premium_popin {
	text-align: center;
	font-size: 18px;
	font-weight: 300;
}
.domain_set_header {
    display:  block;
    text-align:  center;
    padding: 10px 0px;
    font-weight:  500;
    border-bottom: 1px solid #ddd;
}

.infobox {
    border-radius:  10px;
    padding:  10px 10px 10px 60px;
    margin-bottom: 20px;
    font-weight: 500;
    background: rgba(0, 0, 0, 0.1) url('help.png') no-repeat 15px 15px;
}
.infobox .micro {
	text-align: center;
	font-size: 12px;
	margin: 10px 0 0;
	color: rgba(0, 0, 0, 0.3);
}
.pipebreak {
/*	display: inline; */
	margin: 0px 10px;
	color: #d1bed1;
}
.login_error {
	background-color: #800000;
	margin: 0px 0px 10px 0px;
	padding: 10px;
	color: #eee;
	font-weight: 500;
}
.domain_set_update {
	text-align: center;
	background-color: #008000;
	margin: 0px 0px 10px 0px;
	padding: 10px;
	color: #eee;
	font-weight: 500;
}
.logo img {
	height:35px;
}

/* Forms */

label {
	display: block;
	font-weight: 900;
	letter-spacing: 0px;
	color: #222;
	font-size: 14px;
}
label.inliner {
	display: inline;
	font-weight: 300;
}
input {
	border: 1px solid #ccc;
	padding: 5px;
	font: 300 14px helvetica neue, helvetica, arial, sans-serif;
	margin-bottom: 15px;
}
input:focus {
	border: 0px;
	border-left: 1px solid #ccc;
	padding: 6px 5px;
}
input:disabled {
	background-color: #ddd;
}
form .full {
	width: 425px;
}
form fieldset.horiz {
    margin-bottom: 16px;
}
form fieldset.horiz .field {
    display: inline-block;
    margin-right: 8px;
}
form fieldset.horiz .field:last-child {
    margin-right: 0px;
}
form fieldset.vert {
    margin-bottom: 16px;
}
form fieldset.vert .field {
    display: block;
    margin-bottom: 8px;
}
form fieldset.vert .field:last-child {
    margin-bottom: 0;
}
form fieldset.side-by-side {
    display: inline-block;
}
input.checkbox {
	width: auto;
}
select label {
	display: inline;
}
select {
	margin: 0px;
	padding: 0;
}

button {
	margin: 0px auto;
	font: 500 14px helvetica neue, helvetica, arial, sans-serif;
	padding: 10px;
	border: 1px solid rgba(0, 0, 0, 0.1);
	border-radius: 10px;
	cursor: pointer;
	text-shadow: 1px 1px 1px rgba(255, 255, 255, 0.3);
	box-shadow: inset 0px 10px 20px rgba(255, 255, 255, 0.4);
	color: #111;
}
button:hover {
	border: 1px solid rgba(0, 0, 0, 0.4);
}
button:active {
	box-shadow: inset 0px 0px 4px rgba(0, 0, 0, 0.2), 0px 0px 15px rgba(0, 0, 0, 0.3);
}
button.big_submit {
	width: 300px;
	background: rgb(0,149,216);
	color: #fff;
	border: 1px solid rgba(0, 0, 0, 0.4);
	text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.1);
	box-shadow: inset 0px 10px 20px rgba(255, 255, 255, 0.4);
}
button.big_submit:hover {
	box-shadow: inset 0px 10px 20px rgba(255, 255, 255, 0.4), 0px 0px 15px rgba(0, 149, 216,1);
}
button.big_submit:active {
	box-shadow: inset 0px 0px 4px rgba(0, 0, 0, 0.2), 0px 0px 15px rgba(0, 149, 216,1);	
}


/* HEADER */

#top_bar {
	height: 40px;
	padding: 5px 20px;
	background-color: rgba(0, 0, 0, 0.3);
	border-bottom: 1px solid #444;
}
#top_bar #userinfo {
	float: right;
	width: 550px;
	font-size: 16px;
	padding: 10px 0px;
	color: #666;
	text-align: right;
}
#top_bar #userinfo a, #top_bar #userinfo a:visited {
	color: #bbb;
}
#button_admin_reports {
	color: orange;
	float: left;
	margin-right: 20px;
}

/*
    Main Navigation Bar
*/

.navigation {
	display: inline-block;
	margin-left: 20px;
}

.navigation li {
    background-color: #000;
	background-color: rgba(0, 0, 0, 0.3);
	border: 2px solid #555;
	border-top: 0;
    display: inline-block;
    float: left;
}

.navigation + .premium li {
    border-bottom: 2px solid #0095d8;
}
.navigation + .premium li:first-child {
    border-left: 2px solid #0095d8;
}
.navigation + .premium li:last-child {
    border-right: 2px solid #0095d8;
}

.navigation li a {
	color: #ccc;
	display: block;
	font-size: 13px;
	font-weight: 500;
	line-height: 27px;
	padding: 4px 10px;
	text-decoration: none;
	text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.4);
}
.navigation li a:hover {
	background-color: #444;
}
.navigation li.disabled a {
    background-color: #000;
    background-color: rgba(0, 0, 0, 0.1);
    color: #888;
    color: rgba(204, 204, 204, 0.4);
}
.navigation li.disabled a:hover {
    background-color: #000;
    background-color: rgba(0, 0, 0, 0.1);
}

.navigation li.active, .navigation li.active a:hover {
    background-color: #0095d8;
}
.navigation li.active a {
	color: #000;
	text-shadow: 1px 1px 1px rgba(255, 255, 255, 0.3);
}

.nav-label {
    display: inline-block;
    background-color: #0095d8;
    border-radius: 4px;
    -moz-border-radius: 4px;
    color: black;
    font-size: 70%;
    padding: 2px 4px;
    vertical-align: top;
}





.navigation li.non_premium {
	opacity: .4;
	border: 1px solid #000;
	border-top: 0;
	border-left: none;
}
.navigation li.non_premium_highlight, .navigation li.non_premium_highlight a:hover {
	border-color: #0095d8;
	opacity: 1;
	color: #fff;
}
.navigation li.non_premium_highlight {
	border-left: 1px solid #0095d8;
	/*border-top: 1px solid #0095d8;*/
}


/* Main page content */

#page_content {
	width: 960px;
	margin: 10px auto 0;
}

#page_content #internal {
	border-radius: 10px;
	background-color: #eee;
	color: #111;
	padding: 15px;
}
.internal_intro {
	display: block;
	margin-bottom: 15px;
}
#home_image_preview {
	padding: 0px 5px 5px;
}
#home_image_preview img, #home_image_preview .bordered {
	padding: 5px;
	background-color: #222;
}

.home_intro {
	float: left;
	width: 400px;
	color: #ccc;
	font-weight: 500;
	text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.1);
	line-height: 20px;
}
#home_examples {
	float:right;
	width: 510px;
	background-color: rgba(0, 0, 0, 0.2);
	color: #eee;
}
.home_ad_type {
	float: left;
	display: block;
	width: 33.2%;
	padding: 5px 0px;
	text-align: center;
	background-color: rgba(0, 0, 0, 0.4);
	color: #bbb;
	text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.2);
	cursor: pointer;
}
.home_ad_type_tcc {
	float: left;
	display: block;
	width: 33.33333333%;
	padding: 5px 0px;
	text-align: center;
	background-color: #AAA;
	background-color: rgba(0, 0, 0, 0.4);
	color: #fff;
	cursor: pointer;
	text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.1);
	margin-top: 10px;
}
.home_ad_type:hover, .home_ad_active, .home_ad_type_tcc:hover {
	background-color: #222;
}

.tower_small {
	margin: 10px 4px 0px 5px;
}
#tcc_results .tower_small {
	width: 54px;
	height: 208px;
}
.tower_med {
	margin: 10px 4px 0px 5px;
}
.leaderboard_small {
	margin: 10px 4px 0px 5px;
}
#tcc_results .leaderboard_small {
	width: 284px;
	height: 35px;
}
.leaderboard_med {
	margin: 10px 7px 0px 6px;
}
.rectangle_small {
	margin: 10px 4px 0px 5px;
}
#tcc_results .rectangle_small {
	width: 130px;
	height: 130px;
}

/* Search Results */

.column-descriptions {
    font-size: 12px;
    margin-bottom: 16px;
}
.column-descriptions h3 {
    font-weight: bold;
}
.column-descriptions dd {
    margin-left: 16px;
}

.results_pagination {
	float: right;
}
.results_pagination a {
	text-decoration: none;
}
#filter_results {
	width: 100%;
	margin: 0 0 15px;
	border: 1px solid #ddd;
}
/*#filter_results td, #filter_results th {
	padding: 5px;
	text-overflow: ellipsis;
}
#filter_results tr {
	width: 100%;
	background-color: #eee;
	cursor: pointer;
}
#filter_results tr th {
	background-color: #aaa;
	font-weight: 500;
}
#filter_results tr:nth-child(odd) {
	background-color: #ddd;
}
#filter_results tr:hover {
	background-color: #fff;
}*/
/*
#filter_results .drilldown_help {
	display: none;
}
#filter_results td:hover .drilldown_help {
	display: inline;
	position: absolute;
	margin-left: 758px;
	margin-top: 0px;
	background-color: #ccc;
	padding: 5px;
	text-align: right;
	min-width: 150px;
}
*/
#filter_results .ad {
	padding: 10px;
	font-size: 12px;
	font-weight: 400;
}
#filter_results .ad_image_meta {
	float: left;
	width: 225px;
/*	margin-right: 5px; */
}
#filter_results .ad_company_product {
	font-size: 14px;
	font-weight: bold;
/*	width: 410px;
	display: block;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis; */
	margin-bottom: 10px;
}

.ad_footer_data {
	padding-top: 10px;
}

.pdm_table {
	margin: 10px 0;
	border: 1px solid #bbb;
	width: 100%;
}
.pdm_table tr th {
	padding: 5px;
	font-weight: bold;
	border: 1px solid #bbb;
	border-top: 0;
	background-color: #ddd;
}
.pdm_table tr td {
	padding: 5px;
	border: 1px solid #ddd;
}
.pdm_domain_hidden {
	display: none;
	position: absolute;
	margin-left: -30px;
	margin-top: -30px;
	background-color: #bbb;
	padding: 5px;
}
	
h2 {
	font-weight: 500;
	font-size: 16px;
	margin-bottom: 10px;
	padding-bottom: 5px;
	border-bottom: 1px solid #ccc;
}
.pdm_domain_hover:hover .pdm_domain_hidden {
	display: block;
}

.ad_image {
	max-width: 200px;
	max-height: 60px;
/*	margin: 8px 0px;
	padding: 5px;
	background-color: #222; */
	border: solid 5px #222;
}
.ad_full_copy {
	margin: 4px 0px 5px 10px;
	float: left;
	width: 430px;
/*	padding-left: 10px; */
}
.complete_ad_text {
	color: #555;
	font-size: 11px;
	font-style: italic;
	height: 20px;
}
.complete_ad_text img {
/*	display: block;
	float: left;
	margin-right: 5px; */
	vertical-align: middle;
	padding-right: 4px;
}
.ad_domain_list {
	float: left;
	width: 210px;
/*	margin-top: -17px;*/
	margin-left: 10px;
}
.ad_domains_label, .ad_details_label {
/*	float: left;
	margin-top: 20px;
	width: 200px;
	height: 20px;*/
	color: #555;
	font-size: 11px;
	font-style: italic;
	margin-bottom: 5px;
}
.ad_domains_label img, .ad_details_label img {
/*	display: block;
	float: left;
	margin-right: 5px;*/
	vertical-align: middle;
	padding-right: 4px;	
}
.ad_domains, ad_details_link {
    overflow: hidden;
}



/* Footer */

#footer {
	text-align: center;
	margin: 30px 0px;
}
#footer a {
	color: #bbb;
}
#copyright {
	margin-top: 10px;
	color: #777;
	font-size: 12px;
	font-weight: 500;
	text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.1);
}

/* top advertisers */
/*
div.filters {
	width: 100%;
}
	div.filters > div {
		float: left;
	}
	div.filters > div.center {
		text-align: center;
	}
	div.filters > div.filter1 {
		width: 300px;
	}
	div.filters > div.filter4 {
		width: 164px;
		height: 45px;
	}
	div.filters > div.filter2 {
		height: 45px;
		width: 400px;
	}
	div.filters > div > span {
		font-weight: bold;
		font-size: 12px;
	}
	div.filters > div > input {
		border: #696969 solid 1px;
		font-size: 12px;
		height: 13px;
		margin-top: 2px;
	}
	div.filters > div > input.filter_size1 {
		width: 280px;
	}
	div.filters > div > input.filter_size2 {
		width: 380px;
	}
	div.filters > div > select {
		border: #696969 solid 1px;
		font-size: 12px;
		height: 22px;
		margin-top: 2px;
	}
	div.filters > div > a.multiSelect {
		width: 380px;
	}
	div.filters > div.filter2 > select {
		width: 380px;
	}
	div.filters > div.filter3 > input {
		margin-top: 5px;
	}
	div.buttons {
		width: 920px;
		text-align: right;
	}
		div.buttons > input.fb {
			height: 25px;
		}
        */

/* This fixes the crazy width on the dropdown lists. */
select.domains {
    max-width: 100%;
    width: 100%;
}

.hide-legend {
    float: right;
    font-size: 10px;
}
th.highlight, td.highlight {
    background-color: #b4b4b4;
}
table.advertisers {
	width: 100%;
	margin: 0 0 15px;
	border: 1px solid #696969;
	font-size: 12px;
}
table.advertisers > thead > tr {
	border-top: #696969 3px solid;
	background-color: #cacaca;
	height: 30px;
}
table.advertisers > thead > tr > th {
	padding-top: 5px;
	font-weight: bold;
	padding-bottom: 5px;
}
table.advertisers .sortable {
    cursor: pointer;
}
table.advertisers > thead > tr > th.headerSortUp {
	background: url('asc.gif') no-repeat;
	background-position: right center;
}
table.advertisers > thead > tr > th.headerSortDown {
	background: url('desc.gif') no-repeat;
	background-position: right center;
}
table.advertisers > thead > tr > th.headerSortUp, table.advertisers > thead > tr > th.headerSortDown {
	background-color: #bababa;
}
table.advertisers > thead > tr > th, table.advertisers > tbody > tr > td {
	padding: 2px;
}
table.advertisers > thead > tr > th.left, table.advertisers > tbody > tr > td.left {
	text-align: left;
}
table.advertisers > thead > tr > th.center, table.advertisers > tbody > tr > td.center {
	text-align: center;
}
table.advertisers > tbody > tr {
    cursor: pointer;
}
table.advertisers > tbody > tr:nth-child(odd) {
	background-color: #eeeeee;
	height: 46px;
}
table.advertisers > tbody > tr:nth-child(even) {
	background-color: #dddddd;
	height: 46px;
}
td.domain_list > div.overflow {
	max-height: 46px;
	overflow: auto;
}
/* Style for actual list of domains. Implemented in topAdvertisers page. */
td.domain_list > div {
    overflow: hidden;
    padding-left: 14px;
}
td.domain_list > div.collapsed {
    background-image: url("more-arrow.png");
    background-position: bottom left;
    background-repeat: no-repeat;
}
td.domain_list td {
    padding-right: 12px;
}

div.pagination {
	width: 100%;
	font-size: 12px;
	font-weight: bold;
	padding-right: 12px;
	text-align: right;
}

/* Range bar styles */
.rangebar {
    background: #aaaaaa;
    margin-left: 225px;
    border-radius: 5px;
}

.rangebar-active {
    background: #0095D8;
    height: 25px;
    min-width: 1%;
    border-radius: 5px;
}
