/*
Goldilocks Approach to Responsive Web Design Boilerplate

Author: Design by Front - @designbyfront
Version: 0.1
URL: http://www.goldilocksapproach.com
----------------------------------------------------------------------------------------

CONTENTS - GLOBAL.CSS
-----------------------------------------
1. RESET
2. ROOT
3. CORE TYPOGRAPHY
4. LINKS
5. GLOBAL LAYOUT & GLOBAL CUSTOM TYPOGRAPHY
6. CUSTOM LAYOUT & TYPOGRAPHY (Baby bear)
7. BROWSER AND NON-SEMANTIC STYLING

CONTENTS - LAYOUT.CSS
-----------------------------------------
8. CUSTOM LAYOUT & TYPOGRAPHY (Daddy bear)
9. CUSTOM LAYOUT & TYPOGRAPHY (Mummy bear)

*/


@font-face {
    font-family: 'WireIconsRegular';
    src: url('wireicons-regular_3-webfont.eot');
    src: url('wireicons-regular_3-webfont.eot?#iefix') format('embedded-opentype'),
         url('wireicons-regular_3-webfont.woff') format('woff'),
         url('wireicons-regular_3-webfont.ttf') format('truetype'),
         url('wireicons-regular_3-webfont.svg#WireIconsRegular') format('svg');
    font-weight: normal;
    font-style: normal;

}

/* 1. RESET
----------------------------------------------------------------------------------------*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, hgroup,
menu, nav, output, ruby, 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;
  }

figure {
	margin-bottom: 0.25em !important;
	max-width: 100% !important; 
}
figure + figure {
	margin-top: 2em;
}

figcaption {
	font-size: smaller;
	color: #777; 
	line-height: 1.4em;
}

/* 2. ROOT
----------------------------------------------------------------------------------------*/
html {
  overflow-y: scroll;
  background: #FFF;
  }

/* /ht Ethan Marcotte - http://front.ie/l8rJaA */
img, embed, object, video { max-width: 100%; border: none;}
.ie6 img.full, .ie6 object.full, .ie6 embed, .ie6 video { width: 100%; }


/* 3. CORE TYPOGRAPHY
----------------------------------------------------------------------------------------*/
body {
	/*font-family: "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;*/
	/*font-family: "pragmatica-web",sans-serif; font-weight: 300;*/
	/*font-family: "etica",sans-serif; font-weight: 200;*/
	/*font-family: "lemonde-sans",sans-serif; font-weight: 400;*/
	/*font-family: "deva-ideal",sans-serif; font-weight: 400;*/

	/*font-family: "cora",sans-serif; font-weight: 400;*/
	font-family: "open-sans",sans-serif; font-weight: 400;
	font-size: 1em;
	line-height: 1.618em;
	color: #333;
	/*word-spacing: 0.0625em;*/
}

h1, h2, h3, h4, h5, h6 {
	margin-bottom: 0.809em;
	line-height: 1.2em;
	font-weight: normal;
}

h1 {
	/*font-family: "freight-sans-pro", sans-serif;*/
	/*font-family: "pragmatica-web", Times, sans-serif;*/
	/*font-family: "futura-pt",sans-serif;*/
	font-family: "proxima-nova",sans-serif;
	font-weight: 500;
	font-size: 2.3em;
	color: white;
	text-shadow: 0px 1px 0px rgba(0,0,120,0.1);
	margin: 0.5em 0em 0.4em 0;
	/*letter-spacing: 0.06em;*/
}

	h1 small {
		font-size: 0.405405405405405em;
		font-weight: bold;
		margin-top: 0.405em;
		float: right;
	}
	#page-1 h1 {
		font-size: 2.4em;
	}
	#headline p {
		position: relative;
		top: 0.7em;
		color: #A2E3FF;
		margin: 0;
		font-weight: 600;
		font-size: 0.9em;
	}

	#headline p a {
		color: #A2E3FF;
		text-decoration: none;
	}
		#headline p a:hover {
			color: #fff;
			text-decoration: underline;
		}

	#headline p span.separator {
		padding-left: 0.25em;
		padding-right: 0.25em;
		opacity: 0.5;
	}


