application.scss

// -*- Mode: SCSS; tab-width: 4; indent-tabs-mode: true; c-basic-offset: 4 -*-
//= require css3buttons/without-reset

@import "lib/css3";
@import "lib/typography";
@import "lib/forms";
@import "lib/boxes";
@import "lib/css3buttons_fixes";
@import "comment_content";

html {
	background: rgb(127,151,171);
}

body {
	background: white;
}

hr {
	background: #c0c0c0;
}

header {
	background: rgb(207,231,250); /* Old browsers */
	background: -moz-linear-gradient(top, rgba(207,231,250,1) 0%, rgba(99,147,193,1) 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(207,231,250,1)), color-stop(100%,rgba(99,147,193,1))); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top, rgba(207,231,250,1) 0%,rgba(99,147,193,1) 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top, rgba(207,231,250,1) 0%,rgba(99,147,193,1) 100%); /* Opera11.10+ */
	background: -ms-linear-gradient(top, rgba(207,231,250,1) 0%,rgba(99,147,193,1) 100%); /* IE10+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#cfe7fa', endColorstr='#6393c1',GradientType=0 ); /* IE6-9 */
	background: linear-gradient(top, rgba(207,231,250,1) 0%,rgba(99,147,193,1) 100%); /* W3C */
	
	height: 48px;
	margin-bottom: 24px;
	border-bottom: solid 2px #487cac;

	nav {
		text-align: right;
		
		div {
			display: inline-block;
			margin-left: 1.5em;
			margin-top: 13px;
		}

		a, a:visited {
			color: #221544;
			font-weight: bold;
		}
	}
} // header

#site_logo {
	.product_creator {
		display: none;
	}

	.product_logo {
		display: inline-block;
		margin-top: 8px;
		vertical-align: top;

		img {
			margin: 0;
			display: block;
		}
	}

	.product_name {
		color: black;
		font-size: 20pt;
		font-weight: bold;
		display: inline-block;
		margin-top: 12px;
		margin-left: 4px;
		vertical-align: top;
	}

	.product_desc {
		display: inline-block;
		color: #34404C;
		font-size: 14pt;
		margin-top: 13px;
	}

	a, a:visited, a:hover {
		color: inherited;
		text-decoration: none;
	}
}

footer {
	background: rgb(90,108,123); /* Old browsers */
	background: -moz-linear-gradient(top, rgba(90,108,123,1) 0%, rgba(127,151,171,1) 32%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(90,108,123,1)), color-stop(32%,rgba(127,151,171,1))); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top, rgba(90,108,123,1) 0%,rgba(127,151,171,1) 32%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top, rgba(90,108,123,1) 0%,rgba(127,151,171,1) 32%); /* Opera11.10+ */
	background: -ms-linear-gradient(top, rgba(90,108,123,1) 0%,rgba(127,151,171,1) 32%); /* IE10+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#5a6c7b', endColorstr='#7f97ab',GradientType=0 ); /* IE6-9 */
	background: linear-gradient(top, rgba(90,108,123,1) 0%,rgba(127,151,171,1) 32%); /* W3C */

	margin-top: 24px;
	font-size: 80%;
	text-align: center;
	border-top: solid 2px #566674;
	padding-top: 24px;
	padding-bottom: 24px;
	color: #222;

	a, a:visited {
		color: #029;
	}
}


.container > .row > *:first-child {
	> h1:first-child,
	> h2:first-child {
		margin-top: 0;
	}
}


