/* ==================================================================
	File:     root/static/css/main.css
	Project:  ShinyCMS
	Purpose:  CSS file for public-facing pages
	
	If you change the name of this file, you will also need to update 
	the configuration for CKEditor in root/static/ckeditor/config.js
	
	Authors:   Denny de la Haye <d@kinkysites.co.uk>
	           Pandora Blake <pandora@kinkysites.co.uk>
	Copyright (c) 2009-2015 Kinky Sites - www.kinkysites.co.uk
	
	ShinyCMS is free software. You can redistribute it and/or modify it 
	under the terms of the GNU Affero General Public License.
   ================================================================== */


/* ========== ( Stuff from HTML5 Boilerplate )  ========== */

/* ========== ( 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, figure, footer, header, 
hgroup, menu, nav, section, menu,
time, mark, audio, video {
	margin:				0;
	padding:			0;
	border:				0;
	outline:			0;
	font-size:			100%;
	vertical-align:		baseline;
	background:			transparent;
}                  

article, aside, figure, footer, header, hgroup, nav, section {
	display: 			block;
}

nav ul {
	list-style:			none;
}

blockquote, q {
	quotes:				none;
}

blockquote:before, blockquote:after, q:before, q:after { 
	content:			'';
	content:			none;
}

a {
	margin:				0;
	padding:			0;
	font-size:			100%;
	vertical-align:		baseline;
	background:			transparent;
}

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 #000;
	cursor:				help;
}

/* tables still need cellspacing="0" in the markup */
table {
	border-collapse:	collapse;
	border-spacing:		0;
}

hr {
	display:			block;
	height:				1px;
	border:				0;
	border-top:			1px solid #ccc;
	margin:				1em 0;
	padding:			0;
}

input, select {
	vertical-align:		middle;
}


/* =========== ( Fonts ) ========== */

body {
	font:				13px sans-serif;
/*	These IE fixes are invalid CSS - uncomment them if you don't mind that
	*font-size:			small;
	*font:				x-small;
	line-height:		1.22;
*/
}

table {
	font-size:			inherit;
/*	Not sure why this doesn't validate, but it doesn't
	font:				100%;
*/
}

select, input, textarea {
	font:				99% sans-serif;
}

pre, code, kbd, samp {
	font-family:		monospace, sans-serif;
}


/* =========== ( Minimal base styles ) ========== */

body, select, input, textarea {
	color:				#444;
}

h1,h2,h3,h4,h5,h6 {
	font-weight:		bold;
/*
	text-rendering:		optimizeLegibility;
*/
}

html {
/*	Invalid CSS
	-webkit-font-smoothing:	antialiased;
*/
}

a:hover, a:active {
	outline:			none;
}

a, a:active, a:visited {
	color:				#0e3841;
}
a:hover {
	color:				#162741;
}

ul {
	margin-left:		30px;
}
ol {
	margin-left:		30px;
	list-style-type: decimal;
}

small,
#content .small {
	font-size:			85%;
}

strong, th {
	font-weight:		bold;
}

td, td img {
	vertical-align:		top;
} 

sub {
	vertical-align:		sub;
	font-size:			smaller;
}
sup {
	vertical-align:		super;
	font-size:			smaller;
}

pre { 
	padding:			15px;
	white-space:			pre;		/* CSS2 */
	white-space:			pre-wrap;	/* CSS 2.1 */
	white-space:			pre-line;	/* CSS 3 (and 2.1 as well, actually) */
/*	Another IE fix that is invalid CSS
	word-wrap:			break-word;
*/
}

input[type="radio"] {
	vertical-align:			text-bottom;
}
input[type="checkbox"] {
	vertical-align:			bottom;
/*	*vertical-align:		baseline;
*/
}
.ie6 input {
	vertical-align:			text-bottom;
}

label, input[type=button], input[type=submit], button {
	cursor:				pointer;
}

/* Invalid CSS
::-moz-selection{
	background:			#00DDDD;
	color:				#000;
	text-shadow:			none;
}
::selection {
	background:			#00DDDD;
	color:				#000;
	text-shadow:			none;
}
*/

a:link {
/*	Invalid CSS - uncomment to enable for webkit touch-screens
	-webkit-tap-highlight-color:	#00DDDD;
*/
} 

button {
	width:				auto;
	overflow:			visible;
}

.ie7 img {
/* Invalid CSS - uncomment to make IE use bicubic image resizing
	-ms-interpolation-mode:	bicubic;
*/
}


/* ========== ( Non-semantic helper classes )  ========== */

/* for image replacement */
.ir {
	display:			block;
	text-indent:			-999em;
	overflow:			hidden;
	background-repeat:		no-repeat;
}

/* Hide for both screenreaders and browsers */
.hidden {
	display:			none;
	visibility:			hidden;
} 

/* Hide only visually, but have it available for screenreaders */
.visuallyhidden { position:absolute !important;    
/*	Invalid CSS - makes this work in IE6 and IE7
	clip:				rect(1px 1px 1px 1px);
*/
	clip:				rect(1px, 1px, 1px, 1px);
}

/* Hide visually and from screenreaders, but maintain layout */
.invisible { visibility: hidden; }

/* >> The Magnificent CLEARFIX << */
.clearfix:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; }
.clearfix { display: inline-block; }
* html .clearfix { height: 1%; } /* Hides from IE-mac \*/
.clearfix { display: block; }


/* ========== ( End of stuff from HTML5 Boilerplate )  ========== */




/* =========== ( General ) ========== */

body {
	color:				#000000;
	background:			#ffffff url('../images/bg-left.jpg') top left no-repeat fixed;
	font-family:		Verdana, Arial, Helvetica, sans-serif;
	font-size:			100%;
}

