/*  
	Theme Name: Covrli
	Theme URI: http://covr.li
	Description: The Theme is written by <a href="http://zutrinken.com">Peter Amende</a>
	Version: 2.0
	Author: Peter Amende
	Author URI: http://zutrinken.com
*/

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

/*-----------------------------------------------------------------------------------*/
/* Reset
/*-----------------------------------------------------------------------------------*/

html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure,
footer, header, hgroup, menu, nav, section, summary,
time, mark, audio, video {margin: 0;padding: 0;border: 0;font-size: 100%;font: inherit;vertical-align: baseline;}

article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {display: block;}
* {outline: 0;}
blockquote, q { quotes: none; }
blockquote:before, blockquote:after,
q:before, q:after { content: ''; content: none; }
ins { background-color: #ff9; color: #000; text-decoration: none; }
mark { background-color: #ff9; color: #000; font-style: italic; font-weight: bold; }
del { text-decoration: line-through; }
abbr[title], dfn[title] { border-bottom: 1px dotted; cursor: help; }
table { border-collapse: collapse; border-spacing: 0; }
hr { display: block; height: 1px; border: 0; margin: 1em 0; padding: 0; }
input, select { vertical-align: middle; }

body { font-family: sans-serif; *font-size:small; } 
select, input, textarea, button { font-family: sans-serif; }
pre, code, kbd, samp { font-family: monospace, sans-serif; }

html { overflow-y: scroll; }
a:hover, a:active { outline: none; }
ul, ol { margin-left: 0; }
ol { list-style-type: decimal; }
nav ul, nav li { margin: 0; list-style:none; list-style-image: none; }
small { font-size: 85%; }
strong, th { font-weight: bold; }
td { vertical-align: top; }

sub, sup { font-size: 75%; line-height: 0; position: relative; }
sup { top: -0.5em; }
sub { bottom: -0.25em; }

pre { white-space: pre; white-space: pre-wrap; word-wrap: break-word; padding: 15px; }
textarea { overflow: auto; }
.ie6 legend, .ie7 legend { margin-left: -7px; } 
input[type="radio"] { vertical-align: middle; }
input[type="checkbox"] { vertical-align: middle; }
.ie7 input[type="checkbox"] { vertical-align: baseline; }
.ie6 input { vertical-align: text-bottom; }
label, input[type="button"], input[type="submit"], input[type="image"], button { cursor: pointer; }
button, input, select, textarea { margin: 0; }
input:valid, textarea:valid   {  }
input:invalid, textarea:invalid { border-radius: 1px; -moz-box-shadow: 0px 0px 5px red; -webkit-box-shadow: 0px 0px 5px red; box-shadow: 0px 0px 5px red; }
.no-boxshadow input:invalid, .no-boxshadow textarea:invalid { background-color: #f0dddd; }

::-moz-selection{ background: rgba(0,0,0,0.5); color:#fff; text-shadow: none; }
::selection { background: rgba(0,0,0,0.5); color:#fff; text-shadow: none; }
a:link { -webkit-tap-highlight-color: rrgba(0,0,0,0.5); }

button {  width: auto; overflow: visible; }
.ie7 img { -ms-interpolation-mode: bicubic; }

body, select, input, textarea {  color: #444; }
h1, h2, h3, h4, h5, h6, h7 {}
a, a:active, a:visited { color: inherit; text-decoration: none;}
a:hover {}

.ir { display: block; text-indent: -999em; overflow: hidden; background-repeat: no-repeat; text-align: left; direction: ltr; }
.hidden { display: none; visibility: hidden; }
.visuallyhidden { border: 0; clip: rect(0 0 0 0); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px; }
.visuallyhidden.focusable:active,
.visuallyhidden.focusable:focus { clip: auto; height: auto; margin: 0; overflow: visible; position: static; width: auto; }
.invisible { visibility: hidden; }
.clearfix:before, .clearfix:after { content: "\0020"; display: block; height: 0; overflow: hidden; }
.clearfix:after, .clear { clear: both; }
.clearfix { zoom: 1; }




/*-----------------------------------------------------------------------------------*/
/* Preset
/*-----------------------------------------------------------------------------------*/

body,
input,
select,
textarea {
	font-family: 'Varela Round', Sans-Serif;
	font-weight: 400;
	font-style: normal;
	font-size: 1em;
	line-height: 1.5em;
	color: #404040;
}
h1, h2, h3, h4, h5, h6, h7 {
	color: #000;
	line-height: 1.5em;
}

h1 {
	font-size: 2em;
}
h2 {
	font-size: 1.75em;
}
h3 {
	font-size: 1.5em;
}
h4 {
	font-size: 1.25em;
}
a {
	-webkit-transition: all 0.1s ease-out;
	transition: all 0.1s ease-out;
}

.article a, .article a:link, .article a:visited {
	color: #2e99e5;
	border-bottom: 1px solid #bfbfbf;
}
.article a:hover, .article a:focus {
	border-bottom: 1px solid #404040;
}

p {
	margin: 1.5em 0;
}

hr {
	height: 0.125em;
	background: #e3e3e3;
}

img {
	max-width: 100%;
	height: auto;
}

input[type="submit"],
input[type="text"],
textarea {
	-webkit-appearance: none;
	appearance: none;
	-webkit-border-radius: 0;
	border-radius: 0;
}



/*-----------------------------------------------------------------------------------*/
/* Layout
/*-----------------------------------------------------------------------------------*/

html, body {
	position: relative;
	min-height: 100%;
	overflow-x: hidden;
}


.two-columns-one {
	float: left;
	width: 50%;
}
.two-columns-one.last {}

#sidebar {
	position: fixed;
	width: 20em;
	height: 100%;
	background: #2e99e5;
	z-index: 6;
}
#main {
	position: relative;
	max-width: 56em;
	padding-left: 20em;
	z-index: 3;
}


#header {}
#logo {
	padding: 2em 18.75%;
	overflow: hidden;
}
#logo a {
	display: block;
	font-size: 2em;
	height: 3em;
	color: #fff;
	text-indent: -10000em;
	background: url('../images/logo.svg') no-repeat scroll left bottom / contain transparent;
}
#footer {
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	padding: 2em 0;
	text-align: center;
}
#credits {
	color: rgba(255,255,255,0.5);
	display: block;
}
#credits a {
	color: rgba(255,255,255,1);
}
#credits a:hover,
#credits a:focus {
	color: rgba(255,255,255,1);
}
#social a {
	display: inline-block;
	font-size: 1.5em;
	margin: 1em;
	padding: 0.75em 1em;
	color: #fff;
	background: transparent;
	border: 1px solid rgba(255,255,255,0.5);

	-webkit-border-radius: 0.25em;
	border-radius: 0.25em;
}
#social a:hover,
#social a:focus {
	color: #2e99e5;
	background: #fff;
	border-color: #fff;
}