h2 {
	/*font-family: "freight-sans-pro",sans-serif;*/
	/*font-family: "pragmatica-web",sans-serif;*/
	/*font-family: "futura-pt",sans-serif;*/
	font-family: "proxima-nova",sans-serif;

	font-weight: 700;
	font-size: 1.5em;
	text-transform: uppercase;
	color: #d52978;
	letter-spacing: 0.0618em;
	margin-bottom: 0.809em;
}

h3, h4 {
	/*text-transform: uppercase;*/
	/*letter-spacing: 0.0625em;*/
	font-family: "proxima-nova",sans-serif;

	font-weight: 600;
	font-size: 1.25em;
	color: #69b7ef;
	margin-bottom: 0.809em;
}

h4 {
	font-size: 1em;
}


.container p, .container ul, .container ol, .container dl, .container blockquote {
    font-size: 0.9625em;
    margin-bottom: 1.618em;
    line-height: 1.518em;
    /*max-width: 40em;  Optimal width for long-form text */
  }

ul { list-style-type: disc; margin-left: 1.618em; }
ol { list-style-type: decimal; margin-left: 1.618em; }
nav ul, nav ol { list-style: none; margin: 0 ; padding: 0;}

b, strong { font-weight: 600; }
i, em { font-style: italic; }
small { font-size: 80%; }

iframe { margin: 0 0 1em 0; }

/* 4. LINKS
----------------------------------------------------------------------------------------*/
a, a:visited { outline: none; color: #d52978; text-decoration: none; }
a:hover { outline: none; text-decoration: underline; }
a:active, a:focus { outline: none; }


/* 5. GLOBAL LAYOUT & GLOBAL CUSTOM TYPOGRAPHY
----------------------------------------------------------------------------------------*/
html {

}

body {
	background: #96e0ff url(img/frontpage-bg.png) top repeat-x;
}



#content { background-color: #fff; width: 100%; }


#header {
	background: transparent url(img/skyline2.png) bottom repeat-x;
	border-bottom: 1px solid #e6dec3;
	overflow: hidden;
}

#page-1 #header {
	min-height: 480px;
	background: transparent url(img/skyline2.png) bottom repeat-x;
	border: none;
	position: relative;
	overflow: visible;
}
#clouds {
	background: transparent url(img/clouds2.png) 0 50px repeat-x;
	background-size: 100%;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 700px;
}

#topmenu {
	margin: 0 0.5em 0 3.5em;
	font-size: 1em;
}
	#topmenu li {
		float: left;
		list-style: none;
	}
	#topmenu li:first-child a {
		padding-left: 0;
	}

#nav ul a {

	color: #a2e3ff;
	text-decoration: none;
	display: block;
	padding: 0.3em 0.75em;
	font-size: 1.1em;
	font-weight: 600;
	/*letter-spacing: 0.0625em;*/
}

#nav ul a:hover, #nav ul a.active  {
	color: white;
}

#footer {
	border-top: 1px solid #cad5da;
	background: #ebf4f9 url(img/highlights-bg.png) repeat;
	padding-top: 1em;
}


#footer .footer_item {
	width: 100%;
	font-size: 0.85em;
	padding: 0 0 1em 0;
}
#footer .footer_item ul { margin: 0.5em 0 0.5em 0; padding: 0;}
#footer .footer_item ul li{
	color: #555;
	list-style: none;
	display: block;
	margin: 0.5em 0 0.5em 0;
	padding-bottom: 0 0 0.5em 0;
}

#footer .footer_item .date {
	font-size: 0.9em;
	color: #9aaab4;
	font-style: italic;
}

#footer .copyright{
	border-top: 1px solid #cad5da;
}
#footer .copyright p {
	color: #9aaab4;
	font-size: 0.75em;
	width: 100%;
}
#footer .footer_item h3 {
}
#twitter_updates h3 {
	padding-left: 28px;
	background: url(images/twitter_bird.png) center left no-repeat;
}

