/*************************
 Layout
 *************************/

html, body {
	padding: 0px;
	margin: 0;
	height: 100%;
}


#wrapper {
	max-width: 960px;
	padding: 0px 30px;
	position: relative;
	min-height: 100%;
}

#left {
	width: 190px;
	position: fixed;
	top: 120px;
	margin-left: 0px;
	text-align: right;
}

header h1 {
	text-transform: uppercase;
	font-size: 20px;
	font-weight: bold;
	margin-bottom: 50px;
}

#intro {
	color: #555;
	font-size: 12px;
	font-weight: 250;
	position: relative;
	bottom: 0px;
	margin-bottom: 0px;
}

#intro span {
	color: #000;
}

/* 
 * Clearfix
 */
.clearfix:after{
	clear: both;
	content: ".";
	display: block;
	height: 0;
	visibility: hidden;
	font-size: 0;
}
/* float clearing for IE6 */
* html .clearfix{
	height: 1%;
	overflow: visible;
}
/* float clearing for IE7 */
*+html .clearfix{min-height: 1%;}

/* HTML5-ify */
article, section, header, hgroup, footer {
	display: block;
}

/*************************
 Grid
 *************************/
.col {
	float-left;
}

/*************************
 Nav
 *************************/
nav ul {
/* 	font-family: 'MisoRegular'; */
	font-size: 14px;
	padding: 0;
	margin-bottom: 40px;
	list-style: none;
	list-style-image: none;
}

nav ul li {
/* 	display: inline; */
	margin-bottom: 4px;
}

nav a {
	color: #555;
/* 	display: block; */
/* 	-webkit-transition: all linear 0.1s; */
}

nav a:hover {
	color: #ff225d;
	margin-right: -5px;
	
	background: #ff225d;
	color: #fff;
	padding: 4px 5px 1px 5px;
}

.links h4 {
	color: #999;
	font-size: 11px;
	font-weight: normal;
	margin-bottom: 0px;
	text-transform: uppercase;
}

.links p,
.links ul {
	font-size: 12px;
	margin-top: 0px;
	margin-bottom: 20px;
}

.links span {
	color: #999;
}

.social-links ul {
	list-style: none;
	list-style-image: none;
	padding: 0;
}
	.social-links ul li {
		display: inline;
		margin: 0 0 0 0px;
	}

	.social-links a {
		background: #ddd url(../img/gui_sprite.png) no-repeat left top;
		border: 2px solid #fff;
		-webkit-border-radius: 28px;
		-moz-border-bottom-right-radius: 28px;
		border-radius: 28px;
		color: transparent;
		display: inline-block;
		font-size: 0px;
		height: 28px;
		width: 28px;
	}
	
	.social-links a:hover {
		background-color: #ff225d;
	}
	
		.social-links a.flickr {
			background-position: -6px -31px;
			background-position-x: -6px;
			background-position-y: -31px;
		}
		
		.social-links a.vimeo {
			background-position: -5px -90px;
			background-position-x: -5px;
			background-position-y: -90px;
		}
		.social-links a.twitter {
			background-position: -6px -1px;
			background-position-x: -6px;
			background-position-y: -1px;
		}
		
		.social-links a.facebook {
			background-position: -6px -61px;
			background-position-x: -6px;
			background-position-y: -61px;
		}


/*************************
 User Bar
 *************************/
#user-bar {
	background: #333;
	-webkit-border-bottom-left-radius: 3px;
	-moz-border-bottom-left-radius: 3px;
	border-bottom-left-radius: 3px;
	-webkit-border-bottom-right-radius: 3px;
	-moz-border-bottom-right-radius: 3px;
	border-bottom-right-radius: 3px;
	position: absolute;
	right: 30px;
	top: 0;
	z-index: 1000;
}

#user-bar .dropdown-menu {
	position: relative;
	float: left;
}

#user-bar .dropdown-menu a.trigger {
	color: #ddd;
	display: inline-block;
	padding: 5px 10px;
}

#user-bar .dropdown-menu a.trigger span {color: #fff;}

#user-bar .dropdown-menu ul {
	background: #eee;
	
	-webkit-border-top-left-radius: 3px;
	-moz-border-top-left-radius: 3px;
	border-top-left-radius: 3px;
	-webkit-border-bottom-left-radius: 3px;
	-moz-border-bottom-left-radius: 3px;
	border-bottom-left-radius: 3px;
	-webkit-border-bottom-right-radius: 3px;
	-moz-border-bottom-right-radius: 3px;
	border-bottom-right-radius: 3px;
	
	display: none;
	
	list-style: none;
	list-style-image: none;
	padding: 0;
	margin: 0;
	position: absolute;
	top: 31px;
	right: 0;
	width: 120px;
}