.page-title {
	font-size: 2em;
	line-height: 1em;
	padding: 3em 1em 0;
	color: #2e99e5;
}
.page-title-aside {
	color: #bfbfbf;
}
.page-submit {
	position: absolute;
	right: 0;
	margin: 2em;
	top: 3em;
}
.page-submit > * {
	display: block;
	float: left;
	height: 2em;
	line-height: 2em;
	padding: 0 0.75em;
	margin: 0 0 0 0.5em;
	
	background: #2e99e5;
	color: #fff !important;

	-webkit-border-radius: 0.25em;
	border-radius: 0.25em;
	cursor: pointer;
}
.page-submit > *:hover,
.page-submit > *:focus {
	background: #404040;
}

.page-submit .info-open {}


/*-----------------------------------------------------------------------------------*/
/* Page
/*-----------------------------------------------------------------------------------*/

.pages {
	padding: 1em;
}
.article {
	margin: 1em;
}

/*-----------------------------------------------------------------------------------*/
/* Covrs
/*-----------------------------------------------------------------------------------*/


#covrs {
	overflow: auto;
	padding: 1em;
}
.covr {
	width: 33.333%;
	margin: auto;
	float: left;
	position: relative;
}
.edit {
	display: block;
	position: absolute;
	right: 0;
	top: 0;
	z-index: 20;
}
#covrs .edit {
	margin: 0.5em;
}
#covr-details .edit {
	margin: 1.5em;
}
.edit a {
	display: block;
	padding: 0.5em 1em;
	margin: 1em;

	color: #fff !important;
	background: #e51717;

	-webkit-border-radius: 0.25em;
	border-radius: 0.25em;
}
.edit a:hover,
.edit a:focus {
	background: #cc0000;
}
.covr-figure {
	margin: 1em;
	background: #2e99e5;
}
.covr.preview .covr-figure {
	background: #000;
}
.covr-link {
	position: relative;
	display: block;
	overflow: hidden;
	height: 0;
	padding-bottom: 100%;
}
.covr.preview .covr-link {
	opacity: 0.5;
}
.covr-fx {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(46,153,229,0);
	-webkit-transition: all 0.3s ease-out;
	transition: all 0.3s ease-out;
	z-index: 5;
}
.covr-fx:after {
	position: absolute;
	width: 200px;
	height: 200px;
	line-height: 200px;
	text-align: center;
	margin: -100px 0 0 -100px;
	left: 50%;
	top: 50%;

	color: transparent;

	font-family: 'FontAwesome';
	content: '\f002';
	
	font-size: 32px;
	font-style: normal;
	font-weight: normal;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;

	-webkit-transition: all 0.2s ease-out;
	transition: all 0.2s ease-out;
}
*:hover > .covr-fx,
*:focus > .covr-fx {
	background-color: rgba(46,153,229,0.75);
}
*:hover > .covr-fx:after,
*:focus > .covr-fx:after {
	color: #fff;
	font-size: 128px;
}

