[[strip]]

[[* APPEARANCE *]]
[[* 
	/**
	 * @copyright CMS Made Simple 2014
	 * @author Goran Ilic (uniqu3e@gmail.com)
	 * @version 1.1 (CMSMS 2.0 Package)
	 * 
	 * Simplex Theme comes with 2 predefined Style variations, one is a "boxed" style as seen in
	 * default installation which is controle with "boxed" ID that is set in Simplex Theme <body> tag.
	 * If you remove this ID, a grey background on page body will be removed and layout will no longer 
	 * be wrapped inside a "box" but appear in a single background color which is by default white.
	 * 
	 * Besides there are also predefined class names and styles that you can use on <body> tag to
	 * change alignment of complete layout/page.
	 * If you rightaligned class to body (example: <body class='rightaligned and other classes'>) 
	 * then whole page layout will be positioned to right window side instead of centered position
	 * and with class leftaligned the page layout will be positioned to left.
	 * 
	 * Maximum width of page layout is preset to 1440px in Simplex Core stylesheet, you can change this 
	 * by adding a new rule in this stylesheet with a class .row (Example: .row { max-width: 1080px; }).
	 * If you prefer a full width layout simply add fullwidth class to body tag of Simplex Template.  
	 * This class will reset max-width limitation and force the page layout to full window width with
	 * spacing on left and right of 30px.
	 * 
	 * Browser Support: 
	 * Simplex Theme was tested in common modern Browser and IE8 (with gracefull fallback).
	 * 
	 * Grid usage:
	 * Simplex is using a custom Yetti Framework 12 column grid (https://github.com/Stikki/Yetti/tree/master)
	 * based on Andy Taylors (http://cssgrid.net) 1140px Grid.
	 * 
	 * Using the grid system is fairly simple. Make sure that grid columns
	 * are wrapped inside a element with .row class.
	 * When grid columns are inside a row element, floats are auto cleared,
	 * therefore you do not need anything like some empty clear element ie. <div class="clear"></div>
	 * Grid columns have a spacing (margin-left) of 3.8% of the layout, whereby first column after
	 * .row opening element will have no spacing (margin-left).
	 * Grid columns are only applied to Browser and Screen size which are greater then 768px;
	 * 
	 * Example (three column row):
	 * 
	 * <!-- container has a preset padding to left and right with 20px -->
	 * <div class="container">
	 *     <!-- clears floating row of columns, sets maximum width of 1440px -->
	 *     <div class="row some-class-to-apply-styles">
	 *         <!-- 
	 *             four-col explanation: a simple math, grid is built out of 12 columns, so we say we want
	 *             a grid column in size of four columns width therefore the name four- and to fill 
	 *             our .row it is three times four-col column makes twelve columns (3 x 4 = 12)
	 *         -->
	 *         <div class="four-col my-class">
	 *             Some content
	 *         </div>
	 *         <div class="four-col my-class">
	 *             Some content
	 *         </div>
	 *         <div class="four-col my-class">
	 *             Some content
	 *         </div>
	 *     </div>
	 *     <div class="row">
	 *         <div class="six-col">
	 *             Half width content
	 *         </div>
	 *         <div class="six-col">
	 *             Half width content
	 *         </div>
	 *     </div>
	 * </div>
	 * 
	 */ 
*]]

[[* /* assign the images path to a variable */ *]]
[[capture assign='path']][[uploads_url]]/simplex/images[[/capture]]
[[capture assign='font']][[uploads_url]]/simplex/fonts[[/capture]]

[[* /* --- COLORS --- */ *]]

[[assign var='light_grey' value='#f1f1f1']]
[[assign var='grey' value='#e9e9e9']]
[[assign var='dark_grey' value='#555' scope=global]]
[[assign var='white' value='#fff']]
[[assign var='orange' value='#f39c2c' scope=global]]
[[assign var='dark_orange' value='#e6870e']]
[[assign var='yellow' value='#fdbd34']]

[[* /* =====================================
 ICON FONT
 ===================================== */ *]]
[[* /* Will fail on Windows Phone 7, sorry developer life sucks */ *]]
@font-face {
	font-family: 'simplex';
	src: url('[[$font]]/simplex.eot');
	src: url('[[$font]]/simplex.eot?#iefix') format('embedded-opentype'),
		url('[[$font]]/simplex.woff') format('woff'), 
		url('[[$font]]/simplex.ttf') format('truetype'),
		url('[[$font]]/simplex.svg#simplex') format('svg');
	font-weight: normal;
	font-style: normal;
}

