@color: #110000;
@fonts: Georgia, "Times New Roman", serif;
@sans-serif: Verdana, Helvetica, Arial, 'sans-serif';
@pagewidth: 920px;

@fullwidth: @pagewidth+40px;
@spacing: 15px;  /*padding for elements*/
@radius: 8px;

@import 'reset.less';
@import 'elements.less';
/* @group Typography */

h1 {
	overflow:visible;
	font-family: 'Merriweather', "Georgia", 'serif';
	font-size: 40px;
	margin-bottom: @spacing;
	text-rendering: optimizeLegibility;
}

h2 {
	margin-bottom: @spacing;
	font-size: 30px;
	text-rendering: optimizeLegibility;
	font-family: "Source Sans Pro", 'sans-serif';
	font-weight: 200;
}

em {
	font-style: italic;
}

strong {
	font-weight: bold;
}

p {
	font-family: "Source Sans Pro", 'sans-serif';
	font-size: 16px;
	line-height: 1.40;

}

#wrapper p {
	padding-bottom: 10px;

}

.warning {
	background: rgba(255,155,155,.8);
	padding: @spacing;
	.rounded(@radius);
}

.panel a, .panel a:link, .panel a:visited {
	color: inherit;
}
/* @end */

/* @group Structure */

body {

	background: #292929;
}

#wrapper {
background: white;

}
.panel {

	margin:0 auto;
	width: 80%;
	padding-top: @spacing;
	display: none;
	min-height: 400px;
	padding-bottom: 50px;

}

.panel.here {
	display: block;
}
#content_main {

	/*overflow: scroll;*/
}

#content_main h1:hover, #content_main h2:hover, #p_text:hover {
	outline: dashed 3px rgba(0,0,0,.3);
}
#content_main h1:active {
	/*outline: dashed 3px red;*/
}
#nav_controls {
	background: #292929;
	width: 80%;
	margin:-30px auto 0;
	.rounded(@radius);
}
#controls {
	/*position: absolute;*/
	clear: both;
	color: white;
		width: 100%;
		/*bottom: -20px;*/
		/*left: 0;*/
		/*height: 50px;*/
		padding-top: 10px;
/*		background: rgba(0,0,0,.6);
		background: #292929;*/

		font-family: @sans-serif;
		font-size: .75em;

}

#controls .chosen-container, #controls input {
	color: black;
	margin-right: 5px;
}



.control {
	display:none;

}
.control.active, .no-js .control {
	display:block;
}

#control_option {
	float:left;
	/*margin: 0 15px;*/
}


#h1lh, #h2lh, #plh{
	/*width:50px;*/
}
#h1color, #h2color, #pcolor {
	width: 60px;
}

#submit

#h1_select, #h2_select, #p_select,
#h1_select_chosen, #h2_select_chosen, #p_select_chosen
 {
	/*float: left;*/
	clear:both;
	margin-right: @spacing/3;
	margin-bottom: @spacing*.75;
	width: 100%;

}

 .element, .font-family, .size, .lh, .color {
 	margin-left: @spacing;
 	margin-bottom: @spacing*.75;
 }
.element label, .font-family label,.size label, .lh label, .color label,#bg_sec label {
	display: block;
	margin-bottom:3px;
}

.element {
	padding:0 0 @spacing*.75 0;
	margin: 0 @spacing @spacing*.75 @spacing;
	border-bottom: solid 1px white;
	width: 90%;
}


#control_option_chosen {
	font-family: Verdana, 'sans-serif';
}
.hide_btn {
	padding: 5px 10px;
	margin-top: @spacing;
	margin-left: @spacing;
	.rounded(@radius);
	border: solid 1px white;
	background: #ccc;
}


#share_text {
	width: 100%;
	height:100px;
	padding: @spacing;
	margin-bottom:@spacing;
	}
	#share_text_short {
		width:190px;
		height: 20px;
		padding: @spacing;
	}

/* @end */


/* @group Navigation */
.footer_wrapper {
	background: #292929; /* Old browsers */

}

footer {
	margin: 0 auto;
	padding: 0;
	clear:both;
	width: 80%;
	font-family: @sans-serif;
	/*min-width: @pagewidth;*/

}

footer p {
	margin: @spacing 0;
	color:white;
}
footer p a {
	color: white;
}
#panel_nav {

	font-size: .8em;

	clear: both;
	margin: @spacing 0;
}

#panel_nav li {
	float: left;
	display:inline;
}
#panel_nav a {
	display: block;
	color:white;
	text-decoration: none;
	padding: 8px 20px;
}

#panel_nav a.here {
	background: #666;
	.rounded(@radius);
}
/* @end */

/* @group Forms */

@import 'form-fixes.less';




/* @end */

/* @group Classes/specific features */
#logo {
	.rounded(50%);
	width: 100px;
	height: 100px;
	background: orange;
	float: left;
}


/* @end */

@import "helpers.less";



/* =============================================================================

   PLACEHOLDER Media Queries for Responsive Design.

   These override the primary ('mobile first') styles

   Modify as content requires.

   ========================================================================== */



@media only screen and (min-width: 480px) {
	@import "480.less";
}

@media only screen and (min-width: 768px) {
	@import "768.less";
}

@media only screen and (min-width: @fullwidth) {
	@import "fullwidth.less";
}


