/* standard hp gray */

@import url(//fonts.googleapis.com/css?family=Open+Sans:400,300,700&subset=latin,latin-ext);

* {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;}

body {
	font-family: 'Open Sans', 'sans-serif';
	color: #666;}
	
.thm1005 body {
	background-color: #f3f3f3;
	background-image: url(images/bgstip.jpg);
	background-position: center top;
	background-repeat: no-repeat;}

.wrapper {
	width: 980px;}

/* welcome */

header {
    padding: 2em 0;
    
    background: none;
}
#welcome em {
    color: #999999;
    font-size: 1.1em;}
#welcome a.btn-s {
    font-weight: 700;
    text-transform: uppercase;
	text-shadow: 0 2px 0 rgba(0,0,0,.2);}
#welcome .register {
	text-transform: uppercase;
	background-color: #fd990f;
	border: solid 1px #fb9910;
	background-image: -webkit-gradient(linear, 0 100%, 0 0, from(#fd9910), to(#fec96a));
	background-image: -webkit-linear-gradient(bottom, #fd9910, #fec96a);
	background-image: -moz-linear-gradient(bottom, #fd9910, #fec96a);
	background-image: -o-linear-gradient(bottom, #fd9910, #fec96a);
	background-image: linear-gradient(bottom, #fd9910, #fec96a);}
	#welcome .register:hover {
		background-color: #fec96a;
		background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#fd9910), to(#fec96a));
		background-image: -webkit-linear-gradient(#fd9910, #fec96a);
		background-image: -moz-linear-gradient(#fd9910, #fec96a);
		background-image: -o-linear-gradient(#fd9910, #fec96a);
		background-image: linear-gradient(#fd9910, #fec96a);}
#welcome .login {
	background-color: #507ed2;
	border: solid 1px #4f7ed1;
	background-image: -webkit-gradient(linear, 0 100%, 0 0, from(#507ed2), to(#6994e1));
	background-image: -webkit-linear-gradient(bottom, #507ed2, #6994e1);
	background-image: -moz-linear-gradient(bottom, #507ed2, #6994e1);
	background-image: -o-linear-gradient(bottom, #507ed2, #6994e1);
	background-image: linear-gradient(bottom, #507ed2, #6994e1);}
	#welcome .login:hover {
		background-color: #6994e1;
		background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#507ed2), to(#6994e1));
		background-image: -webkit-linear-gradient(#507ed2, #6994e1);
		background-image: -moz-linear-gradient(#507ed2, #6994e1);
		background-image: -o-linear-gradient(#507ed2, #6994e1);
		background-image: linear-gradient(#507ed2, #6994e1);}

#signinDropdownContainer FORM .submitButton {
    background-color: #feaa2f;
    background-image: -webkit-linear-gradient(center bottom , #fec96a, #fd9910);
    background-image: -moz-linear-gradient(#fec96a, #fd9910);
    background-image: linear-gradient(#fec96a, #fd9910);
    border-radius: 5px;
	font-family: 'Open Sans', 'sans-serif';
    font-weight: 700;
    text-transform: uppercase;
	border: none;
    color: #fff;
}

#signinDropdownContainer FORM .submitButton:hover,
.browser-internet-explorer-8 #signinDropdownContainer FORM .submitButton:hover {
    background-color: #fec96a;
    background-image: -webkit-linear-gradient(#fd9910, #fec96a);
    background-image: -moz-linear-gradient(#fd9910, #fec96a);
    background-image: linear-gradient(#fd9910, #fec96a);
    color: #fff;
}

.browser-internet-explorer-8 #signinDropdownContainer FORM .submitButton { background: #feaa2f; }
.browser-internet-explorer-8 #signinDropdownContainer FORM .submitButton:hover { background-color: #fec96a; }

/* visual */

#visual {
	background-color: #fff;
	-webkit-box-shadow: 3px 3px 3px rgba(0, 0, 0, .15);
	-moz-box-shadow: 3px 3px 3px rgba(0, 0, 0, .15);
	box-shadow: 3px 3px 3px rgba(0, 0, 0, .15);
	border-radius: 10px;
	width: 100%;
	min-height: 420px;}

#customImage {
	background-repeat: no-repeat;
	background-position: right bottom;
	position: relative;
	min-height: 420px;
	width: 680px;
	float: left;}

	.real_user {
		background-color: #fff;
	    background-color: rgba(255,255,255,.9);
		color:#222;
	    border-radius: 4px;
	    font-size: 12px;
		line-height:14px;
	    padding: 5px 11px;
	    position: absolute;
	    right: 12px;
		bottom: 13px;
		box-shadow: 1px 1px 3px rgba(0,0,0,.4);}
	.real_user strong {
		color:#F76834;}

#customText {
	width: 450px;
	height: 420px;
	overflow: hidden;
	position: absolute;
	left: 0;
	top: 0;
	padding: 30px 100px 20px 30px;}

#customText h1 {
    font-size: 28px;
    font-weight: 300;
    line-height: 28px;
    margin: 0 0 30px;
    padding: 0;
    position: relative;
    text-transform: uppercase;}
    #customText h1:after {
	    background-color: #FD9B14;
	    content: "";
	    display: block;
	    height: 3px;
	    margin-top: 10px;
	    width: 170px;}
#customText div, #customText p {
	font-size: 14px;
	font-weight: 300;}
	#customText div a:after, #customText div a:before {
	    clear: both;
	    content: "";
	    display: block;
	    height: 20px;
	    width: 100%;}
	#customText div .ts_join,
#hpformnew 	FORM button[type="submit"] {
		color: #fff;
		font-weight: 700;
		font-size: 24px;
		padding: 0.3em 1em;
		text-shadow: 0 2px 0 rgba(0,0,0,.2);
		text-transform: uppercase;
		border-radius: 10px;
		background: #fd990f;
		-webkit-box-shadow: 1px 2px rgba(0,0,0,.35);
		-moz-box-shadow: 1px 2px rgba(0,0,0,.35);
		box-shadow: 1px 2px rgba(0,0,0,.35);
		border: solid 1px #fb9910;
		display: inline-block;
		background-image: -webkit-gradient(linear, 0 100%, 0 0, from(#fd9910), to(#fec96a));
		background-image: -webkit-linear-gradient(bottom, #fd9910, #fec96a);
		background-image: -moz-linear-gradient(bottom, #fd9910, #fec96a);
		background-image: -o-linear-gradient(bottom, #fd9910, #fec96a);
		background-image: linear-gradient(bottom, #fd9910, #fec96a);}

    	#hpformnew 	FORM button[type="submit"] {
    		padding: 0.3em 0; 
			margin-top:4px !important;}

		#customText div .ts_join span {
			font-weight: 300;
			text-shadow: none;
			color: #000;}
		#customText div .ts_join:hover,
		#hpformnew FORM button[type="submit"]:hover {
			background-color: #fec96a;
			color: #fff;
			text-decoration: none;
			background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#fd9910), to(#fec96a));
			background-image: -webkit-linear-gradient(#fd9910, #fec96a);
			background-image: -moz-linear-gradient(#fd9910, #fec96a);
			background-image: -o-linear-gradient(#fd9910, #fec96a);
			background-image: linear-gradient(#fd9910, #fec96a);}

#formHolder {
	background: #E9E9E9 url(images/form-gradient.png);
	border-radius:0 10px 10px 0;
	background-repeat: repeat-x;
	background-position: left center;
	float: right;
	width: 300px;
	padding: 15px;
	position: relative;
	min-height: 420px;}
	
	#formHolder:after {
		background-image: url(images/form-shadow.png);
		width: 11px;
		min-height: 420px;
		content: "";
		display: block;
		background-repeat: no-repeat;
		background-position: right center;
		position: absolute;
		left: -11px;
		top: 0;}

#hpformnew FORM button[type="submit"] {
	cursor: pointer;
	margin-top: 10px;
    width: 100%;
	font-family: 'Open Sans', 'sans-serif';
    white-space: normal; /* m.rancic */
}

#formHolder > h3 {
    color: #666666;
    font-size: 24px;
    font-weight: 700;
    margin: 0;
    padding: 0;
    text-shadow: 0 1px 0 #FFFFFF;
    text-transform: uppercase;}
.genderBox {
    float: left;
    width: 50%;
    padding: 0.2em;}
FORM .row {
    padding: 0.2em;}
FORM .row.selectMenus {
    padding: 0;}
.genderBox:after {
    clear: both;
    content: "";
    display: block;}
#hpformnew input, #hpformnew select {
	border: none;
    border: 1px solid #CCCCCC;
    color: #666;
    font-size: 13px;
    padding: 3px;
    width: 100%;}
#hpformnew select.birthday_month {
    width: 41%;}
#hpformnew select.birthday_day, #hpformnew select.birthday_year {
    width: 28%;}
.disclaimer a {
	color: #6699cc;}

/* profiles */

#profiles > h3,
#browse-links h5 {
    color: #777;
    font-size: 30px;
    font-weight: 300;
    margin: 40px 0 10px;
    text-align: center;
    text-shadow: 0 1px 0 #FFFFFF;
    text-transform: uppercase;}
#profiles > div {
	background-color: #fff;
	padding: 20px;
	-webkit-box-shadow: 3px 3px 3px rgba(0, 0, 0, .15);
	-moz-box-shadow: 3px 3px 3px rgba(0, 0, 0, .15);
	box-shadow: 3px 3px 3px rgba(0, 0, 0, .15);
	border-radius: 10px;}
UL.profiles {
    margin: 0;
    padding: 0;
    text-align: center;}
UL.profiles.short LI {
    margin: 7px;
    width: 140px;}
UL.profiles.short .thumbnail {
    border-width: 2px;}
UL.profiles.short LI:hover .thumbnail {
    box-shadow: none;}

UL.profiles .username {
    font-size: 1.2em;
    font-weight: 700;}
    .username > a {
 	   color: #6699CC;}
UL.profiles.short LI .profileInfo {
    text-align: center;}
	UL.profiles.short LI .profileInfo P .location {
    	color: #999;
    	font-size: 1.1em;
    	opacity: 1;}

/* footer */

#footer {
    color: #888;
    background: none;
}
#footer a, #footer ul li a, footer#footer UL LI A {
    color: #62666B;
    text-decoration: underline;
    font-weight: normal;
}
#footer a:hover, #footer ul li a:hover, footer#footer UL LI A:hover {
    color: #6699CC;
    text-decoration: none;}
#footer h2, #footer h3, #footer h4, #footer h5 {
    color: #666;
    font-weight: 300;
    text-shadow: 0 1px 1px rgba(255, 255, 255, 0.8);
    text-transform: uppercase;}

/* ie */

.browser-internet-explorer #visual {
	width: 980px;}
.browser-internet-explorer-8 UL.short.profiles LI {
	width: 140px;}

.thm1007 #profiles > h3, 
.thm1007 #footer h2 {
	color:#eee; 
	text-shadow:none;}

.thm1033 #visual {margin-top:20px;}


/* m.rancic,29.04.2014. */
.disclaimer a:hover { text-decoration: underline; }
.browser-internet-explorer-8 #hpformnew FORM button[type="submit"] { background-image: none; }
.browser-safari #customText div .ts_join { margin: 20px 0; }
#signinDropdownContainer .blockLabels input[type="text"], #signinDropdownContainer .blockLabels input[type="password"] { border: none; }
/* 05.05.2015. */
.regGeoLocationContainer #form_signup_city_name { font-size: 1.2em; }
#registerMultiStepContainer FORM #form_signup_cross_regs_sponsors label {
    font-size: 0.8em;
    margin-bottom: 0;
    font-weight: normal;
    text-align: left;
}
.browser-safari #registerMultiStepContainer FORM SELECT { line-height: 2em; }
#footer .custom-footer p { font-size: 1.5em; line-height: 1.3em; }
.custom-footer { border-bottom: 1px solid #bbb; }
/**/


/* mediaqueries */

@media screen and (max-width: 640px) {
	.wrapper {
		width:auto;
		max-width: 320px;}
	footer#footer {
 	   padding: 0;}
 	footer .wrapper {
 	   padding: 2%;}
	#visual {
	    height: auto;}
	#customImage {
	    background-image: none !important;
	    float: none;
	    height: auto;
	    width: 100%;}
	#customText {
	    background-color: rgba(255, 255, 255, 0.9);
	    height: auto;
	    padding: 20px;
	    position: relative;
	    width: 100%;}
	.real_user {
	    display: none;}
	#formHolder {
	    float: none;
	    width: 100%;}
	#formHolder:after {
	    display: none;}
	#customText div .ts_join {
	    font-size: 22px;}
	UL.profiles.short LI {
	    width: 200px;}
}
@media screen and (min-width: 640px) and (max-width: 980px) {
	.wrapper {
		width: 640px;}
	#visual {
	    height: auto;}
	#customText {
	    width: 450px;}
	#customImage {
	    width: 100%;}
	#formHolder:after {
	    display: none;}
	#formHolder {
	    padding: 15px 20%;
	    width: 100%;}
	UL.profiles.short LI {
	    width: 180px;}
}
@media (max-width:640px) {
/* Logo Horizontal Centering */
  #logo {width:auto;	text-align:center; float:none;	max-width:none; margin:3em 0 .5em 0 !important; padding:0 !important; }
  #logo img, #logo a {width:auto; padding:0; margin:0; display:inline-block;}
/* Welcome centering */
  #welcome {width:100%; text-align:center; display:inline-block; margin:1em 0 3em 0 !important; padding:0; }
}
@media (max-width:640px) {
	#welcome .signupWrap {display:inline-block;}
	#welcome a.login, #welcome a.register {display:inline-block !important; min-width:10em; padding:.7em .5em; margin:0 .4em;}
}

/* m.rancic,29.04.2014. */
@media screen and (min-width:2000px) { body { font-size: 62.5%; } }
/**/

/* Sponsor */
#form_signup_cross_regs_sponsors {
    width: 100%;
    display: block;
    clear: both;
}
/**/