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

html, body, div, span, blockquote, pre, code, p, a, h1, h2, h3, h4, h5, h6, img, ul, ol, li, form, fieldset, legend, label, input, select, textarea {
	border: 0 none;
	font: inherit;
	font-size: 100%;
	font-weight: normal;
	line-height: 1;
	list-style: none;
	margin: 0;
	padding: 0;
	outline: 0 none;
	vertical-align: baseline;
}

/*
 * Fonts
 * -------------------------------------------------------------------------------------
*/

@font-face {
	font-family: 'PT Sans';
	font-style: normal;
	font-weight: normal;
	src: local('PT Sans'), local('PTSans-Regular'), url('fonts/PTSans-Regular.woff') format('woff');
}

@font-face {
	font-family: 'PT Sans';
	font-style: normal;
	font-weight: bold;
	src: local('PT Sans Bold'), local('PTSans-Bold'), url('fonts/PTSans-Bold.woff') format('woff');
}

/*
 * Backgrounds
 * -------------------------------------------------------------------------------------
*/

body {
	background: url('images/background.png');
	padding-bottom: 18px;
	overflow-x: hidden;
}

#paging a, #paging a:after, .tags a, .tags a:after, .success:before, .info:before, .warning:before, .error:before, div.checker span, div.radio span, div.selector, div.selector span, div.button, div.button span {
	background-image: url('images/sprite.png');
	background-repeat: no-repeat;
}

.tags a, .tags a:after {
	background-position: -102px top;
}

#paging a, #paging a:after {
	background-position: 0 -32px;
}

#paging a:hover, #paging a:focus {
	background-position: 0 -66px;
}

#paging a:hover:after, #paging a:focus:after {
	background-position: right -66px;
}

#paging a:active {
	background-position: 0 -100px;
}

#paging a:active:after {
	background-position: right -100px;
}

/*
 * Colors
 * -------------------------------------------------------------------------------------
*/

* {
	color: #FFF;
}

a, a:visited {
	color: #7CAFDA;
}

a:hover {
	color: #FAFAFA;
}

.tags a, #paging a, .tags a:visited, #paging a:visited {
	color: #EAEAEA;
}

::-webkit-input-placeholder {
	color: #EAEAEA;
}

:-moz-placeholder {
	color: #EAEAEA;
}

.tags a:hover {
	color: #7CAFDA;
}

/*
 * Typo
 * -------------------------------------------------------------------------------------
*/

body {
	font-family: 'PT Sans', "Helvetica Neue", Helvetica, sans;
	font-size: 12px;
}

body, p, ul, ol, hr, pre, li, h3, h4, h5, h6 {
	line-height: 18px;
}

p, li, blockquote, .success, .info, .error {
	text-align: justify;
}

h1, h2, h3, h4, h5, h6 {
	font-weight: bold;
	letter-spacing: 1px;
}

h1, h2 {
	line-height: 36px;
}

/*
 * Typo size
 * -------------------------------------------------------------------------------------
*/

h1 {
	font-size: 30px;
}

h2 {
	font-size: 24px;
}

h3 {
	font-size: 21px;
}

h4 {
	font-size: 18px;
}

h5 {
	font-size: 16px;
}

h6 {
	font-size: 14px;
}

/*
 * Shadows
 * -------------------------------------------------------------------------------------
*/

h1, h2, h3, h4, h5, h6, .success, .info, .warning, .error {
	text-shadow: 0 1px 1px rgba(0, 0, 0, 0.3);
}

input[type=text], input[type=password], textarea, #single-snippet {
	text-shadow: 0 1px 1px rgba(0, 0, 0, 0.5);
}

.tags a, #paging a {
	text-shadow: 0 1px 1px rgba(0, 0, 0, 0.6);
}

/*
 * Blocks
 * -------------------------------------------------------------------------------------
*/

input[type=text], input[type=password], textarea, .success, .info, .warning, .error, img, blockquote, #single-snippet {
	border-radius: 5px;
	margin: 18px 0;
	padding: 12px;
}

input[type=text], input[type=password], textarea, img, blockquote, #single-snippet {
	background-color: #282D34;
	box-shadow:
		0 1px rgba(255, 255, 255, 0.25),
		inset 0 4px 8px #22272D;
}

.info, .warning, .error {
	min-height: 16px;
}

textarea, .success, .info, .warning, .error {
	display: block;
}