.covr-image {
	position: relative;
	display: block;
	-webkit-animation: imageload 1s ease-out;
	animation: imageload 1s ease-out;

	-webkit-animation-fill-mode: both;
	animation-fill-mode: both;
}
@-webkit-keyframes imageload {
	0% { 
		opacity: 0;
	} 100% { 
		opacity: 1;
	}
}
@keyframes imageload {
	0% { 
		opacity: 0;
	} 100% { 
		opacity: 1;
	}
}
#covrs .covr-image {
	z-index: 4;
	left: 0;
	top: 0;
}
.covr-header {
	height: 2em;
	padding: 1em;
	background: #f4f4f4;
}
.covr-title {
	font-size: 1em;
	line-height: 1em;
}
#loading {
	margin: 2em;
	padding: 1em;
	text-align: center;
}

.spinner {
	width: 100px;
	height: 100px;
	margin: auto;
	position: relative;
}

.container1 > div, .container2 > div, .container3 > div {
	width: 20px;
	height: 20px;
	background-color: #2e99e5;
	
	border-radius: 100%;
	position: absolute;
	-webkit-animation: bouncedelay 1.2s infinite ease-in-out;
	animation: bouncedelay 1.2s infinite ease-in-out;

	-webkit-animation-fill-mode: both;
	animation-fill-mode: both;
}

.spinner .spinner-container {
	position: absolute;
	width: 100%;
	height: 100%;
}

.container2 {
	-webkit-transform: rotateZ(45deg);
	transform: rotateZ(45deg);
}

.container3 {
	-webkit-transform: rotateZ(90deg);
	transform: rotateZ(90deg);
}

.circle1 { top: 0; left: 0; }
.circle2 { top: 0; right: 0; }
.circle3 { right: 0; bottom: 0; }
.circle4 { left: 0; bottom: 0; }

.container2 .circle1 {
	-webkit-animation-delay: -1.1s;
	animation-delay: -1.1s;
}

.container3 .circle1 {
	-webkit-animation-delay: -1.0s;
	animation-delay: -1.0s;
}

