/*****************************************
*	CSS for codestore.net
*	Author: 	Jake Howlett
*	Company: 	Rockall Design ltd http://www.rockalldesign.com/
*	Date: 		27 Jun 2012
*	Version:	8.0
*****************************************/

/* HTML 5 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,time,mark,audio,video { margin:0;padding:0;border:0;outline:0;font-size:100%;vertical-align:baseline;background:transparent; } 
body { line-height:1; }
ol,ul { list-style:none; }
blockquote,q { quotes:none; }
blockquote:before,blockquote:after,q:before,q:after { content:'';content:none; }
ins { text-decoration:none; }
del { text-decoration:line-through; }
table { border-collapse:collapse;border-spacing:0; }

body{
	font: normal 100%/1.4 Verdana, Helvetica Neue, Helvetica, Arial, sans-serif;
	margin:2% 5%;
}

blockquote{
	font-style:italic;
	margin: 0 2em;
}

#content, #side, footer, #masthead{
	font-size:0.9em;
}

#content article ul, #content article ol{
	padding-left: 2em;
	margin-left: 1em;
}
	
#content article ul{
	list-style-type: disc;
}
#content article ol{
	list-style-type: decimal;
}

section.view article{
	margin-bottom:3em;
	border-bottom: 1px dotted gray;
}


a:hover {
text-decoration: none;
}

a {
color:#39C;
}

#masthead{
	padding-top:13px;
	background-color:#6cf;
	position:relative;
	border-top-left-radius: 13px;
	border-top-right-radius: 13px;
	-moz-border-radius-topleft: 13px;
	-moz-border-radius-topright: 13px;
	-webkit-border-top-left-radius: 13px;
	-webkit-border-top-right-radius: 13px;

}

#masthead nav{
	margin-top:4%;
	background-color:darkGray;
	border-top:1px solid white;
}


#masthead nav ul{
height: 24px;
padding: 0px;
padding-top: 6px;
padding-left: 6px;
font-size: 1.0em;
width: auto;
}

#masthead nav li{
float: left;
padding: 0px 9px 0px 9px;
margin: 0px 3px;
display: inline;
white-space: nowrap;
line-height: 20px;
border-top-left-radius: 4px;
border-top-right-radius: 4px;
-moz-border-radius-topleft: 4px;
-moz-border-radius-topright: 4px;
-webkit-border-top-left-radius: 4px;
-webkit-border-top-right-radius: 4px;
background-color: #BFBFBF;
}

#masthead nav li.on{
background-color:white;
}
#masthead nav li.on a{
color:black;
}

#masthead nav li a{
float: left;
display: block;
padding: 2px 6px;
font-weight: bold;
color: white;
text-decoration: none;
}

#searchform {
position: absolute;
top: 10px;
right: 10px;
}


#searchbottom{clear:left;margin-top:1em;}
nav#menu{display:none;}
nav#menu li{font-size:120%;}
#searchbottom input, #searchform input {
padding: 4px 6px 4px 23px;
border-radius: 10px;
background: white url(http://www.codestore.net/store.nsf/images/icons/search.png) no-repeat 2px 50%;
-webkit-appearance: none;
border: 0;
border-image: initial;
-webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.4);
-moz-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.4);
box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.4);
}

footer{

}

footer nav{
	clear:left;
	margin: 1em 0;
}
p{
margin: 0.8em 0;
}

.grey, .gray, #side .meta {
	color: #999;
}

img{max-width: 100%;height: auto;}

/* Styles used by TextPad when creating highlighted code */