/*
 * Lists
 * -------------------------------------------------------------------------------------
*/

ul li {
	list-style-type: circle;
}

ol li {
	list-style-type: decimal;
}

/*
 * Messages
 * -------------------------------------------------------------------------------------
*/

.success, .info, .warning, .error {
	box-shadow: 0 1px rgba(255, 255, 255, 0.25);
}

.success {
	background-color: #88B173;
	border: 1px solid rgba(44, 59, 43, 0.75);
	box-shadow:
		0 1px rgba(255, 255, 255, 0.25),
		inset 0 4px 8px rgba(44, 59, 43, 0.2);
}

.info {
	background-color: #6C93CA;
	border: 1px solid #2F4F7E;
	box-shadow:
		0 1px rgba(255, 255, 255, 0.25),
		inset 0 4px 8px rgba(47, 79, 126, 0.2);
}

.warning {
	background-color: #DCAF5A;
	border: 1px solid #74551A;
	box-shadow:
		0 1px rgba(255, 255, 255, 0.25),
		inset 0 4px 8px rgba(97, 39, 39, 0.2);
}

.error {
	background-color: #C16666;
	border: 1px solid rgba(97, 39, 39, 0.75);
	box-shadow:
		0 1px rgba(255, 255, 255, 0.25),
		inset 0 4px 8px rgba(97, 39, 39, 0.2);
}

.success:before, .info:before, .warning:before, .error:before {
	content: '';
	float: left;
	height: 15px;
}

.success:before {
	background-position: -48px -17px;
	width: 18px;
}

.info:before {
	background-position: -34px -17px;
	width: 14px;
}

.warning:before {
	background-position: 0 -17px;
	width: 18px;
}

.error:before {
	background-position: -18px -17px;
	width: 16px;
}

/*
 * Misc
 * -------------------------------------------------------------------------------------
*/

.tags a {
	display: inline-block;
	height: 29px;
	line-height: 27px;
	position: relative;
	text-decoration: none;
	text-transform: capitalize;
}

.tags a:after {
	background-position: right 0;
	content: '';
	display: block;
	height: 29px;
	position: absolute;
	right: -10px;
	top: 0;
	width: 10px;
}

input[type=text], input[type=password] {
	height: 30px;
	padding: 0 12px;
}

p, ul, ol, hr, pre, li, h1, h2, h3, h4, h5, h6, fieldset, .tags a, #paging a {
	margin-bottom: 18px;
}

img {
	padding: 5px;
}

li {
	margin-left: 36px;
	margin-right: 36px;
}

label {
	padding: 12px;
}

#signin label a {
	padding: 0;
}

blockquote p {
	margin: 0;
}

#main {
	margin-top: 36px;
}

.success:before, .info:before, .warning:before, .error:before {
	margin-right: 6px;
	margin-top: 1px;
}

.tags a {
	margin-right: 18px;
	height: 29px;
	padding-left: 20px;
}

.tags:first-child, #paging:first-child {
	margin-left: 0;
}

#single-snippet, #snippet-content {
	font-family: monospace;
	letter-spacing: 1px;
	line-height: 18px;
	resize: both;
	overflow: auto;
	word-spacing: 2px;
}
#single-snippet li {
	margin-bottom : 6px;
}

/*
 * Paging
 * -------------------------------------------------------------------------------------
*/

#paging {
	margin-top: 36px;
}

#paging a {
	display: inline-block;
	position: relative;
	text-decoration: none;
	padding-left: 12px;
	margin-right: 12px;
}

#paging a:after {
	background-position: right -32px;
	content: '';
	display: block;
	position: absolute;
	right: -10px;
	top: 0;
	width: 10px;
}

/*
 * Single
 * -------------------------------------------------------------------------------------
*/

#single-about img {
	float: left;
	margin: 0 12px 18px 0;
	width: 80px;
}

#single-about #action {
	float: left;
	margin-top: 5px;
}

#single-about #action div.button {
	margin-bottom: 12px;
}

#single-snippet {
	overflow-x: hidden;
}

/*
 * Topbar
 * -------------------------------------------------------------------------------------
*/

#topbar {
	height: 30px;
	line-height: 30px;
	margin: 0;
	padding: 0;
	width: 100%;
	box-shadow:
		0 1px rgba(255, 255, 255, 0.25),
		inset 0 4px 8px #22272D;
	background-color: #282D34;
}

