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

/*********************************************************************************/
/* Global                                                                        */
/*********************************************************************************/
body {
	font-size: 10.5pt;
	font-family: sans-serif;
	background-color: #e3e9dc;
	font-family: 'Ubuntu Condensed', sans-serif;
	color: #878e83;
	letter-spacing: -1px;
}

h1, h2, h3, h4 {
	color: #007897;
	font-weight: normal;
}

h1, h2 {
	text-transform: lowercase;
}

h2 {
	font-size: 1.6em;
	letter-spacing: -1px;
	margin-bottom: 1em;
}

h3, h4 {
	color: #283121;
	margin-bottom: 0.5em;
}

h3 {
	font-size: 1.2em;
	margin-bottom: 0.8em;
}

h4 {
	font-size: 1em;
}

p, ul {
	margin-bottom: 1.25em;
}

p {
	line-height: 1.8em;
}

strong {
	color: #474e43;
}

img.left {
	float: left;
	margin: 2px 1.25em 0 0;
}

img.top {
	margin: 4px 0 2.25em 0;
}

ul {
	padding: 0.25em 0 0 0;
}

a {
	color: #5d93a2;
	text-decoration: underline;
}

a:hover {
	text-decoration: none;
}

*>p:last-child {
	margin-bottom: 0 !important;
}

article.blog-post {
	position: relative;
}

article.blog-post .comments {
	position: absolute;
	top: 0;
	right: 0;
	height: 32px;
	line-height: 24px;
	padding-left: 40px;
	background: url('images/icon-bubble.png') no-repeat;
}

ul.small-image-list {
	
}

ul.small-image-list li {
	overflow: hidden;
	margin-bottom: 1.5em;
}

ul.big-image-list {
	
}

ul.big-image-list li {
	overflow: hidden;
	margin-bottom: 2em;
}

ul.link-list {
	
}

ul.link-list li {
	border-top: solid 1px #ced0b7;
	padding: 0.75em 0 0 0;
	margin: 0.75em 0 0 0;
}

ul.link-list li:first-child {
	padding-top: 0;
	margin-top: 0;
	border-top: 0;
}