[class^="icon-"], [class*=" icon-"] {
	font-family: 'simplex';
	speak: none;
	font-style: normal;
	font-weight: normal;
	font-variant: normal;
	text-transform: none;
	line-height: 1;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

.icon-arrow-up:before {
	content: "\e600";
}

.icon-arrow-left:before {
	content: "\e601";
}

.icon-search:before {
	content: "\e603";
}

.icon-printer:before {
	content: "\e604";
}

.icon-linkedin:before {
	content: "\e605";
}

.icon-pinterest:before {
	content: "\e606";
}

.icon-youtube:before {
	content: "\e607";
}

.icon-facebook:before {
	content: "\e608";
}

.icon-google:before {
	content: "\e609";
}

.icon-twitter:before {
	content: "\e60a";
}

.icon-link:before {
	content: "\e602";
}

[[* /* =====================================
 GENERAL STYLES
 ===================================== */ *]]
body {
	background: [[$white]];
	font-family: 'Noto Sans', sans-serif;
	font-size: 1em; [[* /* base browser font size: 16px, now do math "XX / 16 = ??" where XX is desired font size */ *]] 
	color: [[$dark_grey]];
	line-height: 1.5;
}

[[* /* add this class to <body> to align the layout to left instead of centered */ *]]
.leftaligned {
	margin-left: 0;
}

[[* /* add this class to <body> to align the layout to right instead of centered */ *]]
.rightaligned {
	margin-right: 0;
}

[[* /* you can change appearance of the page by adding or removing #boxed id to <body> tag. 
 * By removing #boxed ID, page will no longer be wrapped in a wrapper 
 */ *]]
body#boxed {
	background: #f2f2f2 url([[$path]]/body-background.png) repeat;
}

[[* /* add this class to <body> to make this layout full window width */ *]]
body.fullwidth .row {
	max-width: none;
}

a img {
	border: none;
}

[[* /* you can use these classes to align images to left or right */ *]]
.right {
	float: right;
}

.left {
	float: left;
}

[[* /* if image needs some space add this class to img tag
 * so at the end a left floating image would be <img src='some.jpg' class='left spacing' alt='foo' />
 */ *]]
.spacing {
	margin: 15px;
}

.spacing.left {
	margin-right: 0;
}

.spacing.right {
	margin-left: 0;
}

[[* /* or add a 2 px border to image or something, change as you need it */ *]]
.border {
	border: 2px solid [[$grey]];
}

[[* /* some styling for code chunks */ *]]
pre, code, kbd, samp {
	font-family: Consolas, 'Andale Mono WT', 'Andale Mono', 'Lucida Console', 'Lucida Sans Typewriter', monospace;
	color: [[$dark_grey]];
}

pre code {
	line-height: 1.4;
	font-size: .8125em;
}

pre {
	padding: 10px;
	margin: 10px 0;
	overflow: auto;
	width: 93%;
	background: [[$light_grey]];
	border-radius: 6px;
	-webkit-border-radius: 6px;
	-moz-border-radius: 6px;
	-o-border-radius: 6px;
}

[[* /* target IE7 and IE6 */ *]]
*:first-child+ html pre {
	padding-bottom: 20px;
	overflow-y: hidden;
	overflow: visible;
	overflow-x: auto;
}

* html pre {
	padding-bottom: 20px;
	overflow: visible;
	overflow-x: auto;
}

[[* /* horizontal ruler */ *]]
hr {
	border: solid [[$grey]];
	border-width: 1px 0 0 0;
	clear: both;
	margin: 10px 0 30px 0;
	height: 0;
}

[[* /* =====================================
 COMMON TYPOGRAPHY
 ===================================== */ *]]

[[* /* link default styles */ *]]
a {
	color: [[$orange]];
}

a.external {
	text-decoration: none;
}

a:visited {
	color: [[$dark_orange]];
}

a:hover {
	color: [[$dark_grey]];
	transition: transform .3s ease-out;
	-webkit-transition: color .3s ease-out;
	-moz-transition: color .3s ease-out;
	-o-transition: color .3s ease-out;
	text-decoration: underline;
}

a:focus {
	outline: thin dotted;
}

a:hover, a:active {
	outline: 0;
}

[[* /* add icon to links with class external */ *]]
a.external:after {
	content: "\e602";
	padding-left: 4px;
	font-family: 'simplex';
	text-decoration: none;
}

[[* /* default heading styles */ *]]
h1, h2 {
	font-family: 'Oswald', Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
	font-weight: 700;
}

h3, h4, h5, h6 {
	font-weight: 400;
}

h1 {
	color: [[$orange]];
	margin: 10px 0;
	font-size: 2em; [[* /* 32px */ *]]
	text-transform: uppercase;
}

h2 {
	color: [[$dark_grey]];
	font-size: 1.75em; [[* /* 28px */ *]]
}

h3 {
	color: [[$dark_grey]];
	font-size: 1.5em; [[* /* 24px */ *]]
}