span.wire-icon{
	font-family: "WireIconsRegular";
	font-size: inherit;
	color: #4593ea;

	top: 0em;
	position: relative;
}


span.icon-gears:after{
	content: "A";
}
span.icon-building:after{
	content: "B";
}
span.icon-clock:after{
	content: "C";
}
span.icon-people:after{
	content: "D";
}
span.icon-settings:after{
	content: "E";
}
span.icon-hearth:after{
	content: "F";
}
span.icon-chemical:after{
	content: "G";
}
span.icon-download:after{
	content: "H";
}

small.created {
	color: #777;
}

ul.nav {
	list-style: none;
	padding: 0;
	margin: 0;
}

ul.nav li {
	/*border-bottom: 1px dotted #ddd;*/
	margin: 0 0 1em 0;
}
ul.nav li h3{
	font-size: 0.9em;
}

ul.nav li a{
	font-weight: 600;
}
ul.nav li a:hover {
	color: #000;
	text-decoration: underline;
}

ul.nav li a.active {
	color: #333;
	font-weight: bold;
}

p.summary {
	font-size: 1em;
}

/* 6. CUSTOM LAYOUT & TYPOGRAPHY (Baby bear)
----------------------------------------------------------------------------------------*/

.window {
	background: url(img/chrome.png) no-repeat top left;
	padding-top: 18px;
	max-width: 560px;
	border: 1px solid #999;
	border-bottom: none;
	border-top-left-radius: 6px;
	border-top-right-radius: 6px;
	box-shadow: 0 20px 25px rgba(0,0,0,0.4); /*0px 10px 20px #666;*/
	line-height: 0;
	font-size: 0;
	margin: 0 auto;
}

.window img {
	width: 100%;
}

#featured .first {
	height: 220px;
}
#featured .first iframe { height: 220px; }

#featured .second{
	display: none;
}

#featured .third{
	display: none;
}


#highlights {
	background: #ebf4f9 url(img/highlights-bg.png) repeat;
	border-top: 1px solid #cad5da;
	border-bottom: 1px solid #e3dbc1;
	padding: 0.5em 1.618em;
	position: relative;
	z-index: 1;
}

#featured {
	padding: 0 1.618em;
	position: relative;
	z-index: 1;
	/*overflow: hidden;*/

}

#nav {
	/*border-bottom: 1px solid #a3cdf8;*/
	background: #438ef0;
	background: rgb(67,142,220);
	background: rgba(0,20,125,0.05);
	/*background: rgba(150,200,255,0.2);*/
}


#topmenu {
	/*display: none;*/ /* Hidden in mobile */
}

.tinynav {
  display: block;
  clear: both;
  width: 100%;
  position: relative;
  top: 0.5em;
  margin-bottom: 0.5em;
}

.container {
	padding: 3em 0.8125em;
	margin: auto;
	position: relative;
}

#headline .container { padding: 1em 0.8125em; }


#nav .container {
	padding: 1em 0.8125em 0.8em 0.8125em;
}
#footer .container {
	padding: 1em 0.8125em 0.8em 0.8125em;
}

#sidebar {
	width: 100%;
}
/*#sidebar p{
	font-size: 0.9em;
}*/

#sidebar .subnav:first-child {
	position: relative;
	top: -8px;
}

.subnav, .subnav li {
	list-style: none;
	margin: 0;
	padding: 0;
}

.subnav {
	margin-bottom: 3em;
	border: 1px solid #bec9d7;
	border-radius: 8px;
}

.subnav li a {
	display: block;
	padding: 8px 10px 8px 20px;
	border-bottom: 1px solid #bec9d7;
	color: #8097b2;
	text-decoration: none;
	background-position: -20px 40%;
	-webkit-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
}

.subnav li a:hover {
	color: #2e3438;
	background: transparent url(img/rightarrow.png) 1px 40% no-repeat;
}

.subnav li a.active {
	color: #2e3438;
	background: transparent url(img/rightarrow.png) 1px 40% no-repeat;
}

