/* KLEUREN ELEMENTEN */
/* Background blue      #d7e5ef; */
/* Light Blue           #76c7ea; */
/* Blue                 #22a3d8; */
/* Dark blue            #2C3945; */
/* Very dark blue       #232a34; */
/* Yellow               #fff700; */
/* Input border		    #c6d3de; */

/* KLEUREN FONTS */
/* Standard Blue fonts  #22a3d8; */
/* Link hover           #22a3d8; */
/* Bright Blue fonts    #0cacee; */
/* Dark blue fonts      #2C3945; */
/* Light blue fonts     #adbec8; */
/* Bright h3 font       #00a9ee; */

form#login,form#register { background: #d7e7ef; margin: -10px; padding: 10px; }
form#register { margin-bottom: 10px; }

table { width: 100%; border-collapse: collapse; }
table tr { border: 0; padding: 0; margin: 0; }
table tr td { border: 0; padding: 0; margin: 0; }

.hidden { display: none; }


td.icon-foursquare { background: url('../../images/mobile/icon-social-foursquare.png') no-repeat; width: 40px; height: 32px; }
td.icon-twitter { background: url('../../images/mobile/icon-social-twitter.png') no-repeat; width: 40px; height: 32px; }
td.icon-hyves { background: url('../../images/mobile/icon-social-hyves.png') no-repeat; width: 40px; height: 32px; }
td.icon-facebook { background: url('../../images/mobile/icon-social-facebook.png') no-repeat; width: 40px; height: 32px; }

input { width: auto; display: block; margin: 5px 0 10px 0; }
input.text,textarea { border: 1px solid  #c6d3de; -moz-border-radius: 5px; -webkit-border-radius: 5px; font-size: 16px; height: 30px; padding: 5px 10px;  }
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; }

select { 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; }