.TPtext{ color: #000000;}
.TPkeyword1{ color: #0000FF;}
.TPkeyword2{ color: #000080;}
.TPstring{ color: #008080;}
.TPbracket{ color: #FF0000;}
.TPoperator{ color: #000000;}
.TPcomment{ color: #008000;}
.TPnumber{ color: #000000;}


footer{
clear:both;
text-align:center;
border-top: 1px solid #999;
margin: 2em 0px;
padding: 1em 0px;
}

footer p{
clear:left;
}

#side ul#latest li img {
float: left;
margin: 2px 6px 4px 0;
}

#side h4{
	margin: 1.5em 0 0.5em 0;
	font-size: 1.2em;
}

#content{margin-top:2%}

h3.large{
font-size:1.6em;
}
article header h3, article h4{
	font-family: 'Source Sans Pro';
	font-weight: 600;
}

article h4{
	font-size:1.4em;
}

article header h3 a{
	font-size:1.6em;
	line-height:1.3em;
	text-decoration: none;
	color:black;
}

article header h3 time{
	display:block;
	font-size: 1.1em;
	color:gray;
}
header li, footer li{
	list-style-type:none;
	margin:0 1em;
}
header li{
float:left;
}
footer li{display:inline;}
header nav li a{
	color:#fff;
	font-weight:bold;
	text-decoration:none;
}

#twitter_update_list {}

ul#latest li{
	line-height:1.1em;
}

pre.code2 {
padding: 1em;
width: 95%;
overflow: auto;
height: auto;
background-color: #F0F6FC;
border: 1px solid #CCC;
}

#container{margin: 0 auto;max-width:1400px;overflow: hidden;}

footer p, footer p a {
color: #666;
}

#side ul li {
list-style-type: none;
padding: 5px 2px;
clear:left;
}

span.bar{
	display:block;
	height:25px;
	border-top-right-radius: 22px 12px;
	border-bottom-right-radius: 22px 12px;
	-moz-border-radius-topright:  22px 12px;
	-moz-border-radius-bottomright:  22px 12px;
	-webkit-border-top-right-radius:  22px 12px;
	-webkit-border-bottom-right-radius:  22px 12px;
	margin-top:20px;
	margin-bottom:3px;
}

#side span.bar{
	height:12px;
	border-top-right-radius: 22px 6px;
	border-bottom-right-radius: 22px 6px;
	-moz-border-radius-topright:  22px 6px;
	-moz-border-radius-bottomright:  22px 6px;
	-webkit-border-top-right-radius:  22px 6px;
	-webkit-border-bottom-right-radius:  22px 6px;
}

#side #results p{margin-left:0;}

#results{
border:1px solid lightGray;
border-radius:4px;
padding: 1em 0;
background:#f1f1f1;
margin:10px 0;
}
#side #results{
	border:none;
	background:none;
	padding:0;
	padding-left:3px;
}
#results span.choice{
	padding-left:4px;
}
#results span.percentage{
	color:gray;
}

#results p.question{
	text-align:center;
	margin:3px 0;
	color: #555;
	font-size: 1.4em;
}

#side #results p.question{
	text-align:left;
	font-size: 1.1em;
}
	
p.votes{
background-color: darkGray;
border-radius: 5px;
-moz-border-radius:5px;
-webkit-border-radius:5px;
color: white;
padding: 15px;
margin:10px 0 10px 10px;
text-align: center;
min-width: 60px;
float:right;
}

p.votes span.number {
display: block;
font-size: 28px;
font-weight: bold;
}

p.survey-notification{
background: #fcfcfc url(images/icons/chart.png) no-repeat 5px 50% ;
padding:5px;
padding-left:30px;
border:1px solid #f1f1f1;
}

.middle-align-images img{
	border:0;
	vertical-align:middle;
}

/* comments list/form */

#comments, #comments ol, #comments ul, #comments li{
	margin:0;
	padding:0;
	list-style:none;
}

#comments li{
	margin:1.5em 0;
	position:relative;
}

#comments a{color:#000;text-decoration:none;}
#comments a:hover{text-decoration:underline;}
#comments li ul.meta{border-top:2px solid #bbb;}
#comments .meta .author a.normal{font-weight:normal}

#comments .meta li{
	margin:0;
	display:inline;
	color:#777;
	/* breaks IE 6! position:static; what's point of anyway? */
}
 