#page {
	background:			url('../images/bg-right.jpg') top right no-repeat fixed;
	width:				100%;
}

#container {
	width:				1000px;
	margin:				0 auto;
	background:			#ffffff url('../images/pandora-header.jpg') top left no-repeat;
}

img {
	border:				0;
}

a {
	color:				#475948;
}

.status {
	color:				#000000;
	background:			#ddd1e7;
	padding:			5px;
}

.error {
	color:				#000000;
	background:			#edd8ff;
	padding:			5px;
}

.clear {
	clear:				both;
}

.right {
	text-align:			right;
}

h1,h2,h3,h4,h5,h6,p {
	line-height:			125%;
}

h1 {
	font-size:			200%;
	margin:				20px 0 10px 0;
}

h2 {
	font-size:			180%;
	margin:				0 0 10px 0;
	font-family:		Garamond,Georgia,Times,serif;
}

h2 a {
	color:				#3c6169;
	text-decoration:	none;
}

h3 {
	font-size:			120%;
	margin:				20px 0 10px 0;
}

h4 {
	margin:				10px 0 10px 0;
}

ul,ol {
	line-height:			1.5;
}

.outlined {
	border:				1px solid #000000;
}

#content p {
	text-align:			justify;
	margin:				10px 0 10px 0;
	clear:				both;
}

#content .blogpost p {
	text-align:			justify;
	margin:				10px 0 10px 0;
	clear:				none;
}


/* =========== ( Header ) ========== */

#header {
	text-align:			center;
	padding:			400px 0 0 0;
}

#search-form {
	overflow:			auto;
	border:				5px solid #cccccc;
	margin:				5px 0 0 0;
}

#search-form p {
	margin:				0;
	padding:			0;
}

#search-form #search {
	width:				75%;
	float:				left;
	border:				0;
	font-size:			0.9em;
	padding:			8px;
}

#blog-sidebar #search-form  .submit {
	background:			transparent;
	float:				right;
	margin:				5px 5px 0 7px;
	padding:			0;
}

#logo {
	text-transform:		uppercase;
	font-size:			48px;
	font-family: 		'Lato', sans-serif;
	letter-spacing:		2px;
}

#logo a {
	text-decoration:	none;
	color:				#628856;	
}

#tagline {
	font-size:			18px;
	color:				#3c6169;
	font-family: 		'Roboto', sans-serif;
	text-transform:		uppercase;
	letter-spacing:		1px;
	padding:			20px;
}


/* =========== ( Menu ) ========== */

#menu {
	height:				45px;
	background:			#ffffff;
	border-bottom:		1px solid #cfd5cc;	
}

#menu a {
	text-decoration:	none;
	text-transform:		uppercase;
	color:				#000000;
	font-size:			100%;
	font-family: 		'Lato', sans-serif;
	letter-spacing:		1px;
}

#menu a.selected {
	text-decoration:	none;
	text-transform:		uppercase;
	color:				#000000;
	font-size:			100%;
	font-family: 		'Lato', sans-serif;
	letter-spacing:		1px;
}

#menu a:hover {
}

ul.topmenu {
	list-style:			none;
	font-weight:		normal;
	padding:			0;
	width:				1000px;
	margin:				0 auto;
}

li.topmenu {
	text-align:			left;
	display:			inline-block;
	float:				left;
	margin:				0;
	padding:			0;
	position:			relative;
	width:				16%;
}

li.short {
	width:				12%;
}

li.topmenu:hover ul {
	display: 			block;
}

li.topmenu a {
	text-decoration:	none;
	display:			block;
	margin:				0;
	padding:			10px 20px 10px 20px;
	height:				22px;
}

li.topmenu a:hover, a:active {
}

li.topmenu a:hover {
	display:		block;
}

.dropdown ul {
	font-size:		90%;
	margin:			0 10px 0 5px;
	padding:		3px 0 0 0;
	list-style:		none;
	position: 		absolute;
	left: 			0;
	top:			100%;
	display: 		none;
	z-index:		100;
	background:		#f3f6ef;
	width:			300px;
}

.dropdown ul.short {
	width:			200px;
}

.last  {
}

.dropdown li {
	text-transform:		none;
	margin:				0;
}

.dropdown li a {
	text-decoration:	none;
	list-style:			none;
	background:			transparent;
	padding:			8px 20px 8px 15px;
}

.dropdown li a:hover,
.dropdown li a:active {
	text-decoration:	none;
	background:			#cfd5cc;
}


/* =========== ( Homepage ) ========== */

#content {
	margin:			0;
	padding:		0 20px 20px 20px;
}

#welcome {
	width:			938px;
	height:			327px;
	background:		transparent url('../images/welcome-bg.png') top left no-repeat;
	margin:			0 auto;
	padding:		0 21px 0 21px;
}

#welcome h2 {
	font-family:	Myriad Pro,sans-serif;
	color:			#256292;
	font-size:		24px;
	padding:		21px 21px 0 0;
	margin:			0;
}

.welcome-image{
	width:			450px;
	height:			283px;
	float:			left;
	padding:		21px 20px 21px 0;
}

#welcome p {
	padding:		15px 0 0 0;
	margin:			0 25px 0 0;
}



.homepage-panel {
	width:			479px;
	height:			235px;
	background:		transparent url('../images/panel-bg.png') 0 46px no-repeat;
	float:			left;
}

.homepage-panel h3 {
	margin:			8px 14px 0 8px;
	width:			433px;
	font-weight:		bold;
	font-size:		24px;
	color:			#ffffff;
	text-transform:		uppercase;
	background:		#6d6d6d;
	padding:		8px 15px 8px 15px;
}

.homepage-panel ul {
	list-style:		none;
	margin:			10px 20px 0 22px;
}

#content .homepage-panel p {
	margin:			10px 20px 0 22px;
}

