html { height:100%; }

* { margin:0; padding:0; box-sizing:border-box; }

body {
	font:normal 0.8em 'trebuchet ms', arial, sans-serif;
	background:#F0EFE2;
	color:#000;
}

a { color:#1f8bd3; }

p { padding:0 0 20px 0; line-height:1.7em; font-size:1.2em; }

hr { margin:26px auto; width:98%; border:0; height:0.9px; background:silver;
	background-image:-webkit-linear-gradient(left, silver, #999, #eee);
	background-image:   -moz-linear-gradient(left, silver, #999, #eee);
	background-image:    -ms-linear-gradient(left, silver, #999, #eee);
	background-image:     -o-linear-gradient(left, silver, #999, #eee);
}

pre, code { padding:0 0 20px 0;line-height:1em;color:blue;font:normal 1.1em 'trebuchet ms', arial, sans-serif;letter-spacing:0.8px; }
code { display:block;width:100%;letter-spacing:1px;/*padding:10px;margin-bottom:20px;border:1px solid #ccc;border-radius:3px;*/ }
p textarea { background:#fff;border:1px solid #ccc;padding:10px;border-radius:3px;width:96%;height:auto; }

pre, code {
  font-family: monospace, monospace;
}
pre {
  overflow:auto;
  display:block;
  width:600px;
}
code {
  display: block;
  width:600px;
  word-wrap: normal;
}

.external {
	background:url(images/external.png) center right no-repeat;
	padding-right:10px;
}

img { border:0; }

h1, h2, h4, h5, h6, #logo_text a { color:#7E2451; }

h3 { font-weight:bold; color:#008000; }

h1, h2, h3 { margin:0 0 20px 0; padding:15px 0 5px 0; }

h1 { font:normal 175% 'century gothic', arial, sans-serif; }
h2 { font:normal 150% 'century gothic', arial, sans-serif; }
h3 { font:normal 135% 'century gothic', arial, sans-serif; }

h4 {
	font:normal 120% arial, sans-serif;
	margin:0;
	padding:0 0 5px 0;
}

h5, h6 {
	font:italic 95% arial, sans-serif;
	margin:0;
	padding:0 0 15px 0;
}

blockquote {
	margin:0; 
	padding:0 0 0 20px;
}

ul {
	margin:2px 0 22px 17px;
}

ul li {
	list-style-type:circle;
	margin:0 0 6px 0; 
	padding:5px 0 0 5px;
}

ol {
	margin:8px 0 22px 20px;
}

ol li {
	margin:0 0 11px 0;
}

.snippetbox { display:inline-block;margin:20px;background:white;width:320px;border:1px silver solid;border-radius:3px;padding:30px }

#main, #logo, #menubar, #site_content, #footer {
	margin-left:auto; 
	margin-right:auto;
}

#header {
	background:transparent;
	/*height:163px;*/
}

#logo {
	width:850px;
	position:relative;
	height:80px;
	margin-top:15px;
}

#logo h2 {
	font:normal 300% 'century gothic', arial, sans-serif;
	border-bottom:0;
	margin:0;
}

#logo_text a { 
	text-shadow:1px 1px 1px black; font-size:30px; text-decoration:none; font-family:'century gothic', arial, sans-serif;
}

#logo_text h2 {
	font-size:100%;
	font-style:italic;
	color:#666;
}

#menubar {
	width:854px;
	height:60px;
	padding:0;
	border-left:1px #71706B solid;
	border-right:1px #71706B solid;
	border-top:1.5px solid #555;
	border-top-left-radius:3px;
	border-top-right-radius:3px;
	/* http://colorzilla.com/gradient-editor/#96305e+0,822956+10,822956+90,751749+100 */
	background:#96305e; /* Old browsers */
	background:-moz-linear-gradient(top,  #96305e 0%, #822956 10%, #822956 90%, #751749 100%);
	background:-webkit-linear-gradient(top,  #96305e 0%,#822956 10%,#822956 90%,#751749 100%);
	background:linear-gradient(to bottom,  #96305e 0%,#822956 10%,#822956 90%,#751749 100%);
	filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#96305e', endColorstr='#751749',GradientType=0 );
}

#menu { width:100%; padding:0; margin:5px 0 0 0; text-align:center; }

#menu a {
	letter-spacing:0.1em;
	font:normal 100% arial, sans-serif;
	display:inline-block;
	height:17px;
	margin:9px 0 0 0;
	text-align:center;
	padding:10px 0 6px 0;
	text-align:center;
	color:#FFF;
	text-decoration:none;
	background:transparent;
	width:24%;
} 

#menu #selected {
	height:34px;
	color:#FFF;
	border:1px black solid;
	border-radius:3px;
/* Permalink - http://colorzilla.com/gradient-editor/#1f8bd3+0,1b7aba+10,1b7aba+90,1b61b7+100 */
background:#1f8bd3; /* Old browsers */
background:-moz-linear-gradient(top,  #1f8bd3 0%, #1b7aba 10%, #1b7aba 90%, #1b61b7 100%); /* FF3.6-15 */
background:-webkit-linear-gradient(top,  #1f8bd3 0%,#1b7aba 10%,#1b7aba 90%,#1b61b7 100%); /* Chrome10-25,Safari5.1-6 */
background:linear-gradient(to bottom,  #1f8bd3 0%,#1b7aba 10%,#1b7aba 90%,#1b61b7 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#1f8bd3', endColorstr='#1b61b7',GradientType=0 );
}

#site_content {
	width:854px;
	overflow:hidden;
	margin:0 auto;
	padding:0 24px 20px 20px;
	background:#F6F5ED;
	border:1px silver solid;
	border-top:none;
	/*display:table-row;*/
	vertical-align:top;
} 

.sidebar {
	width:210px;
	/*float:right;*/
	padding:20px 15px 20px 15px;
	display:table-cell;
	vertical-align:top;
}

.sidebar ul {
	width:198px;
	margin:2px 0 22px 0px;
}

.sidebar ul {
	margin:0.75em 0;
	padding:0 .9em;
	list-style:none;
}

.sidebar ul li {
	list-style-type:none;
}

#content {
	text-align:left;
	display:table-cell;
	vertical-align:top;
}

#content ul {
	margin:2px 0 22px 0px;
}

#content ul li {
	list-style-type:circle;
	margin:0 0 6px 15px; 
	padding:0 0 4px 5px;
	line-height:1.5em;
}

