/*
 * Colours:
 * Secretary blue: 1B94E8
 * dark blue: 116CAA
 * dark bg: 222222
 */

::selection {
	background: #CCC;
}

::-moz-selection {
	background: #CCC;
}

/*
 * Defaults
 */

html, body {
	padding: 0;
	margin: 0;
}

html {
	font-size: 62.5%;
}

body {
	font-family: Helvetica, Arial, sans-serif;
	font-size: 1.2em;
	line-height: 1.4em;
	background-color: #F2F2F2;
	color: #666;
}

a {
	color: #1B94E8;
	text-decoration: none;
}

a:hover {
	text-decoration: underline;
}

img {
	border: 0;
}

p {
	padding: 0;
	margin: 0px 0 15px 0;
	line-height: 1.4em;
}

h1, h2, h3 {
	padding: 0;
	margin: 0;
	font-size: 1em;
	color: #000;
}

#main h3 {
	margin-bottom: 10px;
	font-size: 1.2em;
}

/*
 * Font control
 */

#header #menu ul li a, #header #title h1, #main h1, #section-help .textblock, #section-features .textblock, .post .date {
	font-family: "franklin-gothic-urw", Helvetica, Arial, sans-serif;
	font-style: normal;
	font-weight: 400;
}

.button {
	font-family: "franklin-gothic-urw", Helvetica, Arial, sans-serif;
}

.page h2, strong {
	font-family: "franklin-gothic-urw", Helvetica, Arial, sans-serif;
	font-style: normal;
	font-weight: 700;
}

.post .text strong {
	font-family: Helvetica, Arial, sans-serif;
	font-weight: bold;
}

.page h3, #main .post h3.post-title {
	font-family: "franklin-gothic-urw", Helvetica, Arial, sans-serif;
	font-style: normal;
	font-weight: 700;
}

/*
 * Utilities
 */

.align-left {
	float: left;
}

.align-right {
	float: right;
}

.align-center {
	text-align: center;
}

.inner, .center {
	margin: 0 auto 0 auto;
	width: 960px;
}

.col {
	float: left;
	margin-right: 10px;
	width: 313px;
}

.last {
	margin-right: 0;
}

.hilite {
	color: #1B94E8;
}

.small {
	font-size: 0.9em;
}

#main h1 {
	margin: 0 auto 20px auto;
	width: 100%;
	font-size: 2.2em;
	line-height: 1.2em;
	text-align: center;
}

#main h1.hilite {
	width: 415px;
}

button, .button {
	display: block;
	position: relative;
	margin-right: 15px;
	padding: 10px;
	border: none;
	background-color: #222;
	color: #FFF;
	cursor: pointer;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;
}

.button {
	text-align: center;
	font-weight: bold;
}

button:hover, .button:hover {
	text-decoration: none;
	background-color: #000;
}

button:active, .button:active {
	top: 1px;
}

button.blue, .blue {
	background-color: #1B94E8;
}

button.blue:hover, .blue:hover {
	background-color: #116CAA;
}

button.white {
	background-color: #FFF;
	color: #000;
}

button.white:hover {
	background-color: #000;
	color: #FFF;
}

button.big, .big {
	width: 100%;
	height: 65px;
	-webkit-border-radius: 7px;
	-moz-border-radius: 7px;
	border-radius: 7px;
}

button .label {
	display: block;
	font-size: 1.2em;
	font-weight: bold;
}

button.big .label {
	font-size: 1.4em;
}

.caption {
	font-size: 0.9em;
	color: #666;
}

.plus_more {
	display: block;
	padding-left: 20px;
	font-size: 0.9em;
	background: transparent url("../img/plus_more.png") no-repeat 0px 0px;
	color: #999;
}

.plus_more:hover {
	text-decoration: none;
	color: #FFF;
}

.plus_more:active {
	background-position: 0px 1px;
}

/*
 * Parts
 */

#site {
	float: left;
	width: 100%;
}

#main {
	float: left;
	margin-top: 20px;
	width: 100%;
}

#content {
	clear: both;
}

/*
 * Header
 */

header, #header {
	width: 100%;
}

