html {
	font-family:Arial, sans-sefif;
	color:#333;
	background:#123;
	background-image:url('/_images/moroccan-flower.png');
}

body {
	margin:0px;
	padding:0px;
}

img {
	max-width:100%;
	outline:1px solid #ddd;
	outline-offset:-1px;
	display:block;
	margin:0px auto;
}

img.left {
	float:left;
	max-width:30%;
	margin-right:20px;
	margin-bottom:20px;
	display:inline;
}

img.right {
	float:left;
	max-width:30%;
	margin-left:20px;
	margin-bottom:20px;
	display:inline;
}

.cycle-slideshow img {
	max-height:300px;
	display:block;
	margin:0px auto;
	background:#eee;
}

a {
	color:#00f;
}

a:hover {
	color:#f00;
}

/* Header and Footer */

body > div.banner {
	/*background:#123;*/
	background:#123;
}

body > div.banner > header, body > div.banner > footer {
	width:98%;
	max-width:1100px;
	margin:0px auto;
	color:#fff;
}

body > div.banner > header > h1 {
	display:inline;
	line-height:60px;
}

body > div.banner > header > h1 > a {
	color:#fff;
	text-decoration:none;
}

body > div.banner > header > h1 > a:hover {
	color:#abc;
}

body > div.banner > footer {
	padding:40px 0px;
	color:#89a;
}

body > div.banner > footer a {
	color:#89a;
}

body > div.banner > footer a:hover {
	color:#fff;
}

body > div.banner > footer ul {
	list-style:none;
	padding:0px;
}

body > div.banner > footer ul li {
	display:inline;
	margin-right:20px;
}

body > div.banner > footer ul li:last-child {
	margin-right:0px;
}

header h2, header h3 {
	margin:0px;
}

/* Nav */

nav {
	float:right;
}

nav ul {
	list-style:none;
	margin:0px;
	padding:0px;
}

nav ul li {
	display:inline;
	float:left;
}

nav ul li a {
	display:block;
	text-decoration:none;
	color:#fff;
	font-weight:bold;
	line-height:60px;
	padding:0px 20px;
}

nav ul li a:hover {
	background:#345;
	color:#fff;
}

div#mobile-nav {
	float:right;
	margin:6px 4% 0px 0px;
	display:none;
}

div#mobile-nav span {
	display:block;
	width:40px;
	line-height:10px;
	border-bottom:3px solid #fff;
	cursor:pointer;
}

/* Body */

main {
	/*background:#d5e3ca;*/
	background-image:url('/_images/moroccan-flower-dark-fade.png');
	background-repeat:repeat-x;
	background-size:400px auto;
}

main > section:first-child {
	padding-top:30px;
}

section {
	width:92%;
	max-width:1100px;
	margin:0px auto;
	padding:10px 0px 0px 0px;
}

section:last-of-type {
	padding-bottom:10px;
}

section > header > h2, section > header > h3 {
	margin:0px auto;
	background:#123;
	color:#fff;
	padding:10px 2%;
}

section > article {
	background:#fff;
	margin-bottom:20px;
	outline:1px solid #ddd;
	outline-offset:-1px;
}

.first {
	margin-top:0px;
}

div.halfs > div {
	float:left;
	width:48%;
	margin-right:4%;
}

div.halfs > div:nth-child(even){
	margin-right:0px;
}

div.thirds > div {
	float:left;
	width:30%;
	margin-right:5%;
}

div.thirds > div:nth-child(3n){
	margin-right:0px;
}

ul.buttons {
	padding:0px;
	list-style:none;
}

ul.buttons li {
	margin-bottom:6px;
}

ul.buttons li a, a.button, ul.button-block-list > li > a {
	text-decoration:none;
	color:#fff;
	background:#345;
	display:block;
	clear:both;
	line-height:36px;
	padding:0px 2%;
	font-weight:bold;
	border-left:8px solid #789;
}

ul.buttons li a:hover, a.button:hover, ul.button-block-list > li > a:hover {
	background:#b23;
	border-left:8px solid #700;
}

ul.button-block-list {
	list-style:none;
	padding:0px;
	margin:0px;
}

ul.button-block-list > li {
	width:47.5%;
	float:left;
	margin-right:5%;
}

ul.button-block-list > li:nth-child(even){
	margin-right:0px;
}

ul.news {
	margin:0px;
	padding:0px;
	list-style:none;
}

ul.news > li {
	margin-bottom:10px;
}

ul.news > li > a {
	display:block;
	text-decoration:none;
	font-weight:bold;
	background:#f8f8f8;
	padding:10px;
	border:1px solid #ddd;
	border-left:8px solid #999;
	color:#123;
}

ul.news > li > a.external:after, ul.news > li > a.blog:after {
	font-style:italic;
	font-size:85%;
	font-weight:normal;
	color:#b23;
}

ul.news > li > a.external:after {
	content: ' (read external article)';
}

ul.news > li > a.blog:after {
	content: ' (read blog post)';
}

ul.news > li > a:hover {
	color:#fff;
	border-left:8px solid #700;
	background:#b23;
}

ul.news > li > a:hover:after {
	color:#fff;
}

p.title {
	font-weight:bold;
	padding-bottom:0px;
}

ul.text {
	line-height:24px;
}