.container1 .circle2 {
	-webkit-animation-delay: -0.9s;
	animation-delay: -0.9s;
}

.container2 .circle2 {
	-webkit-animation-delay: -0.8s;
	animation-delay: -0.8s;
}

.container3 .circle2 {
	-webkit-animation-delay: -0.7s;
	animation-delay: -0.7s;
}

.container1 .circle3 {
	-webkit-animation-delay: -0.6s;
	animation-delay: -0.6s;
}

.container2 .circle3 {
	-webkit-animation-delay: -0.5s;
	animation-delay: -0.5s;
}

.container3 .circle3 {
	-webkit-animation-delay: -0.4s;
	animation-delay: -0.4s;
}

.container1 .circle4 {
	-webkit-animation-delay: -0.3s;
	animation-delay: -0.3s;
}

.container2 .circle4 {
	-webkit-animation-delay: -0.2s;
	animation-delay: -0.2s;
}

.container3 .circle4 {
	-webkit-animation-delay: -0.1s;
	animation-delay: -0.1s;
}

@-webkit-keyframes bouncedelay {
	0%, 80%, 100% {
		-webkit-transform: scale(0.0);
	}
	40% {
		-webkit-transform: scale(1.0);
	}
}

@keyframes bouncedelay {
	0%, 80%, 100% { 
		transform: scale(0.0);
		-webkit-transform: scale(0.0);
	} 40% { 
		transform: scale(1.0);
		-webkit-transform: scale(1.0);
	}
}



.tag-list {
	margin: 1em;
}
.tag-list .tag {
	list-style: none;
	float: left;
}
.tag-list .tag a {
	position: relative;
	display: block;
	padding: 0.25em 0.75em 0.25em 2em;
	margin: 0 0.5em 0.5em 0;;
	
	background: #e3e3e3;
	
	-webkit-border-radius: 0.25em;
	border-radius: 0.25em;
}
.tag-list .tag a:after {
	content: '';
	position: absolute;
	width: 0.666em;
	height: 0.666em;
	top: 0.666em;
	left: 0.666em;
	background: #fff;

	-webkit-border-radius: 0.5em;
	border-radius: 0.5em;
}
.tag-list .tag a:hover,
.tag-list .tag a:focus {
	color: #fff;
	background: #2e99e5;
}
.tag-list .tag-count {
	color: #2e99e5;
}
.tag-list .tag a:hover .tag-count,
.tag-list .tag a:focus .tag-count {
	color: rgba(255,255,255,0.5);
}

/*-----------------------------------------------------------------------------------*/
/* Covr Detail
/*-----------------------------------------------------------------------------------*/

#covr-details {
	overflow: auto;
	padding: 1em;
	position: relative;
}
.covr-detail {
	margin: 1em;
}
.covr-detail .covr-figure {
	margin: auto;
}
.covr-info {
	margin-bottom: 0.0625em;
}
.covr-info > * {
	display: block;
	line-height: 1em;
	position: relative;
	background: #f4f4f4;
}
.covr-submitter {
	float: left;
	width: 75%;
}
.covr-love {
	float: left;
	width: 25%;
}
.covr-icon {
	position: absolute;
	display: block;
	top: 0;
	left: 0;
	width: 3.5em;
	line-height: 3.5em;
	text-align: center;
	height: 100%;
	background-size: 44px 44px !important;
}
.covr-icon i {
	font-size: 1.5em;
	color: #2e99e5;
	vertical-align: text-top;
}
.covr-love-status:after {
	font-family: 'FontAwesome';
	content: '\f08a';
	
	font-size: 32px;
	font-style: normal;
	font-weight: normal;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;

	color: #e53d2e;
}
.locked .covr-love-status:after {
	content: '\f004';
}
.covr-label {
	display: block;
	height: 2em;
	min-height: 2em;
	padding: 1em 1em 1em 4.5em;
	word-wrap: break-word;
	overflow: hidden;
}