#topbar a {
	text-decoration: none;
}

#topbar > * {
	line-height: 30px;
}

#topbar ul {
	float: right;
}

#topbar li, #topbar img, #topbar a {
	float: left;
}

#topbar ul, #topbar li, #topbar img, #topbar a {
	display: inline;
	margin: 0 6px;
	padding: 0;
	border: 0;
	line-height: 30px;
	box-shadow: none;
	border-radius: 0;
}

#topbar ul li {
	padding-left: 12px;
	border-left: 1px solid #4d5561;
	height: 30px;
}

/*
 * Search, Browse
 * -------------------------------------------------------------------------------------
*/

#results, #browse, #new, #single, #admin, #settings {
	margin-top: 18px;
}

#search-head, #single-box {
	margin-top: 18px;
}

.result-line, .browse-line {
	border-bottom: 1px dashed #EAEAEA;
	padding-top: 18px;
	overflow: hidden;
}

.result-line:hover, .browse-line:hover {
	background-color: rgba(255, 255, 255, .05);
}

.result-line a, .browse-line a {
	text-decoration: none;
}

.result-line a:focus, .browse-line a:focus {
	color: #EAEAEA;
}

#search input[type=text]{
	width: 368px;
}

#category-label{
	width: 348px;
}

/*
 * Login
 * -------------------------------------------------------------------------------------
*/

#login {
	margin-top: 72px;
}

#login > div {
	padding-left: 10px;
}

#login label {
	padding-left: 0;
}

#login input[type=text], #login input[type=password], #login .error, #login .success, #login .warning, #login .info {
	width: 256px;
}

/*
 * New Snippet
 * -------------------------------------------------------------------------------------
*/

#add-snippet {
	overflow: hidden;
}

#add-snippet label {
	padding: 0;
}

#add-snippet-side input {
	width: 276px;
}

#add-snippet-side .selector {
	margin-top: 15px;
	margin-bottom: 18px;
}

#add-snippet-side .radio {
	margin-top: 6px;
	margin-bottom: 12px;
}

#add-snippet-side #radio-fieldset {
	margin-top: 10px;
}

#add-snippet-side #radio-fieldset label {
	margin-left: 6px;
}

#add-snippet-main input[type=text], #add-snippet-main textarea, #single textarea {
	width: 516px;
}

#add-snippet-main textarea, #single textarea, #single-snippet {
	min-height: 220px;
}

#snippet-category {
	margin-bottom: 12px;
}

/*
 * View Snippet
 * -------------------------------------------------------------------------------------
*/

#single h4 a {
	text-decoration: none;
}

/*
 * Admin
 * -------------------------------------------------------------------------------------
*/

.userlist-line {
	margin-bottom: 18px;
}

.userlist-line label, #settings-second-line label {
	margin-bottom: 12px;
	padding: 4px 12px 0;
}

.userlist-line img {
	max-height: 100px;
	max-width: 100px;
}

.userlist-line div.checker, #settings-second-line div.checker {
	margin-bottom: 6px;
}

/*
 * Settings
 * -------------------------------------------------------------------------------------
*/

#settings-submit div.button {
	margin-top: 15px;
}

#settings img {
	margin-top: 0;
}

#settings input[type=file] {
	padding: 6px 0;
}

#settings-first-line h3 {
	padding-bottom: 18px;
}

#settings-first-line, #settings-second-line {
	overflow: hidden;
}

#settings div.selector, #settings input[type=file] {
	margin: 16px 0;
}

#settings input[type=text], #settings input[type=password] {
	width: 276px;
}

#settings-second-line label {
	margin-bottom: 12px;
	padding: 4px 12px 0;
}

#settings-second-line h3, #settings h1 {
	margin-bottom: 36px;
}

#settings-submit {
	padding-top: 2px;
}

#settings-first-line label {
	padding-left: 0;
}

/*
 * Uniform
 * -------------------------------------------------------------------------------------
*/

div.button, div.button span, div.selector, div.selector span, #paging a, #paging a:after {
	height: 34px;
	line-height: 33px;
}

div.button, div.button:active, div.button.active, div.button:focus, div.button.focus, div.button:hover, div.button.hover, div.checker span, div.selector, div.selector:active, div.selector.active, div.selector:focus, div.selector.focus, div.selector:hover, div.selector.hover {
	background-position-x: 0;
}

div.checker span.checked {
	background-position-x: -17px;
}