#header #title {
	margin-top: 47px;
	height: 79px;
	border-bottom: 1px solid #CCC;
	background-color: #FFF;
}

#header #title h1 {
	padding-top: 28px;
	/*padding-left: 50px;*/
	height: 47px;
	font-size: 2.2em;
	font-weight: normal;
	color: #000;
	/* background: transparent url("../img/secretary_logo_stiletto.png") no-repeat 0px 16px;*/
}

/*
 * Footer
 */

#footer {
	clear: both;
	padding-top: 15px;
	width: 100%;
	font-size: 0.9em;
	color: #999;
}

/*
 * Menu
 */

#header #menu {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 47px;
	background-color: #000;
	color: #CCC;
	z-index: 100;
}

#header #menu ul {
	float: left;
	clear: both;
	display: block;
	padding: 12px 0 0 0;
	margin: 0;
	list-style: none;
}

#header #menu li {
	float: left;
	margin-right: 15px;
	list-style: none;
}

#header #menu a {
	position: relative;
	margin-right: 15px;
	font-size: 1.2em;
	text-decoration: none;
	color: #CCC;
}

#header #menu a:hover, #header #menu .active a {
	text-decoration: underline;
}

#header #menu a:active {
	top: 1px;
	color: #FFF;
}

#header #menu #blog a, #header #menu #about-contact a {
	font-size: 1em;
	color: #999;
}

#header #menu #download a {
	color: #00B854;
}

/*
 * Page sections
 */

.page {
	position: relative;
	float: left;
	clear: both;
	width: 100%;
}

.page h2 {
	margin-top: 10px;
	margin-bottom: 20px;
	padding-top: 5px;
	border-top: 1px solid #CCC;
	font-size: 0.9em;
	text-transform: uppercase;
	text-align: center;
	color: #000;
}

.page .page-text {
	margin-bottom: 15px;
}

/*
 * Projects
 */

.fileGroup {
	float: left;
	margin-bottom: 20px;
	width: 100%;
}

.slideshow {
	clear: both;
	color: #666;
}

.slideshow-nav {
	margin-bottom: 3px;
	font-size: 0.9em;
}

.slideshow-nav a {
	color: #999;
}

.slideshow-nav a:hover {
	color: #666;
}

.textblock {
	float: left;
	margin: 0 0 20px 0;
}

.textblock strong {
	font-weight: bold;
}

.file {
	margin-bottom: 10px;
}

.file img {
	display: block;
	padding: 0;
	margin: 0;
}

.file .info {
	margin-top: 3px;
	font-size: 0.9em;
	text-align: center;
}

.file .info .title {
	display: block;
}

.file .info .caption, .file .info .caption a {
	color: #999;
}

.project {
	float: left;
	display: block;
	margin-right: 20px;
	margin-bottom: 10px;
	width: 200px;
	height: 180px;
	overflow: hidden;
	outline: none;
}

.project .thumbnail {
	display: block;
	width: 200px;
	height: 130px;
	overflow: hidden;
	background-color: #000;
}

.project .details {
	display: block;
	margin-top: 5px;
	text-align: center;
	color: #666;
}

.project:hover .details {
	color: #EEE;
}

.project .details .tags a {
	color: #666;
}

.project.active .details {
	color: #EF2400;
}

.tags a {
	color: #666;
}

.tags a:hover {
	color: #999;
}

/*
 * Blog
 */

.post {
	float: left;
	margin: 0px 20px 20px 0;
	width: 100%;
	border-bottom: 1px solid #CCC;
}

#main .post h3.post-title {
	display: block;
	margin-bottom: 5px;
	font-weight: normal;
	font-size: 1.4em;
	color: #1B94E8;
}

.post .date {
	display: block;
	margin-bottom: 20px;
	font-size: 1.2em;
}

.post .image {
	float: right;
	margin-left: 20px;
	overflow: hidden;
	width: 420px;
}

.post img {
	display: block;
	margin: 0 0 10px 0;
	padding: 0;
	border: 1px solid #CCC;
	width: 419px;
	height: auto;
}