/*#subnav > li:last-child > a {
	border: none;
}*/


/* button global styles */

.wire-button {
	display: block;
	margin:0 0 1em 0;
	font-weight: 300!important;
	text-decoration: none;
	border-radius: 8px;
	border: 3px solid #c2c2c2;
	-webkit-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
}
.wire-button > a {
	display: block;
	text-align: left;
	padding: 0.1em 0.6em 0.1em 0.6em;
	margin: 1px;
	text-decoration: none;
	font-weight: 400;
	border-radius: 4px;
	-webkit-transition: all 0.2s ease-in-out;
    -moz-transition: all 0.2s ease-in-out;
    -o-transition: all 0.2s ease-in-out;
    transition: all 0.2s ease-in-out;
}
#main .wire-button > a:hover {
	color: #fff; 
}
.wire-button span.wire-icon {
	color: white;
	padding: 0.9em 0.2em 0.9em 0;
	width: 18%;
	float: left;
	/*display: inline-block;*/
	text-align: center;
	font-size: 1.2em;
	line-height: 1.1em;
}
.wire-button .label {
	display: block;
	width: 75%;
	float: left;
	padding: 0.7em 0 0.5em 0.7em;
	line-height: 1.2em;
}
.wire-button .subline {
	display: block;
	font-size: 0.75em!important;
	margin: 0;
	color: #d8ecf3;
}
.wire-button .subline span {
	color: #fff;
}
.wire-button em {
	font-size: 1em;
	/*font-family: "Nunito", sans-serif;*/
	font-style: normal;
	font-weight: 700;
	text-transform: uppercase;
	line-height: 1;
	padding: 0; margin: 0;
}

ul.jumplinks {
	list-style: square;
}
ul.jumplinks ul.jumplinks {
	list-style:circle;
	margin-top: 0;
	margin-bottom: 0.5em;
	line-height: 23px; 
}
ul.jumplinks ul.jumplinks ul.jumplinks {
	margin-top: 0;
	font-size: 13px;
	list-style:circle;
	line-height: 23px; 
	margin-bottom: 0;
}
li.jumplinks-parent > a {
	font-weight: bold;
}

body.page6760 .container p, 
body.page6760 .container ul {
	line-height: 1.7em;
	font-size: 100%;
}
body.page6760 .container ul li p {
	margin: 0.75em 0;
}
body.page6760 .container hr,
body.page6760 .container h2,
body.page6760 .container h3 {
	margin-top: 2em;
}
body.page6760 #main > h3:first-child {
	margin-top: 0;
}

body.page6760 ul.jumplinks {
	list-style: none;
	
}


/* wire buttons specific styling */