div.radio span {
	background-position-x: -68px;
}

div.radio span.checked {
	background-position-x: -85px;
}

div.button span, div.button:active span, div.button.active span, div.button:focus span, div.button.focus span, div.button:hover span, div.button.hover span, div.selector span, div.selector:focus span, div.selector.focus span, div.selector:hover span, div.selector.hover span {
	background-position-x: right;
}

div.checker span, div.checker span.checked, div.radio span, div.radio span.checked {
	background-position-y: 0;
}

div.button, div.button span, div.selector, div.selector span {
	background-position-y: -32px;
}

div.button:focus, div.button.focus, div.button:hover, div.button.hover, div.button:focus span, div.button.focus span, div.button:hover span, div.button.hover span, div.selector:hover, div.selector.hover, div.selector:hover span, div.selector.hover span, div.selector:focus, div.selector.focus, div.selector:focus span, div.selector.focus span {
	background-position-y: -66px;
}

div.selector:active, div.selector.active, div.selector:active span , div.button:active, div.button.active, div.button:active span, div.button.active span {
	background-position-y: -100px;
}

/*
 * Blocks
 * -------------------------------------------------------------------------------------
*/

div.button, div.checker, div.radio, div.selector {
	position: relative;
}

div.button span, div.selector span {
	float: left;
}

div.button, div.selector {
	width: 15px
}

div.selector option {
	background-color: #282D34
}

div.selector select {
	height: 32px;
	border: none;
	left: 0;
	padding-top: 12px;
	position: absolute;
	top: 0;
}

div.button input {
	height: 32px;
	border: none;
	left: 0;
	position: absolute;
	top: 0;
}

div.button #edit {
	height: 32px;
	border: none;
	left: 0;
	position: absolute;
	top: 0;
}

div.button #toogle-show {
	height: 32px;
	border: none;
	left: 0;
	position: absolute;
	top: 0;
}

div.selector span, div.button span {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.button, .checker, .radio, .selector {
	display: inline;
	vertical-align: middle;
	zoom: 1;
}

.button, .checker, .radio, .selector, div.checker span, div.radio span {
	display: -moz-inline-box;
}

div.button span, div.selector span {
	margin-left: 15px;
	padding-right: 15px;
}

div.checker, div.radio {
	margin-bottom: 2px;
}

div.checker, div.checker input, div.checker span, div.radio, div.radio input, div.radio span {
	width: 17px;
	height: 17px;
}

#category-label, .button, .checker, .radio, .selector, div.checker input, div.checker span, div.radio input, div.radio span, div.button, div.button span, div.selector, div.selector span, input[type=text], input[type=password], img, blockquote {
	display: inline-block;
}

/*
 * Misc
 * -------------------------------------------------------------------------------------
*/

.checker input:focus, .radio input:focus, .selector select:focus {
	outline: 0;
}

div.button, div.button input, div.selector, div.selector select {
	cursor: pointer;
}

div.checker input, div.radio input, div.selector select {
	background: none;
}

div.checker span, div.radio input, div.radio span {
	text-align: center;
}

div.button input, div.checker input, div.radio input, div.selector select {
	opacity: 0;
	filter: alpha(opacity:0);
}

div.button span, div.selector span {
	text-shadow: 0 1px 1px rgba(0, 0, 0, .3);
}

/*
 * 960 Grid System
 * Learn more ~ http://960.gs/
 * -------------------------------------------------------------------------------------
*/

body {
	min-width: 960px
}

/*
 * Container
 * -------------------------------------------------------------------------------------
*/

.container_12 {
	margin-left: auto;
	margin-right: auto;
	width: 960px;
}

/*
 * Grid, Global
 * -------------------------------------------------------------------------------------
*/

.grid_1, .grid_2, .grid_3, .grid_4, .grid_5, .grid_6, .grid_7, .grid_8, .grid_9, .grid_10, .grid_11, .grid_12 {
	display: inline;
	float: left;
	margin-left: 10px;
	margin-right: 10px;
}

.push_1, .pull_1, .push_2, .pull_2, .push_3, .pull_3, .push_4, .pull_4, .push_5, .pull_5, .push_6, .pull_6, .push_7, .pull_7, .push_8, .pull_8, .push_9, .pull_9, .push_10, .pull_10, .push_11, .pull_11 {
	position: relative
}

/*
 * Grid, Children
 * -------------------------------------------------------------------------------------
*/

