/**
 * @copyright	3RDS	<http://www.3rds.be>
 * @author		Bram Van Damme <bram@3rds.be>
 */

 /* generics */

	body {
		font: 300 0.8125em/1.24 Verdana, sans-serif;
		color: #000;
		background: #fff;
	}

	a {
		color: #678a8e;
	}

	p {
		margin-bottom: 0.5em;
	}

	#description p {
		margin-bottom: 1em;
	}

	.clearfix:before, .clearfix:after { content: ""; display: table; }
	.clearfix:after { clear: both; }
	.clearfix { *zoom: 1; }

/* main positioning */

	#siteWrapper {
		max-width: 70em;			/* = 1024px */
		margin: 0 auto 0;
		padding: 0 10%;
	}

	#siteWrapper header {
		margin-top: 05.6640625%;	/* Same as the gutter between the left and right columns: 58px /1024 */
		margin-bottom: 05.6640625%;	/* Same as the gutter between the left and right columns: 58px /1024 */
	}

	#siteWrapper footer {
		text-align: center;
		clear: both;
		margin-bottom: 05.6640625%;	/* Same as the gutter between the left and right columns: 58px /1024 */
	}


/* logo */

	header h1 {
		margin: 1em auto 1em;
		text-align: center;
	}

	header img {
		display: block;
		width: 100%;
		max-width: 362px;
		margin: 0 auto 0;
	}

	header h1 a {
		line-height: 1;
	}

/* rounded */

	#pages li, section h2, #link_website, #link_zoom, #link_print, #link_app, #link_print_lightbox, .rounded {
		border-width: 5px !important;
		border-style: solid;
		-o-border-radius: 9px;
		-ms-border-radius: 9px;
		-webkit-border-radius: 9px;
		-moz-border-radius: 9px;
		border-radius: 9px;
		-moz-box-sizing: border-box;
		box-sizing: border-box;
		*behavior: url(/core/js/boxsizing.htc); /* IE6 & 7 fix */
	}

	#pages li, section h2, #link_website, #link_zoom, #link_print, #link_app, #link_print_lightbox {
		height: 40px;
		line-height: 30px;
	}

/* pages nav */

	#pages ul {
		margin-bottom: 1em;
		text-align: center;
	}

	#pages li {
		width: 100%;
		border-color: #f77a1e;
		margin-bottom: 5%;
	}

	#pages li a {
		text-decoration: none;
		text-align: center;
		display: block;
		line-height: 1;
		color: #f77a1e;
		font-size: 1.65em;
		text-transform: uppercase;
		height: 30px;
		line-height: 30px;
	}

	#pages li:hover, #pages li:hover a, #pages li.selected, #pages li.selected a {
		background-color: #f77a1e;
		color: #fff;
	}

	#pages li:nth-child(2), #pages li:nth-child(2) a {
		color: #38606a;
		border-color: #38606a;
	}

	#pages li:nth-child(2):hover, #pages li:nth-child(2):hover a,
	#pages li:nth-child(2).selected, #pages li:nth-child(2).selected a {
		background-color: #38606a;
		color: #fff;
	}

	#pages li:nth-child(3), #pages li:nth-child(3) a {
		color: #97d5c8;
		border-color: #97d5c8;
		font-size: 1.1em;
	}

	#pages li:nth-child(3):hover, #pages li:nth-child(3):hover a,
	#pages li:nth-child(3).selected, #pages li:nth-child(3).selected a {
		background-color: #97d5c8;
		color: #38606a;
	}

/* pages nav : cities */

	#pages p a {
		color: #678A8E;
		text-decoration: none;
	}

	#pages p a:hover {
		text-decoration: underline;
	}

	#pages p a.selected {
		color: #648d89;
		font-weight: 700;
		text-transform: uppercase;
		text-decoration: none;
	}

