@media all {
html, #wrap { padding:0; margin:0;}
body { margin:0; padding:0; width:100%; color:#142612; font:500 120%/170% 'Open Sans', Verdana, sans-serif;}
/* #wrap { background:#2aad13 url(images/header_bg_4.gif) repeat-x center top;} */
.clr { clear:both; padding:0; margin:0; width:100%; font-size:0px; line-height:0px;}

#search-box-top { float:right;padding-top:20px;width:400px; }
h1 { font:normal 35px/1.5em "Special Elite", Arial, Helvetica, sans-serif; color:#142612;font-family: cursive;font-stretch: ultra-expanded }
h2 { font:normal 20px/1.5em "Special Elite", Arial, Helvetica, sans-serif; color:#142612;font-family: cursive;font-stretch: ultra-expanded }
code,pre,samp,kbd{font-family: 'Anonymous Pro', Monaco, Menlo, Courier, monospace;}
a { color:#4fa533; text-decoration:underline;}

#header, #content, #top-nav, #footer, #footer, form, #content #contentbar, #content #sidebar { margin:0; padding:0;}

/* Header */
#header { background:#133156; }
#header-inner { margin:0 auto; padding-left:10px; }

/* Features & Ads */
.feature { background:#1e1e08 url(images/footer_bg_2.html) repeat center center;padding:28px;}
.feature-ad { margin:auto;width:728px;height:90px; }
.ad { padding:3px; }

/* Link Units */
.l-unit-x { background-color:#f6fcf4; }
.l-unit-x-inner { margin:auto;width:728px;height:3px;padding:3px; }

/* Menu */
#top-nav { margin:0 auto; padding:0px 0 0; height:37px; float:right;}
#top-nav ul { list-style:none; padding:0; height:37px; float:left;}
#top-nav ul li { margin:0; padding:0 0 0 8px; float:left;}
#top-nav ul li a { display:block; margin:0; padding:8px 20px; color:#ddd; text-decoration:none; font-weight:bold;}
#top-nav ul li.active a, #top-nav ul li a:hover { color:#b3ce1c;}

/* Content */
#content { }
#content-inner { margin:0 auto; padding:10px 0; width:100%; border:none; background:#fff;}
#content #contentbar { margin:0; padding:0; float:right; width:80%;}
#content #contentbar ul li { list-style:square; }
#content #contentbar dl, #content #contentbar blockquote { background:#f5f2f0;padding:10px; }

#content #contentbar .article { margin:0;padding:1%; }
#content #sidebar { font-size:0.8em;padding:0; float:left; width:18%;height:90%;overflow-x:auto;overflow-y:scroll;position:fixed;}
#content #sidebar .widget { margin:0 0 12px; padding:8px 8px 8px 13px;}
#content #sidebar .widget h3 { font-weight:normal;}
#content #sidebar .widget h3 a, #content #sidebar .widget h2 a { text-decoration:none;}
#content #sidebar .widget ul.sub-menu { margin:0; padding:0; list-style:none; color:#0f0d0d;}
#content #sidebar .widget ul.sub-menu li { margin:0;padding:4px 0;}
#content #sidebar .widget ul.sub-menu li a { color:#0f0d0d; text-decoration:none; margin-left:-16px; padding:4px 8px 4px 16px;}
#content #sidebar .widget ul.sub-menu li a:hover { color:#34af36; font-weight:bold; text-decoration:none;}
#content #sidebar .widget ul.sub-menu li.sub-link {padding-left:15px;}

.sub-menu label.header{font:normal 20px/1.5em "ultra-expanded", Arial, Helvetica, sans-serif; color:#4c9b33;}
.sub-menu label.tree-toggler:before{ content:"\25ba\00a0"; font-size:0.7em;vertical-align:middle; } 
.sub-menu label.tree-toggler.open:before { content:"\25bc\00a0"; font-size:0.7em;vertical-align:middle; }
.sub-menu label.tree-toggler{font-weight:bold;}
.sub-menu ul.tree{list-style-type:none;display:none;}
.sub-menu ul.tree.open{display:block;}
.sub-menu ul.sub-menu{display:block;}
.sub-menu ul.sub-menu.tree.closed{display:none;}
.socialLinks {}

/* Footer */
#footer { background:#0d110b;}
#footer-inner { margin:auto; text-align:center; padding:2px;}

/* Forms */
form ol { list-style:none;}
form ol li { display:block; clear:both;}
form ol li label { display:block; margin:0; padding:16px 0 0 0;}
form ol li input.text { width:480px; border:1px solid #c0c0c0; margin:0; padding:5px 2px; height:16px; background-color:#fff;}
form ol li textarea { width:480px; border:1px solid #c0c0c0; margin:0; padding:2px; background-color:#fff;}
form ol li .send { margin:16px 0 0 0;}


/* Home Grid */
#content #contentbar div.index h2 a, div.index h3 a { color:#435643;font-size:1.2em;text-decoration:none;font-family: cursive;font-stretch: ultra-expanded } 
#content #contentbar div.index>ul {
	column-count: 3; /* W3C */
	-webkit-column-count: 3; /* Safari & Chrome */
	-moz-column-count: 3; /* Firefox */
	-ms-column-count: 3; /* Internet Explorer */
	-o-column-count: 3; /* Opera */
	color: #4fa533;
}
#content #contentbar div.index ul a { text-decoration:none; }
#content #contentbar div.index ul li {list-style-type:none;}

/* Tabular data*/
table.tabular{width:100%;border:1px solid #ccc;border-collapse:collapse;text-align:left;font-size:0.9em;}
table.tabular td,table.tabular th{padding:5px;border:1px solid #ccc;}
table.tabular th {background:#ccc;}


/* Code Editors */
.codeEditor { background:#f5f2f0;padding:10px; }
.codeEditor h3:first-child {margin:0;padding:0;}
.codeEditor .source,  .codeEditor .preview .previewFrame {width:48%;min-height:300px;border:1px solid #eee;background:#fff;padding:5px; }
.codeEditor .source { float:left;}
.codeEditor .source .code, .codeEditor .source .code:focus { outline:0px solid transparent; }
.codeEditor .preview .previewFrame { float:right;}
.codeEditorCaption {padding:1px 15px;background:#ebf9e8;color:#65885e;width:37%;float:right;margin:0 0 2em 2em;font-family:Delius;}
.codeEditorCaption h2 {color: darkgreen;}
.codeEditorCaption kbd, .codeEditorCaption samp, .codeEditorCaption code {color: #47ae32;}

span.copy-button {font-size:56px;cursor:pointer;}

/* Override Prism styles */
:not(pre) > code[class*="language-"],
.codeEditor pre[class*="language-"] {
	background: #fff;
}
/* Code Examples */
.example {
width:80%;
background-color:#ebf2ea;
}
.example th {
background-color:#4e9e37;
color:#DEEDD9;
}
.example td {
border:1px solid #080f11;
border-left:0;
vertical-align:top;
}
.example td:first-child {
border-left:1px solid #0E150C;
width:200px;
text-align:center;
}

.exampleCode {
background:#eaeeef;
font-size:15px;
width:1000px;
height:300px;
color:#666;
}
.exampleDisplay {
background-color:white;
width:450px;
padding:10px;
}
textarea.example {
width:600px;
height:200px;
font-size:20px;

font-stretch: semi-expanded;
border:5px double #2d9b4e;
color:#262514;
}

/* Code Generators */
.generator { background:LemonChiffon;clear:left;color:SaddleBrown}
.generator td { padding:0 20px 20px;vertical-align:top; }
.generator td:first-child { background:LightYellow;width:40%; }
.generator h2 {color:#FF8C48;}
.generator div.colorLinks {font-size:small;}
.generatorCustomize th, .generatorPreview th {
text-align:left;
}
.generatorCustomize td, .generatorCustomize th, .generatorPreview th, .generatorPreview td {
padding:3px;
}
.generatorPreview iframe, .generatorPreview textarea {
width:100%;height:200px;background:white;
}


}
@media print
{
#footerblurb, #content #sidebar, #top-nav, #search-box-top, .l-unit-x, .feature, .ad {display:none;}
#content #contentbar {width:100%;}
#content-inner {border:none;}
img {max-width:100%}
}

/* Demo Button */

.button {
  display: inline-block;
  border-radius: 4px;
  background-color: #4e9e37;
  border: none;
  color: #FFFFFF;
  text-align: center;
  font-size: 10px;
  padding: 10px;
 width: 200px;
 
  transition: all 0.5s;
  cursor: pointer;
  margin: 5px;
}

.button span {
  cursor: pointer;
  display: inline-block;
  position: relative;
  transition: 0.5s;
}

.button span:after {
  content: '\00bb';
  position: absolute;
  opacity: 0;
  top: 0;
  right: -20px;
  transition: 0.5s;
}

.button:hover span {
  padding-right: 35px;
}

.button:hover span:after {
  opacity: 1;
  right: 0;
}

/* Code Demo page button */

.button {
    background-color: #4CAF50; /* Green */
    border: none;
    color: white;
    padding: 16px 32px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
    margin: 4px 2px;
    -webkit-transition-duration: 0.4s; /* Safari */
    transition-duration: 0.4s;
    cursor: pointer;
}

.button1 {
    background-color: white; 
    color: black; 
    border: 2px solid #4CAF50;
}

.button1:hover {
    background-color: #4CAF50;
    color: white;
}

.button2 {
    background-color: white; 
    color: black; 
    border: 2px solid #008CBA;
}

.button2:hover {
    background-color: #008CBA;
    color: white;
}

.button3 {
    background-color: white; 
    color: black; 
    border: 2px solid #f44336;
}

.button3:hover {
    background-color: #f44336;
    color: white;
}

.button4 {
    background-color: white;
    color: black;
    border: 2px solid #e7e7e7;
}

.button4:hover {background-color: #e7e7e7;}

.button5 {
    background-color: white;
    color: black;
    border: 2px solid #555555;
}

.button5:hover {
    background-color: #555555;
    color: white;
}
/* Table */

<!-- CSS goes in the document HEAD or added to your external stylesheet -->
<style type="text/css">
table.imagetable {
	font-family: verdana,arial,sans-serif;
	font-size:11px;
color: #c12828;
	border-width: 1px;
	border-color: #4caf50;
	border-collapse: collapse;
}
table.imagetable th {
	background:#4caf50 url('cell-blue.jpg');
	border-width: 1px;
	padding: 8px;
	border-style: solid;
	border-color: #4caf50;
}
table.imagetable td {
	background:#dcddc0 url('cell-grey.jpg');
	border-width: 1px;
	padding: 8px;
	border-style: solid;
	border-color: #4caf50;
}
</style>