ul.block-list {
	padding:0px;
	margin:0px;
	list-style:none;
}

ul.block-list > li {
	float:left;
	width:30%;
	margin-right:5%;
	margin-bottom:10px;
	background:#f8f8f8;
	display:block;
	outline:1px solid #ddd;
	outline-offset:-1px;
	padding:10px 5%;
}

ul.block-list > li:nth-child(3n){
	margin-right:0px;
}

div.halfs > div > ul.block-list > li, div.two-thirds > ul.block-list > li {
	width:42.5%;
	padding:10px 2.5%;
	margin-right:0px;
}

div.halfs > div > ul.block-list > li:nth-child(odd), div.two-thirds > ul.block-list > li:nth-child(odd){
	margin-right:5%;
}

div.thirds > div > ul.block-list > li {
	float:none;
	width:90%;
	margin-right:0px;
}

div.segments > div {
	float:left;
}

div.segments > div.third {
	width:33%;
}

div.segments > div.two-thirds {
	width:63%;
}

div.segments > div:first-child {
	margin-right:4%;
}

h2.label, h3.label {
	background:#777;
	color:#fff;
	margin-bottom:0px;
	padding:10px 4%;
}

.block {
	display:block;
}

.underline {
	border-bottom:1px solid #333;
	padding-bottom:2px;
}

.italic {
	font-style:italic;
}

div.container {
	padding:20px 2%;
}

p.spaced {
	clear:both;
	padding:20px 0px;
}

.video-container {
	position:relative;
	overflow:hidden;
	padding-bottom:56.25%;
	padding-top:30px;
	height:0;
}

.video-container iframe, .video-container object, .video-container embed {
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:100%;
}

.center {
	text-align:center;
}

.bold {
	font-weight:bold;
}

.normal-size {
	font-size:inherit;
}

.small {
	font-size:85%;
}

.medium {
	font-size:125%;
}

.large {
	font-size:165%;
}

.no-m {
	margin:0px;
}

p.last {
	margin-bottom:0px;
}

.clear {
	clear:both !important;
	float:none !important;
	width:100% !important;
	margin:0px !important;
	padding:0px !important;
	border:none !important;
}

small {
	font-size:75%;
}

@media(max-width:900px){
	.first {
		padding-top:10px !important;
	}
	
	img {
		margin-top:10px;
	}

	div.segments > div.third {
		width:47.5%;
	}

	div.segments > div.two-thirds {
		width:47.5%;
	}

	div.segments > div:first-child {
		margin-right:5%;
	}
	
	nav ul li a {
		font-weight:inherit;
		padding:0px 10px;
	}
	
	div.thirds > div, div.thirds > div:nth-child(3n) {
		width:47.5%;
		margin-right:5%;
	}
	
	div.thirds > div:nth-child(even), div.thirds > div:nth-child(2n){
		margin-right:0px;
	}
	
	div.thirds > div.third.last {
		width:100%;
		margin:0px;
		float:none;
	}
	
	div.halfs > div > ul.block-list > li, div.segments > div.two-thirds ul.block-list > li {
		float:none;
		padding:10px 5%;
		width:90%;
		margin-right:0px;
	}
	
	div.two-thirds ul.button-block-list > li {
		float:none;
		width:100%;
		margin-bottom:10px;
	}
	
	div.thirds > div.third.last {
		clear:both;
		margin-top:20px;
	}
	
	div.thirds > div.third.last > ul.block-list > li {
		float: left;
		width: 37.5%;
		margin-right: 5%;
	}
	
	div.thirds > div.third.last > ul.block-list > li:nth-child(even){
		margin-right:0px;
	}
}

@media(max-width:750px){
	div.halfs > div, div.thirds > div, div.segments > div.two-thirds, div.segments > div.third, div.thirds > div:nth-child(3n) {
		width:100%;
		float:none;
		margin:0px;
	}
	
	div.halfs div.halfs > div {
		width:48%;
		float:left;
		margin-right:4%;
	}
	
	div.halfs div.halfs > div:nth-child(even){
		margin-right:0px;
	}
	
	div.thirds > div.third.last > ul.block-list > li {
		float: none;
		width: 90%;
		margin-right:0px;
	}
	
	nav {
		display: none;
		float:none;
	}
	
	nav ul li {
		display:block;
		float:left;
		width:33%;
	}
	
	nav ul li:last-child {
		width:34%;
	}
	
	nav ul li a {
		padding:0px;
		text-align:center;
		border-right:1px solid #789;
		font-weight:bold;
	}
	
	nav ul li:last-child a {
		border:none;
	}
	
	body > div.banner > header {
		width:100%;
		position:fixed;
		background:#123;
		padding:0px;
	}
	
	body > div.banner >  header > h1 {
		margin-left:4%;
		font-size:20px;
	}
	
	body > main {
		padding-top:60px;
	}
	
	body > main > section:first-child {
		padding-top:20px;
	}
	
	div#mobile-nav {
		display:inline;
	}
	
	body > footer {
		text-align:center;
	}
	
	body > footer ul li {
		display:block;
		margin-bottom:20px;
	}
}

@media(max-width:600px){
	div.halfs div.halfs > div {
		width:100%;
		float:none;
		margin-right:0px;
	}
	
	body > div.banner >  header > h1 {
		font-size:16px;
	}
}