.homepage-panel ul li {
	margin:			0 0 6px 0;
}

/* =========== ( Subpages ) ========== */

#subpage h3 {
	font-family:		Garamond,Georgia,Times,serif;
	color:				#363636;
	margin:				30px 0 10px 0;
}

.subpage-image {
	float:			right;
	margin:			0 0 15px 20px;
	border:			1px solid #666666;
	max-width:		400px;
	height:			auto;
}


/* =========== ( Forums ) ========== */
 

.forums {
	background:			#ececec;
	width:				100%;
	border:				2px #959595 solid;
	display:			table;
}

.forums2 {
	background:			#ececec;
	width:				100%;
	border-left:			2px #959595 solid;
	border-right:			2px #959595 solid;
	border-bottom:			2px #959595 solid;
	display:			table;
	padding-top:			5px;
}

.most-popular {
	background:			#28004b;
	width:				100%;
	border:				2px #28004b solid;
	display:			table;
	margin:				0 0 30px 0;
}

.most-popular .header {
	display:			table-row;
	background:			#28004b;
}

.most-popular .comment {
	background:			#ffffff url('/static/images/most-popular-comment.jpg') top left no-repeat;
	border:				5px solid #ececec;
	padding:			10px 10px 5px 10px;
	display:			table-cell;
	font-size:			0.9em;
}

.most-popular .title {
	font-weight:			bold;
	font-size:			1.1em;
	padding:			0 0 0 50px;
	margin:				0 0 2px 0;
}

.most-popular .username {
	font-size:			0.9em;
	padding:			0 0 0 50px;
	margin:				0 0 7px 0;
}

.most-popular .username  a {
	color:				#363636;
	text-decoration:		none;
}

.most-popular .username  a:hover {
	text-decoration:		underline;
}

.most-popular .comment a.readmore {
	color:				#363636;
	font-weight:			bold;
	text-decoration:		none;
}

.most-popular .comment a.readmore:hover {
	color:				#28004b;
}

.most-popular .byline {
	background:			#ffffff url('/static/images/forum-post-bg.jpg') top left no-repeat;
	border-top:			5px solid #ececec;
	border-right:			5px solid #ececec;
	border-bottom:			5px solid #ececec;
	padding:			5px 10px 5px 10px;
	color:				#363636;
	display:			table-cell;	
	font-size:			0.9em;
	vertical-align:			bottom;
	line-height:			1.1em;
	text-align:			right;
	font-style:			italic;
}



.most-popular .count {
	background:			#ffffff url('/static/images/most-popular-count.jpg') top center no-repeat;
	border-top:			5px solid #ececec;
	border-right:			5px solid #ececec;
	border-bottom:			5px solid #ececec;
	padding:			5px 5px 5px 10px;
	display:			table-cell;
	text-align:			left;
	color:				#256292;
	font-family:			Myriad Pro, sans-serif;
	font-size:			1.2em;
	vertical-align:			bottom;
	width:				50px;
	height:				90px;
}



h4.forums-header a {
	color:				#28004b;
	text-decoration:		none;
	font-size:			1.5em;
	font-family:			Myriad Pro, sans-serif;
}

.buttons {
	clear:				both;
}

.forums .header {
	display:			table-row;
	background:			#959595;
}

.forums .subheader {
	display:			table-row;
	background:			#ececec;
}

.forums .subheader .column1,
.forums .subheader .column2,
.forums .subheader .column4 {
	color:				#000000;
}

.forums .row,
.forums .row2,
.forums2 .row,
.most-popular .row {
	display:			table-row;
	margin-bottom:			5px;	
}

.forums .sticky {
	border:				2px #959595 solid;
}

.forums a,
.forums2 a {
	color:				#256292;
	text-decoration:		underline;
}

.column1,
.column1 a {
	color:				#ffffff;
	font-family:			Myriad Pro, sans-serif;
	font-weight:			bold;
	text-decoration:		none;
	font-size:			1.1em;
	padding:			0 0 0 5px;
}

.column2,
.column3,
.column4 {
	color:				#ffffff;
	font-family:			Myriad Pro, sans-serif;
	font-weight:			bold;
	text-decoration:		none;
	font-size:			1em;
}

.column1,
.column2,
.column3,
.column4 {
	display:			table-cell;
	vertical-align:			middle;
	padding:			10px 5px 5px 5px;
}

.forums .top,
.most-popular .top,
.forums2 .top {
	padding:			10px 5px 10px 5px;
}

.forum {
	background:			#ffffff;
}

.forum,
.forums .post,
.forums2 .post {
	border-right:			5px solid #ececec;
	border-left:			5px solid #ececec;
	border-bottom:			5px solid #ececec;
	display:			table-cell;
	font-size:			0.9em;
	background:			#ffffff url('/static/images/forum-post-bg.jpg') center left no-repeat; 
	min-height:			45px;
	vertical-align:			middle;
	padding:			10px 10px 10px 50px;
	width:				245px;
}

.forums2 .post-active,
.forums .post-active {
	background:			#ffffff url('/static/images/active-forum-post-bg.jpg') center left no-repeat; 
	min-height:			45px;
	vertical-align:			middle;
	padding:			10px 10px 10px 50px;
	width:				245px;
	border:				5px solid #28004b;
	display:			table-cell;
	font-size:			0.9em;
}

.forums2 .comment-active,
.forums .comment-active {
	background:			#ffffff;
	border-right:			5px solid #28004b;
	border-bottom:			5px solid #28004b;
	border-top:			5px solid #28004b;
	padding:			10px;
	color:				#363636;
	font-size:			0.9em;
	vertical-align:			middle;
	line-height:			1.1em;
	display:			table-cell;	
}