h4 {
	color: [[$orange]];
	font-size: 1.375em; [[* /* 22px */ *]]
}

h5 {
	font-size: 1.25em [[* /* 20px */ *]]
}

h6 {
	font-size: 1.125em; [[* /* 18px */ *]]
}

[[* /* blockquotes and cites */ *]]
blockquote, blockquote p {
	font-size: 1.0625em;
	line-height: 1.5;
	color: [[$dark_grey]];
	font-style: italic;
	font-family: Georgia, Times New Roman, serif;
}

blockquote {
	margin: 0 0 20px 0;
	padding: 9px 10px 10px 19px;
	border-left: 5px solid [[$light_grey]];
}

blockquote cite {
	display: block;
	font-size: .941176em;
	color: [[$dark_grey]];
}

blockquote cite:before {
	content: "\2014 \0020";
}

blockquote cite a, blockquote cite a:visited, blockquote cite a:visited {
	font-family: Georgia, Times New Roman, serif;
}

[[* /* =====================================
 LAYOUT
 ===================================== */ *]]
[[* /* wrapping the page in a box */ *]]
.page-wrapper {
	border-top: 5px solid [[$orange]];
	margin-bottom: 15px;
}

[[* /* you can switch appearance of the page by adding or removing id #boxed to body tag */ *]]
#boxed #wrapper {
	margin-top: 15px;
	border-top: 5px solid [[$orange]];
	background: [[$white]];
	box-shadow: 0 0 15px 0 #c6c6c6;
}

#boxed.page-wrapper {
	border-top: none;
}

[[* /* add some spacing to page wrapper */ *]]
.inner-section {
	padding-left: 20px;
	padding-right: 20px;
}

[[* /* ------ HEADER SECTION ------ */ *]]

[[* /* the logo */ *]]
.logo {
	margin-top: 20px;
	text-align: center;
}

.logo a {
	display: block;
}

.top .header {
	border-bottom: 1px solid [[$light_grey]];
}

[[* /* catchphrase */ *]]
.phrase span {
	font-family: 'Oswald', Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
	text-transform: uppercase;
	color: #ddd;
	font-weight: 700;
	font-size: 1.5em; [[* /* 24px */ *]]
}

[[* /* search */ *]]
.search {
	text-align: right;
}

[[* /* webkit browser add icons to input of type search, we dont want it here now */ *]]
input.search-input::-webkit-search-decoration, input.search-input::-webkit-search-results-button, 
input.search-input::-webkit-search-results-decoration {
	-webkit-appearance: none;
}

.search .icon-search {
	margin-left: -25px;
	display: inline-block;
	height: 24px;
	line-height: 24px;
	text-align: center;
	width: 24px;
	position: relative;
	z-index: 10;
	color: #ddd;
	top: 3px;
}

.search ::-webkit-input-placeholder,
.search ::-moz-placeholder,
.search input[placeholder] { 
	line-height: normal;
}

[[* /* styling the search input field */ *]]
input.search-input {
	border: 1px solid [[$light_grey]];
	line-height: normal;
	outline: 0;
	padding: 6px 0 6px .5%;
	font-size: .6875em; [[* /* 11px */ *]]
	color: [[$dark_grey]];
	transition: all .35s ease-in-out;
	-webkit-transition: all .35s ease-in-out;
	-moz-transition: all .35s ease-in-out;
	-o-transition: all .35s ease-in-out;
	max-width: 99.5%;
}

input.search-input:focus {
	border: 1px solid [[$orange]];
	box-shadow: 0 0 3px [[$orange]];
	-webkit-box-shadow: 0 0 3px [[$orange]];
	-moz-box-shadow: 0 0 3px [[$orange]];
	-o-box-shadow: 0 0 3px [[$orange]];
}

[[* /* ------ NAVIGATION ------ */ *]]
#main-menu {
	margin-top: 25px;
}

[[* /* --- FIRST LEVEL --- */ *]]
#main-menu > li {
	display: block;
	border-bottom: 1px dotted [[$light_grey]];
	position: relative;
}

#main-menu > li:last-child {
	border-bottom: none;
}

#main-menu > li > a,
#main-menu > li.sectionheader > span {
	font-family: 'Oswald', Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
	text-transform: uppercase;
	color: [[$dark_grey]];
	text-decoration: none;
	font-size: 1.0625em; [[* /* 17px */ *]]
	font-weight: 700;
	cursor: pointer;
	padding: 8px 0;
	display: block;
	position: relative;
}

#main-menu > li.current > a,
#main-menu > li.current.sectionheader > span,
#main-menu > li:hover > a,
#main-menu > li.sectionheader:hover > span {
	color: [[$dark_orange]];
}