.btn-pink {
	max-width: 300px;
	background: #d92d83; /* Old browsers */
	background: -moz-linear-gradient(top, #d92d83 0%, #c81f66 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#d92d83), color-stop(100%,#c81f66)); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top, #d92d83 0%,#c81f66 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top, #d92d83 0%,#c81f66 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(top, #d92d83 0%,#c81f66 100%); /* IE10+ */
	background: linear-gradient(top, #d92d83 0%,#c81f66 100%); /* W3C */
	/*filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#d92d83', endColorstr='#c81f66',GradientType=0 ); */ /* IE6-9 */
}

	.btn-pink a {
		text-shadow: 1px 1px 2px #791743;
		color: #fff;
		border-top: 1px solid #e965b2;
		border-bottom: 1px solid #a20552;
	}
	.btn-pink span.wire-icon{
		border-right: 1px inset #a20552;
		text-shadow: 1px 1px 2px #791743;
	}
	.btn-pink span.label { border-left: 1px solid #e965b2; }


.btn-download {
	max-width: 300px;
	background: #2f3638; /* Old browsers */
	background-image: linear-gradient(bottom, #212425 1%, #384246 100%);
	background-image: -o-linear-gradient(bottom, #212425 1%, #384246 100%);
	background-image: -moz-linear-gradient(bottom, #212425 1%, #384246 100%);
	background-image: -webkit-linear-gradient(bottom, #212425 1%, #384246 100%);
	background-image: -ms-linear-gradient(bottom, #212425 1%, #384246 100%);
	background-image: -webkit-gradient(linear,left bottom,left top,color-stop(0.18, #212425),color-stop(1, #384246));
}

	.btn-download a {
		text-shadow: 1px 1px 2px #000;
		color: #fff;
		border-top: 1px solid #697274;
		border-bottom: 1px solid #000;
	}
	.btn-download span.wire-icon{
		color: #fff!important;
		text-shadow: 1px 1px 0px #000;
		border-right: 1px inset #000;

	}
	.btn-download span.label { border-left: 1px solid #586062; }

.btn-other {
	max-width: 300px;
	background: #0093ea; /* Old browsers */
	background-image: linear-gradient(bottom, #0093ea 1%, #00baef 100%);
	background-image: -o-linear-gradient(bottom, #0093ea 1%, #00baef 100%);
	background-image: -moz-linear-gradient(bottom, #0093ea 1%, #00baef 100%);
	background-image: -webkit-linear-gradient(bottom, #0093ea 1%, #00baef 100%);
	background-image: -ms-linear-gradient(bottom, #0093ea 1%, #00baef 100%);
	background-image: -webkit-gradient(linear,left bottom,left top,color-stop(0.18, #0093ea),color-stop(1, #00baef ));
}

	.btn-other a {
		color: #fff;
		border-top: 1px solid rgba(255,255,255,0.3);
		border-bottom: 1px solid rgba(0,0,0,0.1);
	}
	.btn-other span.wire-icon{
		color: #fff!important;
		xtext-shadow: 1px 1px 0px #000;
		xborder-right: 1px inset #000;

	}
	.btn-other span.label { border-left: 1px solid rgba(255,255,255,0.1); }

.wire-button:hover {
	/*opacity: 0.8;*/
	box-shadow: 0 0 15px rgba(255,255,255,0.7);
	border: 3px solid #ddd!important;
}

#download-buttons .wire-button {
	width: 100%;
	max-width: 100%; 
	margin-right: 0; 
	margin-left: 0; 
}

.wire-button .wire-icon {
	max-width: 60px; 
}

#top-buttons {
	display: none;
}
#top-buttons .wire-button{
	display: none;
}


#logo {
	float: left;
	width: 9em;
	position: relative;
	left: -2px;
	top: 1px; 
}

#mark {
	position: absolute; 
	display: block;
	top: -13px;
	left: 0; 
	width: 35px; 
	height: 35px; 
	opacity: 0.85;
	
}

#logomark {
	position: relative;
	padding-left: 42px; 
}

#logomark #logo {
	float: none; 
}


#search {
	position: absolute;
	z-index: 100;
	top: 1.1em;
	right: 1.618em;
	width: 12em;
}

#search input {
	background: transparent;
	border: 1px solid #6aadf4;
	border-radius: 6px;
	padding: 5px;
	width: 7em;
	float: right;
	color: white;
	-webkit-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
}

#search button {
	position: absolute;
	top: 4px;
	right: 7px;
	width: 17px;
	height: 20px;
	background: transparent url(img/search.png) no-repeat;
	text-indent: -9999px;
	border: none;
	overflow: hidden;
}





#highlights ul { margin: 1em 0; }
#highlights li {
	list-style: none;
	text-align: center;
	width: 48%;
	margin: 0 1%;
	height: 7.3em;
	float: left;
}

#highlights li h2 {
	color: #2e65a3;
	font-size: 0.9em;
	text-transform: inherit;
	font-weight: 400;
	letter-spacing: 0;
}

#highlights li a {
	text-decoration: none;
}

#highlights li a:hover h2 {
	/*text-decoration: underline;*/
}

#highlights li .wire-icon{
	font-size: 5em;
	line-height: 1;
	display: block;
	text-shadow: rgba(255,255,255,1) 0 1px 1px, rgba( 0,0,0,0.2) 0 0 10px;
}


#highlights li a:hover .wire-icon{
	text-shadow: rgba(255,255,255,1) 0 1px 1px, rgba( 0,0,0,0.2) 0 0 10px;
	color: #61a0ff;
}
/*
#highlights .icon-hearth { color: #d83583; }
#highlights a:hover .icon-hearth { color: #e73a91}
*/

#highlights a:hover .icon-hearth { color: #d83583 !important; }


table {
	margin: 1em 0 1.5em 0;
}

#main a:hover,
#footer a:hover,
#sidebar .sidebar_item a:hover {
	/*
	background-color: #ffffdd;
	*/
	color: #333;
}

#main table {
	width: 100%;
	font-size: 0.9em;
	line-height: 1.4em;
	border-collapse: collapse;
	border-top: 1px dotted #ccc;
	border-left: 1px dotted #ccc;
}
		#main table tr td {
			border-collapse: collapse;
			padding: 5px 10px;
			border-bottom: 1px dotted #ccc;
			vertical-align: top;
			font-size: 1em;
			color: #555;
		}

		#main table tr td:first-child {
			font-weight: 400;
			padding: 1em 1em;
			font-family: Menlo, Monaco, 'Andale Mono', 'Lucida Console', 'Courier New', monospace;
			font-size: 14px; 
			width: 50%;
			color: #444;
			/*white-space: nowrap;*/
		}
		#main table tr td .descr-text{
			color: #666;
			font-family: "open-sans",sans-serif; font-weight: 400;
			margin-top: 0.5em;
		}

		#main table tr:hover {
			background: #ffffdd;
		}

		#main h3 + table {
			margin-top: 0.75em;
		}