.forums2 .posts-active,
.forums .posts-active {
	background:			#ffffff;
	border-top:			5px solid #28004b;
	border-right:			5px solid #28004b;
	border-bottom:			5px solid #28004b;
	padding:			10px;
	display:			table-cell;
	text-align:			center;
	color:				#363636;
	font-family:			Myriad Pro, sans-serif;
	font-size:			1em;
	vertical-align:			middle;
	width:				50px;
}

.forums .post a,
.forums2 .post a,
.forums .sticky-post a,
.forums .post-active a,
.forums2 .post-active a {
	font-weight:			bold;
	font-size:			1.1em;
}

.forums .sticky-post {
	background:			url('/static/images/sticky.jpg') top right no-repeat;
	display:			table-cell;
	width:				245px;
}

a.forum-name,
a.post-name {
	font-size:			1em;
	font-weight:			bold;
}

.description {
	color:				#000000;
	font-family:		Arial,Helvetica,sans-serif;
	font-size:			0.9em;
}

.forums .comment,
.post-thread .comment,
.forums2 .comment {
	background:			#ffffff;
	border-right:			5px solid #ececec;
	border-bottom:			5px solid #ececec;
	padding:			10px;
	color:				#363636;
	font-size:			0.9em;
	vertical-align:			middle;
	line-height:			1.2em;
	display:			table-cell;	
}

.forums .threads {
	background:			#ffffff;
	border-right:			5px solid #ececec;
	border-bottom:			5px solid #ececec;
	padding:			10px;
	display:			table-cell;	
	text-align:			center;
	color:				#363636;
	font-family:			Myriad Pro, sans-serif;
	font-size:			1em;
	vertical-align:			middle;
}

.forums .posts,
.post-thread .posts,
.forums2 .posts {
	background:			#ffffff;
	border-right:			5px solid #ececec;
	border-bottom:			5px solid #ececec;
	padding:			10px;
	display:			table-cell;
	text-align:			center;
	color:				#363636;
	font-family:			Myriad Pro, sans-serif;
	font-size:			1em;
	vertical-align:			middle;
	width:				50px;
}

.forums .first {
	border-top:			5px solid #ececec;
}

.create-new-thread {
	float:				left;
	margin:				0 0 15px 0;
	clear:				left;
}

.buttons a {
	text-decoration:	none;
	background:			#666666;
	color:				#ffffff;
	font-weight:		bold;
	font-size:			1.5em;
	padding:			10px 20px 10px 20px;
	text-transform:		uppercase;
	display:			block;
}

.buttons a:hover {
	background:			#28004b;
}

.buttons .create-new-thread {
	margin:				15px 0 15px 0;
}

.buttons .add-comment {
	margin:				15px 0 15px 15px;
}

.add-comment {
	float:				right;
	margin:				0 0 15px 15px;
}

.post-thread {
	clear:				both;
}

.post-thread .header {
	display:			block;
	font-family:		Myriad Pro, sans-serif;
	font-weight:		bold;
	font-size:			1.1em;
}

.post-thread .header  a {
	text-decoration:		none;
	color:				#ffffff;
}

.post-thread .author {
	padding:			5px 0 10px 0;
}

.post-thread .author .user_icon {
	width:				75px;
	height:				auto;
	border:				1px solid #959595;
	float:				left;
	margin:				0 15px 0 0;
}

.post-thread h1 {
	font-family: Garamond,Georgia,Times,serif;
 	font-weight:		bold;
	margin:				5px 0 0 0;
	padding:			0;
	font-size:			1.8em;
	color: 				#3c6169;
}

.post-thread .byline {
	font-style:			italic;
	font-size:			0.9em;
	margin:				5px 0 10px 0;
}

.post-thread .thread {
	padding:			10px 0 20px 0;
	background:			#ffffff;
	clear:				both;
	line-height:		1.2em;
}

.post-thread .thread p {
	margin:				0 0 10px 0;
}

.post-thread .author-details {
	float:				left;
	width:				80%;
}

.post-thread .metadata {
	float:				right;
	width:				20%;
}

.post-thread .metadata p {
	padding:			5px 0 0 0;
}

.post-thread .metadata-left {
	float:				left;
	width:				120px;
	color:				#363636;
	font-size:			0.9em;
	line-height:			1.1em;
}

.post-thread .metadata-right {
	float:				right;
	font-size:			0.9em;
	line-height:			1.1em;
	padding:			0 10px 0 0;
}

.post-thread .discussion {
	 border-top: 		10px solid #ececec;
	 padding-top:		10px
}

.pagenum {
	margin:				20px 0 0 0;
	font-weight:			bold;
	text-align:			center;
	font-size:			0.9em;
}

.pagenum a {
	color:				#363636;
	text-decoration:		none;
}

.pagenum a:hover {
	color:				#28004b;
}



/* =========== ( Discussion ) ========== */

.comment-thread {
	clear:				both;
	margin:				0;
}

a.form-button,
.edit a {
	display:			block;
	padding:			10px 30px 10px 30px;
	font-family:		Myriad Pro, sans-serif;
	color:				#ffffff;
	background:			#3c6169;
	font-weight:		bold;
	margin:				0 0 20px 0;
	text-transform:		uppercase;
	border:				0;
	float:				right;
	text-decoration:	none;
}


.comment-form {
}

.comment_container {
	background:			#ffffff;
	padding:			15px 10px 0 10px;
	border-top:			10px solid #ececec;
	margin:				0;
	clear:				both;
}

.comment_container .clearfix {
	margin:				0;
	padding:			0;
}

.comment_children_container {
	margin:				0 0 0 20px;
	padding:			0;
}

.links_container {
	clear:				both;
	overflow:			auto;
}

#first {
	border-top:			0;
	padding:			10px;
	margin:				0;
}

.comment_header {
	margin:				0 0 10px 0;
}