[[* /* --- SECOND LEVEL --- */ *]]
#main-menu > li > ul,
#main-menu > li > ul > li > ul [[* /* third level */ *]] {
	position: absolute;
	left: -999em;
}

#main-menu > li:hover > ul,
#main-menu > li.active > ul,
#main-menu > li > ul > li:hover > ul, [[* /* third level */ *]]
#main-menu > li > ul > li.active > ul {
	position: relative;
	left: 0;
}

#main-menu > li > ul > li > a,
#main-menu > li > ul > li.sectionheader > span,
#main-menu > li > ul > li > ul > li > a, [[* /* third level */ *]]
#main-menu > li > ul > li > ul > li.sectionheader > span {
	text-decoration: none;
	color: [[$dark_grey]];
	text-transform: uppercase;
	display: block;
	padding: 4px 0;
}

#main-menu > li > ul > li:hover > a,
#main-menu > li > ul > li.sectionheader:hover > span,
#main-menu > li > ul > li > ul > li:hover > a,
#main-menu > li > ul > li > ul > li.sectionheader:hover > span {
	color: #999;
}

[[* /* --- THIRD LEVEL --- */ *]]
#main-menu > li > ul > li > ul > li > a,
#main-menu > li > ul > li > ul > li.sectionheader > span {
	padding-left: 15px;
	font-size: .875em;
	text-transform: none;
}

[[* /* --- PARENT INDICATOR --- */ *]]
#main-menu > li > a i,
#main-menu > li > ul > li > a i,
#main-menu > li.sectionheader > span i,
#main-menu > li > ul > li.sectionheader > span i {
	float: right;
	position: relative;
	padding-top: 6px;
	-webkit-transform: rotate(0deg);
	-moz-transform: rotate(0deg);
	-ms-transform: rotate(0deg);
	-o-transform: rotate(0deg);
	transform: rotate(0deg);
	-webkit-transition: -webkit-transform 250ms ease-out 0s;
	-moz-transition: -moz-transform 250ms ease-out 0s;
	-o-transition: -o-transform 250ms ease-out 0s;
	transition: transform 250ms ease-out 0s;
}

#main-menu > li:hover > a i,
#main-menu > li.active > a i,
#main-menu > li > ul > li:hover > a i,
#main-menu > li > ul > li.active > a i,
#main-menu > li.sectionheader:hover > span i,
#main-menu > li.active.sectionheader > span i,
#main-menu > li > ul > li.sectionheader:hover > span i,
#main-menu > li > ul > li.active.sectionheader > span i {
	-webkit-transform: rotate(-90deg);
	-moz-transform: rotate(-90deg);
	-ms-transform: rotate(-90deg);
	-o-transform: rotate(-90deg);
	transform: rotate(-90deg);
}

[[* /* ------ CONTENT AREA ------ */ *]]
.content-wrapper {
	padding-top: 20px;
}

.content-top {
	font-family: Georgia, Times New Roman, serif;
	color: [[$dark_grey]];
	font-style: italic;
	line-height: 20px;
	position: relative;
}

.content-top .title-border {
	content: '';
	height: 1px;
	display: block;
	width: 100%;
	border-bottom: 1px dotted #ddd;
	position: absolute;
	top: 50%;
}

[[* /* breadcrumbs */ *]]
.breadcrumb {
	display: inline-block;
	background: [[$white]];
	width: auto;
	padding-right: 6px;
	z-index: 1;
	position: relative;
}

.breadcrumb a {
	color: [[$dark_grey]];
	display: inline-block;
	width: auto;
	background: [[$white]];
}

[[* /* print button */ *]]
a.printbutton {
	display: none;
}


[[* /* news module summary -> content */ *]]
.content .news-summary span.heading {
	display: none;
}

.content .news-article {
	margin-bottom: 15px;
	padding-bottom: 15px;
	border-bottom: 1px dotted [[$grey]];
}

.content .news-summary ul.category-list {
	margin: 15px 0;
}

.content .news-summary ul.category-list li a, .news-summary ul.category-list li span {
	border-radius: 4px;
}

.news-summary ul.category-list li span {
	opacity: .4;
}

[[* /* news module summary -> sitewide (content + sidebar) */ *]]
[[* /* article heading */ *]]
.news-article h2 {
	margin: 0 0 15px 0;
}

.news-article h2 a {
	font-family: 'Oswald', Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
	text-transform: uppercase;
	color: [[$dark_grey]];
	font-size: 16px;
	text-decoration: none;
	font-weight: 700;
}

[[* /* date circle, well square for IE  */ *]]
.news-article .date {
	background: [[$orange]];
	color: [[$white]];
	display: block;
	float: left;
	width: 40px;
	padding: 6px;
	height: 40px;
	border-radius: 26px;
	text-align: center;
	font-family: Georgia, Times New Roman, serif;
}