#user-bar .dropdown-menu:hover ul {
	display: block;
}

#user-bar .dropdown-menu ul a {
	color: #555;
	display: block;
	padding: 5px 10px;
}

#user-bar .dropdown-menu ul a:hover {
	background: #ddd;
	color: #000;
}

#user-bar .user-dropdown a.trigger {
	background: url(../img/admin_ui_sprite.png) no-repeat 100% 0;
	border-right: 1px dashed #666;
	padding-right: 30px;
}

#user-bar .actions-dropdown a.trigger {
	background: #444 url(../img/admin_ui_sprite.png) no-repeat 40% 58%;
	width: 20px;
}

/*************************
 General adjustments
 *************************/
#left a:hover,
#user-bar a:hover,
a.block-link:hover {
	border-bottom: none;
}

span.info-label {
	color: #999;
	font-size: 12px;
	font-weight: bold;
}

/*************************
 Messages
 *************************/
ul.messages {
	list-style: none;
	list-style-image: none;
	font-size: 12px;
	padding: 0;
}

ul.messages li {
	background-color: #fafafa;
	border: 1px solid #eee;
	-webkit-border-radius: 2px;
	-moz-border-radius: 2px;
	border-radius: 2px;
	padding: 5px 10px;
	margin-bottom: 5px;
}

.messages .status {
	background-color: #eef9dd;
	border-color: #c3ec88;
	color: #61a600;
}

.messages .warning {
	background-color: #fff8df;
	border-color: #ffe281;
	color: #db8800;
}

.messages .error {
	background-color: #fff3f5;
	border-color: #ff8a9b;
	color: #ff3452;
}

/*************************
 Content
 *************************/

#content {
	margin: 0 0 0 240px;
	padding-top: 156px;
	padding-bottom: 70px;
	position: relative;
}

#content .actions {
	font-size: 10px;
}

.post-image {
	float: right;
	margin: 10px 0 30px 30px;
}

article h1 {line-height: 120%;}

.actions a {
	background: #ff225d;
	color: #fff;
/* 	font-family: 'MisoBold'; */
	font-weight: bold;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	padding: 3px 5px;
}

.actions a:hover {
	background: #333;
}

#hgroup-wrapper {
	position: relative;
	height: 0px;
	padding: 0 0 30px 0;
}

.home #hgroup-wrapper {height: auto;}

#content-hgroup {
	position: absolute;
	bottom: 0px;
	padding-bottom: 28px;
}

#content h1 {
/* 	font-family: 'MisoBold'; */
/* 	font-size: 50px; */
/* 	line-height: 100%; */
	margin-top: 10px;
	margin-bottom: 0;
/* 	position: absolute; */
/* 	bottom: 0; */
}


/*************************
 Footer
 *************************/
footer {
	color: #999;
	display: block;
	height: 30px;
	margin: -30px 30px 0 275px;
	padding: 0;
	position: relative;
	bottom: 0;
}

footer p {
	margin: 0;
	font-size: 10px;
	line-height: 120%;
}

footer a:hover {
	color: #333;
}

/*************************
 Works
 *************************/
a.block-link {
	display: block;
	position: relative;
}

.grid-list {
	padding-top: 20px;
}

.grid-list article {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	float: left;
	width: 240px;
	padding: 0 2px 0 2px;
	margin-bottom: 4px;
}

.grid-list .item {
	background: #eee;	
	box-shadow: 0 0 1px #bbb;
	height: 176px;
	overflow: hidden;
}

.grid-list .item .underlay {
	background-image: linear-gradient(right bottom, rgba(181,67,47,0.7) 0%, rgba(171,36,155,0.7) 100%);
	background-image: -o-linear-gradient(right bottom, rgba(181,67,47,0.7) 0%, rgba(171,36,155,0.7) 100%);
	background-image: -moz-linear-gradient(right bottom, rgba(181,67,47,0.7) 0%, rgba(171,36,155,0.7) 100%);
	background-image: -webkit-linear-gradient(right bottom, rgba(181,67,47,0.7) 0%, rgba(171,36,155,0.7) 100%);
	background-image: -ms-linear-gradient(right bottom, rgba(181,67,47,0.7) 0%, rgba(171,36,155,0.7) 100%);
	background-image: -webkit-gradient(
		linear,
		right bottom,
		left top,
		color-stop(0, rgba(181,67,47,0.7)),
		color-stop(1, rgba(171,36,155,0.7))
	);
	
	box-shadow: inset 0px 0px 20px rgba(0,0,0,0.3);
	width: 100%;
	height: 176px;
	position: absolute;
	top: 0;
	opacity: 0;
	
	-webkit-transition: opacity linear 0.1s;
	-moz-transition: opacity linear 0.1s;
	transition: opacity linear 0.1s;
}

