.clear { clear: both; }

*:focus { outline: 0; }
*::-moz-focus-inner { border: 0; }

html { background: #344453;}
body { background: #d7e5ef url('../../images/web/footerbody.png') 0 -360px repeat-x; margin: 0; padding: 0; }
body { font-family: Helvetica, Arial, sans-serif;  font-size: 14px; color: #2c3945; line-height: 20px; }

#container { position: relative; min-height: 500px; width: 960px; padding: 160px 0 50px 0; margin: 0 auto; background: url("../../images/web/home/header.png") left top no-repeat; }


/* default buttons / BIG / GREEN / WHITE TEXT */
button,.button { background:#7bdb3a; background: -moz-linear-gradient(0% 100% 90deg, #5bd226, #9de54e); background: -webkit-gradient(linear, 0% 0%, 0% 100%,from(#9de54e),to(#5bd226)); color:#fff; font-weight:bold;  border: 1px solid #5bd226; text-shadow: #639f2f 1px 1px 0px; height: 40px; line-height: 40px; text-align: center; padding: 0 20px; -moz-border-radius: 5px; -webkit-border-radius: 5px;  display: block; font-size: 18px; }
button:hover,.button:hover {background:#6da833; background: -moz-linear-gradient(0% 100% 90deg, #2db80b, #9de54e);  background: -webkit-gradient(linear, 0% 0%, 0% 100%,from(#71d125),to(#2db80b)); border: 1px solid #2db80b; text-decoration: none; color: #FFF;}
button { height: auto; padding: 7px 0 10px 0; border:none;}
.blue { background:#00aedf; background: -moz-linear-gradient(0% 100% 90deg, #00aedf, #60c4eb); background: -webkit-gradient(linear, 0% 0%, 0% 100%,from(#60c4eb),to(#00aedf)); color:#fff; font-weight:bold;  border: 1px solid #00aedf; text-shadow: #00aedf 1px 1px 0px; height: 40px; line-height: 40px; text-align: center; padding: 0 20px; -moz-border-radius: 5px; -webkit-border-radius: 5px;  display: block; font-size: 18px; }
.blue:hover { background:#00aedf; background: -moz-linear-gradient(0% 100% 90deg, #0095c5, #60c4eb); background: -webkit-gradient(linear, 0% 0%, 0% 100%,from(#60c4eb),to(#0095c5)); color:#fff; font-weight:bold;  border: 1px solid #0095c5; text-shadow: #0095c5 1px 1px 0px; height: 40px; line-height: 40px; text-align: center; padding: 0 20px; -moz-border-radius: 5px; -webkit-border-radius: 5px;  display: block; font-size: 18px; }

input.text, textarea {  font-family: Georgia, Times, serif;  font-style: italic; width: 240px; border: none; background: #f8fcfd; border: 1px solid #C6D3DE;  -moz-border-radius: 3px; -webkit-border-radius: 3px; font-size: 14px; padding: 10px; }
input.text:focus,textarea:focus { -moz-box-shadow: 0 0 6px #C6D3DE; -webkit-box-shadow: 0 0 6px #C6D3DE; }
input.submit { width: 260px; height: 40px; -moz-border-radius: 3px; -webkit-border-radius: 3px; font-size: 16px;  }
input.submit {background:#72d934; background: -moz-linear-gradient(0% 100% 90deg, #5bd226, #9de54e); background: -webkit-gradient(linear, 0% 0%, 0% 100%,from(#9de54e),to(#5bd226)); color:#fff; font-weight:bold;  border: 1px solid #5bd226; text-shadow: #639f2f 1px 1px 0px; }
input.submit:hover {background:#6da833; background: -moz-linear-gradient(0% 100% 90deg, #2db80b, #71d125); background: -webkit-gradient(linear, 0% 0%, 0% 100%,from(#71d125),to(#2db80b)); border: 1px solid #2db80b; }

input[disabled] { background: gray; color: #CCC; }
input.text[disabled] { background: #EEE; color: #CCC; }
input.text,textarea { width: 100%; box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; -webkit-box-sizing: border-box; -khtml-box-sizing: border-box; }

form table { width: 100%; }
form table textarea { height: 140px; }
form table th { text-align: right; font-size: 14px; font-weight: normal; color:#2c3945; width: 1px; white-space: nowrap; font-weight: bold; }
form table td {color: #22a3d8; }
form table td em { color: #67737E; }
form table td, form table th { padding: 10px; }
form table td.first { padding-left: 0; color: #2c3945;}
form table th label { padding: 10px 0; display: block;}
form table small { color: #2c3945; }
form table td.buttons { text-align: right; padding-right: 0; width: 1px; white-space: nowrap; color: #67737E;  }

input.search { border-color: #75c7ea;}

a { text-decoration: none; color: #2c3945; }
a:hover { text-decoration: underline; color:#22a3d8; }

a.signon { display: block; text-indent: -999em; overflow: hidden; height: 22px; width:154px; height: 22px; width:154px; }
a.s_facebook { background: url('../../images/web/login-facebook.png') no-repeat; }
a.s_twitter  { background: url('../../images/web/login-twitter.png') no-repeat; }

#quicklinks { -moz-border-radius: 12px; -webkit-border-radius: 12px; position: absolute; right: 0; top: 12px; line-height: 24px; background: #2c3945; color: #4e6376; padding: 0 12px; font-size: 12px; }
#quicklinks a { margin: 0 6px; color: #D7E5EF; letter-spacing: 0.2px; }
#quicklinks a:hover { text-decoration: underline; color: #fff700; }
#quicklinks a.selected { color: #fff700; font-weight: bold; }

#content { min-height: 50px; position: relative; background: #FFF; padding: 20px; -moz-border-radius: 0 0 5px 5px; -webkit-border-bottom-left-radius: 5px; -webkit-border-bottom-right-radius: 5px;}

#intro { height: 290px; overflow: hidden; position: relative; }

#info { width: 420px;  position:relative; position: absolute; right: 40px; top: 40px; }
#info h1 { color: #FFF; font-size: 36px; margin: 0; padding: 0; text-shadow:0 1px 1px #4a7d9a; font-weight: bold;}
#info h3 { font-size: 16px; margin: 10px 0 0 0; padding: 0;  text-shadow:0 1px 1px #A1D8EF;}
#info p  { font-size: 13px; margin: 0; padding: 0; line-height: 18px; }

#mobile { position: relative; position: absolute; width: 470px; height: 270px; left: 0; top: 20px;  }
#mobile .info { position: absolute; left: 40px; top: 20px; z-index: 2; }
#mobile .info h2 { color: #2c3945; font-size: 18px; margin: 0; padding: 0;  text-shadow:0 1px 1px #A1D8EF; font-weight: bold;}
#mobile .info p { width: 140px; font-size: 13px; margin: 0; }
#mobile .info a:hover {color: #FFF;}

#mobile ul { position: absolute; bottom: 20px; left: 40px; padding: 0; margin: 0; list-style: none; width: 150px; overflow: hidden; }
#mobile ul li { margin-top: 10px; -moz-border-radius: 5px;  -webkit-border-radius: 5px; background: #FFF; width: 140px; position: relative; }
#mobile ul li a { display: block; width: 140px; padding-right: 10px; height: 60px; line-height: 60px; text-align: center; text-indent: -999em; }
#mobile ul li span { display: block; position: absolute; width: 130px; height: 50px; left: 5px; top: 5px; text-indent: -999em; }
#mobile ul li.web span { background: url("../../images/web/home/sprite.png") -636px -270px no-repeat; }
#mobile ul li.iphone span { background: url("../../images/web/home/sprite.png") -636px -321px no-repeat; }
#mobile ul li.android span { background: url("../../images/web/home/sprite.png") -636px -372px no-repeat; }
#mobile ul li.active a { background: url("../../images/web/home/menu-arrow.gif") right center no-repeat; }
#mobile ul li.hover,
#mobile ul li:hover a { text-indent: 0; text-decoration: none; color: #000; font-weight: bold; font-size: 16px; }
#mobile ul li:hover span { display: none; }

#mobile div.phones { height: 270px; width: 270px; position: absolute; left: 200px; top: 0; z-index: 1; }
#mobile div.iphone { background: url("../../images/web/home/sprite.png") -270px 0 no-repeat;  }
#mobile div.web { background: url("../../images/web/home/sprite.png")  no-repeat;  }
#mobile div.android { background: url("../../images/web/home/sprite.png") -540px 0 no-repeat;  }

#credentials { width: 420px; height: 80px; overflow: hidden; position:relative; position: absolute; right: 40px; bottom: 20px; background: #FFF; -moz-border-radius: 5px;  -webkit-border-radius: 5px; }

#credentials .s_facebook { position: absolute; top: 16px; right: 16px; }
#credentials .s_twitter { position: absolute; bottom: 16px; right: 16px; }

#credentials #register { left: 0; top: 0; padding: 20px 0 20px 280px; width: 140px; height: 40px; line-height: 40px; overflow: hidden; position:relative; position: absolute; font-size: 12px; }
#credentials #register a.login { background: #2c3945; color: #ebf3f7; -moz-border-radius: 4px;  -webkit-border-radius: 4px; padding: 3px 7px; margin-left: 3px; }
#credentials #register a.login:hover { background: #22a3d8; text-decoration: none; }
#credentials #register a.button { position: absolute; top: 16px; left: 16px; width: 176px; height: 46px; line-height: 46px;  }
#credentials #register a.button:hover {background: #22a3d8;  }

#credentials #login { left: 420px; top: 0; padding: 18px 20px; width: 380px; height: 44px; overflow: hidden; position:relative; position: absolute; line-height: 26px; font-size: 11px; }
#credentials #login input.text { width: 116px; margin-right: 10px; padding: 6px; }
#credentials #login input.button { position: absolute; top: 18px; right: 20px; height: 44px; width: 94px; }
#credentials #login .cookie { position: absolute; right: 124px; top: 49px; }

#content #features { list-style: none; margin: 25px 0 0 20px; padding: 0; }
#content #features li { padding: 20px 20px 20px 125px; margin: 0 40px 20px 0; background: #ebf3f7; height: 66px; overflow: hidden;  width: 275px; -moz-border-radius: 0 53px 53px 0;  -webkit-border-radius: 53px; float: left; position: relative;  }
#content #features li.nth-child-2n  { margin-right: 0; }
#content #features li:nth-child(2n) { margin-right: 0; }
#content #features li h2 { margin: 0; padding: 0; border: none; color: #2c3945; font-size: 24px; font-weight: bold; text-transform: none; line-height: 24px; }
#content #features li p { margin: 0; padding: 0; font-size: 11px; line-height: 14px; color: #344453; }
#content #features li p a { font-weight: bold; }
#content #features li img { position: absolute; top: 0; left: 0; }

#content #features li span { position: absolute; width: 106px; height: 106px; background: #F00; left: 0; top: 0; }
#content #features li.checkin span { background: url("../../images/web/home/sprite.png") -106px -270px no-repeat; }
#content #features li.friends span { background: url("../../images/web/home/sprite.png") 0 -270px no-repeat; }
#content #features li.kingdom span { background: url("../../images/web/home/sprite.png") -318px -270px no-repeat; }
#content #features li.medals  span { background: url("../../images/web/home/sprite.png") -212px -270px no-repeat; }
#content #features li.photos  span { background: url("../../images/web/home/sprite.png") -424px -270px no-repeat; }
#content #features li.messages  span { background: url("../../images/web/home/sprite.png") -530px -270px no-repeat; }

#search { height: 80px; background: #2c3945; overflow: hidden; position: relative; width: 420px; margin: 20px 0 10px 20px; -moz-border-radius: 5px;  -webkit-border-radius: 5px;  }
#search input.text { position: absolute; left: 20px; top: 20px; width: 300px; }
#search input.button { position: absolute; right: 20px; top: 20px; -moz-border-radius: 0 3px 3px 0; -webkit-border-top-left-radius: 0px; -webkit-border-bottom-left-radius: 0px; }

#medals { position: absolute; bottom: 0; right: 40px; width: 424px; height: 113px; background: url("../../images/web/home/sprite.png") bottom left no-repeat;  }

/* THE ALLWAYS IMPORTANT FOOTAH */
#footer { clear: both; background: url("../../images/web/footerbody.png") repeat-x; }
#footer .inner { height: 180px; position: relative; background: url('../../images/web/footerbody.png') center -180px no-repeat; }
#footer .content { width: 960px; margin: 0 auto; position: relative; height: 170px; }
#footer .links { position: absolute; left: 0px; top: 20px; color: #4E6376; font-size: 11px; letter-spacing: 0.2px; margin-left: -8px; }
#footer .links a { color: #d7e5ef; font-size: 11px; letter-spacing: 0.2px; font-weight: bold; margin: 0px 8px 0px 8px;}
#footer .links a:hover { color: #FFF700; }
#footer .feedback { position: absolute; top: 65px; color: #d7e7e7; font-size: 12px; font-family: Georgia, serif; letter-spacing: 0.2px; width: 300px; font-style: italic; font-weight: light; }
#footer .feedback a { color: #FFF; font-weight: bold; margin: 0;}

#overlay_background { z-index:100; background: #29343f; position: absolute; top: 0; width: 100%; height: 100%; cursor: pointer; }
#overlay_content { z-index:200; position: relative; position: absolute; top: 100px; width: 650px; left: 50%; margin-left: -325px; }
#overlay_content_shade { position: absolute; top: 10px; left: 10px; width: 640px; background: #29343f; min-height: 250px; -webkit-border-radius: 8px; -moz-border-radius: 5px; }
#overlay_content_content { position: absolute; top: 0; left: 0; width: 640px;   background: #ffffff; min-height: 250px; -webkit-border-radius: 8px; -moz-border-radius: 5px; }
#overlay_content_header { position: relative; height: 48px; padding: 20px 20px 20px 82px; background:  #76C7EB url("../../images/web/sprite.png") 0 -1px; -webkit-border-top-left-radius: 8px; -webkit-border-top-right-radius: 8px; -moz-border-radius: 5px 5px 0 0; }
#overlay_content_close { position: absolute; top: 10px; right: 10px; width: 30px; height: 30px; background: url("../../images/web/overlay-close.png"); cursor: pointer; }

#overlay_content_header h2 { white-space: nowrap; margin: 0; padding: 0; font-size: 28px; line-height: 30px; color: #232a34; text-shadow: #97d7f1 1px 1px 0px; }
#overlay_content_header h2 a.spot { font-size: 20px;  font-weight: normal; line-height: 14px; }
#overlay_content_header h2 a.spot:hover { color: #FFF; text-shadow:none;}
#overlay_content_header p { margin: 5px 0 0 0; padding: 0; letter-spacing: 0.2px; font-family: Georgia, Times, serif; font-style: italic; font-size: 14px; }
#overlay_content_header img.pic { position: absolute; left: 20px; top: 20px; height: 48px; width: 48px;  }
#overlay_content_header a.city,
#overlay_content_header span.ago,
#overlay_content_header a.city:hover,
#overlay_content_header span.ago:hover { color: #FFF; text-shadow: #4c94b5 1px 1px 0px; font-size: 12px; }
#overlay_content_header .subtitle { color: #FFF; text-shadow: #4c94b5 1px 1px 0px; font-size: 12px; font-weight: bold; }

#overlay_content_content .content { padding: 20px; }
#overlay_content_content .content textarea { width: 600px; margin-bottom: 20px; }
#overlay_content_content .content table td { padding: 5px 0; }


#mobile ul li,
#credentials {
	background: -webkit-gradient(
		linear,
		0% 0%, 0% 100%,
		from(#ffffff),
		to(#e0eff6)
		);
	background: -moz-linear-gradient(
		0% 100% 90deg,
		#e0eff6,
		#ffffff
		);
}


#credentials #register a.button:hover {
		
			background:#6da833; background: -moz-linear-gradient(0% 100% 90deg, #2db80b, #71d125);  background: -webkit-gradient(linear, 0% 0%, 0% 100%,from(#71d125),to(#2db80b)); border: 1px solid #2db80b; text-decoration: none; color: #FFF;

}