#sections_bar {
	margin-bottom: 20px;
	
	.row {
		background: #deefff; /* Old browsers */
		background: -moz-linear-gradient(top, #deefff 0%, #98bede 100%); /* FF3.6+ */
		background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#deefff), color-stop(100%,#98bede)); /* Chrome,Safari4+ */
		background: -webkit-linear-gradient(top, #deefff 0%,#98bede 100%); /* Chrome10+,Safari5.1+ */
		background: -o-linear-gradient(top, #deefff 0%,#98bede 100%); /* Opera11.10+ */
		background: -ms-linear-gradient(top, #deefff 0%,#98bede 100%); /* IE10+ */
		filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#deefff', endColorstr='#98bede',GradientType=0 ); /* IE6-9 */
		background: linear-gradient(top, #deefff 0%,#98bede 100%); /* W3C */
		
		@include BorderRadius(6px);
		@include BoxShadow(1px 1px 2px #555555);
	}
	
	.section {
		display: inline-block;
		margin: 8px;
		line-height: 1em;
		
		&:first-child {
			margin-left: 16px;
		}
		
		a {
			display: block;
			padding: 6px;
			text-decoration: none;
			@include BorderRadius(4px);
			text-shadow: 1px 1px 0 white;
			color: black;
		}
		
		&.active a,
		a:hover {
			background: #e9f6fd; /* Old browsers */
			background: -moz-linear-gradient(top, #e9f6fd 0%, #d3eefb 100%); /* FF3.6+ */
			background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#e9f6fd), color-stop(100%,#d3eefb)); /* Chrome,Safari4+ */
			background: -webkit-linear-gradient(top, #e9f6fd 0%,#d3eefb 100%); /* Chrome10+,Safari5.1+ */
			background: -o-linear-gradient(top, #e9f6fd 0%,#d3eefb 100%); /* Opera11.10+ */
			background: -ms-linear-gradient(top, #e9f6fd 0%,#d3eefb 100%); /* IE10+ */
			filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e9f6fd', endColorstr='#d3eefb',GradientType=0 ); /* IE6-9 */
			background: linear-gradient(top, #e9f6fd 0%,#d3eefb 100%); /* W3C */
			background: #deefff;
			border: solid 1px #abcfee;
			border-right-color: #deefff;
			border-bottom-color: #deefff;
			padding: 5px;
		}
		
		&.active a {
			font-weight: bold;
		}
	}

	.actions {
		text-align: right;

		.button-group {
			margin-top: 10px;
			margin-right: 10px;
		}

		.button {
			width: 6em;
			text-align: center;
		}
	}
} // #sections_bar


.resources.list, {
	margin-top: 1em;
	margin-bottom: 1em;

	.item {
		border-bottom: #dddddd 1px solid;
		padding-top: 0.75em;
		padding-bottom: 0.75em;
	}

	.item.container {
		padding-left: 0;
		padding-right: 0;
	}

	.item:first-child {
		border-top: #dddddd 1px solid;
	}

	.identity_column {
		font-weight: bold;
	}

	.info_column {
		color: #888888;
		font-size: 90%;
	}
} // .resources.list

.users.list {
	.user:first-child {
		margin-top: 0;
	}
	
	.user {
		.avatar {
			display: inline;
		}
		
		.avatar img {
			vertical-align: middle;
			margin: 0;
			margin-right: 0.25em;
		}
		
		.email {
			display: inline;
			font-weight: bold;
		}

		.admin {
			display: inline;
			font-size: 70%;
			vertical-align: super;
			color: red;
		}
	}
} // .users.list

.comments.list {
	.comment {
		$avatar_size: 64px;
		$metadata_padding: 8px;
		$spacing: 18px;
		
		position: relative;
		min-height: $avatar_size;
		margin-bottom: 24px;

		> .arrow {
			position: absolute;
			margin-left: $avatar_size + $spacing - 6px;
			margin-top: 4px;
			width: 0;
			height: 0;
			border-color: transparent #e2e2e2 transparent transparent;
			border-style: solid;
			border-width: 6px 6px 6px 0;
		}

		> .shell {
			margin-left: $avatar_size + $spacing;
			background: #efefef;
			@include BorderRadius(3px);
			@include BoxShadow(1px 1px 2px #555555);
			margin-right: 2px; // So that the shadow isn't cut off.
			// Prevent the .actions bottom margin from collapsing with another element.
			padding-bottom: 1px;
		}
		
		.metadata, .actions {
			line-height: 1em;
		}
		
		.metadata {
			background: #e2e2e2; /* Old browsers */
			background: -moz-linear-gradient(top, #e2e2e2 0%, #dbdbdb 50%, #d1d1d1 51%); /* FF3.6+ */
			background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#e2e2e2), color-stop(50%,#dbdbdb), color-stop(51%,#d1d1d1)); /* Chrome,Safari4+ */
			background: -webkit-linear-gradient(top, #e2e2e2 0%,#dbdbdb 50%,#d1d1d1 51%); /* Chrome10+,Safari5.1+ */
			background: -o-linear-gradient(top, #e2e2e2 0%,#dbdbdb 50%,#d1d1d1 51%); /* Opera11.10+ */
			background: -ms-linear-gradient(top, #e2e2e2 0%,#dbdbdb 50%,#d1d1d1 51%); /* IE10+ */
			filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e2e2e2', endColorstr='#d1d1d1',GradientType=0 ); /* IE6-9 */
			background: linear-gradient(top, #e2e2e2 0%,#dbdbdb 50%,#d1d1d1 51%); /* W3C */
			
			font-size: 90%;
			padding: $metadata_padding;
			@include BorderRadius(3px 3px 0 0);
		}
		
		.avatar {
			float: left;
			margin-left: -$avatar_size - $metadata_padding - $spacing;
			margin-top: -$metadata_padding;
			line-height: 0;
		}
		
		.avatar img {
			margin: 0;
			@include BoxShadow(1px 1px 2px #555555);
		}
		
		.author {
			font-weight: bold;
			display: inline;
		}
		
		.creation-time {
			display: inline;
			color: #666;
			
			.value {
				color: #555;
			}
		}

		.associated-topic {
			display: inline;
		}

		.content {
			margin: 10px;
		}

		.content > *:first-child {
			margin-top: 0;
		}

		.content > *:last-child {
			margin-bottom: 0;
		}

		.actions {
			margin: 8px;
			// Account for the .shell padding-bottom margin anti-collapsing technique.
			margin-bottom: 7px;
			font-size: 85%;
		}
	}
} // .comments.list

.list_with_actions {
	> .actions:first-child {
		margin-bottom: 1em;
	}

	> .actions:last-child {
		margin-top: 1em;
	}
}

#error_explanation {
	background: #f9aaaa;
	border: solid 1px #f37979;
	padding: 12px;
	font-size: 80%;
	margin-left: 18px;
	margin-right: 18px;
	@include BorderRadius(3px);
	@include BoxShadow(0px 0px 1px black);
	
	h2 {
		font-size: 120%;
		margin: 0 0 0.5em 0;
	}
	
	ul {
		margin: 0.5em 0 0 1em;
	}
	
	ul, li {
		font-size: inherit;
	}
}

form.comment {
	textarea {
		font-family: Monospace;
		font-size: 100%;
	}
	
	.preview .content {
		@include CommentContent;
	}
}

form.dashboard_new_site {
	input[type="text"] {
		width: 30em;
	}
}

.identity {
	vertical-align: middle;

	img {
		display: inline-block;
		vertical-align: middle;
		margin: 0;
		margin-right: 0.5em;
	}
}

.large_identity {
	font-size: 20pt;
}

.help.page {
	max-width: 750px;
}

.site_info.box {
	input {
		width: 25em;
		font-family: Monospace;
	}

	.col_12 {
		padding-left: 0;
		padding-right: 0;
	}
}

.info.list {
	.label, .actions {
		margin-top: 1em;
	}

	> :first-child {
		margin-top: 0;
	}

	input {
		width: 25em;
		font-family: Monospace;
	}
}

code {
	background: #f4f4f4;
	border: solid 1px #dfdfdf;
	padding: 3px 4px 3px 4px;
	@include BorderRadius(6px);
}

pre code {
	background: inherit;
	border: none;
	padding: 0;
}


/*
_______________________________
Mobile version - preset code from cssgrid.net */

@media handheld, only screen and (max-width: 767px) {

	.examplecontainer {}

	body {}
	
}


/*
_______________________________
Provide higher res assets for iPhone 4 - preset code from cssgrid.net */

@media only screen and (-webkit-min-device-pixel-ratio: 2) { 

	/* An example of how to override an image with one twice the size for iPhone 4. Specify the original pixel size with background-size.
	.download {
	background: url(../img/downarrow@2x.png) no-repeat;
	background-size: 27px 28px;
	}
	*/

}