.news-article .day {
	font-size: 20px;
	line-height: 1;
	padding-bottom: 2px;
	font-style: italic;
	display: block;
}

.news-article.month {
	font-size: 11px;
	display: block
}

[[* /* author and category */ *]]
.news-article .author, .news-article .category {
	font-family: Georgia, Times New Roman, serif;
	display: block;
	padding-left: 60px;
	font-size: 11px;
	font-style: italic;
}

[[* /* category list on top of summary */ *]]
.news-summary ul.category-list {
	margin: 15px 0 -1px 0;
	padding: 0;
	list-style: none;
}

.news-summary ul.category-list li {
	float: left;
	display: block;
	width: auto;
	margin-right: 5px;
}

.news-summary ul.category-list li a, .news-summary ul.category-list li span {
	display: block;
	color: [[$dark_grey]];
	padding: 4px 8px;
	background: [[$light_grey]];
	border-radius: 4px 4px 0 0;
	text-decoration: none;
	font-size: 11px;
	text-transform: uppercase;
}

.news-summary ul.category-list li a:hover {
	color: [[$orange]];
}

.news-summary .paginate {
	font: italic 11px/1.2 Georgia, Times New Roman, serif;
}

.news-summary .paginate a {
	padding: 0 3px;
}

.news-meta {
	background: [[$light_grey]];
	padding: 10px;
	margin: 10px 0;
}

[[* /* more link */ *]]
.more, .more a,
[[* /* back link */ *]]
.back, .back a,
[[* /* previous, next links */ *]]
.previous a, .next a, .previous, .next {
	font: italic 12px/1.3 Georgia, Times New Roman, serif;
	color: [[$dark_grey]];
	text-decoration: none;
}

[[* /* hover behavior of more, next, previous links */ *]]
.more a:hover, .back a:hover, .previous a:hover, .next a:hover {
	text-decoration: underline;
}

.previous, .next {
	padding: 6px 0;
}

[[* /* align next link to right */ *]]
.previous {
	float: left;
}

.next {
	float: right;
}

[[* /* ------ SIDEBAR AREA ------ */ *]]

[[* /* news module summary -> sidebar */ *]]
.sidebar .news-summary span.heading {
	position: relative;
	color: [[$dark_grey]];
	font: normal 1em/1.25 Georgia, Times New Roman, serif;
	margin: 0 0 15px 0;
	display: block;
}

.sidebar .news-summary span.heading:after {
	content: '';
	height: 1px;
	display: block;
	width: 100%;
	border-bottom: 1px dotted #ddd;
	position: absolute;
	top: 50%;
}

.sidebar .news-summary .heading span {
	display: inline-block;
	width: auto;
	background: [[$white]];
	padding-right: 6px;
	position: relative;
	z-index: 10;
}

.sidebar .news-article {
	padding: 15px;
	position: relative;
	background: [[$light_grey]];
	margin-bottom: 20px;
	border-radius: 0 0 6px 0;
	font-size: .8125em; [[* /* 13px */ *]]
}

[[* /* creating a bubble box with css3 */ *]]
.sidebar .news-article:before {
	content: '';
	position: absolute;
	bottom: -15px;
	right: 25px;
	width: 10px;
	height: 35px;
	-webkit-transform: rotate(55deg) skewY(55deg);
	-moz-transform: rotate(55deg) skewY(55deg);
	-o-transform: rotate(55deg) skewY(55deg);
	-ms-transform: rotate(55deg) skewY(55deg);
	transform: rotate(55deg) skewY(55deg);
	background: [[$light_grey]];
}

.lt-ie9 .sidebar .news-article:before {
	display: none;
}

[[* /* ------ FOOTER AREA ------ */ *]]
[[* /* footer wrapper */ *]]
.footer {
	position: relative;
	border-top: 8px solid [[$light_grey]];
	margin: 25px 0 10px 0;
	padding-top: 20px;
	padding-bottom: 20px;
}

.footer:before {
	content: ' ';
	border-top: 2px dotted [[$white]];
	border-bottom: 2px dotted [[$white]];
	height: 4px;
	display: block;
	position: absolute;
	width: 100%;
	top: -8px;
	left: 0;
}

[[* /* copyright text */ *]]
.copyright {
	padding-top: 15px;
}

.copyright-info {
	color: [[$dark_grey]];
	font-size: .6875em; [[* /* 11px */ *]]
}

[[* /* social icons */ *]]
.footer ul.social {
	padding: 0;
	margin: 0;
	list-style: none;
	text-align: center;
}

.footer .social li {
	display: inline;
	margin: 0;
	padding: 0;
	margin-right: 6px;
}

.footer .social li a {
	display: inline-block;
	text-decoration: none;
	font-size: 2.625em;
	line-height: 1;
	color: [[$dark_grey]];
}