.comment_header .user_icon {
	width:				50px;
	height:				auto;
	margin:				0 10px 0 0;
	float:				left;
}

.comment_header h3 {
	color:				#28004b;
	font-family:		"adelle-1","adelle-2",calibri,"Andale Mono",serif;
	font-size:			1.1em;
	margin:				0 0 5px 0;
	line-height:		1em;
}

.comment_byline {
	color:				#636363;
	font-style:			italic;
	font-size:			0.9em;
}

.comment_body {
	color:				#252525;
	font-size:			0.9em;
	line-height:		1.1em;
}

.comment_likes {
	float:				left;
	width:				20%;
	height:				30px;
	text-decoration:	none;
	color:				#000000;
	font-size:			0.9em;
	font-weight:		bold;
	margin:				10px 0 15px 0;
}



.like-count {
	padding:			10px 0 0 0;
}

.like-count-0 {
	color:				#898989;
	padding:			10px 0 0 0;
}

.comment_likes a {
	color:				#363636;
	text-decoration:	none;
	font-weight:		bold;
}

.likes-image {
	float:				left;
	width:				21px;
	height:				30px;
	padding:			0 5px 0 0;
}

.comment_links {
	text-align:			right;
	float:				right;
	margin:				20px 0 20px 0;
	font-weight:			bold;
	font-size:			0.9em;
	width:				80%;
}

.comment_links a {
	color:				#363636;
	text-decoration:		none;
}

.comment_links a:hover {
	color:				#28004b;
}

.comment-thread .post-comment {
	clear:				both;
}

.comment-thread .post-comment p {
	padding:			0;
}

.comment-title {
	font-weight:			bold;
	color:				#393939;
	margin:				0 0 15px 0;
}

/* =========== ( Forms ) ========== */


#contact,
#login ,
#register,
#add_post {
	margin:				20px 0 20px 0;
}

#edit_user {
	margin:				0 0 20px 0;
}

#add_comment {
	overflow:			auto;
}

#contact label,
#login label,
#register label ,
#add_post label {
	font-weight:		bold;
	color:				#363636;
	width:				120px;
	margin:				5px 15px 0 0;
	float:				left;
}


#add_comment label {
	font-weight:		bold;
	color:				#363636;
	margin:				5px 15px 0 0;
	float:				left;
	width:				30%;
}

.post-comment #add_comment label {
	font-weight:		bold;
	color:				#363636;
	margin:				5px 15px 0 0;
	float:				left;
	width:				120px;
}


#forgot_details label {
	font-weight:			bold;
	color:				#363636;
	margin:				5px 15px 0 0;
	float:				left;
	width:				100px;
}

#edit_user label,
#change_password label  {
	font-weight:		bold;
	color:				#363636;
	margin:				5px 15px 5px 0;
}

	
.post-as {
	font-size:			0.9em;
	margin:				0 0 10px 0;
}

#email_from_nam,
#email_from,
#email_subject {
	float:				left;
	padding:			4px;
	border:				3px solid #c6c6c6;
	color:				#252525;
	width:				400px;
	margin:				0 0 10px 0;
}

#contact p,
#login p,
#register p,
#add_post p,
#content #add_comment p,
#edit_user p,
#change_password p,
#forgot_details p {
	clear:				both;
	margin:				15px 0;
}

#message_body {
	padding:			4px;
	border:				3px solid #c6c6c6;
	color:				#252525;
	width:				400px;
}

#forgot_details #recaptcha {
	margin:				0 0 0 115px;
}


#recaptcha {
	float:				right;
	margin:				10px 0 0 0;
}

.submit {
	padding:			10px 30px 10px 30px;
	font-family:		Myriad Pro, sans-serif;
	color:				#ffffff;
	background:			#3c6169;
	font-weight:		bold;
	margin:				20px 0 20px 0;
	text-transform:		uppercase;
	border:				0;
	float:				right;
}

.post-comment .submit {
	padding:			10px 30px 10px 30px;
	font-family:		Myriad Pro, sans-serif;
	color:				#ffffff;
	background:			#3c6169;
	font-weight:		bold;
	margin:				10px 0 20px 20px;
	text-transform:		uppercase;
	border:				0;
	float:				left;
}

.reset {
	padding:			10px 30px 10px 30px;
	font-family:		Myriad Pro, sans-serif;
	color:				#ffffff;
	background:			#C6C6C6;
	margin:				10px 0 0 310px;
	text-transform:		uppercase;
	border:				0;
	font-weight:		bold;
	float:				left
}

.submit:hover,
a.form-button:hover,
.edit a:hover {
	background:			#628856;
}

.reset:hover {
	background:			#666666;
}

.thankyou {
	margin:				20px 0 0 0;
	font-weight:			bold;
}



#edit_user #profile_pic {
	padding:			4px;
	border:				3px solid #c6c6c6;
	color:				#252525;
	width:				200px;
	margin:				5px 0 10px 0;
	float:				left;
}

.textshort {
	float:				left;
	padding:			4px;
	border:				3px solid #c6c6c6;
	color:				#252525;
	width:				200px;
	margin:				0 0 10px 0;
}

#edit_user  .textshort {
	padding:			4px;
	border:				3px solid #c6c6c6;
	color:				#252525;
	width:				200px;
	margin:				5px 0 10px 0;
}

.textmedium {
	float:				left;
	padding:			4px;
	border:				3px solid #c6c6c6;
	color:				#252525;
	width:				300px;
	margin:				0 0 10px 0;
}

.textlong {
	padding:			4px;
	border:				3px solid #c6c6c6;
	color:				#252525;
	margin:				5px 0 10px 0;
	width:				400px;
}

.textlonger {
	float:				right;
	padding:			4px;
	border:				3px solid #c6c6c6;
	color:				#252525;
	width:				65%;
	margin:				0 0 15px 0;
}