/* cities nav */

	#cities {
		display: none;
	}

	#cities li {
		width: 27.9411765%;
		margin-right: 05.3921569%;
		margin-bottom: 05.3921569%;
		float: left;
		font-size: 0.65em;
		text-transform: uppercase;
		cursor: pointer;

		-o-transition: all 0.2s ease-out;
		-ms-transition: all 0.2s ease-out;
		-moz-transition: all 0.2s ease-out;
		-webkit-transition: all 0.2s ease-out;
		transition: all 0.2s ease-out;
	}

	#cities img {
		-o-border-radius: 8px;
		-ms-border-radius: 8px;
		-webkit-border-radius: 8px;
		-moz-border-radius: 8px;
		border-radius: 8px;

		max-width: 100%;
	}

	.ie6 #cities img {
		width: 100%;
	}

	#cities span {
		display: block;
		text-align: center;
	}

	#cities a {
		text-decoration: none;
		display: block;
	}

	#cities li:hover {
		-o-transform: scale(1.3);
		-ms-transform: scale(1.3);
		-moz-transform: scale(1.3);
		-webkit-transform: scale(1.3);
		transform: scale(1.3);
		cursor: pointer;
	}

/* content */

	#downloadplan img {
		max-width: 100%;
	}

	.ie6 #downloadplan img {
		width: 100%;
	}

	#siteWrapper section aside { /* facebook and twitter thingies */
		margin-top: 05.6640625%; /* Same as the gutter between the left and right columns: 58px /1024 */
	}

	section h2 {
		background: #f77a1e;
		color: #fff;
		border-color: #f77a1e;
		text-align: center;
		text-transform: uppercase;
		font-weight: 300;
		margin-bottom: 1em;
		font-size: 20px;
		line-height: 30px;
	}

	.page-11 h2 {
		background-color: #97D5C8;
		border-color: #97D5C8;
		color: #38606A;
	}

	.cities-detail section h2 {
		background-color: #38606a;
		border-color: #38606a;
		width: 100%;
	}

	.cities-detail #link_website {
		display: block;
		width: 31%;
		float: right;
	}

	#linksbar li a, .cities-detail #link_website a {
		display: block;
		text-align: center;
		color: #e5e5e5;
		text-decoration: none;
		text-transform: uppercase;
		cursor: default;
	}

	.cities-detail #description {
		clear: both;
		padding: 0 0 1em 0;
	}

	#linksbar li {
		width: 31%;
		margin-right: 3.5%;
		float: left;
	}

	#linksbar li:nth-child(3) {
		margin-right: 0;
	}

	#linksbar li, .cities-detail #link_website {
		border-color: #e5e5e5;
		font-size: 1.1em;
		line-height: 30px;
	}

	/* linksbar default color */
	#linksbar li.enabled, #link_website.enabled {
		border-color: #38606a;
	}

	#linksbar li.enabled a, #link_website.enabled a {
		color: #38606a;
		cursor: pointer;
	}

	#linksbar li.enabled a:hover, #link_website.enabled a {
		color: #fff;
		background: #38606a;
	}

	/* zoom link */
	#linksbar #link_zoom.enabled, #linksbar #link_zoom.enabled a {
		color: #9c8d3a;
		border-color: #9c8d3a;
		cursor: pointer;
	}

	#linksbar #link_zoom.enabled a:hover {
		background: #9c8d3a;
		color: #fff;
	}

	/* app store link */
	#linksbar #link_app.enabled, #linksbar #link_app.enabled a {
		color: #a0d6c9;
		border-color: #a0d6c9;
		cursor: pointer;
	}

	#linksbar #link_app.enabled a:hover {
		background: #a0d6c9;
		color: #fff;
	}

	/* print link */
	#linksbar #link_print.enabled, #linksbar #link_print.enabled a,
	#linksbar #link_print_lightbox, #linksbar #link_print_lightbox a {
		color: #457332;
		border-color: #457332;
		cursor: pointer;
	}

	#linksbar #link_print.enabled a:hover,
	#linksbar #link_print_lightbox a:hover {
		background: #457332;
		color: #fff;
	}

	#link_print_lightbox {
		display: block;
		width: 150px;
		text-align: center;
		text-transform: uppercase;
		font-weight: 300;
		font-size: 20px;
		border-color: #457332;
		cursor: pointer;
		margin-bottom: 4px;
	}

	#link_print_lightbox a {
		text-decoration: none;
		color: #457332;
		display: block;
		line-height: 30px;
		height: 30px;
		width: 140px;
	}

	#link_print_lightbox a:hover {
		background-color: #457332;
		color: #fff;
	}

	/* website link */
	#link_website.enabled, #link_website.enabled a {
		color: #f47b20;
		border-color: #f47b20;
		cursor: pointer;
		background: transparent;
	}

	#link_website.enabled a:hover {
		background: #f47b20;
		color: #fff;
	}

	#plan {
		margin-bottom: 1em;
	}

	#plan img {
		max-width: 100%;
	}

	.ie6 #plan img {
		width: 100%;
	}

