@import url(http://fonts.googleapis.com/css?family=Lato:300,400,700,400italic,700italic);

/* -----------------------------------------------------------------------------

	Eric Meyer's Reset CSS v2.0 (http://meyerweb.com/eric/tools/css/reset/)

----------------------------------------------------------------------------- */

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, button { margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline; }
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; }


/* -----------------------------------------------------------------------------

    1.) GENERAL

----------------------------------------------------------------------------- */

html { height: 100%; }
body { height: 100%; font-size: 16px; line-height: 1.5em; font-family: 'Open Sans', arial, sans-serif; color: #61677A; background-color: #3c4346; }
#wrapper { max-width: 1400px; min-height: 100%; background-color: #FFF; }

h1, h2, h3, h4, h5, h6 { margin: 0; font-size: 1em; line-height: 1.2em; font-weight: normal; }
ul, ol, li { padding: 0; margin: 0; list-style-type: none; }
img { max-width: 100%; }
small { font-size: .8em; }
a { color: #0ea7f6; }
a:hover { color: #0ea7f6; }
strong { font-weight: bold; }


/* -----------------------------------------------------------------------------

    2.) HEADER

----------------------------------------------------------------------------- */

#header { position: fixed; top: 0; left: 0; width: 300px; height: 100%; overflow-y: auto;
	background-color: #f2f2f2; }
.header-inner { padding: 40px; }

	/* -------------------------------------------------------------------------
		HEADER BRANDING
	-------------------------------------------------------------------------- */

	.header-branding h1 { margin: 0; font-size: 1.5em; font-weight: bold; text-transform: uppercase; color: #444; }
	.header-branding h2 { margin: 0; font-size: 0.875em; font-weight: normal; text-transform: none; }

	/* -------------------------------------------------------------------------
		MAIN MENU
	-------------------------------------------------------------------------- */

	.main-menu ul > li { margin: 10px 0 0 0; }
	.main-menu ul > li:first-child { margin: 0; }
	.main-menu ul ul { margin: 10px 0 15px 20px; }
	.main-menu ul ul li { margin-top: 5px; }
	.main-menu > ul > li > ul { font-size: 0.875em; }

	/* -------------------------------------------------------------------------
		SIDEBAR INFO
	-------------------------------------------------------------------------- */

	.header-info { line-height: 1.5em; font-size: 0.875em; }
	.header-info p { margin: 24px 0 0 0; }
	.header-info p:first-child { margin-top: 0; }


/* -----------------------------------------------------------------------------

    3.) CORE

----------------------------------------------------------------------------- */

#core { margin-left: 300px; padding: 80px; }


/* -----------------------------------------------------------------------------

    4.) CONTENT

----------------------------------------------------------------------------- */

	h2 { margin-bottom: 48px; font-size: 1.875em; font-weight: bold; text-transform: uppercase; color: #444; }
	h3 { margin-bottom: 24px; font-size: 1.5em; font-weight: bold; color: #444; }
	h4 { margin-bottom: 24px; font-size: 1.125em; font-weight: bold; color: #444; }
	h5 { font-weight: bold; color: #444; }
	p { margin-bottom: 24px; }
	p img { display: block; }
	ul { margin-bottom: 24px; }
	ul li { margin-top: 5px; }
	ul li:first-child { margin-top: 0; }
	ol { margin-bottom: 24px; font-size: 0.875em; }
	ol li { margin-top: 8px; list-style-type: decimal; list-style-position: inside; }
	ol li:first-child { margin-top: 0; }
	pre { margin-bottom: 24px; padding: 20px; font-family: Consolas,monospace; font-size: 0.875em; background-color: #f2f2f2; }
	code { font-family: Consolas,monospace; }

	/* ALERT MESSAGE */
	.c-alert-message { position: relative; padding: 15px 20px 14px 40px; font-size: 0.875em; color: #265e88; background-color: #e1edf9; border: 1px solid #d1e4f6; }
	.c-alert-message .fa { position: absolute; top: 15px; left: 10px; font-size: 24px; }

	/* SECTION */
	section { margin-top: 72px; }
	section:first-child { margin-top: 0; }

	/* SEPARATOR */
	hr { margin: 24px 0; border: 0; border-top: 1px solid #ececec; }
	hr.m-large { margin: 72px 0; border-width: 2px; border-color: #dfdfdf; }
	hr.m-transparent { border-color: transparent; }
	#header hr { border-color: #dfdfdf; }



/* -----------------------------------------------------------------------------

    5.) RESPONSIVE

----------------------------------------------------------------------------- */

@media ( max-width: 1199px ) {

#header { position: relative; width: 100%; }
.header-inner { padding: 20px; }
#core { margin-left: 0; padding: 20px; }

}