#comments .meta .image{float:left; margin:4px 6px;}

#comments .meta .author{
	float:left;
	font-size:1.1em;
	color:#000;
	font-weight:bold;
	line-height:34px;
}
	
#comments .meta .date{
	float:right;
	color:#999;
	font-style:italic;
	font-size:80%;
	padding-top:0.8em;
}

#comments .body{
	clear:left;
	padding:15px;
	padding-top:6px;
	border-top:1px solid #eee;
	background:#fff url(images/bg_comments.png) repeat-x; 
}
	
#comments li.owner > ul.meta{
	border-color:#66ccff;
}
 
#comments h2{
 	font-weight:normal;
 	font-size:1.0em;
}
 
dl.form dt{
 	float:left;
 	width:120px;
}

dl.form dd{
 	margin-left:130px;
 	padding-bottom:10px;
} 
 
dl.form dd input.text{
 	padding:3px;
 	width:240px;
 }
 
dl.form dd textarea{
 	padding:5px;
	width:90%;
	font-size:1.2em;
 	height:20em;
}
 
dl.form dd input.button{
	padding:5px;
	font-weight:bold;
}



#side ul#latest li{
	clear:left;
}

#side ul#elsewheres li a{
	color:#000;
}

#side ul#elsewheres li img{
	float:left;
	margin: 2px 6px 4px 0;
	width:16px;
	height:16px;
}

.highlight{
	background-color:#FFFFCC;
}

p#navigation{
	margin:1em 0;
}

#content.roughcut{
	background-image:url(images/rough.gif);
	background-repeat:repeat-y;
}

p.message, p.warning{
	padding: 2em 1em;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
}

p.message{
	border:1px solid #66ccff;
	background-color: #D2F0FF;
}

p.warning{
	border:1px solid #FF0;
	background-color: #FFC;
}

/* INDENTED COMMENTS */

ol.comments {
	padding:0px;
	margin:0px;
	background-color:#fff;	
}

ol.comments li {
	margin-top:2em;
	border:0px;
}

ol.level_1{
	margin:0em;
}

ol#comments ol.level_2, ol#comments ol.level_3, ol#comments ol.level_4, ol#comments ol.level_5, ol#comments ol.level_6,
ol#comments ol.level_7, ol#comments ol.level_8{
	border-left: 1px solid #ddd; 
	padding-left:1.5em;
	margin-left:2em;
}

ol.comments li.indent{
	margin-top:1em;
	padding:0;
}

ol.comments li{
	margin-left:1.5em;
	padding:1.8em;
	color:#000000;
}

ol.comments {
	list-style-image:none;
	list-style-position:outside;
	list-style-type: none; /* decimal upper/lower-alpha or upper-lower/roman */
}

ol.comments div.form p{
	text-align:right;	
}

ol#comments div.form p.reply a{
	
}

ol.comments li form{
	margin: 1em 2em;
}	

#content ol.comments h4.form{
	margin: 0 1em;
}

ol#comments li p a.button{
	padding:7px;
	padding-left: 30px;
	-webkit-border-radius: 4px;
	-moz-border-radius: 4px;
	border-radius:4px;
	text-decoration:none;	
	font-size:12px;
}

ol#comments li p a.button:hover{
	text-decoration:underline;
}

ol#comments li p.reply a{
	background: #eee url(images/backgrounds/reply_button.png) no-repeat top left;
	border:1px solid #ccc;
}

#content ol.comments li p.more a{
	background: #DFF4FF url(images/backgrounds/more_button.png) no-repeat top left;
	border:1px solid #ccc;
	color:#555;	
}	
/* INDENTED COMMENTS */

/* Side Panel type areas in articles */ 

p.sidePanel{
	display		 		 :		 		 block;
	margin		 		 :		 		 0px 40px 0px 30px;
	padding		 		 :		 		 5px;
	background-color		 :		 		 #FFFFE8;
	border-width			 :		 		 1px 0px 1px 0px;
	border-style	 		 :		 		 solid;
	border-color	 		 :		 		 #CC3;
}