.textarea {
	height:				300px;
	width:				65%;
	float:				right;
	padding:			4px;
	border:				3px solid #c6c6c6;
	color:				#252525;
	margin:				0 0 10px 0;
}

.post-comment .textarea  {
	height:				300px;
	width:				400px;
	float:				left;
	padding:			4px;
	border:				3px solid #c6c6c6;
	color:				#252525;
	margin:				0 0 10px 0;
}

#edit_user .radio {
	margin:				0 5px 0 10px;
}

#add_post #body,
#edit_user #body {
	float:				left;
	padding:			4px;
	border:				3px solid #c6c6c6;
	color:				#252525;
	width:				530px;
	margin:				0 0 10px 0;
}

.forgot {
	font-size:			0.9em;
	text-align:			right;
}

.forgot a {
	text-decoration:		none;
	color:				#636363;
}

.login-link {
	clear:				both;
	font-size:			0.9em;
}

.login-link a {
	font-weight:			bold;
	color:				#28004b;
	text-decoration:		none;
}

.forgot a:hover,
.login-link a:hover {
	text-decoration:		underline;	
}


#register {
	width:				404px;
}

#login .submit,
#register .submit {
	float:				left;
	margin:				10px 0 10px 240px;
}


/* =========== ( Loggedout.tt ) ========== */


#row1 #left .logged-in {
	width:				430px;
	margin:				15px 0 0 0;
	height:				50px;
	font-size:			0.9em;
	clear:				both;
}

#subpage-row1 {
	padding:			0 0 10px 0;
}

#subpage-row1 #left .logged-in {
	width:				430px;
	float:				left;
	margin:				15px 0 0 0;
	font-size:			0.9em;
}


#left .logged-in a {
	color:				#28004b;
	font-weight:			bold;
	text-decoration:		none;
}

#left .logged-in a:hover {
	color:				#363636;
	font-weight:			bold;
	text-decoration:		none;
}

#forumpage-row {
	clear:				left;
	margin:				0 0 20px 0;
}

#forumpage-row #left {
	float:				left;
	width:				745px;
}

#forumpage-row #left #login-form {
}

#forumpage-row #left #login  {
	margin:				10px 0 0 0;
	width:				410px;
	float:				left;
}

#forumpage-row #left #login .textshort {
	float:				left;
	padding:			4px;
	height:				17px;
	border:				2px solid #959595;
	color:				#000000;
	width:				145px;
	margin:				0 10px 0 0;
	font-size:			0.8em;
}

#forumpage-row #left #login .submit {
	padding:			4px 6px 4px 6px;
	color:				#ffffff;
	background:			#959595;
	margin:				0;
	border:				0;
	text-transform:			uppercase;
	float:				left;
}

#forumpage-row #left #login .submit:hover {
	background:			#28004b;
}

#forumpage-row #left .forgot {
	clear:				left;
	text-align:			left;
	font-size:			80%;
	margin:				5px 0 0 0;
}
	
#forumpage-row #left .forgot a {
	color:				#959595;
	text-decoration:		none;
}

#forumpage-row #left .forgot a:hover {
	text-decoration:		underline;
}

#forums-page-row #right {
	float:				right;
	width:				215px;
	margin:				10px 0 0 20px;
	padding:			0;
}

#forumpage-row #register-link {
	float:				right;
	margin:				5px 0 0 0;
	padding:			10px;
	display:			block;
	color:				#ffffff;
	text-transform:			uppercase;
	background:			#959595;
	text-decoration:		none;
	font-weight:			bold;
}

#forumpage-row #register-link:hover {
	background:			#28004b;
}


/* =========== ( User ) ========== */

.user-header {
	width:				70%;
	float:				left;
}

#profile {
	clear:				both;
}

#profile h1 {
	font-size:			1em;
	color:				666666;
}

#profile .profile-left {
	font-weight:		bold;
	color:				#363636;
	margin:				0 15px 10px 0;
	float:				left;
	width:				120px;
	display:			block;
	clear:				left;
}

#profile .profile-right {
	float:				left;
}

#content #profile p {
	clear:				left;
}

#profile .bio {
	clear:				left;
	padding:			5px 0 5px 0;
}

#user_profile_pic {
	max-width:			100%;
	height:				auto;
	border:				3px solid #c6c6c6;
	float:				right;
	margin:				0 0 15px 20px;
}

.label-long {
	font-weight:			bold;
	color:				#363636;
	margin:				0 15px 10px 0;
	float:				left;
	display:			block;
	clear:				left;
	width:				200px;
	font-size:			0.9em;
}

p.label-longer {
	font-weight:			bold;
	color:				#363636;
	margin:				0;
	clear:				left;
	font-size:			0.9em;
}

#user-profile .user-left {
	width:				325px;
	float:				left;
	margin:				0 0 20px 10px;
}

#user-profile .recent-list {
	margin:				0 0 5px 0;
}

#user-profile .subheading {
	float:				left;
	clear:				left;
}

#user-profile ul li {
	margin:				0;
	font-size:			0.9em;
}


/* =========== ( Blogs ) ========== */

#blog,
#subpage {
	width:			660px;
	padding:		0 20px 0 0;
	float:			left;
}

#blog h2 {
	color:			#636363;
}

#blog .teaser {
	padding:			10px 0 0 0;
}

.blogpost {
	border-bottom:	1px solid #ececec;
	margin:			0 0 30px 0;
	padding:		0 0 30px 0;
}


.blogpost h2 {
	margin:			20px 0 10px 0; 
}

#content .blogpost p.description {
	font-size:		0.9em;
	color:			#555555;
	font-style:		italic;
	margin:			10px 0 10px 0;
}

.blogpost img {
	max-width:		100%;
}

