/* ========================================= */
/* =============== #RESET CSS ============== */
/* ========================================= */
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,img,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,header,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}
body{line-height:1}
ol,ul{list-style:none}
blockquote,q{quotes:none}
blockquote:before,blockquote:after,q:before,q:after{content:'';content:none}
table{border-collapse:collapse;border-spacing:0}

/* ========================================= */
/* ====== #HTML / BODY / THEME COLOURS ===== */
/* ========================================= */  
html{width:100%;height:100%;background:url('images/paper_bg.jpg') repeat #f7f7f7;}
body{	
	font-size:16px;
	line-height:22px;
	color:#666;
	width:100%;height:100%;
	-webkit-font-smoothing:antialiased;-webkit-text-size-adjust:100%;
}
body,input,textarea,select,button{font-family:'Roboto',Arial,Helvetica,sans-serif}

/*** #COLORS ***/
.red{color:#DB2525}
.blue{color:#4CB0CE}

/* ============================================== */
/* ===== TYPOGRAPHY / LISTS / TABLES / TABS ===== */
/* ============================================== */
h1 a,h2 a,h3 a,h4 a,h5 a,h6 a{font-weight:inherit}
h1{
	font-size:34px;line-height:34px;font-weight:100;
	margin:34px 0 20px 0;padding:0 0 15px 0;
	font-weight:100;color:#bbb;letter-spacing:-1px;
	border-bottom:1px dashed #ddd;
}
h2{
	font-size:26px;line-height:26px;margin:40px 0 20px 0;padding:0 0 15px 0;
	font-weight:300;color:#999;letter-spacing:-1px;
	border-bottom:1px dashed #999;
}
h3{
	font-size:20px;line-height:24px;margin:0 0 10px 0;
	font-weight:700;color:#555;
}
h4{
	font-size:18px;line-height:22px;margin:15px 0 10px 0;
	font-weight:700;color:#666;
}
h5{
	font-size:18px;line-height:22px;margin:0 0 10px 0;
	font-weight:300;color:#333;
}
h6{
	font-size:15px;line-height:19px;margin:0 0 10px 0;
	font-weight:700;color:#333;
}

/*** #PARAGRAPH ***/
p{margin:0 0 14px 0;color:#666}
p img{margin:0}
p,li,label,legend{font-size:15px;line-height:22px;font-weight:400}

/*** #LINKS ***/
a,a:visited{color:#4CB0CE;font-weight:400;text-decoration:none;outline:0}
a:hover,a:focus{color:#DB2525;text-decoration:none}
p a, p a:visited{line-height:inherit}

p a, p a:visited,
p a:hover, p a:focus{text-decoration:underline}

/*** #LISTS ***/
ul,ol{margin:0 0 15px 30px}
ul li{list-style-type:disc}
ol li{list-style-type:decimal}
li{color:#666;margin-bottom:2px}
ul ul,ul ol,ol ol,ol ul{margin:5px 0 5px 45px}
ul ul li,ul ol li,ol ol li,ol ul li{margin-bottom:6px}

/*** #TRANSITIONS ***/
a,
.transition,
.ui-tabs-nav,
.ui-accordion-header{
	-webkit-transition:.3s ease all;
	   -moz-transition:.3s ease all;
	    -ms-transition:.3s ease all;
	     -o-transition:.3s ease all;
	        transition:.3s ease all;
}
.no-transition{
	-webkit-transition:.0s;
	   -moz-transition:.0s;
	    -ms-transition:.0s;
	     -o-transition:.0s;
	        transition:.0s;
}

hr{margin:10px 0 20px 0;height:1px;line-height:1px;border:none;border-bottom:1px dashed #ddd;background:none}

em{font-style:italic}
.bold,b,strong{font-weight:700}
small{font-size:80%;line-height:80%}

.thin, .light{font-weight:300}
.normal{font-weight:400}

/* ===== BUTTONS ===== */
a.button{
	cursor:pointer;display:inline-block;line-height:normal;
	margin:5px 5px 5px 0;padding:10px;	
	font-size:15px;line-height:15px;font-weight:300;
	color:#fff;
	text-decoration:none;	
	background:#4CB0CE;border:1px solid #349EBE;
	
}
	a.button:hover{border-color:#C42020;background:#DB2525;}

/* Fix for odd Mozilla border & padding issues */
button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0}

/* ============================================ */
/* ====== WORDPRESS #CORE / USEFUL CLASSES ==== */
/* ============================================ */
.alignnone{margin:10px 0 20px 0}
.alignright{float:right;margin:10px 0 20px 20px}
.alignleft{float:left;margin:10px 20px 20px 0}
.aligncenter{display:block;margin:10px auto 20px auto}
@media only screen and (max-width: 580px) {	.alignleft, .alignright{float:none;display:block;margin:10px auto 20px auto} }

.caption{
	float:left;clear:both;width:100%;
	display:block;width:100%;text-align:center;
	margin:0 0 20px 0;
	background:#fafafa;border:1px solid #eee;
	box-shadow:inset 0 0 10px rgba(0,0,0,.05);
	-moz-box-shadow:inset 0 0 10px rgba(0,0,0,.05);
	-webkit-box-shadow:inset 0 0 10px rgba(0,0,0,.05);
}
	.caption img{
		border:0 none;height:auto;margin:1.5%;
		padding:0;width:auto;max-width:97% !important;
		-webkit-box-shadow:1px 2px 8px rgba(0,0,0,.16);
		-moz-box-shadow:1px 2px 8px rgba(0,0,0,.16);
		box-shadow:1px 2px 8px rgba(0,0,0,.16);		
	}
	.caption p{
		float:left;clear:both;width:100%;	
		margin:0;padding:15px;
		font-style:italic;
		background:#eee;
	}

/* USEFUL CLASSES */
.display-none{display:none}
.display-block{display:block}
.no-margin{margin:0}
.no-margin-top{margin-top:0}
.no-margin-right{margin-right:0}
.no-margin-bottom{margin-bottom:0}
.no-margin-left{margin-left:0}
.float-left{float:left}
.float-right{float:right}
.text-right{text-align:right}
.text-center{text-align:center}
.clear{float:left;clear:both;width:100%}
.clear5{float:left;clear:both;width:100%;height:5px}
.clear10{float:left;clear:both;width:100%;height:10px}
.clear20{float:left;clear:both;width:100%;height:20px}
.clear30{float:left;clear:both;width:100%;height:30px}
.inline-spacer{display:inline-block;float:none;clear:none}
.youtube-player{
	display:inline-block;width:100%;max-width:600px;
	margin:20px auto;
	-webkit-box-shadow:0 0 10px rgba(0,0,0,.2);-moz-box-shadow:0 0 10px rgba(0,0,0,.2);box-shadow:0 0 10px rgba(0,0,0,.2)
}

.img-shadow{-webkit-box-shadow:0 0 10px rgba(0,0,0,.2);-moz-box-shadow:0 0 10px rgba(0,0,0,.2);box-shadow:0 0 10px rgba(0,0,0,.2)}
.relative{position:relative}

/* ============================================ */
/* ============== RESPONSIVE #GRID ============ */
/* ============================================ */
* {-webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box}
.row{margin:0 auto;max-width:960px;position:relative}
.col{display:block;float:left;margin-left:1.5%;margin-right:1.5%}
.row:after,
.col:after{content:"";display:block;height:0;clear:both;visibility:hidden}

.span_5{width:2%}
.span_10{width:7%}
.span_15{width:12%}
.span_20{width:17%}
.span_25{width:22%}
.span_30{width:27%}
.span_33{width:30%}
.span_35{width:32%}
.span_40{width:37%}
.span_45{width:42%}
.span_50{width:47%}
.span_55{width:52%}
.span_60{width:57%}
.span_65{width:62%}
.span_66{width:63%}
.span_70{width:67%}
.span_75{width:72%}
.span_80{width:77%}
.span_85{width:82%}
.span_90{width:87%}
.span_95{width:92%}
.span_100{width:97%}

@media ( max-width : 768px ) {
	.col{margin-bottom:20px;width:94%;margin-left:3%;margin-right:3%}
}
.col-no-margin{margin-bottom:0}
.col img{max-width:100%;height:auto}

/* ====================================== */
/* ============== #MAIN DIVS ============ */
/* ====================================== */

a.button.login-button{
	font-size:18px;
	line-height:24px;
}
	a.button.login-button strong{font-size:26px}

/*** SIDEBAR ***/
#sidebar{padding:20px 0;text-align:right}

	#logged-in-message{
		float:left;clear:both;width:100%;
		margin:0 0 30px 0;padding:0;
		color:#aaa;font-size:14px;line-height:18px;
	}
	#logged-in-message li{
		list-style-type:none;float:left;clear:both;width:100%;
		padding:2px 0;
		color:#aaa;font-size:14px;line-height:18px;
	}
	#logged-in-message a{font-weight:300}
	.logged-in-pale{color:#ccc}

	#topic-list{
		float:left;clear:both;width:100%;
		margin:0 0 10px 0;padding:0;
	}
	#topic-list li{
		list-style-type:none;float:left;clear:both;width:100%;
		margin:0;padding:0;
		border-top:1px dashed #ddd;
	}
	#topic-list li a{
		list-style-type:none;float:left;clear:both;width:100%;
		margin:0;padding:6px 0;
		font-weight:300;
	}
	#topic-list li:first-child{border-top:0}	

	#topic-list li.current-topic a{color:#666;font-weight:700}


/*** CONTENT ***/
#content{
	padding:20px;background:#fff;
	border-bottom:1px solid #eee;
	-webkit-box-shadow:0 0 16px rgba(0,0,0,.05);
	-moz-box-shadow:0 0 16px rgba(0,0,0,.05);
	box-shadow:0 0 16px rgba(0,0,0,.05);
}

.topics{
	float:left;clear:both;width:100%;margin:0;padding:0;
}
	.topic{
		list-style-type:none;float:left;clear:both;width:100%;
		margin:0 0 10px 0;padding:0;
		border:1px solid #eee;
		background:#fafafa;
	}	
	.topic a{
		float:left;clear:both;width:100%;
		padding:15px;
	}
	.topic.admin-only{
		background:#fefefe;border-color:#f7f7f7;
		padding:15px;
		-webkit-box-shadow:none;-moz-box-shadow:none;box-shadow:none;
	}
	.topic h4{font-size:20px;line-height:24px;margin:0 0 3px 0;color:#4CB0CE}
	.topic.theme-specific h4{color:#53A977}	
	.topic p{font-size:14px;line-height:18px;margin:0 0 3px 0}
	.topic a{color:#DB2525}

	.topic.admin-only h4{color:#bbb}
	.topic.admin-only p{color:#999}

	.topic a:hover{
		background:#f7f7f7;border-color:#ddd;
		-webkit-box-shadow:inset 0 0 10px rgba(255,255,255,.4), 0 0 8px rgba(0,0,0,.1);
		-moz-box-shadow: inset 0 0 10px rgba(255,255,255,.4), 0 0 8px rgba(0,0,0,.1);
		box-shadow:inset 0 0 10px rgba(255,255,255,.4), 0 0 8px rgba(0,0,0,.1);
	}
	.topic a:hover h4{color:#DB2525}

pre{
	font-family:"Courier New", Courier, monospace;
	margin:0 0 20px 0;padding:15px 10px;
	background:#f7f7f7;color:#888;font-weight:300;
	border-left:3px solid #ddd;
	white-space: pre-wrap;
	white-space: -moz-pre-wrap;
	white-space: -pre-wrap;
	white-space: -o-pre-wrap;
	word-wrap: break-word; 
}


/* ============================================ */
/* ========== #RESPONSIVE MEDIA QUERIES ======= */
/* ============================================ */
.mobile-only{display:none}

/*-----   W < 960   -----*/
@media only screen and (max-width: 959px) {}

/*-----   W < 768   -----*/
@media only screen and (max-width: 767px) {}

/*-----   W < 480   -----*/
@media only screen and (max-width: 479px) {}