.covr-love {
	position: relative;
	cursor: pointer;
}
.covr-love-counter {
	cursor: pointer;
	display: none;
	position: absolute;
	width: 3.5em;
	line-height: 3.5em;
	height: 100%;
	top: 0;
	left: 0;
	z-index: 1000;
	text-align: center;
	overflow: hidden;
}
.covr-love-counter:after {
	font-family: 'FontAwesome';
	content: '\f004';
	
	font-size: 32px;
	font-style: normal;
	font-weight: normal;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;

	color: #e53d2e;
}
.covr-love:hover .covr-love-counter,
.covr-love:focus .covr-love-counter {
	display: block;
}
.covr-love.locked .covr-love-counter {
	display: none !important;
}
.covr-tag {
	position: relative;
	display: block;
	float: left;
	padding: 0.25em 0.5em 0.25em 1.5em;
	margin: 0 0.25em 0.25em 0;;
	
	background: #e3e3e3;
	
	-webkit-border-radius: 0.25em;
	border-radius: 0.25em;
}
.covr-tag:after {
	content: '';
	position: absolute;
	width: 0.5em;
	height: 0.5em;
	top: 0.5em;
	left: 0.5em;
	background: #f4f4f4;

	-webkit-border-radius: 0.5em;
	border-radius: 0.5em;
}
.covr-tag:hover,
.covr-tag:focus {
	color: #fff;
	background: #2e99e5;
}
.covr-tags .covr-label,
.covr-description .covr-label {
	height: auto;
}

/*-----------------------------------------------------------------------------------*/
/* Swap Detail
/*-----------------------------------------------------------------------------------*/

.swap-details {}
.swap-details .covr-detail {
	background: #f4f4f4;
}
.swap-details .covr-figure {
	width: 50%;
	height: 0;
	padding-bottom: 50%;
	float: left;
}
.swap-details .covr-figure img {
	width: 100%;
}
.swap-details .covr-info {
	width: 50%;
	float: left;
	margin-bottom: 0;
	border-bottom: 0.0625em solid #fff;
}
.swap-details .covr-submitter {
    float: none;
    width: auto;
}
.swap-details .covr-description .covr-label {
	height: auto;
}

/*-----------------------------------------------------------------------------------*/
/* Covr Detail Comments
/*-----------------------------------------------------------------------------------*/

#reply {
	padding: 1em;
}
#reply-title {
	margin: 1em;
}
#commentform {
	margin: 0 0 1.5em;
}
.comment-field {
	position: relative;
	display: block;
	width: auto;
	height: 1.5em;
	margin: 1em 1em 2em;
	padding: 1em 1em 1em 4.5em;
	background: #f4f4f4;
}
.comment-field.error {
	background: #fff9d9;
}
.comment-field.error .submit-icon {
	background: #f2d024;
}
#comment-field-comment,
#comment-field-comment textarea {
	height: 18.0em;
}
.comment-field input,
.comment-field textarea {
	border: 0;
	background: transparent;
	width: 100%;
}
.comment-label {
	display: none;
}

#submit-comment {
	width: auto;
	padding: 0;
	background: transparent;
	clear: both;
}
#submit-comment #comment-send {
	background: #2e99e5;
	color: #fff;
	border: 0;
	height: 3em;
	width: 100%;
}



ol.comment-list {
	list-style: none;
	margin: 0;
	padding: 1em;
	clear: both;
}
li.comment {
	margin: 1em 1em 2em;
}
.comment-body {
	padding: 1em;
	margin: 0 0 0 2.5em;
	min-height: 4em;
	background: #f4f4f4;
	position: relative;
	border-left: 1em solid #2e99e5;
}
.comment-body:before {
	content: '';
	position: absolute;
	display: block;
	border-top: 3.5em solid #2e99e5;
	border-left: 3.5em solid transparent;
	left: -3.5em;
	top: 0;
}
.comment-avatar {
	position: absolute;
}
.comment-avatar img {
	display: block;
}
.comment-author {
	display: block;
	padding: 0 0 0 5em;
}
.comment-author a {
	color: #404040;
}
.comment-text {
	padding: 0 0 0 6.5em;
	color: #808080;
	font-size: 0.75em;
	line-height: 1.5em;
}