p.blog-meta img{
 vertical-align:middle;

}

span.sharing img{
	margin-right:7px;
}

h4#post{
	margin-top:6em;
	border-top: 2px solid gray;
	padding-top:1em;
}

a img{
	border:0;
}

#side #social-icons li{float:left;clear:none; padding: 1px 3px;}

.clear{clear:both;}

#side h4{clear:left;}

#social-icons a, #sharing a{font-family:Social-Icons; font-size:1.6em; text-decoration:none; color:#55BCF0;}

#social-icons li a span, #sharing a span{
	display:none;
}

#social-icons a:hover {
text-shadow: 0 0 0 transparent, 0 1px 1px #A3A2A2;
}

#rockall{float:right;}

/*
	Styles for 768 to 1200px (2 cols)
	This is the default (for non-respondent-ready browsers) so no need for @media line!
	make sure it is listed before the other non-default layouts!
@media screen and (min-width: 768px) and (max-width:1024px){
*/
.col{float:left;width:26%;margin:0 3%;}
#content{float:left;width:67%;clear:left}

.highlight{
	background-color:#ffc;
}

#masthead nav.off-screen{
	display:none;
	background:none;
	border:none;
	margin:0;
}

#masthead nav.off-screen li{
border-radius: 4px;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
background-color:#999;
}

/*-  MEDIA QUERIES */
/* Disable iOS/WinMobile font size changes */
@media screen and (max-width: 600px),
screen and (max-device-width: 480px) {
	html {
		-ms-text-size-adjust: none;
		-webkit-text-size-adjust: none;
	}
}


/*
	Styles for 1200px +++ (3 cols)
*/
@media screen and (min-width: 1200px) {
	#masthead nav li {padding:0 20px;}
}

/*
	Styles for 1024px +++ (3 cols)
*/

@media screen and (min-width: 1024px) {
	.col{float:left;width:18%;margin:0 2%;transition: .25s all ease-in;}
	#content{float:left;width:56%;clear:left;}
	article h3{font-size:110%;}
}

/*
	Styles for 480 to 768px (1 col top - 2 below it)
*/
@media screen and (min-width: 480px) and (max-width: 768px){
	.col{float:left;width:45%;margin:0 2%;}
	#masthead nav li {padding:0 2px;}
	#side{clear:both;}
	#content{width:100%;}
	/* #masthead #menu_surveys{width:0;padding:0;margin:0;transition: all 1s ease-in-out;-webkit-transition: all 1s ease-in-out;} */
}


/*
	Styles from 320 to to 480px (1 col)
*/

@media screen and (max-width: 480px){
	article h3{font-size:90%;}
	body{margin:0;}
	#masthead{border-radius:0;}
	nav#menu{display:block;}
	#searchform{display:none;}
	#rockall{float:none;}
	dl.form dt{float:none;}
 	dl.form dd{
 		width:100%;
	 	margin-left:0;
 	}
	#content, #side, footer{width:90%;padding: 1% 5%;}
	#masthead nav.on-screen{display:none;}
	#masthead nav.off-screen{display:block;float:right;}
	article h3 time{display:block;padding:0;}
	.col{margin:0;}
	dl.form dd textarea {
		height: 10em;
	}
}

@media screen and (min-width:320px) and (max-width: 480px){
	.col{width:100%;}
	#side{clear:left;}
	
	dl.form input.button{
	width:90%;
	}
}

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

/* PRINT ONLY CSS */
@media print{
#masthead, footer, #side
{
   display : none;
}

#content{
	width:100%;
}

.sidePanel{
	display				:		block;
	margin				:		0px 30px 0px 20px;
	padding				:		5px;
	border-width		:		1px 0px 1px 0px;
	border-style		:		solid;
}
}