#content .blogpost blockquote {
	border-left:	5px solid #cccccc;
	padding-left:	20px;
	margin:			20px;
	line-height:	150%;
}

#content .blogpost p.tags {
	font-size:		0.9em;
	color:			#363636;
	margin:			10px 0 20px 0;
	padding:		10px;
}

#content p.right {
	text-align:		right;
}

#content .blogpost p.discussion {
	text-align:		right;
}

#content .blogpost p.discussion a {
	color:				#607890;
	text-decoration:	none;
	padding:			10px;	
}	

#content .blogpost p.discussion a:hover {
	background:		#607890;
	color:			#ffffff;	
}

#blog ul {
	margin:			0 0 20px 20px;
}

#blog ul li {
	padding:		5px;
}

.blogpost p {
	line-height:	1.5em;
}

#blog-sidebar,
#pages-sidebar {
	width:			280px;
	float:			right;
	padding:		20px 0 0 0;
}

#pages-sidebar img {
	width:			280px;
	margin:			20px 0 20px 0;
}


/* =========== ( Tag cloud) ========== */

#tag-cloud p {
	text-align:		center;
	margin:			10px 0 30px 0;
}

#htmltagcloud span a {
	padding:		0 5px 0 5px;
}

#all-tags {
	margin:			20px 0 0 0;
}

#all-tags .tag {
	display:		block;
	width:			30%;
	padding-left:	3%;
	float:			left;
	margin:			0 0 10px 0;
}

/* =========== ( Blog archive - accordion ) ========== */

#blog-sidebar #archive  {
	margin:				0 0 20px 0;
	overflow:			auto;
}

#blog-sidebar #archive h2 {
	text-align:			center;
	font-size:			18px;
	color:				#636363;
	font-family: 		'Roboto', sans-serif;
	text-transform:		uppercase;
	letter-spacing:		1px;
	padding:			30px 0 10px 0;
}

#blog-sidebar #archive h3 {
	color:				#000000;
	font-size:			1.2em;
	margin:				10px 0 10px 0;
}

#blog-sidebar #archive .prev-year, 
#blog-sidebar #archive .this-year {
	float:				left;
	width:				33%;
}

#blog-sidebar #archive .next-year {
	float:				right;
	text-align:			right;
	width:				33%;	
}

#blog-sidebar #archive .this-year {
	text-align:			center;
}

#blog-sidebar #archive .prev-year a,
#blog-sidebar #archive .this-year,
#blog-sidebar #archive .next-year a {
	color:				#628856;
	font-size:			0.9em;
	text-decoration:	none;
	font-weight:		bold;
	display:			block;
	margin:				0 0 15px 0;
}

#blog-sidebar #archive .prev-year a,
#blog-sidebar #archive .next-year a {
	color:				#628856;
}

#blog-sidebar #archive .this-year {
	color:				#3c6169;
}

.calendar-widget {
	width:				100%;
}

#accordion {
	margin:				0 0 20px 0;
	background:			#ececec;
	padding:			5px 5px 1px 5px;
	clear:				both;
}

.month-widget {
	background:			#ececec;
	padding:			0 10px 5px 10px;
}

.month-widget a {
	font-size:			0.8em;
	color:				#000000;
	text-decoration:	none;
	background:			#ececec;
}

.month-widget a:hover {
	text-decoration:	underline;
	color:				#628856;
}

.month-widget p {
	padding:			5px 0 5px 0;
	margin:				0;
}

.submenu-item {
	position:			relative;
	font-size:			0.9em;
}

.submenu-item a {
	background:			#ffffff;	
	padding:			10px;
	color:				#3c6169;
	margin:				0 0 5px 0;
	display:			block;
	text-decoration:	none;
}

.submenu-item:hover a {
	color:				#3c6169;
}

.ui-state-default,
.ui-state-active {
}

#blog-sidebar #accordion h3 {
	margin:				0;
	font-size:			1.1em;
}

.current {
}

.ui-state-default:hover,
.ui-state-active:hover,
.current:hover {
	color:				#3c6169;
}

.ui-state-active:hover a,
.ui-state-default:hover a,
.current:hover a {
	color:				#3c6169;
}

.ui-icon-open {
	height:				27px;
	position:			absolute;
	top:				5px;
	right:				5px;
}

.ui-icon-open:hover {
	height:				27px;
	position:			absolute;
	top:				5px;
	right:				5px;
}

.ui-icon-closed {
	height:				27px;
	position:			absolute;
	top:				5px;
	right:				5px;
}

.ui-icon-closed:hover {
	height:				27px;
	position:			absolute;
	top:				5px;
	right:				5px;
}

.ui-state-focus,
.ui-accordion-header {
	outline: 			none;
}

#blog-sidebar h3 {
	text-transform:		uppercase;
	font-size:			0.9em;
	color:				#636363;
}

#blog-sidebar h2 {
	color:				#464646;
	margin:				20px 0 10px 0;
}

#blog-sidebar .email {
	text-align:			center;
	padding:			15px 10px 15px 10px;
	display:			block;
	background:			#3c6169;
	color:				#ffffff;
	text-decoration:	none;
	text-transform:		uppercase;
	font-size:			0.9em;
	margin:				30px 0 30px 0;
}

#blog-sidebar .email:hover {
	background:			#d6dfc0;
	color:				#0e3841;
}

#blog-sidebar ul.blogroll {
	list-style:			none;
	margin-left:		10px;
	font-size:			0.9em;	
}

#blog-sidebar #tags {
	clear:				both;
}

#blog-sidebar #tags ul {
	margin:				0;
	list-style:			none;
}

#blog-sidebar #tags ul li{
	width:				45%;
	float:				left;
	margin:				0 5px 5px 5px;
	font-size:			0.8em;
	padding:			0;
	background:			none;
}