.footer .social li a:hover {
	color: [[$orange]];
}

.footer .social li a i {
	display: inline-block;
}

[[* /* back to top anchor */ *]]
.back-top a {
	display: inline-block;
	width: 16px;
	height: 16px;
	line-height: 16px;
	padding: 8px;
	border: 5px solid [[$white]];
	text-decoration: none;
	color: [[$dark_grey]];
	background-color: [[$light_grey]];
	border-radius: 500px;
	-webkit-border-radius: 500px;
	-moz-border-radius: 500px;
	-o-border-radius: 500px;
	position: absolute;
	top: -24px;
	left: 50%;
	margin-left: -12px;
	-webkit-transition: all 200ms ease-in-out;
	-moz-transition: all 200ms ease-in-out;
	-ms-transition: all 200ms ease-in-out;
	-o-transition: all 200ms ease-in-out;
	transition: all 200ms ease-in-out;
}

.back-top a:hover {
	background-color: [[$orange]];
	color: [[$white]];
	-webkit-transform: scale(1.1);
	-moz-transform: scale(1.1);
	-ms-transform: scale(1.1);
	-o-transform: scale(1.1);
	transform: scale(1.1);
}

[[* /* Footer navigation */ *]]
.footer-navigation {
	padding-top: 15px;
	border-bottom: 1px solid [[$light_grey]];
}

#footer-menu li > a,
#footer-menu li.sectionheader > span {
	color: [[$dark_grey]];
	display: block;
	text-decoration: none;
}

#footer-menu li > a:hover,
#footer-menu li > a.current,
#footer-menu li.sectionheader > span:hover,
#footer-menu li.sectionheader > span.current {
	color: [[$orange]];
} 

#footer-menu > li > a,
#footer-menu > li.sectionheader > span {
	font-family: 'Oswald', Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
	text-transform: uppercase;
	text-decoration: none;
	display: block;
}

#footer-menu > li > ul > li > a,
#footer-menu > li > ul > li.sectionheader > span {
	font-size: .875em; [[* /* 14px */ *]]
	padding: 2px 0;
}

#footer-menu > li > ul {
	margin: 15px 0;
}

[[* /* =====================================
 SCREENS BIGGER THAN 768px
 ===================================== */ *]]