#main .video,
#main .TextformatterVideoEmbed {
	margin: 1em 0;
}
	#main div.TextformatterVideoEmbed:first-child {
		margin-top: 0;
	}

#main code {
	font-family: Menlo, Monaco, 'Andale Mono', 'Lucida Console', 'Courier New', monospace;
	font-size: 14px; 
	line-height: 22px; 
}
#main p>code:not(.language-php) {
	display: inline-block;
}
#main pre {
	margin: 1em 0;
}
#main pre.small code {
	font-size: 12px; 
	line-height: 19px; 
}
#main pre.xsmall code {
	font-size: 10px; 
	line-height: 17px;
}

#main p.pre-file {
	margin-bottom: -1em;
	margin-top: -0.5em;
}
	#main p.pre-file u {
		text-decoration: none; 
		font-size: 0.8em;
	}

#main pre + p {
	margin-top: 1.5em;
}

#main pre + h3,
#main pre + h2,
#main pre + h4 {
	margin-top: 2em; 
}

#main li > code:not(.language-php),
#main p > code:not(.language-php) {
		background: #fff2a8 !important; 
		padding-left: 2px;
		padding-right: 2px; 
		color: #222;
	}


#main blockquote {
	border-left: 3px solid #ccc; 	
	padding: 0.5em 1em 0.5em 1em;
	background: #eee; 
	font-style: italic;
	font-family: Georgia;
	color: #555; 
}
	#main blockquote p {
		line-height: 1.8em;
	}
	#main blockquote *:last-child {
		margin-bottom: 0; 
	}

#main .highlight {
		padding: 0.5em;
		margin: 0 0 1.625em 0;
		border: none;
		background: #fff;
		border-left: 4px solid #ccc;
		border-top: 1px dotted #ccc;
		border-bottom: 1px dotted #ccc;

	}
		#main .highlight ul,
		#main .highlight ol {
			margin: 0;
		}

		#main .highlight pre li {
			list-style: none;
			margin: 0 !important;
			background: #fff;
		}

		#main p + .highlight {
			margin-top: -1em;
		}

		#main h3 + .highlight {
			margin-top: 9px;
			border-top: none;
		}