/*----------------------------------------------------------------------------------*/
/* Captcha
/*-----------------------------------------------------------------------------------*/

.captcha {
	position: absolute;
        right: 0px;
        top: 0px;
        height: 100%;
        width: auto;
}


/*-----------------------------------------------------------------------------------*/
/* Covr Submit
/*-----------------------------------------------------------------------------------*/

.submit-message {
	position: relative;
	display: block;
	margin: 1em;
	padding: 1em;
	padding-right: 2em;
}
.submit-message.submit-error {
	background: #ffcccc;
	color: #f20000;
}
.submit-message.submit-clear {
	background: #ddffcc;
	color: #60bf30;
}
.submit-message.submit-info {
	background: #fff9d9;
	color: #f2d024;
}
.submit-message .message-close {
	position: absolute;
	display: block;
	right: 1em;
	top: 1em;
	cursor: pointer;
}

#covr-submits {
	padding: 1em;
}
.covr-submit {}
#submit-form {}
#submit-form input,
#submit-form textarea {
	border: 0;
	background: transparent;
	width: 100%;
}
.submit-field {
	position: relative;
	display: block;
	width: auto;
	height: 1.5em;
	margin: 1em 1em 2em;
	padding: 1em 1em 1em 4.5em;
	background: #f4f4f4;
}
.submit-field.error {
	background: #fff9d9;
}
.submit-field.error .submit-icon {
	background: #f2d024;
}
.submit-label {
	display: none;
}
.submit-icon {
	position: absolute;
	display: block;
	top: 0;
	left: 0;
	width: 3.5em;
	line-height: 3.5em;
	text-align: center;
	height: 100%;
	background: #2e99e5;
	background-size: 44px 44px !important;
}
.submit-icon i {
	font-size: 1.5em;
	color: #fff;
}
#submit-field-description,
#submit-field-description textarea {
	height: 12em;
}



#submit-field-image {
	width: auto;
	height: 14em;
	padding: 0;
	background: transparent;
}
#submit-field-image input {
	width: 1px;
	height: 1px;
	opacity: 0;
	position: absolute;
}
#dropzone {
	position: relative;
	display: block;
	padding: 1em;
	height: 12em;
	background: #404040 url('../images/icon-submit-image.png') center 2.5em scroll no-repeat;
	background-size: 116px 84px;
	cursor: pointer;
	-webkit-transition: all 0.1s ease-out;
	transition: all 0.1s ease-out;
	overflow: hidden;
}
.error #dropzone {
	-webkit-box-shadow: inset 0 0 0 0.25em #f2d024;
	box-shadow: inset 0 0 0 0.25em #f2d024;
}
#preview {
	position: absolute;
	width: 100%;
	height: auto;
	left: 0;
	top: 0;
}
#dropzone:hover,
#dropzone:focus {
	background-color: #262626;
}
#dropzone.fileover {
	background-color: #2e99e5;
	background-position: center center;
	background-size: 0 0;
}
#dropzone.filedroped {
	background-color: #bfbfbf;
}
#dropzone-info {
	position: absolute;
	display: block;
	color: #808080;
	bottom: 2em;
	left: 10%;
	padding: 0.5em 0;
	width: 80%;
	height: 1em;
	line-height: 1em;
	text-align: center;
}
*:hover > #dropzone-info,
*:focus > #dropzone-info {
	color: #bfbfbf;
}
.fileover #dropzone-info {
	color: #fff;
}
.filedroped #dropzone-info {
	color: #808080;
}
.filedroped #dropzone-info-file {
	color: #e3e3e3;
}
#dropzone.filedroped #dropzone-info {
	background: rgba(0,0,0,0.75);
}


.submit-submit {
	width: auto;
	padding: 0;
	background: transparent;
	clear: both;
}
.submit-submit input {
	background: #2e99e5 !important;
	color: #fff;
	border: 0;
	height: 3em;
	width: 100%;
}