@media screen and (min-width: 768px) {

	.lt-768 {
		display: none;
	}

	.logo {
		margin-top: 12px;
		position: relative;
		text-align: left;
	}

	[[* /* having some fun with palm, rotating with css3, will not work in IE */ *]]
	.logo .palm {
		position: absolute;
		top: 5px;
		left: 45px;
		background: url([[$path]]/palm-circle.png) no-repeat;
		display: block;
		width: 48px;
		height: 48px;
		transition: transform 0.6s ease-out;
		-webkit-transition: -webkit-transform 0.6s ease-out;
		-moz-transition: -moz-transform 0.6s ease-out;
		-o-transition: -o-transform 0.6s ease-out;
		-webkit-perspective: 1000;
		-webkit-backface-visibility: hidden;
	}

	[[* /* css3 transform rotating palm on hover */ *]]
	.logo a:hover .palm {
		transform: rotate(360deg);
		-webkit-transform: rotate(360deg);
		-moz-transform: rotate(360deg);
		-o-transform: rotate(360deg);
	}

	[[* /* ------ NAVIGATION ------ */ *]]

	nav.main-navigation {
		z-index: 990;
		height: 55px;
		line-height: 37px;
		margin-top: 20px;
	}

	#main-menu {
		float: right;
		margin-top: 0;
	}
	
	[[* /* --- FIRST LEVEL --- */ *]]
	#main-menu > li {
		display: inline-block;
		padding: 0;
		margin: 0 4px;
		border: none;
		position: relative;
	}
	
	[[* /* PARENT INICATOR */ *]]
	#main-menu > li i {
		display: none;
	}
	
	.touch-device #main-menu > li i {
		display: inline-block;
		float: none;
	}
	
	.touch-device #main-menu > li li i {
		float: left;
		display: inline-block;
		margin-right: 8px;
		padding-top: 2px;
		text-align: left;
	}
	
	.touch-device #main-menu > li:first-child li i {
		float: right;
	}

	#main-menu > li:first-child, #main-menu > li.first {
		margin-left: 0;
	}

	#main-menu > li:last-child, #main-menu > li.last {
		margin-right: 0;
	}

	#main-menu > li > a, 
	#main-menu > li.sectionheader span {
		padding: 0 6px 0 10px;
		line-height: 37px;
		font-size: 1em;
	}

	#main-menu > li.parent:hover > a, 
	#main-menu > li.sectionheader.parent:hover > span,
	#main-menu > li.parent.active > a, 
	#main-menu > li.parent.active > span {
		color: [[$white]];
		background-color: [[$dark_grey]];
		background-color: rgba(85, 85, 85, .95);
	}

	[[* /* --- SECOND LEVEL --- */ *]]
	#main-menu > li > ul,
	#main-menu > li > ul > li > ul [[* /* third level */ *]] {
		display: block;
		width: 260px;
	}

	#main-menu > li:hover > ul,
	#main-menu > li.active > ul,
	#main-menu > li > ul > li:hover > ul,
	#main-menu > li > ul > li.active > ul {
		height: auto;
		position: absolute;
		z-index: 9999;
		top: 37px;
		right: 0;
		left: auto;
		display: block;
		border-radius: 3px;
	}
	
	#main-menu > li:first-child:hover > ul,
	#main-menu > li:first-child.active > ul {
		right: auto;
		left: 0;
	}
	
	#main-menu > li > ul > li {
		position: relative;
		line-height: 1;
		margin: 0;
		padding-left: 10px;
	}
	
	#main-menu > li:first-child > ul > li {
		padding-right: 10px;
		padding-left: 0;
	}
	
	#main-menu > li > ul > li > a,
	#main-menu > li > ul > li.sectionheader > span,
	#main-menu > li > ul > li > ul > li > a,
	#main-menu > li > ul > li > ul > li.sectionheader > span {
		color: [[$white]];
		display: block;
		text-transform: none;
		line-height: 1.2;
		border-bottom: 1px dotted #858585;
		background-color: [[$dark_grey]];
		background-color: rgba(90, 90, 90, .98);
		padding: 8px 12px;
		font-size: .875em; [[* /* 14px */ *]]
		text-decoration: none;
	}
	
	#main-menu > li > ul > li.current > a, 
	#main-menu > li > ul > li.current.sectionheader > span,
	#main-menu > li > ul > li > ul > li.current > a, 
	#main-menu > li > ul > ul > li > li.current.sectionheader > span {
		color: [[$orange]];
	}

	[[* /* THIRD LEVEL */ *]]
	#main-menu > li > ul > li:hover > ul,
	#main-menu > li > ul > li.active > ul {
		width: 250px;
		height: auto;
		top: 0;
		right: auto;
		left: -250px;
	}
	
	#main-menu > li:first-child > ul > li:hover > ul,
	#main-menu > li:first-child > ul > li.active > ul {
		left: auto;
		right: -250px;
	}
	
	.lt-ie9 #main-menu > li > ul > li:hover > ul,
	.lt-ie9 #main-menu > li > ul > li.active > ul {
		left: -247px;
	}

	#main-menu > li > ul > li:hover > ul:after,
	#main-menu > li > ul > li.active > ul:after {
		content: ' ';
		width: 0px;
		height: 0px;
		border-style: solid;
		border-width: 7px 0 7px 6px;
		border-color: transparent transparent transparent [[$dark_grey]];
		border-color: transparent transparent transparent rgba(85, 85, 85, .95);
		position: absolute;
		right: -6px;
		top: 12px;
	}
	
	.lt-ie9 #main-menu > li:first-child > ul > li:hover > ul,
	.lt-ie9 #main-menu > li:first-child > ul > li.active > ul {
		left: auto;
		right: -247px;
	}
	
	#main-menu > li:first-child > ul > li:hover > ul:after,
	#main-menu > li:first-child > ul > li.active > ul:after {
		left: -10px;
		right: auto;
	}

	#main-menu li ul li a:hover, 
	#main-menu li ul li span.sectionheader:hover {
		box-shadow: 0 0 5px rgba(85, 85, 85, .9);
		z-index: 2;
	}

	#main-menu > ul > li:last-child > a,
	#main-menu > ul > li.sectionheader:last-child > span,
	#main-menu > ul > li > ul > li:last-child > a,
	#main-menu > ul > li > ul > li.sectionheader:last-child > span {
		border-bottom: none;
	}

	.header-bottom {
		height: 55px;
		line-height: 55px;
		padding: 8px 0;
	}
	
	.phrase-text {
		text-align: left;
	}

	input.search-input {
		height: 17px;
		line-height: 17px;
		width: 100%;
		max-width: 320px;
	}
	
	input.search-input:focus {
		max-width: 90%;
	}
	
	[[* /* print button */ *]]
	a.printbutton {
		display: block;
		padding-left: 6px;
		width: 16px;
		height: 16px;
		float: right;
		text-decoration: none;
		color: [[$dark_grey]];
		background-color: [[$white]];
		z-index: 1;
		position: relative;
	}
	
	a.printbutton i {
		display: inline-block;
		-webkit-transform: rotateY(0deg);
		-moz-transform: rotateY(0deg);
		-ms-transform: rotateY(0deg);
		-o-transform: rotateY(0deg);
		transform: rotateY(0deg);
		-webkit-transition: -webkit-transform 250ms ease-out 0s;
		-moz-transition: -moz-transform 250ms ease-out 0s;
		-o-transition: -o-transform 250ms ease-out 0s;
		transition: transform 250ms ease-out 0s;
	}
	
	a.printbutton:hover {
		color: [[$orange]];
	}
	
	a.printbutton:hover i {
		-webkit-transform: rotateY(360deg);
		-moz-transform: rotateY(180deg);
		-ms-transform: rotateY(360deg);
		-o-transform: rotateY(360deg);
		transform: rotateY(360deg);
	}
	
	[[* /* --- FOOTER --- */ *]]
	
	.footer ul.social {
		text-align: left;
	}
	
	.footer .social li a i {
		display: inline-block;
		-webkit-transform: rotateY(0deg);
		-moz-transform: rotateY(0deg);
		-ms-transform: rotateY(0deg);
		-o-transform: rotateY(0deg);
		transform: rotateY(0deg);
		-webkit-transition: -webkit-transform 250ms ease-out 0s;
		-moz-transition: -moz-transform 250ms ease-out 0s;
		-ms-transition: -moz-transform 250ms ease-out 0s;
		-o-transition: -o-transform 250ms ease-out 0s;
		transition: transform 250ms ease-out 0s;
	}
	
	.footer .social li a:hover i {
		-webkit-transform: rotateY(360deg);
		-moz-transform: rotateY(180deg);
		-ms-transform: rotateY(360deg);
		-o-transform: rotateY(360deg);
		transform: rotateY(360deg);
	}
	
	[[* /* --- Footer Navigation --- */ *]]
	
	.footer-navigation {
		border-bottom: none;
	}
	
	#footer-menu > li {
		float: left;
		display: block;
		position: relative;
		margin-left: 3.8%;
		width: 30.75%;
	}
	
	#footer-menu > li:first-child {
		margin-left: 0;
	} 
}