#blog-sidebar #tags li a {
	color:				#31258a;
	text-decoration:	none;
}


/* =========== ( Footer ) ========== */

#footer {
	padding:		20px 0 20px 0;
	width:			1000px;
	margin:			auto;
	background:		#3c6169;
	color:			#ffffff;
	text-align:		center;
}

#footer a {
	color:			#ffffff;
	text-decoration:	none;
	font-weight:	bold;
}

#footer a:hover {
	color:			#ffffff;
	text-decoration:	underline;
}

#footer p {
	margin:			20px 0 10px 0;
}

#footer a.stealth {
	font-weight:	normal;
}

#footer a.stealth:hover {
	text-decoration:	none;
}

.small {
	font-size:		0.7em;
}

.big {
	font-size:		1.2em;
}

#footer-left {
	font-size:			90%;
	float:				left;
	vertical-align:		bottom;
	padding-left:		20px;
}

#footer-right {
	float:				right;
	text-align:			right;
	vertical-align:		bottom;
	padding-right:		20px;
}


/* =========== ( Admin footer bar ) ========== */

.admin-footer {
	color:			#000000;
	background:		#dddddd url('../images/admin-footer-bg.png') left top repeat-x;
	height:			33px;
	width:			100%;
	position:		fixed;
	bottom:			0;
	font-family:	Arial,Helvetica,sans-serif;
	font-size:		0.9em;
}

.shinyCMS {
	float:			left;
	border:			none;
}

.admin-links {
	float:			right;
	padding:		8px 20px 0 0;
}

.admin-links a {
	color:			#005a7e;
	text-decoration:	none;
}
        
.admin-links a:hover {
	color:			#005a7e;
	text-decoration:	underline;
}


/* =========== ( Polls ) ========== */

.pollbooth {
/*	border:			1px solid #ffffff; */
	background:		#333333;
	padding:		5px;
}




/* =========== ( Events ) ========== */

th {
	padding:		0 10px 0 10px;
}

td {
	vertical-align:		top;
	padding:		5px;
	margin:			0;
	border:			1px solid #cccccc;
}


/* =========== ( Users ) ========== */

#user_profile_pic {
	max-width:		200px;
	max-height:		200px;
}

#user_icon {
	max-width:		40px;
	max-height:		40px;
	float:			left;
	margin-right:		5px;
}


/* =========== ( Mobile CSS ) ========== */

@media screen and ( min-width: 1200px ) and ( max-width: 1700px ) {

#search-form #search {
    width: 				65%;
}

#blog-sidebar #search-form .submit {
    margin: 			5px 0 0 0 ;
}

}

@media screen and ( min-width: 1200px ) {

ul.topmenu {
	width:				70%;
}

#container {
	width:				70%;
	background:			#ffffff url('../images/pandora-header-large.jpg') -12% left no-repeat;
	background-size:	contain;
	padding:			2%;
}

#header {
	padding:			39% 0 0 0;
}

#blog,
#subpage {
	width:				70%;
	padding:			0 5% 0 0;
}

#blog-sidebar,
#pages-sidebar {
	width:				25%;
}

#footer {
	width:				70%;
	padding:			2%;
}

}

@media screen and ( min-width: 1025px ) and ( max-width: 1200px ) {

ul.topmenu {
	width:				80%;
}

#container {
	width:				80%;
	background-size:	contain;
}

#footer {
	width:				80%;
}

}

@media screen and ( max-width: 1270px ) {
	
#add_comment label {
	width:				25%;
}

}


@media screen and ( max-width: 900px ) {

#add_comment label {
	font-size:			0.9em;
}

.textlonger,
.textarea {
	width:				60%;
}	

}

@media screen and ( min-width: 421px ) and ( max-width: 1024px ) {

#search-form #search {
    width: 				65%;
}

#blog-sidebar #search-form .submit {
    margin: 			5px 0 0 0 ;
}

#blog,
#subpage {
	width:				72%;
	padding:			0 2% 0 0;
}

#blog-sidebar,
#pages-sidebar {
	width:				26%;
}

#logo a {
	font-size:			36px;
	padding:			10px;
	text-shadow: 		2px 2px 5px white;

}

#tagline {
	font-size:			16px;
	padding:			10px;
}

}

@media screen and ( min-width: 701px ) and ( max-width: 1024px ) {

#header {
	padding:			300px 0 0 0;
}

}


@media screen and ( min-width: 421px ) and ( max-width: 700px ) {

#header {
	padding:			200px 0 0 0;
}

#search-form #search {
    width: 				55%;
}

}

@media screen and ( max-width: 1024px ) {

ul.topmenu {
	width:				100%;
}

#container {
	width:				100%;
	background-size:	contain;
}

#footer {
	width:				100%;
}

}


@media screen and ( max-width: 700px ) {

#menu {
	height:				90px;
}



li.topmenu {
	width:				25%;
}

li.short {
	width:				25%;
}

}


@media screen and ( max-width: 421px ) {

li.short {
	width:				20%;
}

li.long {
	width:				33%;
}

#menu a {
	font-size:			0.8em;
}

#content {
	padding:			10px;
}

#blog,
#subpage {
	width:				100%;
}

#blog-sidebar,
#pages-sidebar {
	width:				100%;
}

.blogpost h2,
#content .blogpost p.description {
	text-align:			center;
}

#header {
	padding:		100px 0 0 0;
}

#logo a {
	font-size:		30px;
}

#tagline {
	font-size:		12px;
	padding:		10px;
}

#content .blogpost p.discussion {
    text-align: 	center;
	font-size:		0.9em;
}

}

@media screen and ( min-width:340px ) and ( max-width: 421px ) {

#header {
	padding:		150px 0 0 0;
}

}