.post .text {
	float: left;
	margin: 0px 20px 20px 0px;
	font-size: 1.2em;
	color: #444;
	min-height: 250px;
	-moz-column-count: 3;
	-moz-column-gap: 20px;
	-webkit-column-count: 3;
	-webkit-column-gap: 20px;
	column-count: 3;
	column-gap: 20px;
}

.post.with-image .text {
	width: 500px;
	-moz-column-count: 2;
	-moz-column-gap: 20px;
	-webkit-column-count: 2;
	-webkit-column-gap: 20px;
	column-count: 2;
	column-gap: 20px;
}

.post .text a {
	color: #1B94E8;
}

.post .text a:hover {
	text-decoration: underline;
}

/*
 * Misc.
 */

#section-features .textblock {
	width: 100%;
	text-align: center;
	color: #666;
}

#section-features .textblock p {
	margin: 0 auto 10px auto;
	width: 450px;
	font-size: 1.4em;
	line-height: 1.4em;
}

#section-features .file {
	width: 100%;
}

#section-features .file img {
	display: block;
	margin: 0 auto 0 auto;
}

#section-showcase .file {
	float: left;
	margin-right: 12px;
	margin-bottom: 12px;
}

#section-showcase .file:nth-child(5n+0) {
	margin-right: 0;
}

#section-showcase .file img {
	border: 1px solid #CCC;
}

#section-showcase .file a:hover img {
	border-color: #B6B6B6;
}

#section-showcase .file:hover .title {
	color: #000;
}

#section-showcase .caption {
	display: none;
}

#section-help .textblock {
	margin-right: 20px;
	padding-right: 20px;
	width: 292px;
	border-right: 1px solid #CCC;
}

#section-help .textblock:last-child {
	border: none;
	margin-right: 0;
	padding-right: 0;
}

#section-help .textblock h1 {
	margin-bottom: -10px;
	width: 100%;
}

#section-help .textblock h1 a {
	color: #000;
}

#section-help .textblock a:hover {
	text-decoration: underline;
}

#section-help .textblock p {
	font-size: 1.4em;
	line-height: 1.4em;
	text-align: center;
}

#section-help .textblock p a {
	color: #666;
}

#section-help .textblock div {
	padding-top: 55px;
	height: 120px;
}

#section-help #userguide {
	background: transparent url("../img/help_userguide_icon.png") no-repeat top center;
}

#section-help #forum {
	background: transparent url("../img/help_forum_icon.png") no-repeat 140px 0;
}

#section-help #dev {
	opacity: 0.5;
	cursor: wait;
	background: transparent url("../img/help_devs_icon.png") no-repeat top center;
}

.textblock ul {
	list-style: circle outside;
}

.textblock ul li {
	margin-bottom: 2px;
}

.changelog .textblock ul {
	font-family: Andale Mono, "Courier New", Courier, monospace;
	font-size: 1.2em;
}

.changelog .textblock ul li {
	margin-bottom: 0;
	padding-bottom: 10px;
	border-bottom: 1px dotted #CCC;
}

#section-download .textblock {
	width: 100%;
}

#section-download .textblock:first-child {
	margin-top: 20px;
}

.button-download {
	margin: 0 auto 0 auto;
	padding: 10px 15px 10px 30px;
	text-transform: uppercase;
	width: 99px;
	font-size: 1.1em;
	background: #00B854 url("../img/download_icon.png") no-repeat 13px 12px;
	color: #FFF;
	border-radius: 3px;
}

.button-download:hover {
	text-decoration: none;
	background-color: #00c65a;
}

.button-download span {
	padding-left: 5px;
	color: #000;
}

.button-secondary {
	margin: 0 auto 0 auto;
	padding: 5px;
	width: 134px;
	border: 1px dashed #CCC;
	background-color: transparent;
	color: #222;
}

.button-secondary:hover {
	background-color: #FFF;
}

#donate {
	margin: 0;
	padding: 5px;
	border: 1px solid #CCC;
	border-radius: 3px;
	font-size: 1em;
	font-family: Arial, sans-serif;
	background-color: #FFF;
	cursor: pointer;
}

#donate:hover {
	text-decoration: underline;
}

.anchor {
	display: block;
	float: left;
	clear: both;
}