/* map */

	#map {
		display: none;
		width: 100%;
		height: 503px;
	}


/* footer */

	footer p {
		margin-top: 2.5em;
		padding: 0.5em 0;
		border-top: 0.1em solid #678a8e;
		color: #678a8e;
		margin-left: 01.6601562%;	/* 017px /1024 */
		margin-right: 01.6601562%;	/* 017px /1024 */
	}


/* App Store */

	#btn_appstore, #btn_playstore {
		display: inline-block;
		margin: 0 auto 1.5em;
		position: relative;
		overflow: hidden;
	}

	#btn_appstore img, #btn_playstore img {
		width: auto;
	}

/* media queries */

	/* Mobile city square override */
	@media (max-width: 539px) {

		/* hide intro text */
		.cities-all #introtext, .cities-detail #introtext {
			display: none;
		}

		/* show cities squares */
		.cities-all #cities {
			display: block;
		}

		/* make sure list fills entire width */
		#cities li {
			width: 29.7%;
		}
		#cities li:nth-child(3n) {
			margin-right: 0;
		}
	}

	@media (min-width: 360px) {
		#pages li:nth-child(3), #pages li:nth-child(3) a {
			font-size: 1.275em;
		}
	}

	/* 560 */
	@media (min-width: 560px) {

		/* change navigation to having adjacent buttons */
		#pages li {
			width: 31%;
			margin-right: 3.5%;
			margin-bottom: 0;
			float: left;
		}

		/* bigger font-size in navigation */
		#pages li a {
			font-size: 1.65em;
		}

		#pages li:nth-child(3), #pages li:nth-child(3) a {
			font-size: 0.875em;
			margin-right: 0;
		}

		.oldie #pages li.slvzr-last-child { /* responsive + selectivzr = quirky */
			font-size: 0.875em;
			margin-right: 0;
		}

		#pages ul {
			margin-bottom: 2.5em;
		}

		/* bigger titles & buttons in detail */
		.cities-detail section h2, #linksbar li, .cities-detail #link_website {
			font-size: 1.5em;
		}

		/* enable two columns layout in content (narrow though) */
		#siteWrapper section #cities {
			width: 31%;
			margin-right: 3.5%;
			float: left;
		}

		#siteWrapper section #innerContent, #siteWrapper section aside {
			width: 65.5%;
			float: right;
		}

		/* show city squares */
		#cities {
			display: block;
		}

		/* show the map */
		#map {
			display: block;
		}

		/* two column squares */
		#cities li {
			width: 47%;
		}
		#cities li:nth-child(2n) {
			margin-right: 0;
		}

	}

	@media(min-width: 720px) {
		/* Move app store button next to logo */
		/*#btn_appstore, #btn_playstore {
			float: right;
		}*/
	}

	/* 768 */
	@media (min-width: 768px) {

		/* Lower bottom margin from app store logo */
		#btn_appstore, #btn_playstore {
			margin: 0 auto 0.5em;
		}

		/* enable two columns layout */
		#siteWrapper header h1, #siteWrapper section #cities {
			width: 39.84375%; 			/* 408px /1024 */
			margin-left: 01.6601562%;	/* 017px /1024 */
			float: left;
		}

		#siteWrapper header nav, #siteWrapper section #innerContent, #siteWrapper section aside {
			width: 51.171875%;			/* 524px /1024 */
			margin-right: 01.6601562%;	/* 017px /1024 */
			float: right;
		}

		/* fix third button (again) */
		#pages li:last-child, #pages li:last-child a {
			font-size: 0.925em;
			line-height: 1.45;
		}

		.oldie #pages li.slvzr-last-child { /* responsive + selectivzr = quirky */
			font-size: 0.625em;
			line-height: 1.45;
		}

		/* no padding on wrapper */
		#siteWrapper {
			padding: 0;
		}

		/* adjust header to be same width of li's of city squares (excluding rightmost margin) */
		header img {
			display: inline;
			width: 94.6078431%;
			max-width: 94.6078431%; 	/* 100 - 05.3921569% */
		}

		/* change logo behavior */
		header h1 {
			width: auto;
			margin: 0;
		}

		/* hide citynames + show on hover */
		#cities span {
			visibility: hidden;
			height: 11px;
			overflow: visible;
		}

		#cities li:hover span {
			visibility: visible;
			text-shadow: 0 0 5px white;
		}

		/* three column squares (again) */
		#cities li {
			width: 27.9411765%;
			margin-right: 05.3921569%;
			margin-bottom: 05.3921569%;
		}
		#cities li:nth-child(n) { /* @note: we actually need to split this apart from the rule above to make oldIE happy */
			width: 27.9411765%;
			margin-right: 05.3921569%;
			margin-bottom: 05.3921569%;
		}

	}

	/* 768, iPad override */
	@media (min-width: 768px) and (max-device-width: 1024px) and (orientation:portrait) {
		/* show labels under city square */
		#cities span {
			visibility: visible;
		}
	}
	@media (min-width: 768px) and (max-device-width: 1024px) and (orientation:landscape) {
		/* show labels under city square */
		#cities span {
			visibility: visible;
		}
	}

	/* 1024 */
	@media (min-width: 1024px) {

		/* bigger margin at the very top */
		#siteWrapper header {
			margin-top: 6%;
		}

		/* Lower bottom margin from app store logo */
		#btn_appstore, #btn_playstore {
			margin: 0 auto 0.25em;
		}

		/* show cities in rows of 4 */
		#cities li {
			width: 20.8333333%;			/* 85px /408 */
			margin-right: 04.1666667%;	/* 17px /408 */
		}
		#cities li:nth-child(n) { /* @note: we actually need to split this apart from the rule above to make oldIE happy */
			width: 20.8333333%;			/* 85px /408 */
			margin-right: 04.1666667%;	/* 17px /408 */
		}

		header img {
			width: 95.8333333%;
			max-width: 95.8333333%; 	/* 100 - 04.166666 */
		}

	}

/* overlay */
#overlay {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: #000;
	opacity: 0.6;
	z-index: 1000;
	display: none;
}

#overlayContent {
	position: fixed;
	z-index: 1001;
	display: none;
	padding: 5px;
	background: #fff;
}

#overlayContent .rounded, #overlayContentInner {
	width: 100%;
	height: 100%;
}

#overlayContentInner {
	position: relative;
}

#overlayContentInner #overlayClose {
	position: absolute;
	top: -10px;
	right: -8px;
	width: 25px;
	height: 25px;
	background: transparent url(../img/close.png) no-repeat 0 0;
	overflow: hidden;
	text-indent: -999px;
}

#overlayContent .title {
	padding: 5px;
}