/* -------------------- Core responsive box model --------------------

   General idea: http://dbushell.com/2013/03/19/on-responsive-layout-and-grids/
   Using multiple borders: http://nicolasgallagher.com/multiple-backgrounds-and-borders-with-css2/
   Unlike the outline-offset implementation, this should support IE.

   See http://www.newnet-soft.com/blog/csstypography for typography refinements.
*/


/* Top-level elements */

html { max-width: 1000px; margin: 0 auto; background-color: #F8F6F2; }
body { width: 100%; margin: auto; letter-spacing: -3pt; color: #111; }

/* Container divs
   All first-level divs gain this, but it can also be invoked with .grid (for nesting) */

body>div, .grid { vertical-align: top; letter-spacing: -3pt; /* remove spacing in inline-block. -0.26em is slightly better, but breaks on browser text resize */ }
body>div:after, .grid:after, .clearfix { /* clearfix */ content: ""; display: table; clear: both; }

/* Responsive unit
   All second-level items gain this, but it can also be invoked with .unit */

body>div>*, 
.unit {
    display: inline-block;
	vertical-align: top;
    width: 100%;
	position: relative;
	letter-spacing: 0;	/* restore letter-spacing */

	/* External border - the gutter between columns.
	   The box-sizing property keeps it within the box. 
	   This can be changed responsively just by setting border-width. */
    box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box;
	border: 8px solid #F8F6F2;
	/* Padding can also be set as normal (e.g. padding: 0.5em 1em; ). */
}

/* Stacked container
   Allows several units to be stacked vertically in the space of one */

.stack {
	display: inline-block;
	vertical-align: top;
	width: 100%;
	position: relative;
	letter-spacing: 0;	/* restore letter-spacing */
}
.stack>div,
.stack>.unit { margin-bottom: 16px; }
.stack>div:last-child,
.stack>.unit:last-child { margin-bottom: 0; }

/* Unboxed appearance */

.unboxed {
	background-color: white;
	border-left: 8px solid #F8F6F2;
	border-right: 8px solid #F8F6F2;
}
.unboxed>*, .unboxed .unit { border-color: white; }

/* -------------------- Universal element styling -------------------- */

body {
	font-family: PT Serif;
}

/* Full-width image by default */

body>div>div>img, body>div>div>a>img,
body>div>img, body>div>a>img,
.unit>img, .unit>a>img { display: block; max-width: 100%; height: auto; width: 100%; padding-bottom: 0.5em; }

/* Margins */

.wide { margin: 0 8px; }													/* equal to .unit border */
.wide>* { border-width: 0; padding: 0px 1em; vertical-align: baseline; }	/* reset */

/* Internal border */

.bordered { padding: 5px; }
.bordered:after {
	content: "";
	border: 5px solid blue;
	left: 0; top: 0; right: 0; bottom: 0;
	position: absolute;
}

/* Justify elements */

.justify { text-align: justify; }
.justify>* { display: inline-block; }
.justify:after {
    width: 100%;
    display: inline-block;
    font-size: 0;
    line-height: 0;
	content: "";
}

/* Text tweaks */

.leadout {
	font-size: 1.2em;
	font-weight: bold;
}

/* Responsive content foundation */

.desktop { display: inline; }
.tablet { display: none !important; }
.mobile { display: none !important; }

/* -------------------- Reset -------------------- */

h1,h2,h3,h4,h5,p {
	border: 0;
	margin: 0;
	padding: 0;
	font-size: 100%;
}
blockquote { margin-top: 0.5em; margin-bottom: 0.5em; border: 0; padding: 0; font-size: 100%; }

form,p,ul,ol,td,blockquote { font-size: 0.9em; line-height: 1.4em; padding-bottom: 0.5em; }
h4 { font-size: 1.0em;    padding-bottom: 0.5em; color: #51878B; font-family: 'PT Sans'; }
h3 { font-size: 1.3em;    padding-bottom: 0.5em; color: #51878B; }
h2 { font-size: xx-large; padding-bottom: 0.5em; color: black; font-weight: normal; }

a { color: #51878B; text-decoration: none; }
a:hover { text-decoration: underline; }
a>img { border: 0; }

hr { border: 0; height: 1px; background: #CCC; }
input[type=text],input[type=password] { border: 1px solid #51878B; background-color: #FCFCFE; font-family: 'PT Sans'; }
/*input[type=file],input[type=checkbox],input[type=radio] { border: none; }*/

table,tr,td {
	border: 0;
	margin: 0;
	padding: 0;
	border-spacing: 0;
}

button,input[type=button],input[type=submit] {
	cursor: pointer;
    -webkit-appearance: none;
    -webkit-border-radius: 0;
    border-radius: 0;
}
:focus { outline: 0 !important; }

.ui_hidden { display: none; }
script { display: none !important; }
img:-moz-loading { visibility: hidden; }

/* -------------------- Fullscreen option -------------------- */

html.fullscreen { max-width: 100%; }
.fullscreen .wide { margin: 0; }

/* -------------------- Modal dialogue -------------------- */

.modal {
    display: none;
    position: fixed;
    z-index: 1;
    left: 0; top: 0; right: 0; bottom: 0;
    width: 100%; height: 100%;
    overflow: auto;
	background-color: rgba(0,0,0,0.4);
}

.modal>div {
    background-color: #fefefe;
    margin: 15% auto;
    padding: 20px;
    border: 1px solid #888;
    width: 60%; 
	display: block;
}

.modal .close_box { color: #aaa; float: right; font-size: 28px; font-weight: bold; margin-top: -15px; }
.modal .close_box:hover, .modal .close_box:focus { color: black; text-decoration: none; cursor: pointer; }