/* base.css | v0.2 (03282010) | Thierry Koblentz*/

html {
  height: 100%;
  overflow-y: scroll;
}
body {
  height: 100%;
  color: #444;
  line-height: 1.4;
  background:#A0C1E4 url('/assets/img/public/pub-back.jpg') repeat-x;
}
body, input, button, textarea, select {
  font-family: "Helvetica Neue", Helvetica, lucida sans, serif;
  letter-spacing: .05em;
}
h1, h2, h3, h4, h5, h6 {
  letter-spacing: .1em;
}
pre, tt, code, kbd, samp, var {
  font-family: "Courier New", Courier, monospace;
}
h1 {font-size: 1.5em;}
h2 {font-size: 1.4em;}
h3 {font-size: 1.3em;font-weight: bold;}
h4 {font-size: 1.2em;}1
h5 {font-size: 1.1em;}
h6 {font-size: 1em;}

h1, h2, h3, h4, h5 {font-weight: normal;}
a:link {color: #baeaff;}
a:visited {text-decoration: none;}
a:hover {text-decoration: none;}
a:focus {text-decoration: none;}
a:focus,:focus {outline: 1px dotted #fff;}
a:active {outline: none;}

body, p, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, code, form, fieldset, legend, input, button, textarea, blockquote, th, td {
  margin: 0;
  padding: 0;
}
fieldset, img {
  border: 0;
}
img {vertical-align: bottom;}
ol li,
ul ol li {list-style-type: decimal;font-size:1em;}
ul li {list-style-type: disc;}
ul ul li {list-style-type: circle;}
ul ul ul li {list-style-type: square;}
ol ol li {list-style-type: lower-alpha;}
ol ol ol li {list-style-type: lower-roman;}
sub {
  vertical-align: sub;
  font-size: smaller;
}

sup {
  vertical-align: super;
  font-size: smaller;
}

legend {
  color: #000;
  padding-bottom: .5em; 
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

caption {
  position: absolute;
  left: -999em;
}
th {text-align: center;} 
tbody th {text-align: left;} 
code {color: #06f;}
code, pre {font-family: "Courier New", monospace, serif; font-size: 1em;}
blockquote, q, em, cite, dfn, i, cite, var, address {
  font-style: italic;
}
blockquote p:before, blockquote p:after, q:before, q:after {content: '';}
th, strong, dt, b {
  font-weight: bold;
}

ins {
  text-decoration: none;
  border-bottom: 3px double #333;
}

del {text-decoration: line-through;} 

abbr, 
acronym {
  border-bottom: 1px dotted #333;
  font-variant: normal;
} 
h1, h2, h3, h4, h5, h6, p, pre, ul, ol, dl, fieldset, address {padding:0 30px 0 30px;}
dd p, dd pre, dd ul, dd ol, dd dl, li p, li pre, li ul, li ol, li dl, fieldset p, fieldset ul, fieldset ol {
  padding-right: 0;
  padding-left: 0;
}
dd {
  padding-left: 20px;
  margin-top: .5em;
}

li {margin-left:30px;}
table {
  margin-right: 30px;
  margin-left: 30px;
} 
hr {
  margin-right: 30px;
  margin-left: 30px;
  border-style: inset;
  border-width: 1px;
}
h1, h2, h3, h4, h5, h6, p, pre, dt, li, hr, legend, input, button, textarea, select, address, table {margin-top: 1.2em;}

label {padding-top: 1.2em;}
fieldset {line-height: 1;}
input[type="checkbox"] {
  vertical-align: bottom; 
  *vertical-align: baseline;
}
input[type="radio"] {vertical-align: text-bottom;}
input {_vertical-align: text-bottom;}
input, button, textarea, select, optgroup, option {
  font-size: 1.2em;
}

/* this is to fix IE 6 and 7 which create extra right/left padding on buttons
 * IMPORTANT: because IE 6 does not understand the first selector below, you need to apply the class "inputButton" to all input of type="button" in your documents
 * the first declaration is for IE 6 and 7, the second one for IE 6 only, the third one is for all browsers.
 */
button,
input[type="submit"],
input[type="reset"],
input[type="button"],
.inputButton {
  *overflow: visible;
  _width: 0;
  padding: .2em .4em;
  margin:0;
}
input:focus, a:active { outline:none; }
.block {
  padding: 0 30px;
  margin-top: 1.2em;
}
.padding2margin {
  margin-right: 30px;
  margin-left: 30px;
  padding-right: 0;
  padding-left: 0;
}
.noMarker li {
  list-style: none;
  margin-left: 0;
}

/* clouds 1.0  by Macaroni Ted */
/* ANIMATION:
this uses infinate scrolling technique.

step 1: CREATE PNG: a 1822px (any size is ok) is duplicated and the canvas is doubled to create a png of  3644px in width (2x1822px)

step 2: SET ANIMATION CSS3: set the animation using "@-webkit-keyframes". reset to 0 at the half way point of the PNG (-1822px).

step 3: ADD DURATION AND SPEED: add seperate speeds to the 3 layers.  IMPORTANT: Speed. The faster the animation the more prossesor heavey it is.

*/


@-webkit-keyframes       'clouds' {
	0% { background-position-x: 0px; }
	100% { background-position-x: -1822px; }
}

.wrapper-main{
    width:100%;
	overflow:hiden;
	/*parallex the background for firefox and ie */
	background: transparent url('/assets/img/public/clouds3.png')  repeat-x scroll 10% 0;
	/* ad dthe animation to this class */
    -webkit-animation-name: 'clouds';
    /*this is a bit to juttery but more peed will use up more processor*/
	-webkit-animation-duration: 340s;
	/*stop after 2 iterations this should be long enough*/
	-webkit-animation-iteration-count: 2;
	-webkit-animation-timing-function: linear;
}
.wrapper-clouds-mid{
	width:100%;
	overflow:hidden;
	/*parallex the background for firefox and ie */
	background: transparent url('/assets/img/public/clouds2.png')  repeat-x scroll 15% 0;
    -webkit-animation-name: 'clouds';
	-webkit-animation-duration: 240s;
	-webkit-animation-iteration-count: 1000;
	-webkit-animation-timing-function: linear;
}
.wrapper-clouds-near {
	width:100%;
	overflow:hidden;
	/*parallex the background for firefox and ie */
	background: transparent url('/assets/img/public/clouds.png')  repeat-x scroll 25% 0;
    -webkit-animation-name: 'clouds';
	-webkit-animation-duration: 140s;
	-webkit-animation-iteration-count: 1000;
	-webkit-animation-timing-function: linear;

}


.container {
	width:984px;
	margin:0 auto;
	padding:0 0 30px;
	overflow: hidden;
}
h1 {
	float:left;
	width:270px;
	margin:30px 0;
	/* padding:0; */
}
.utilities {
	float:right;
	width:594px;
	margin: 30px 0;
}
ul.utilities li {
	list-style: none;
	float:right;
	margin-top:0;
}
ul.utilities li a.cta{
       font-size: 12px;
       border-width: 6px;
       padding:10px 15px;
        /* border radius */
    -moz-border-radius: 12px;
    -webkit-border-radius:12px;
    border-radius: 12px;
    
    
}
ul.utilities li a.cta:hover{
   border-color:#5f85a1;
}

a.cta, button{
    
	background-color: #3f3f3f;
	border:7px solid #c1d7ec;
	color:#D1DFEF;
	cursor: pointer;
    display:block;
	font-weight:600;
	padding:10px 15px;
	text-decoration: none;
    /* border radius */
    -moz-border-radius: 16px;
    -webkit-border-radius:16px;
    border-radius: 16px;
    /* background clipping to fix the overflow of the background color in webkit browswers */
	-webkit-background-clip: padding;
}
button{
    font-size:1em;
}
a.cta:hover, button:hover{
	background-color: #D1DFEF;
	border-color:#7D9EBC;
	color:#3f3f3f;
}

.concept {
	width:530px;
	float:left;
	clear:both;
	height:550px;
	padding-left:30px;
}
.attention {
	float:right;
	width:400px;
	height:550px;
	
}
.attention h2 {
	font-size: 2.6em;
	font-weight: 600;
	color: #9c1215;
	padding-left:45px;
}
.attention p {
    padding-left:45px;
    font-weight: 600;
}
.attention a.cta {
	float:right;
	margin-right:30px;
}
em {
	color:#9C1215;
	font-style: normal;
}
p {
	margin-bottom:30px;
}
p.contact {
	color:#fff;
}
.three-column {
	width:328px;
	float:left;
	margin-top:30px;
}
.three-column h3 {
	/*   color: #baeaff; */
    font-weight: 900;
	padding:15px 0px 15px 30px;
	font-size: 1.5em;
}
.three-column ul {
	min-height:200px;
}
.three-column ul li {
	list-style: none;
	margin-left:0;
	font-size:0.84em;
	padding:0 0 15px 45px;
	 background:transparent url('/assets/img/public/arrow.png') no-repeat;
}
.three-column a.cta {
    float:right;
	text-decoration: none;
	margin-right:30px;
}
.three-column h3{
    font-size: 3em;
    color: #9c1215;
   
 /*    text-align: right; */
 
}
.three-column p{
    margin:0;
    font-size:2em;
/*     color:#f7f7f7; */
    margin:-30px 0 45px;
    font-weight: 600;
}
.three-column img{position:absolute;margin:70px 0 -15px 194px;}
.advertiser h3 {
	background:transparent url('/assets/img/public/sale.png') no-repeat 28px 50%;
}
.publisher h3 {
	background:transparent url('/assets/img/public/iphone.png') no-repeat 28px 50%;
}
.agency h3 {
	background:transparent url('/assets/img/public/agency.png') no-repeat 28px 50%;
}
.footer {
	
	clear:both;
	margin-top:60px;
	padding:60px 0px 30px;
	min-height:200px;
	background: transparent url('/assets/img/public/footer-back.png') repeat-x;
}
.footer .container {
	padding-bottom:0;
}
.footer .container p {
	text-align: center;
}
.footer .container p span{
    color:white;

}
.seaside{
    position:absolute;
    margin-top:1000px;
    margin-left:600px;
    width:300px;
}

input {
	height:30px;
	-moz-border-radius: 12px;
	-webkit-border-radius:12px;
	border:6px solid #acc8e2;
	padding: 0 10px;
	width:250px;
}
#loginform, .content{
	clear:both;
	width:500px;
	margin:0 auto;
	color:#D1DFEF;
	text-decoration: none;
	-moz-border-radius: 20px;
	-webkit-border-radius:20px;
	padding:10px 15px;
	background-color: #E0E8EF;
	border:15px solid #acc8e2;
	color:#3f3f3f;
}
#loginform p {
    font-size: 11px;
    color:grey;
}
.module {
}
.module_error {
	color:#9c1215;
}
.module_error ol {
	padding:15px;
	margin:0 !important;
		font-size: 12px;
	
}
.module_error h4{
    font-weight:bold;
}
.module_error ol li {
	padding:0;
	list-style-type:none;
	margin:0;
}
#loginform a {
	color:#7099C4;
	   display:block;
	   margin-bottom:15px;
}
#loginform ol {
	width:401px;
	margin:0 auto;
}
#loginform ol li {
	display:block;
	overflow:hidden;

}
#loginform h2 {
	color:#3f3f3f;
	font-weight: bold;
	margin-top: 15px;
}
#loginform label {
	width:100px;
}
#loginform ol li p {
	margin-top: 15px;
	text-align: right;
}
#loginform ol li button{
    float:left;
    margin-top: 0;
    border-color:#819ab4;
}
#loginform .recover{
    padding-top:5px;
    float:left;
    width:200px;
    margin-top: 0;
    margin-left:30px;
    text-align:left;
    font-size: 14px;
}

.grid_4 p{
    font-size:12px;

}