#main .CommentList {
        margin: 1em 0 1.625em;
}
        #main .CommentList .CommentList {
                margin-top: 0;
        }
        #main .CommentListItem {
                border-left: 1px solid #ddd;
                border-top: 1px dotted #ccc;
                padding: 1em 0 0 1em;
        }

                #main .CommentHeader {
                        font-size: 14px;
                        line-height: 20px;

                        font-weight: bold;
                        text-transform: uppercase;
                        font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
                        color: #3786bc;
                        margin: 0;
                        padding: 0;

                        margin-left: 55px;
                        margin-bottom: 25px;
                        position: relative;
                        top: 10px;
                }

                #main .CommentHeader .CommentCreated {
                        text-transform: none;
                        color: #69b7ef;
                }
                #main .CommentText {
                        padding-top: 1em;
                }
                #main .CommentText,
                #main .CommentFooter,
                #main .CommentForm {
                }

                #main .CommentGravatar {
                        width: 40px;
                        height: 40px;
                        position: absolute;
                        top: 15px;
                        left: 15px;
                }

                #main .CommentHeader {
                }

                #main .CommentText {
                        color: #666;
                }
                #main .disclaimer {
                        color: #777;
                        font-size: 0.8em;
                }

                #main .CommentAction {
                        margin-bottom: 0;
                }
                #main .CommentAction + .CommentForm {
                        margin-top: 1em;
                }


        #main .CommentForm input,
        #main .CommentForm textarea {
                box-sizing: border-box;
                padding: 6px 8px;
                font-size: 1em;
                color: #666;
        }

        #main .CommentForm button {
                font-size: 1em;
                padding: 5px 10px;
        }

	#main .CommentFormStars {
		position: relative;
		top: -0.5em;
		margin: 0;
		clear: both;
	}


	#main .CommentList .CommentStars, 
	#main .CommentForm .CommentStars {
		font-size: 18px; 
	}
	#main .CommentList .CommentStars {
		margin-left: 0.5em;
	}




/*
#main .CommentList {
        margin: 1em 0 1.625em;
}

        #main .CommentListItem {
		position: relative;
		clear: both;
                list-style: none;
                margin: 0;
                border-left: 5px solid #ddd;
                border-top: 1px dotted #ccc;
                padding: 5px 2em 0.5em 70px;
                background: #fff;


        }
		.CommentGravatar {
			width: 40px;
			height: 40px;
			position: absolute;
			top: 15px;
			left: 15px;
		}

                #main .CommentListItem p {
                        font-size: 0.85em;
			margin: 0.5em 0;
                }
                #main .CommentHeader,
                #CommentForm label {
                        margin-top: 0;
                        font-weight: bold;
                        font-size: 0.75em;
                        text-transform: uppercase;
                        font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
                        color: #3786bc;
                }
                #main .CommentText {
                        color: #666;
                }
                #main .disclaimer {
                	color: #777;
                	font-size: 0.8em;
                }


#CommentForm {
}

        #CommentForm h2 {
                margin-bottom: 0;
                border: none;
        }

        #CommentForm label {
                display: block;
                color: #f00076;
                color: #999;
        }

        #CommentForm p {
                margin: 0.5em 0;
        }

        .CommentForm_cite,
        .CommentForm_website,
        .CommentForm_email {
                float: left;
        }
                .CommentForm_cite input,
                .CommentForm_website input,
                .CommentForm_email input {
                        width: 149px;
                        margin-right: 1em;
                }

        .CommentForm_text {
		clear: left;
        }
                .CommentForm_text textarea {
                        padding: 2px;
                        width: 99%;
			max-width: 800px;
                        height: 100px;
                }

        #CommentForm .error {
                background: #a30000;
                color: #fff;
                padding: 0.25em 0.5em;
        }
        #CommentForm .success {
                font-weight: bold;
        }
*/