[[* /* ================================================
 WHEN LAYOUT BREAKS IT'S TIME FOR NEW MEDIA QUERY
 ================================================== */ *]]
@media only screen and (max-width: 780px) {

	.search {
		margin-top: 15px;
	}
	
	input.search-input {
		width: 100%;
		max-width: 100%;
		float: left;
	}
	
	input.search-input:focus {
		max-width: none;
	}
	
	.header-bottom {
		padding-top: 20px;
		text-align: center;
		line-height: inherit;
		padding: 20px 0;
	}

	
}

@media only screen and (min-width: 940px) and (max-width: 1110px) {
	
	#main-menu > li {
		margin: 0;
	}
	
	#main-menu > li > a, 
	#main-menu > li.sectionheader span {
		padding: 0 6px;
	}
}

@media only screen and (min-width: 768px) and (max-width: 1050px) {
	
	.row nav.main-navigation {
		height: auto;
		float: none;
		display: block;
		margin-left: 0;
		width: 100%;
		clear: left;
	}
	
	#main-menu {
		margin-top: 15px;
		margin-bottom: 15px;
		border-bottom: 1px solid [[$light_grey]];
		float: none;
		display: block;
		
	}
	
	#main-menu > li {
		margin: 0;
		bottom: -1px;
		text-align: center;
		border-bottom: 1px solid [[$light_grey]];
		border-right: 1px solid [[$light_grey]];
		border-top: 1px solid [[$light_grey]];
	}
	
	#main-menu > li.current {
		border-bottom-color: [[$white]];
		border-top-color: [[$orange]];
	}
	
	#main-menu > li.current > a {
		border-top: 1px solid [[$orange]];
		line-height: 45px;
	}
	
	#main-menu > li:first-child {
		border-left: 1px solid [[$light_grey]];
	}
	
	#main-menu > li > a,
	#main-menu > li > span {
		line-height: 46px;
		padding-left: 12px;
		padding-right: 6px;
	}
	
	#main-menu > li:hover > ul,
	#main-menu > li.active > ul {
		top: 45px;
	}

	.header-bottom {
		height: auto;
	}
	
	.row .seven-col.phrase-text,
	.row .five-col.search {
		display: block;
		float: none;
		width: 100%;
		margin-left: 0;
		text-align: center;
	}
}

[[* /* ================================================
 WINDOWS 8 SNAP VIEW (yeah yeah W3C blah blah)
 ================================================== */ *]]
@-ms-viewport {
	width: device-width;
}

@-o-viewport {
	width: device-width;
}

@-moz-viewport {
	width: device-width;
}

@-webkit-viewport {
	width: device-width;
}

@viewport {
	width: device-width;
}
[[/strip]]