input.text { height: 30px; }
input.checkbox { width: 24px; height: 24px; margin: 0; padding: 0; }
textarea {height: 40px; font-family: Georgia, Times, serif; }
.blur { font-style: italic; color: #999; }

.button { background: #2C3945; color: #fff700; display: block; text-align: center; line-height: 50px; border: none; -moz-border-radius: 5px; -webkit-border-radius: 5px; height: 50px; width: 100%; padding: 0; font-size: 18px; font-weight: bold; text-transform: uppercase; }
.button.bright { background: #22a3d8; color: #FFF; }
.button.transparent { background: #FFF; border: 1px solid #2C3945; height: 40px; display: block; line-height: 44px; color: #2C3945;  }

form#login .button {  margin-top: 10px; margin-bottom: 20px; }

label { display: block; font-weight: bold; color: #2C3945; font-size: 14px; }
#content { padding: 10px; background: #FFF; }

div#download { display: block; height: 40px; background: url('../../images/mobile/download-bg.png') 0 0 repeat-x; line-height: 40px; font-weight: bold; text-align: center;  }
div#download a { display: block; }
div#download a.iOs { background: url('../../images/mobile/download-ios.png') 0 0 no-repeat; text-indent: -999em; }
div#download a.android { background: url('../../images/mobile/download-android.png') 0 0 no-repeat; text-indent: -999em; }
div#download a.bb { background: url('../../images/mobile/download-blackberry.png') 0 0 no-repeat; text-indent: -999em; }

div#message { background: #fff700; padding: 10px; font-weight: bold; text-align: center;  }

/* this time this is allowed because we would never want standard ul on mobile interfaces ;) */
a { text-decoration: none; color: #2C3945; }
a img { border: none; }

ul { margin: 0; padding: 0; list-style: none; background: #FFF;  }
ul li { -webkit-margin-top-collapse: separate; -webkit-margin-bottom-collapse: separate; }
ul li { padding: 7px 20px 7px 42px; min-height: 32px; position: relative; overflow: hidden; border-bottom: 1px solid #d7e7ef; }
ul li:last-child { border-bottom: none; }
ul li a { margin: -7px -30px -7px -42px; padding: 7px 20px 7px 42px; position: relative; overflow: hidden; min-height: 32px; display: block; text-decoration: none; background: url('../../images/iphone/chevron.png') center right no-repeat; }
ul li img.pic { position: absolute; left: 0; top: 7px; width: 32px; height: 32px; }

ul li img#chevron {float: right; margin-top: -16px; }


ul li span.title { display: block; color: #28323c; font-weight: bold; font-size: 16px; text-overflow: ellipsis; overflow: hidden; white-space: nowrap; text-decoration: none; }

ul li span.sidetitle {  color: #28323c; font-size: 14px; text-overflow: ellipsis; overflow: hidden; white-space: nowrap; text-decoration: none; }
ul li span.sub { display: block; color: #28323c; font-size: 14px; text-overflow: ellipsis; overflow: hidden; white-space: nowrap; text-decoration: none; }

ul li span.title .mini { display: inline-block; width: 13px; height: 18px; margin-left: 5px; }
ul li span.title .spot   { background: url('../../images/mobile/menu-mini.png') -3px -303px no-repeat; }
ul li span.title .event  { background: url('../../images/mobile/menu-mini.png') -3px -501px no-repeat; }

ul li span.line { color: #232a34; font-family: Georgia, serif; font-size: 12px; }
ul li span.date { display: block; color: #ADBEC8; font-size: 10px; margin: 4px 0 0 0; text-transform: uppercase;Credeble }

ul li span.rating span.stars { font-size: 14px; color: #CCC; color: #0cacee;}
ul li span.rating span.stars .empty { color: #FFF; text-shadow: #97d7f1 0px 0px 2px; }
ul li span.rating span.stars2 { display: block; float: left; margin: 3px 5px 0 0; width: 68px; background: url('../../images/mobile/stars.gif') no-repeat; text-indent: -999em; }
ul li span.rating span.star-1 { background: url('../../images/mobile/stars.gif') -56px 0 no-repeat; }
ul li span.rating span.star-2 { background: url('../../images/mobile/stars.gif') -42px 0 no-repeat; }
ul li span.rating span.star-3 { background: url('../../images/mobile/stars.gif') -28px 0 no-repeat; }
ul li span.rating span.star-4 { background: url('../../images/mobile/stars.gif') -14px 0 no-repeat; }
ul li span.rating span.star-5 { background: url('../../images/mobile/stars.gif') 0 0 no-repeat; }

ul li.metadata { background: #D7E5EF; height: 21px; line-height: 21px; padding: 0; position: relative; overflow: hidden; min-height: 0; font-size: 10px; }
ul li.metadata span.rating { position: absolute; left: 42px; display: block; }
ul li.metadata span.comments { color: #FFF700; display: block; text-align: center; line-height: 15px; height: 15px; width: 18px; padding: 0 3px 0 0; position: absolute; top: 3px; right: 3px; background: url('../../images/mobile/comment.png') no-repeat; }
ul li.metadata span.hasphoto { display: block; position: absolute; left: 3px; top: 4px; width: 21px; height: 13px; background: url('../../images/mobile/icon-camera.png') no-repeat;  }

ul li.withstat { padding: 7px 56px 7px 42px; }
ul li.withstat a { padding: 7px 56px 7px 42px; margin: -7px -56px -7px -42px;  min-height: 46px; }

ul li span.stat { position: absolute; line-height: 38px; font-weight: bold; display: block; right: 0; height: 46px; width: 46px; background: #d7e5ef; text-align: center; bottom: 6px; color: #2C3945; font-size: 20px; -moz-border-radius: 3px; -webkit-border-radius: 3px; }
ul li span.stat span.unit { font-weight: normal; font-size: 10px; display: block; text-align: center; width: 46px; position: absolute; bottom: 0; line-height: 22px; }

ul.back li { color: #2c3945; font-size: 18px; font-weight: bold; line-height: 46px; padding-right: 0; border-bottom: 1px solid #d7e7ef;  border-top: 1px solid #d7e7ef;  }
ul.back li a { color: inherit; background: url('../../images/mobile/chevron-reverse.png') center left no-repeat; padding-left: 50px; padding-right: 0; margin-right: 0; }



ul li.award { margin: 0; padding: 5px; }
ul li.award span { float: right; padding: 5px 8px; background: #d7e5ef; font-weight: bold; font-size: 14px; -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px; margin: 4px 0px 4px 0;}

ul.menu { background: #FFF; }
ul.menu li { color: #2c3945; font-size: 18px; font-weight: bold; line-height: 36px; min-height: 36px; padding-right: 30px; }
ul.menu li a { color: inherit; padding-left: 50px; padding-right: 30px; margin-right: -30px; min-height: 36px; }

ul.menu li.activity { background: url('../../images/mobile/menu.png') 0 0 no-repeat; }
ul.menu li.kingdom  { background: url('../../images/mobile/menu.png') 0 -100px no-repeat; }
ul.menu li.medals   { background: url('../../images/mobile/menu.png') 0 -200px no-repeat; }
ul.menu li.people   { background: url('../../images/mobile/menu.png') 0 -300px no-repeat; }
ul.menu li.find     { background: url('../../images/mobile/menu.png') 0 -400px no-repeat; }
ul.menu li.map      { background: url('../../images/mobile/menu.png') 0 -500px no-repeat; }
ul.menu li.awards   { background: url('../../images/spotawards/s/default.png') 5px 10px no-repeat; }
ul.menu li.settings { background: url('../../images/mobile/menu.png') 0 -900px no-repeat; }

ul li.king          { background: url('../../images/mobile/menu.png') -2px -100px no-repeat; }
ul li.spot          { background: url('../../images/mobile/menu.png') -4px -600px no-repeat; }
ul li.popularspot   { background: url('../../images/mobile/menu.png') 0 -700px no-repeat; }
ul li.favspot       { background: url('../../images/mobile/menu.png') 0 -800px no-repeat; }
ul li.event         { background: url('../../images/mobile/menu.png') 0 -1000px no-repeat; }

ul li.event .eventVisitors { position: absolute; bottom: 0; right: 65px; width: 21px; height: 24px; line-height: 36px; font-size: 10px; color: #FFF; text-align: center; background: url('../../images/mobile/people.png') 0 0 no-repeat; }
ul li.event .eventRSVP     { position: absolute; bottom: 0; right: 40px; width: 21px; height: 24px; line-height: 36px; font-size: 10px; color: #FFF; text-align: center; background: url('../../images/mobile/people.png') -26px 0 no-repeat; }

ul.noresults li { font-style: italic; color: #999; font-size: 16px; font-family: 'Georgia'; padding-left: 0; }

#content ul.grouped { margin: -10px; padding: 10px; }
ul.grouped { background: #d7e7ef; }
ul.grouped li { background: #FFF; border: 1px solid #c6d3de; border-bottom: none; padding: 10px; line-height: 18px; min-height: 0; height: auto; }

ul.grouped li.link a { font-size: 18px; font-weight: bold; line-height: 32px; margin:-7px -10px -7px -42px; }

ul.grouped li h1 { margin: 0; padding: 0; line-height: 24px; }
ul.grouped li.highlight { font-size: 16px; }

ul.grouped li.rate.self,
ul.grouped li.rate.self select,
ul.grouped li.rate.self option { font-size: 16px; }
ul.grouped li.rate.self select { border: 1px solid #5A5D27; }
ul.grouped li.rate.self select:focus { -moz-box-shadow: 0 0 6px #fff700; -webkit-box-shadow: 0 0 6px #fff700; }

ul.grouped li:first-child { -moz-border-radius: 5px 5px 0 0; -webkit-border-top-left-radius: 5px;  -webkit-border-top-right-radius: 5px;  }
ul.grouped li:last-child { -moz-border-radius: 0 0 5px 5px; -webkit-border-bottom-left-radius: 5px;  -webkit-border-bottom-right-radius: 5px;  border-bottom: 1px solid #c6d3de;   }
ul.grouped li:first-child:last-child  { -moz-border-radius: 5px; -webkit-border-radius: 5px; }
ul.grouped textarea { border: none; padding: 0; }

ul.grouped.activity li { padding: 7px 30px 7px 53px; height: 32px; overlow: hidden; }
ul.grouped.activity li .title { line-height: 16px; }

ul.grouped.activity li.spot { background: #FFF url('../../images/mobile/menu.png') 7px -600px no-repeat; }
ul.grouped.activity li.event { background: #FFF url('../../images/mobile/menu.png') 7px -1000px no-repeat; }

ul.message li { border: none; font-style: italic;  font-family: Georgia, Times, serif; text-shadow: #97d7f1 1px 1px 0px; font-size: 13px;  }
ul.message li.photo { min-height: 32px; position: relative; }
ul.message li.photo img { position: absolute; top: 9px; left: 9px;  border:1px solid #76C7EA; border-left:1px solid #22A3D8; border-top:1px solid #22A3D8; }
ul.message li.photo a { padding: 10px 10px 10px 52px; margin: -10px; background: none; }

ul.replies { background: none;  }
ul.replies li { border-bottom: 1px solid #18202b; }
ul.replies li img { padding: 10px; background: #18202b; -moz-border-radius: 5px; -webkit-border-radius: 5px; }
ul.replies li { padding:7px 20px 7px 72px; }
ul.replies li a { background: none; margin: -7px -20px -7px -72px; padding:7px 20px 7px 72px;}
ul.replies li img { left: 10px; }
ul.replies li:nth-child(even) { padding:7px 72px 7px 20px; text-align: right; }
ul.replies li:nth-child(even) a { background: none; margin: -7px -72px -7px -20px; padding:7px 72px 7px 20px;}
ul.replies li:nth-child(even) img { right: 10px; left: auto; }
ul.replies li span.title { color: #FFF700; font-size: 14px; line-height: 18px; }
ul.replies li span.line { color: #FFF; }


form.reply { padding: 10px; background: #d7e7ef; }

#header {padding: 10px 0; background: #2C3945; }

#header ul { height: 35px; overflow: hidden; border-bottom: 20px solid #76c7ea; background: none; white-space: nowrap; }
#header table { width: 100%; }
#header td { height: 36px; min-height: 36px; width: 25%; line-height: 36px; text-align: center; font-size: 16px; font-weight: bold; border: none; padding: 0 5px; margin: 0; }
#header a{ display: block; color: #D7E7EF; background: none; margin: 0; padding: 0; min-height: 35px; }
#header a.selected { background: #76c7ea; color: #28323c; -moz-border-radius: 5px; -webkit-border-radius: 5px; }
#header #logo { height: 65px;  background: url('../../images/mobile/logos.gif') 18px -30px no-repeat; }

#subheader { position: relative; background: #69c0e6; height: 48px; padding: 20px 0 20px 68px; }
#subheader .pic { position: absolute; left: 10px; top: 20px; }
#subheader h1,
#subheader h2,
#subheader h3 { margin: 0; padding: 0 90px 0 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; border-bottom: none; }
#subheader h1 { font-size: 22px; line-height: 22px; color: #28323c;}
#subheader h1.spot { padding: 0;}
#subheader h2 { font-size: 15px; font-weight: normal; line-height: 16px; }
#subheader h3 { font-size: 11px; font-weight: normal; color: #fff; line-height: 14px; text-transform: none; }

#subheader .stat { height:41px; width:60px; padding:7px 0 0; line-height:24px; color:#2C3945; font-size:24px; font-weight:bold; border-left:1px solid #22A3D8; border-top:1px solid #22A3D8; text-align: center;  position: absolute; top: 20px; right: 10px; background: #FFF; -moz-border-radius:5px; -webkit-border-radius:5px; }
#subheader .stat span { color: #22a3d8; font-size: 11px; line-height: 14px; font-weight: normal; display: block; margin:0;}

#stats { position: relative; background: #22a3d8; height: 48px; padding: 20px 10px; }
#stats .stat { height:41px; width:60px; padding:7px 0 0; line-height:24px; color:#2C3945; font-size:24px; font-weight:bold; border-left:1px solid #22A3D8; border-top:1px solid #22A3D8; text-align: center;  position: absolute; top: 20px; right: 10px; background: #FFF; -moz-border-radius:5px; -webkit-border-radius:5px; }
#stats .second { right: 80px; }

#stats .stat span { color: #22a3d8; font-size: 10px; line-height: 14px; font-weight: normal; display: block; margin:0;}

#stats span.title strong { display: block; font-size: 14px; }
#stats span.title { display: block; }
#stats span.line { color: #FFF;  }

#submenu { background: #d7e5ef; position: relative; padding: 1px 0 }
#submenu ul { padding: 8px 5px 0 5px; margin: 0; list-style: none; background: none; }
#submenu ul li { display: inline-block; margin: 0 5px 8px 5px; padding: 0; min-height: 0; }
#submenu ul li a { text-decoration: none; display: block; margin: 0; padding: 0; min-height: 0; background: #fff; -moz-border-radius: 11px; -webkit-border-radius: 11px;  border: 1px solid #c6d3de; line-height: 22px; font-size: 13px; color: #2c3945; padding: 0 10px; }
#submenu ul li.selected a { color: #fff; background: #2c3945; border: 1px solid #2c3945;}

#submenu .button { margin: 10px; width: auto; }

#spotmenu {padding: 10px; background: #FFF;}

#locationfix { line-height: 15px; padding: 5px; font-weight: bold; color: #2C3945; }
#locationfix span { color: #FFF700; display: inline-block; line-height: 22px; padding: 0 10px; }

span#locationstrength { text-indent: -999em; min-width: 6px; }
#locationstrength.level-0 { background: #2c3945 url('../../images/mobile/signal.gif') 5px -109px no-repeat; }
#locationstrength.level-1 { background: #2c3945 url('../../images/mobile/signal.gif') 5px -88px no-repeat; }
#locationstrength.level-2 { background: #2c3945 url('../../images/mobile/signal.gif') 5px -67px no-repeat; }
#locationstrength.level-3 { background: #2c3945 url('../../images/mobile/signal.gif') 5px -46px no-repeat; }
#locationstrength.level-4 { background: #2c3945 url('../../images/mobile/signal.gif') 5px -25px no-repeat; }
#locationstrength.level-5 { background: #2c3945 url('../../images/mobile/signal.gif') 5px -4px no-repeat; }

h3 { color: #22a3d8; margin: 0; padding: 0; border-bottom: 1px solid #76c7eb; font-size: 14px; font-weight: normal; text-transform: uppercase; line-height: 28px;  }
#content .menu { margin: -10px 0 }

#search { background: #76C7EA; padding: 10px; position: relative; }
#search input.text { margin: 0; border: 1px solid #2c3945; }
#search .button { position: absolute; bottom: 0; right: 0; padding: 0 15px; height: 30px; line-height: 34px; font-size: 13px; -moz-border-radius: 0 5px 5px 0; -webkit-border-top-left-radius: 0;  -webkit-border-bottom-left-radius: 0; }

#eventheader { background: #2C3945; padding: 10px 15px; margin: -10px; color: #FFF; }
#eventheader h2 { font-size: 24px; margin: 10px 0 0 0; }
#eventheader p { font-style: italic; font-family: Georgia, serif; margin: 5px 0 10px 0;   }
#eventheader .date { position: relative; background: #28323C; padding: 0 10px; line-height: 28px; margin: 10px 0; color: #fff700; font-size: 13px; font-weight: bold; -moz-border-radius: 3px; -webkit-border-radius: 3px; }
#eventheader .date span.now { display: block; position: absolute; right: 0; top: 0; padding: 0 5px; -moz-border-radius: 3px; -webkit-border-radius: 3px;   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;  }
#eventheader .date span.past { display: block; position: absolute; right: 0; top: 0; padding: 0 5px; -moz-border-radius: 3px; -webkit-border-radius: 3px;   background:#7bdb3a; background: #76C7EA; color:#fff; font-weight:bold;  text-shadow: #2C3945 1px 1px 0px;  }
#eventheader div.now { padding-right: 50px; }
#eventheader div.past {  padding-right: 90px;}

#spotmap { margin-top: -20px; }
#spotadd { padding: 10px; padding-top: 0; color: #fff; }

#spotsgoogle { padding: 10px; background: #FFF; margin-top: -10px; }

#spotdetails { background: #2e3643; height: 132px; position: relative; }
#spotdetails div { background: #373f4b; -webkit-border-radius: 5px; position: absolute; padding: 5px 10px; color: #fff200; line-height: 16px; }
#spotdetails strong { color: #22a3d8;  }
#spotdetails label { display: inline-block; width: 70px; color: inherit; font-size: 12px; }
#spotdetails .kings { top: 10px; left: 10px; width: 160px; }
#spotdetails .stats { bottom: 10px; left: 10px; width: 160px; color: #22a3d8;   }
#spotdetails .medaille { top: 10px; right: 10px; width: 90px; height: 102px; }
#spotdetails .stats strong { color: #fff200; }

body,html {	margin: 0; padding: 0; font-size: 12px; background: #2C3945; color:#28323c; }
* {
	font-family: 'Helvetica', Arial, sans-serif;
	-webkit-text-size-adjust:none;		  /* Turn off font resizing */
}
div { 
	-webkit-user-select: none; 					/* User selection off */
}
a { 
	-webkit-touch-callout :none; 				/* popup op links */
}

span.tab { font-weight: bold; font-size: 14px; padding: 8px 0 5px; margin: 6px 0 0; -moz-border-radius: 5px 5px 0 0; -webkit-border-top-left-radius: 5px;  -webkit-border-top-right-radius: 5px; width: 50%; text-align: center; color: #d7e5ef; cursor: pointer;  }
span.active { color: #2C3945; background: #d7e5ef; }

#footer { height: 20px; padding: 40px 10px 0 10px; }
#footer { text-align: right; color: #d7e5ef; background: url('../../images/mobile/logos.gif') 10px 30px no-repeat; }
#footer a { color: #fff700; }

#header {
	background: -webkit-gradient(
		linear,
		0% 0%, 0% 100%,
		from(#222932),
		to(#2C3945)
		);
	background: -moz-linear-gradient(
		0% 100% 90deg,
		#2C3945,
		#222932
		);

}

.button {
	background: -webkit-gradient(
		linear,
		0% 0%, 0% 100%,
		from(#344453),
		to(#222932)
		);
	background: -moz-linear-gradient(
		0% 100% 90deg,
		#222932,
		#344453
		);
}
.button.light {
	background: -webkit-gradient(
		linear,
		0% 0%, 0% 100%,
		from(#fff),
		to(#E0E0E0)
		);
	background: -moz-linear-gradient(
		0% 100% 90deg,
		#29EB02,
		#20C200
		);
	color: #222932;

}

#subheader, #stats, .button.bright, form#search, ul.message li {
	background: -webkit-gradient(
		linear,
		0% 0%, 0% 100%,
		from(#76c7ea),
		to(#24a0d4),
		color-stop(.5,#56bae4),
		color-stop(.5,#48b1de)
		);

	background: -moz-linear-gradient(
		top,
		#76c7ea, #56bae4 50%, #48b1de 50%, #24a0d4
		);
}

ul li.metadata,
ul li.rate {
	background: -webkit-gradient(
		linear,
		0% 0%, 0% 100%,
		from(#ebf2f7),
		to(#d7e5ef)
		);
	background: -moz-linear-gradient(
		0% 100% 90deg,
		#d7e5ef,
		#ebf2f7
		);
}