#footer {
	width:898px;
	font:normal 80% 'lucida sans unicode', arial, sans-serif;
	height:18px;
	padding:6px 0 7px 0;
	text-align:center; 
	background:transparent;
	color:#444;
	letter-spacing:0.1em;
}

#footer a { color:#444; }

#login { display:block; }
#login form input { background:#F0EFE2; width:60px; border:0; float:right; display:block; }
#login form input:focus { outline-width:0; background:#F0EFE2; }
#login a { border:0; float:right; display:block; border-right:1px dotted #ddd; width:60px; height:20px; text-decoration:none; cursor:default; }

#search_form { display:block;float:right;padding-top:10px; }

#search_field {
	color:#555; 
	border:1px silver solid;
	border-radius:3px;
	width:134px; 
	padding:6px 4px 4px 6px; 
	font:100% arial, sans-serif;
	letter-spacing:1px;
}

#submit_button, #copybutton {
	padding:5px 5px 4px 5px;
	color:#555;
	margin:0;
	border:1px silver solid;
	border-radius:3px;
	background:#f8f8f8;
	box-shadow:inset 1px 5px 8px #e9e9ea,inset -1px -7px 5px #ccc;
	letter-spacing:1px;
}
	
table {
	margin:10px 0 30px 0;
}

table tr th, table tr td {
	background:#3B3B3B;
	color:#FFF;
	padding:7px 4px;
	text-align:left;
}
	
table tr td {
	background:#F0EFE2;
	color:#47433F;
	border-top:1px solid #FFF;
}

/* ********************************************* */

@media all and (max-width:900px) {
#footer { width:100%; }
#menubar { width:100%; border:0; border-top-left-radius:0; border-top-right-radius:0; padding:0; margin:0; }
#logo { width:100%; border:0; }
#site_content { border:0;width:100%; }
#content { width:auto; }
.sidebar { width:210px; }
#search_form { margin-right:2%; }
}

@media all and (max-width:700px) {
.snippetbox,#logo,#menubar,#site_content,#footer {width:100%;}
#menu #selected {border:0;background:transparent;}
.sidebar {display:block;width:100%;}
.sidebar ul {width:100%;-webkit-column-count:4;-moz-column-count:4;column-count:4;column-fill:balance;-moz-column-fill:balance;-webkit-column-fill:balancepadding:0 3px 0 20px;}
}

@media all and (max-width:700px) {
#logo_text a, #logo_text h2 { width:100%;text-align:center; display:block; }
#logo_text h2 { font-size:90%; }
#logo_text a { font-size:20px; }
}