#main .MarkupPagerNav {
        clear: left;
        margin: 1em 0;
        padding-bottom: 2em;
        font-family: Arial, sans-serif;
}
        #main .MarkupPagerNav li {
                display: inline;
                list-style: none;
                margin: 0;
        }
        #main .MarkupPagerNav li a,
        #main .MarkupPagerNav li.MarkupPagerNavSeparator {
                display: block;
                float: left;
                padding: 2px 9px;
                color: #fff;
                background: #2f4248;
                margin-right: 3px;
                font-size: 10px;
                font-weight: bold;
                text-transform: uppercase;
		text-decoration: none; 
        }
        #main .MarkupPagerNav li.MarkupPagerNavOn a,
        #main .MarkupPagerNav li a:hover {
                color: #fff;
                background: #db1174;
                text-decoration: none;
        }
        #main .MarkupPagerNav li.MarkupPagerNavSeparator {
                display: inline;
                color: #777;
                background: #d2e4ea;
                padding-left: 3px;
                padding-right: 3px;
        }


#sidebar a img {
		border: none;
	}


	#video_button {
		display: block;
		margin: 1px 0;
	}
		#video_button img {
			display: block;
		}

	#sidebar .sidebar_item {
		margin: 2em 0;
	}
		#sidebar .sidebar_item h3 {
			padding-top: 0;
		}
		#sidebar > .sidebar_item:first-child {
			margin-top: 0; 
		}

	#notify_form {
		margin: 0 0 2em 0;
	}
		#content #notify_form h3,
		#content #notify_form p {
			margin: 0;
		}
		#content #submit_notify {
			display: block;
			margin-top: 5px;
		}

		#notify_email {
			width: 90%;
			border: none;
			padding: 4px 4px;
			border: 1px solid #ccc;
			margin-bottom: 5px;
			font-size: 1em;
		}

	#form-builder img {
		border-radius: 5px;
		display: block;
		margin: 0 auto;
	}

	#cc-winner {
		clear: both;
		margin: 1em 0;
		position: relative;
	}
		#cc-winner img {
			/*width: 150px;*/
			display: block;
		}


.social-buttons {
	padding: 1em 0;
}

.align_left {
	float: left;
	margin: 0 1em 1em 0;
}

.align_right {
	float: right;
	margin: 0 0 1em 1em;
}

.align_center {
	display: block;
	margin: 0 auto;
}
#sidebar .align_left,
#sidebar .align_right {
	position: relative; 
	top: 3px; 
	margin-bottom: 0.25em; 
}

@media screen and (max-width: 550px) {
	#content .align_right,
	#content .align_left {
		display: block;
		float: none; 
		max-width: 100% !important;
		margin: 1em auto 1em auto !important; 
	}
}


#editpage {
	position: absolute;
	top: 0;
	left: 0;
	padding: 5px 6px;
	background: #db1174;
	color: #fff;
	display: block;
	font-weight: bold;
}
	#editpage:hover {
		background: #ffffcc;
		color: #000;
	}

/* 7. BROWSER AND NON-SEMANTIC STYLING
----------------------------------------------------------------------------------------*/
.cf:before, .cf:after { content: ""; display: block; }
.cf:after { clear: both; }
.ie6 .cf { zoom: 1 }



span.ProCache {
        display: none;
}

body.ProCache span.ProCache {
        display: inline;
}

.template_tutorial #main ol li,
.template_tutorial #main ul li {
	margin: 0.5em 0;
}

u {
	color: #666;
}

p.tags {
	margin: 0;
}

span.tag {
	background: #ddd; 
	padding: 1px 6px; 
	border-radius: 5px; 
	font-size: 11px; 
	font-weight: bold;
	text-transform: uppercase;
}

p.tutorial {
	border-top: 1px dotted #ccc; 
	padding-top:1em;
	margin-bottom: 1em;
}

/* TYPEKIT */

.wf-loading .wire-button .label,
.wf-loading #editpage,
.wf-loading #mark,
.wf-loading #topmenu li a, 
.wf-loading h3,
.wf-loading h2,
.wf-loading h1 {
	font-family: Arial, sans-serif;
	visibility: hidden;
}
.wf-active .wire-button .label,
.wf-active #editpage, 
.wf-active #mark, 
.wf-active #topmenu li a, 
.wf-active h3,
.wf-active h2,
.wf-active h1 {
	visibility: visible;
}