.button {
	display: inline-block;
	padding: 15px 25px 15px 25px;
	background-color: #007b9d;
	background-image: -moz-linear-gradient(top, #008dad, #007b9d);
	background-image: -webkit-linear-gradient(top, #008dad, #007b9d);
	background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#008dad),
		to(#007b9d));
	background-image: -ms-linear-gradient(top, #008dad, #007b9d);
	background-image: -o-linear-gradient(top, #008dad, #007b9d);
	background-image: linear-gradient(top, #008dad, #007b9d);
	border-radius: 10px;
	text-transform: lowercase;
	text-decoration: none;
	color: #fff;
	font-size: 1.2em;
	letter-spacing: -1px;
	border: solid 1px #006e8b;
	box-shadow: inset 0px 0px 0px 1px #18a8c8;
}

.button:hover {
	background-color: #118eb1;
	background-image: -moz-linear-gradient(top, #1b9fbe, #118eb1);
	background-image: -webkit-linear-gradient(top, #1b9fbe, #118eb1);
	background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#1b9fbe),
		to(#118eb1));
	background-image: -ms-linear-gradient(top, #1b9fbe, #118eb1);
	background-image: -o-linear-gradient(top, #1b9fbe, #118eb1);
	background-image: linear-gradient(top, #1b9fbe, #118eb1);
	box-shadow: inset 0px 0px 0px 1px #3ecceb;
}

/*********************************************************************************/
/* 1200px (>= 1200px)                                                            */
/*********************************************************************************/
@media only screen and (min-width: 1200px) {
	section, article {
		margin: 0 0 60px 0;
	}
	section:last-child, article:last-child {
		margin-bottom: 0;
	}
	section.left-content {
		padding-right: 30px;
	}
	section.right-content {
		padding-left: 30px;
	}
	section.middle-content {
		padding: 0 30px 0 30px;
	}
	ul.small-image-list img {
		width: 78px;
	}
	ul.big-image-list img {
		width: 178px;
	}
	.blog-post-image {
		width: 588px;
	}
	#header-wrapper {
		background-color: #007294;
		background-image: -moz-linear-gradient(top, #008dab, #007294);
		background-image: -webkit-linear-gradient(top, #008dab, #007294);
		background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#008dab),
			to(#007294));
		background-image: -ms-linear-gradient(top, #008dab, #007294);
		background-image: -o-linear-gradient(top, #008dab, #007294);
		background-image: linear-gradient(top, #008dab, #007294);
	}
	#header {
		position: relative;
		margin: 2.5% 0 2.5% 0;
		padding: 0 30px 0 30px;
		border-radius: 10px;
		border: solid 1px #006e8b;
		box-shadow: inset 0px 0px 0px 1px #12a0bf, 0px 1px 4px 0px
			rgba(0, 0, 0, 0.10);
		background-color: #007b9d;
		background-image: url("css/images/ons-636.png");
		background-position: left center;
		background-repeat: no-repeat;
		background-image: -moz-linear-gradient(top, #008ead, #007b9d);
		background-image: -webkit-linear-gradient(top, #008ead, #007b9d);
		background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#008ead),
			to(#007b9d));
		background-image: -ms-linear-gradient(top, #008ead, #007b9d);
		background-image: -o-linear-gradient(top, #008ead, #007b9d);
		background-image: linear-gradient(top, #008ead, #007b9d);
		height: 66px;
	}
	#header h1 {
		position: absolute;
		left: 40px;
		top: 0;
		color: #fff;
		font-size: 2.4em;
		letter-spacing: -2px;
		line-height: 66px;
	}
	#header h1 a {
		color: #fff;
		text-decoration: none;
	}
	#header nav {
		position: absolute;
		right: 40px;
		top: 1px;
		line-height: 64px;
		text-transform: lowercase;
		font-size: 1.3em;
		letter-spacing: -1px;
	}
	#header nav a {
		display: inline-block;
		text-decoration: none;
		color: #fff;
		padding: 0 25px 0 25px;
	}
	#header nav a.current-page-item {
		background-color: #007897;
		background-image: -moz-linear-gradient(top, #007b99, #007897);
		background-image: -webkit-linear-gradient(top, #007b99, #007897);
		background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#007b99),
			to(#007897));
		background-image: -ms-linear-gradient(top, #007b99, #007897);
		background-image: -o-linear-gradient(top, #007b99, #007897);
		background-image: linear-gradient(top, #007b99, #007897);
		box-shadow: inset 0px 1px 5px 1px rgba(0, 0, 0, 0.1), 0px 0px 5px 1px
			rgba(255, 255, 255, 0.1);
	}
	#header nav a:hover {
		background-color: #0882a1;
		background-image: -moz-linear-gradient(top, #0782a0, #077d9b);
		background-image: -webkit-linear-gradient(top, #0782a0, #077d9b);
		background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#0782a0),
			to(#077d9b));
		background-image: -ms-linear-gradient(top, #0782a0, #077d9b);
		background-image: -o-linear-gradient(top, #0782a0, #077d9b);
		background-image: linear-gradient(top, #0782a0, #077d9b);
		box-shadow: inset 0px 1px 5px 1px rgba(0, 0, 0, 0.05), 0px 0px 5px 1px
			rgba(255, 255, 255, 0.05);
	}
	#banner-wrapper {
		background: #c8d2bc url(images/bg1.png);
	}
	#banner {
		position: relative;
		width: 1160px;
		height: 265px;
		margin: 2% 0 2% 0;
		box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.10);
		border-radius: 10px;
		padding: 20px;
		background: #fff url(images/banner.jpg) no-repeat 20px 20px;
		background-size: 1160px 265px;
	}
	#banner h2 {
		position: absolute;
		z-index: 1;
		width: 100%;
		top: 100px;
		left: 0;
		font-size: 3.3em;
		color: #fff;
		text-align: center;
		letter-spacing: -2px;
	}
	#banner span {
		display: block;
		position: absolute;
		z-index: 1;
		width: 100%;
		bottom: 105px;
		left: 0;
		font-size: 1.6em;
		color: #fff;
		text-align: center;
		letter-spacing: -1px;
		text-transform: lowercase;
		opacity: 0.8;
	}
	#main {
		background: #fff;
		padding: 2% 0 2% 0;
		height: 400px;
	}
	#main .controls {
		
	}
	#main .main-row {
		margin: 2% 0 2% 0;
		overflow: hidden;
	}
	#copyright {
		text-align: center;
		color: #A6A88F;
		border-top: solid 1px #ced0b7;
	}
	#copyright a {
		color: #A6A88F;
	}
}

/*********************************************************************************/
/* 1000px (> 480px && < 1200px)                                                  */
/*********************************************************************************/
@media only screen and (max-width: 1199px) and (min-width: 481px) {
	section, article {
		margin: 0 0 50px 0;
	}
	section:last-child, article:last-child {
		margin-bottom: 0;
	}
	section.left-content {
		padding-right: 15px;
	}
	section.right-content {
		padding-left: 15px;
	}
	section.middle-content {
		padding: 0 15px 0 15px;
	}
	ul.small-image-list img {
		width: 50px;
	}
	ul.big-image-list img {
		width: 75px;
	}
	.blog-post-image {
		width: 490px;
	}
	#header-wrapper {
		background-color: #007294;
		background-image: -moz-linear-gradient(top, #008dab, #007294);
		background-image: -webkit-linear-gradient(top, #008dab, #007294);
		background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#008dab),
			to(#007294));
		background-image: -ms-linear-gradient(top, #008dab, #007294);
		background-image: -o-linear-gradient(top, #008dab, #007294);
		background-image: linear-gradient(top, #008dab, #007294);
	}
	#header {
		position: relative;
		margin: 3.5% 0 1.5% 0;
		padding: 0 40px 0 40px;
		border-radius: 10px;
		border: solid 1px #006e8b;
		box-shadow: inset 0px 0px 0px 1px #12a0bf, 0px 1px 4px 0px
			rgba(0, 0, 0, 0.10);
		background-color: #007b9d;
		background-image: -moz-linear-gradient(top, #008ead, #007b9d);
		background-image: -webkit-linear-gradient(top, #008ead, #007b9d);
		background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#008ead),
			to(#007b9d));
		background-image: -ms-linear-gradient(top, #008ead, #007b9d);
		background-image: -o-linear-gradient(top, #008ead, #007b9d);
		background-image: linear-gradient(top, #008ead, #007b9d);
		height: 66px;
	}
	#header h1 {
		position: absolute;
		left: 40px;
		top: 0;
		color: #fff;
		font-size: 2em;
		letter-spacing: -2px;
		line-height: 66px;
	}
	#header h1 a {
		color: #fff;
		text-decoration: none;
	}
	#header nav {
		position: absolute;
		right: 40px;
		top: 1px;
		line-height: 84px;
		text-transform: lowercase;
		font-size: 1.1em;
		letter-spacing: -1px;
	}
	#header nav a {
		display: inline-block;
		text-decoration: none;
		color: #fff;
		padding: 0 20px 0 20px;
	}
	#header nav a.current-page-item {
		background-color: #007897;
		background-image: -moz-linear-gradient(top, #007b99, #007897);
		background-image: -webkit-linear-gradient(top, #007b99, #007897);
		background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#007b99),
			to(#007897));
		background-image: -ms-linear-gradient(top, #007b99, #007897);
		background-image: -o-linear-gradient(top, #007b99, #007897);
		background-image: linear-gradient(top, #007b99, #007897);
		box-shadow: inset 0px 1px 5px 1px rgba(0, 0, 0, 0.1), 0px 0px 5px 1px
			rgba(255, 255, 255, 0.1);
	}
	#header nav a:hover {
		background-color: #0882a1;
		background-image: -moz-linear-gradient(top, #0782a0, #077d9b);
		background-image: -webkit-linear-gradient(top, #0782a0, #077d9b);
		background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#0782a0),
			to(#077d9b));
		background-image: -ms-linear-gradient(top, #0782a0, #077d9b);
		background-image: -o-linear-gradient(top, #0782a0, #077d9b);
		background-image: linear-gradient(top, #0782a0, #077d9b);
		box-shadow: inset 0px 1px 5px 1px rgba(0, 0, 0, 0.05), 0px 0px 5px 1px
			rgba(255, 255, 255, 0.05);
	}
	#banner-wrapper {
		background: #c8d2bc url(images/bg1.png);
	}
	#banner {
		position: relative;
		width: 960px;
		height: 220px;
		margin: 2% 0 2% 0;
		box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.10);
		border-radius: 10px;
		padding: 20px;
		background: #fff url(images/banner.jpg) no-repeat 20px 20px;
		background-size: 960px 220px;
	}
	#banner h2 {
		position: absolute;
		z-index: 1;
		width: 100%;
		top: 80px;
		left: 0;
		font-size: 3em;
		color: #fff;
		text-align: center;
		letter-spacing: -2px;
	}
	#banner span {
		display: block;
		position: absolute;
		z-index: 1;
		width: 100%;
		bottom: 85px;
		left: 0;
		font-size: 1.4em;
		color: #fff;
		text-align: center;
		letter-spacing: -1px;
		text-transform: lowercase;
		opacity: 0.8;
	}
	#main {
		background: #fff;
		padding: 3% 0 3% 0;
	}
	#main .controls {
		
	}
	#main .main-row {
		margin: 2% 0 2% 0;
		overflow: hidden;
	}
	#copyright {
		text-align: center;
		color: #A6A88F;
		border-top: solid 1px #ced0b7;
		padding: 2em 0 0 0;
		margin: 1em 0 0 0;
	}
	#copyright a {
		color: #A6A88F;
	}
}

/*********************************************************************************/
/* Mobile (<= 480px)                                                             */
/*********************************************************************************/
@media only screen and (max-width: 480px) {
	body {
		font-size: 15pt;
	}
	h2 {
		font-size: 1.4em;
	}
	h3 {
		font-size: 1.2em;
	}
	h4 {
		font-size: 1em;
	}
	ul.small-image-list img {
		width: 75px;
	}
	ul.big-image-list img {
		width: 75px;
	}
	ul.link-list {
		margin: 0 0 2em 0;
	}
	section, article {
		padding: 40px 20px 40px 20px;
	}
	#main section, #main article {
		background: #fff;
	}
	article.blog-post .comments {
		display: block;
		position: relative;
		top: -0.5em;
		margin: 0 0 0.5em 0;
	}
	article.blog-post h2 {
		
	}
	.button {
		font-size: 1em;
	}
	.blog-post-image {
		width: 100%;
	}
	#header-wrapper {
		background-color: #007294;
		background-image: -moz-linear-gradient(top, #008dab, #007294);
		background-image: -webkit-linear-gradient(top, #008dab, #007294);
		background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#008dab),
			to(#007294));
		background-image: -ms-linear-gradient(top, #008dab, #007294);
		background-image: -o-linear-gradient(top, #008dab, #007294);
		background-image: linear-gradient(top, #008dab, #007294);
	}
	#header {
		text-align: center;
		padding: 25px 0 25px 0;
	}
	#header h1 {
		color: #fff;
		font-size: 2.4em;
		text-align: center;
		margin: 0 0 20px 0;
	}
	#header h1 a {
		color: #fff;
		text-decoration: none;
	}
	#header nav {
		text-transform: lowercase;
		font-size: 1em;
		margin: 0 auto;
	}
	#header nav a {
		display: inline-block;
		text-decoration: none;
		color: #fff;
		padding: 10px 15px 10px 15px;
		margin: 3px 0 3px 0;
	}
	#header nav a.current-page-item {
		background-color: #007897;
		background-image: -moz-linear-gradient(top, #007b99, #007897);
		background-image: -webkit-linear-gradient(top, #007b99, #007897);
		background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#007b99),
			to(#007897));
		background-image: -ms-linear-gradient(top, #007b99, #007897);
		background-image: -o-linear-gradient(top, #007b99, #007897);
		background-image: linear-gradient(top, #007b99, #007897);
		box-shadow: inset 0px 1px 5px 1px rgba(0, 0, 0, 0.1), 0px 0px 5px 1px
			rgba(255, 255, 255, 0.1);
		border-radius: 10px;
	}
	#banner-wrapper {
		background: #c8d2bc url(images/bg1.png);
		display: none;
	}
	#banner {
		position: relative;
		width: 100%;
		height: 240px;
		background: #fff url(images/banner.jpg) no-repeat;
		background-size: 100% 100%;
	}
	#banner {
		position: relative;
	}
	#banner h2 {
		position: absolute;
		z-index: 1;
		width: 100%;
		bottom: 80px;
		left: 0;
		font-size: 2em;
		color: #fff;
		text-align: center;
		letter-spacing: -2px;
	}
	#banner span {
		display: block;
		position: absolute;
		z-index: 1;
		width: 100%;
		top: 135px;
		left: 0;
		font-size: 1em;
		color: #fff;
		text-align: center;
		letter-spacing: -1px;
		text-transform: lowercase;
		opacity: 0.8;
	}
	#copyright {
		text-align: center;
		color: #A6A88F;
		padding: 5px;
		font-size: 0.8em;
	}
	#copyright a {
		color: #A6A88F;
	}
}