.alpha {
	margin-left: 0
}

.omega {
	margin-right: 0
}

/*
 * Grid, 12 columns
 * -------------------------------------------------------------------------------------
*/

.container_12 .grid_1 {
	width: 60px
}

.container_12 .grid_2 {
	width: 140px
}

.container_12 .grid_3 {
	width: 220px
}

.container_12 .grid_4 {
	width: 300px
}

.container_12 .grid_5 {
	width: 380px
}

.container_12 .grid_6 {
	width: 460px
}

.container_12 .grid_7 {
	width: 540px
}

.container_12 .grid_8 {
	width: 620px
}

.container_12 .grid_9 {
	width: 700px
}

.container_12 .grid_10 {
	width: 780px
}

.container_12 .grid_11 {
	width: 860px
}

.container_12 .grid_12 {
	width: 940px
}

/*
 * Prefix extra space
 * -------------------------------------------------------------------------------------
*/

.container_12 .prefix_1 {
	padding-left: 80px
}

.container_12 .prefix_2 {
	padding-left: 160px
}

.container_12 .prefix_3 {
	padding-left: 240px
}

.container_12 .prefix_4 {
	padding-left: 320px
}

.container_12 .prefix_5 {
	padding-left: 400px
}

.container_12 .prefix_6 {
	padding-left: 480px
}

.container_12 .prefix_7 {
	padding-left: 560px
}

.container_12 .prefix_8 {
	padding-left: 640px
}

.container_12 .prefix_9 {
	padding-left: 720px
}

.container_12 .prefix_10 {
	padding-left: 800px
}

.container_12 .prefix_11 {
	padding-left: 880px
}

/*
 * Suffix extra space
 * -------------------------------------------------------------------------------------
*/

.container_12 .suffix_1 {
	padding-right: 80px
}

.container_12 .suffix_2 {
	padding-right: 160px
}

.container_12 .suffix_3 {
	padding-right: 240px
}

.container_12 .suffix_4 {
	padding-right: 320px
}

.container_12 .suffix_5 {
	padding-right: 400px
}

.container_12 .suffix_6 {
	padding-right: 480px
}

.container_12 .suffix_7 {
	padding-right: 560px
}

.container_12 .suffix_8 {
	padding-right: 640px
}

.container_12 .suffix_9 {
	padding-right: 720px
}

.container_12 .suffix_10 {
	padding-right: 800px
}

.container_12 .suffix_11 {
	padding-right: 880px
}

/*
 * Push space
 * -------------------------------------------------------------------------------------
*/

.container_12 .push_1 {
	left: 80px
}

.container_12 .push_2 {
	left: 160px
}

.container_12 .push_3 {
	left: 240px
}

.container_12 .push_4 {
	left: 320px
}

.container_12 .push_5 {
	left: 400px
}

.container_12 .push_6 {
	left: 480px
}

.container_12 .push_7 {
	left: 560px
}

.container_12 .push_8 {
	left: 640px
}

.container_12 .push_9 {
	left: 720px
}

.container_12 .push_10 {
	left: 800px
}

.container_12 .push_11 {
	left: 880px
}

/*
 * Pull space
 * -------------------------------------------------------------------------------------
*/

.container_12 .pull_1 {
	left: -80px
}

.container_12 .pull_2 {
	left: -160px
}

.container_12 .pull_3 {
	left: -240px
}

.container_12 .pull_4 {
	left: -320px
}

.container_12 .pull_5 {
	left: -400px
}

.container_12 .pull_6 {
	left: -480px
}

.container_12 .pull_7 {
	left: -560px
}

.container_12 .pull_8 {
	left: -640px
}

.container_12 .pull_9 {
	left: -720px
}

.container_12 .pull_10 {
	left: -800px
}

.container_12 .pull_11 {
	left: -880px
}

/*
 * Clear floated elements
 * -------------------------------------------------------------------------------------
*/

.clear {
	clear: both;
	display: block;
	overflow: hidden;
	visibility: hidden;
	width: 0;
	height: 0;
}

.clearfix:before, .clearfix:after, .container_12:before, .container_12:after {
	content: '.';
	display: block;
	overflow: hidden;
	visibility: hidden;
	font-size: 0;
	line-height: 0;
	width: 0;
	height: 0;
}

.clearfix:after, .container_12:after {
	clear: both
}

.clearfix, .container_12 {
	zoom: 1
}