.grid-list a.item:hover .underlay {opacity: 1;}

.grid-list .item .overlay {
	width: 100%;
	height: 176px;
	position: absolute;
	top: 0;
	overflow: hidden;
}

.grid-list .item img {
	display: block;
	width: 100%;
}

.grid-list hgroup {
	position: relative;
	top: 15px;
}

.grid-list h3 {
	background: #333;
	color: #fff;
	display: inline-block;
	font-size: 14px;
	font-weight: bold;
	line-height: 130%;
	padding: 3px 10px 3px 10px;
	margin: 0 20px 0 0;
	clear: both;
}

.grid-list hgroup p {
	background: #fff;
	color: #666;
	display: inline-block;
	font-size: 11px;
	line-height: 130%;
	text-transform: uppercase;
	padding: 5px 10px 5px 10px;
	margin: 0 20px 20px 0;
	clear: both;
	-webkit-transition: opacity linear 0.2s;
	-moz-transition: opacity linear 0.2s;
	transition: opacity linear 0.2s;
}

.grid-list hgroup p span {
	color: #ff225d;
	text-transform: none;
	white-space: nowrap;
}

.grid-list .info {
	position: absolute;
	bottom: -120px;
	-webkit-transition: bottom linear 0.2s;
	-moz-transition: bottom linear 0.2s;
	transition: bottom linear 0.2s;
}

.grid-list a.item:hover .info {bottom: 0;}

.works-list a.item:hover hgroup p {opacity: 0;}

.grid-list .info p {
	color: #fff;
	font-size: 12px;
	line-height: 120%;
	padding: 0 0 0 10px;
	margin: 10px 20px 10px 0;
}

/* Collapsible text */
.grid-list hgroup p span.collapsible {
	color: #fff;
	display: none;
}

.grid-list a.item:hover hgroup p span.collapsible {
	color: #666;
	display: inline;
}

/*
 * Couple grid elments (not complete)
 */

.col-1 {width: 240px;}
.col-2 {width: 480px;}
.col-3 {width: 720px;}
.col-4 {width: 960px;}

/*
 * Media Queries, yey for responsice design!!
 */

@media screen and (max-width: 1020px) {	
	.grid-list article {
		width: 33.3%;
	}
}

@media screen and (max-width: 880px) {
	#left {
		position: relative;
		padding-top: 30px;
		top: 0;
		width: 100%;
	}
	
	header h1 {margin-bottom: 30px;}
	
	header h1,
	header ul,
	header p,
	.social-links {
		text-align: center;
	}
	
	header nav ul {
		margin-bottom: 40px;
	}
	
	header nav ul li {
		display: inline;
		margin: 0 10px;
	}
	
	header nav ul li a {
		padding-left: 5px;
		padding-right: 5px;
		margin-right: 0px !important;
	}
	
	.external-links {display: none;}
	
	.social-links {
		border-top: 1px solid #eee;
	}
	.social-links ul {margin-top: -19px;}
	
	.social-links ul li {
		display: inline;
		margin: 0 5px;
	}
	
	#content {
		width: 720px;
		margin: 0 auto;
		padding-top: 30px;
	}
	
	#hgroup-wrapper {
		height: auto;
		padding-bottom: 10px;
	}
	
	#content-hgroup {
		position: relative;
		padding-bottom: 0px;
	}
	
	footer {
		margin-left: 30px;
		text-align: center;
	}
}

@media screen and (max-width: 810px) {
	#wrapper {
		padding-left: 20px;
		padding-right: 20px;
	}
	
	#content {
		width: auto;
	}
}

@media screen and (max-width: 520px){
	form.responsive {
		width: 100% !important;
	}
	
	form.responsive input[type=submit] {
		width: 100%;
	}
}

@media screen and (min-width: 480px) and (max-width: 700px) {
	.grid-list article {
		width: 50%;
	}
}

@media screen and (max-width: 479px) {
	#wrapper {
		padding-left: 10px;
		padding-right: 10px;
	}
	
	#left {padding-top: 10px;}
	
	header h1 {margin-bottom: 20px;}
	
	.social-links ul {margin-bottom: 0px;}
	
	.post-image {
		float: none;
		margin-left: 0px;
	}
	
	.post-image img {width: 100%;}
	
	.grid-list article {
		width: 100%;
	}
	
	.grid-list .item img {
		margin-top: -40px;
	}
}

@media screen and (max-width: 400px) {
	header nav ul li {margin: 0 5px;}
}