/*-----------------------------------------------------------------------------------*/
/* Navigation
/*-----------------------------------------------------------------------------------*/

#navigation {}
#navigation ul {
	border-bottom: 1px solid rgba(255,255,255,0.25);
}
#navigation li {
	border-top: 1px solid rgba(255,255,255,0.25);

	-webkit-transition: all 0.2s ease-out;
	transition: all 0.2s ease-out;
}
#navigation li:hover,
#navigation li:focus,
#navigation li.active {
	background: rgba(0,0,0,0.15);
}
#navigation a {
	display: block;
	padding: 1em 1.333em;
	color: rgba(255,255,255,0.5);
	font-size: 1.5em;
}
#navigation li.active a {
	color: #fff !important;
	background: transparent;
}
#navigation li:hover a,
#navigation li:focus a {
	color: rgba(255,255,255,0.75);
}
#navigation i {
	display: inline-block;
	text-align: center;
	width: 1.25em;
	margin-right: 0.5em;
	color: rgba(255,255,255,0.25);
}
#navigation li.active i {
	color: rgba(255,255,255,0.5);
}



/*-----------------------------------------------------------------------------------*/
/* Media Queries
/*-----------------------------------------------------------------------------------*/


@media only screen and (max-width: 60em)  {
	.two-columns-one {
		float: none;
		width: auto;
	}
	.covr {
		width: 50%;
	}
	#sidebar {
		width: 33.333%;
	}
	#main {
		padding-left: 33.333%;
	}
	.covr-submitter,
	.covr-website,
	.covr-love {
		float: none;
		width: auto;
		margin-bottom: 0.0625em;
	}
}
@media only screen and (max-width: 40em)  {
	#toggler {
		display: block;
		color: #fff;
		text-align: center;
		font-size: 2em;
		position: absolute;
		right: 0;
		top: 0;
		padding: 0.75em;
		cursor: pointer;
	}
	.toggle {
		display: none;
	}
	#sidebar {
		border-bottom: 1px solid rgba(255,255,255,0.25);
	}
	#logo {
		padding: 1em;
		text-align: left;
	}
	#logo a {
		height: 1.5em;
	}
	#footer {
		font-size: 0.75em;
	}
	#navigation a {
		display: block;
		padding: 1.333em;
		font-size: 1.25em;
	}

	#sidebar {
		position: relative;
		width: auto;
	}
	#footer {
		position: static;
		background: #333;
	}
	#main {
		padding-left: 0;
	}
	#covrs,
	#covr-submits,
	#covr-details,
	#reply,
	.pages {
		padding: 0;
	}
	.page-title {
		font-size: 1.5em;
		line-height: 1em;
		padding: 0.666em;
		color: #fff;
		background: #2e99e5;
	}
	.page-title-aside {
		color: rgba(255,255,255,0.5);
	}
	.page-submit {
		top: 0;
		margin: 0.666em 1em;
	}
	.page-submit > * {
		border: 0.0625em solid #fff;
	}
	.page-submit > *:hover,
	.page-submit > *:focus {
		background: #fff;
		color: #2e99e5 !important;
	}
	.swap-details .covr-figure {
		padding-bottom: 100%;
		width: auto;
		float: none;
	}
	.swap-details .covr-info {
		width: auto;
		float: none;
	}
}
@media only screen and (min-width: 40.1em)  {
	#toggler {
		display: none !important;
	}
	.toggle {
		display: block !important;
	}
}
@media only screen and (max-width: 20em)  {
	.covr {
		float: none;
		width: auto;
	}
}

@media	only screen and (-webkit-min-device-pixel-ratio: 2),
		only screen and (-moz-min-device-pixel-ratio: 2),
		only screen and (-o-min-device-pixel-ratio: 2/1),
		only screen and (min-device-pixel-ratio: 2) {
	#dropzone {
		background-image: url('../images/icon-submit-image@2x.png');
	}
}