@import url(http://fonts.googleapis.com/css?family=Courgette);

/*! ConCharge. By Edward Cant. @opticswerve. */

/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}

/* ConCharge */
html { height: 100%; width: 100%; }
body { color: #444; font-family: Helvetica, Arial, sans-serif; font-size: 100%; line-height: 1.5; width: 100%; }
::selection { background: #222; color: #eee; /* Safari, Firefox */ }

a { color: #c33; cursor: pointer; text-decoration: none; }
a:link, a:visited { color: #c33; }
a:hover, a:active { color: #900; }
a:focus { /* outline: 1px dotted black; */ }
a[href^='http://'], a[href^='https://'] { background: url(../data/ext.gif) no-repeat right 4px; padding-right: 0.75em; }
p { margin-bottom: 1.5em; }

header { background: #111; height: 128px; overflow: hidden; position: relative; width: 100%; }
header a { display: none; left: 5%; position: absolute; top: 14px; }
header canvas { display: block; height: 128px; margin: 0 auto; width: 128px; }

h1 a.animate, h3.animate {
	transition-property: opacity; transition-duration: 2s; transition-delay: 0s;
	-moz-transition-property: opacity; -moz-transition-duration: 2s; -moz-transition-delay: 0s;
	-ms-transition-property: opacity; -ms-transition-duration: 2s; -ms-transition-delay: 0s;
	-webkit-transition-property: opacity; -webkit-transition-duration: 2s; -webkit-transition-delay: 0s;

}

#wrapper { background: #fff; /* height: 100%; */ width: 100%; }
.wrapper { padding: 0 5%; width: 90%; }

.slot0 { margin: 16px auto 32px; position: relative; width: 100%; }
.slot1 { margin: 0 auto 4em; padding: 0; position: relative; width: 300px; }

.slot0 ul { margin-bottom: 1.5em; }
.slot0 ul li { margin: 0 0 1em 1em; position: relative; }
.slot0 ul li:before { content: ''; border-top: 4px solid #222; border-right: 4px solid #000; width: 6px; height: 6px; position: absolute; top: 7px; left: -18px; -moz-transform: rotate(45deg); -ms-transform: rotate(45deg); -o-transform: rotate(45deg); -webkit-transform: rotate(45deg); }

h1, h2, h3 { font-family: 'Courgette', Helvetica, Arial, sans-serif; font-weight: normal; }
h1 { font-size: 3em; height: 100%; padding: 0 5%; position: relative; width: 90%; }
h1 a:link, h1 a:visited, h1 a:hover, h1 a:active { color: #ddd; }
h2 { color: #444; font-size: 1.5em; margin: 0 0 0.5em; }
h3 { color: #222; font-size: 1.5em; margin: 0 0 0.5em; }

input { background: #eee; border: 1px solid #ccc; color: #555; font-size: 1em; font-weight: normal; height: 16px; line-height: 1; padding: 15px 0.5em; }

/* Extras, responsive design */
.ex { display: none; }

/* Map */
#map { display: none; }
#mapCanvas { height: 100%; margin: 1em 0 0; min-height: 320px; min-width: 320px; width: 100%; }

/* Mask */
.mask { background: #fff; height: 100%; left: 0; opacity: 0.96; position: fixed; top: 0; width: 100%; z-index: 1000; }

/* Menu */
.menu { height: 192px; margin: 0 0 32px; overflow: hidden; position: relative;
	-webkit-user-select: none; /* Chrome / Safari */
	-moz-user-select: none; /* Firefox */
 	-ms-user-select: none; /* IE 10+ */

	/* No support yet */
	user-select: none;

}

.menu ul { background: #b00; height: 100%; margin: 0 auto; max-width: 480px; width: 100%; }
.menu ul:after { background: #700; content: ''; height: 100%; right: 0; position: absolute; top: 0; width: 1px; }

.menu li { float: left; height: 64px; margin: 0; padding: 0; position: relative; white-space: nowrap;
	background: #b00; border-bottom: 1px solid #700; padding: 0; width: 50%;
	background-image: -moz-linear-gradient(rgba(255, 255, 255, 0.125), rgba(0, 0, 0, 0.125));
	background-image: -ms-linear-gradient(rgba(255, 255, 255, 0.125), rgba(0, 0, 0, 0.125));
	background-image: -o-linear-gradient(rgba(255, 255, 255, 0.125), rgba(0, 0, 0, 0.125));
	background-image: -webkit-linear-gradient(rgba(255, 255, 255, 0.125), rgba(0, 0, 0, 0.125));

}
.menu li:before { content: ''; background: #700; height: 100%; left: 0; position: absolute; top: 0; width: 1px; }
.menu li:after { content: ''; background: #cc2c2c; height: 100%; position: absolute; right: 0; top: 0; width: 1px; }
.menu li:nth-child(even):before { }

.menu li a { color: #d55; display: block; height: 44px; padding: 1.25em 1.5em 0; text-align: center; }
.menu li a:after { content: ''; background: #fff; height: 12px; left: 0; opacity: 0.0625; padding: 0; position: absolute; top: 0; width: 100%; }
.menu li a:hover, .menu li a:active, .menu li a.active { color: #e99; }
.menu li a.active { cursor: default; }

/* Modal
.modal { background: rgba(255, 255, 255, 0.96); height: 100%; left: 0; position: absolute; top: 0; width: 100%; z-index: 1001; }
body > .modal { background: rgba(255, 255, 255, 0.96); box-shadow: 0 0 8px #111; position: fixed; } */

/* Screens */
.screen { display: none; }
.screenActive { display: block; }

/* Social */
#social { background: #eee; height: 4em; }
.socialRow { height: 2em; margin: 0 0 0.5em; }

/* Adverts */
.ad { background: #eee; height: 250px; width: 300px; }
.ad p { bottom: -1.75em; color: #999; right: 0.5em; margin: 0; position: absolute; }
.ad a { color: #f77; }
#footer { background: #eee; min-height: 0; padding: 0; padding-top: 2em; width: 100%; }

.callout { background: #ddd; margin-bottom: 1em; padding: 12px 16px; display: inline-block; }

/* Clock */
#clock { font-size: 2em; }
#date { font-size: 2em; }

.hour { font-size: 2em; }
.min { font-size: 2em; }
.sec { }
.amPm { }
.sep:after { content: ':'; }
.sepHour { font-size: 2em; }

/* Responsive breakpoints
--------------------------*/
@media only screen and (min-width: 480px) {
	header { height: 128px; }
	header a { display: block; left: 32px; }
	header canvas { margin: 0; position: absolute; right: 0; top: 0; }

	h1 { font-size: 4em; margin: 0 auto; width: 480px; padding: 0; }

	.slot0 { width: 480px; }

}

@media only screen and (max-width: 480px) and (orientation: landscape) { }

@media only screen and (min-width: 768px) {
	h1 { width: 768px; }
	h3 { font-size: 2em; }

	#wrapper { margin: 0 auto; width: 768px; }

	.slot0 { float: left; margin-top: 0; padding: 0; width: 100%; }
	.slot1 { display: block; float: left; margin-left: 2em; }

	.menu { background: #eee; height: 64px; margin: 0 0 32px; overflow: hidden; position: relative; }
	.menu ul { background: none; display: block; max-width: none; }
	.menu ul:after { display: none; }
	.menu li { padding: 0; width: auto; }

	.menu li a { padding: 1.25em 1.75em 0; width: auto; }
	.menu li a:after { display: block; }
	.menu li:last-child:after { background: #733; }
	.menu li.ex { display: inline; }

	ul.split { width: 100%; }
	ul.split li { float: left; width: 45%; }

}

@media only screen and (min-width: 832px) { }

@media only screen and (min-width: 980px) {
	header { height: 256px; }
	header canvas { height: 256px; width: 256px; }
	header a { top: 32px; }

	h1 { font-size: 8em; width: 916px; }

	#wrapper { width: 916px; }

	.slot0 { /* min-height: 544px; */ width: 564px; }
	.slot1 { clear: right; float: right; }

	.ex { display: inline; }
	.menu li a { padding: 1.25em 2em 0; }

/*	body > .modal { border: 1px solid #fff; height: 80%; margin: 10%; width: 80%; } */

}

@media only screen and (min-width: 1024px) {
	h1 { width: 960px; }

	#wrapper { width: 960px; }
	.slot0 { width: 608px; }

}

@media only screen and (min-width: 1216px) {
	h1 { width: 1152px; }

	#wrapper { width: 1152px; }
	.slot0 { width: 800px; }

}

@media only screen and (min-width: 1568px) {
	header { height: 256px; }
	header a { top: 0; }
	h1 { font-size: 10em; width: 1504px; }

	#wrapper { width: 1504px; }

}