.glidecontentwrapper{
position: relative; /* Do not change this value */
width: 100%;
height: 160px; /* Set height to be able to contain height of largest content shown*/
overflow: hidden;
}
/*
	Total wrapper width: 350px+5px+5px=360px
	Or width of wrapper div itself plus any left and right CSS border and padding
	Adjust related containers below according to comments
*/


.glidecontent{ /*style for each glide content DIV within wrapper.*/
position: absolute; /* Do not change this value */
background: white;
padding: 10px;
visibility: hidden;
width: 100%;
}
/*
 Total glidecontent width: 330px+10px+10px=350px
	Or width of wrapper div itself (not counting wrapper border/padding)
*/

.glidecontenttoggler{ /*style for DIV used to contain toggler links. */
width: 360px;
margin-top: 6px;
text-align: center; /*How to align pagination links: "left", "center", or "right"
background: white; /*always declare an explicit background color for fade effect to properly render in IE*/
}
/*
 Total contenttoggler width: 350px+5px+5px=360px
	Or total width of wrapper div (counting wrapper border/padding)
*/

.glidecontenttoggler a{ /*style for every navigational link within toggler */
display: -moz-inline-box;
display: inline-block;
border: 1px solid#d18440;
color: #d18440;
padding: 5px 10px;
margin-right: px;
text-decoration: none;
font-weight:300;
line-height:auto;
border-radius:5px;
-webkit-transition: all 0.3s ease-in-out;
	-moz-transition: all 0.3s ease-in-out;
	-o-transition: all 0.3s ease-in-out;
	-ms-transition: all 0.3s ease-in-out;
	transition: all 0.3s ease-in-out;
}

.glidecontenttoggler a.selected{ /*style for selected page's toggler link. ".selected" class auto generated! */
border:1px solid#4497a5;
color: #4497a5;
}

.glidecontenttoggler a:hover{
border:1px solid#4497a5;
color: #4497a5;
-webkit-transition: all 0.3s ease-in-out;
	-moz-transition: all 0.3s ease-in-out;
	-o-transition: all 0.3s ease-in-out;
	-ms-transition: all 0.3s ease-in-out;
	transition: all 0.3s ease-in-out;
}

.glidecontenttoggler a.toc{ /*style for individual toggler links (page 1, page 2, etc). ".toc" class auto generated! */
}

.glidecontenttoggler a.prev, .glidecontenttoggler a.next{ /*style for "prev" and "next" toggler links. ".prev" and ".next" classes auto generated! */
}












#page {margin:30px auto 100px;width:40%;min-width:800px;min-height:500px}
#page_content {background:#fff;box-shadow:0 1px 5px #ccc;margin-top:20px}
#pageCaption {font-size:24px;font-weight:500;line-height:24px}
#pageDesc {color:#777;margin-top:5px;font-size:90%}

#copyrightBlock {float:right}
#version, #gitHubLink, #downloadLink {color:#fff;background:#4081BE;display:inline-block;padding:0 10px;border-radius:3px;text-decoration:none;font-size:12px;line-height:24px;margin-left:1px}
#downloadLink:hover {background:#3772A8}
#gitHubLink {background:#ccc;color:#555;font-weight:500}
#gitHubLink:hover {background:#aaa;color:#333}
#version {background:transparent;color:#555;font-weight:500}
#version span {margin-left:10px;color:#999;font-size:12px}

.exampleContainer {margin:-1px 0 50px}
.exampleContainer .exampleLive {padding:20px;font-size:14px}
.exampleContainer .exampleLive:after {content:'';clear:both;display:table}
.exampleContainer .exampleLive .exampleLiveTitle {border-left:5px solid #0084ff;margin:-20px -20px 20px;padding:10px 20px 10px 15px;font-size:20px;text-transform:uppercase}
.exampleContainer .exampleCode {background:#2b2f3b;padding:20px;overflow:auto}
.exampleContainer .exampleCode pre {line-height:0}
.exampleContainer .exampleCode code {white-space:pre-line}
.exampleContainer .exampleCode code * {font-family:consolas;font-size:13px}
.exampleContainer .exampleCode code > p {line-height:20px;color:#7993ad;display:inline-block}
.exampleContainer .exampleCode code .tab {padding-left:15px}
.exampleContainer .exampleCode code .tab2 {padding-left:30px}
.exampleContainer .exampleCode code .tab3 {padding-left:45px}
.exampleContainer .exampleCode code .tab4 {padding-left:60px}
.exampleContainer .exampleCode code .tag {color:#97e0e9}
.exampleContainer .exampleCode code .text {color:#fff}
.exampleContainer .exampleCode code .key {color:#bf5c5b}
.exampleContainer .exampleCode code .val {color:#fadf8c}
.exampleContainer .exampleCode code .var {color:#aae997}
.exampleContainer .exampleCode code .var2 {color:#b297e9}


/* btn */
.btn {display:inline-block;cursor:pointer;background:#fff;border:1px solid #bbb;height:34px;padding:6px 12px;font-size:14px;line-height:18px}
.btn.btn-default {}
.btn.btn-default:hover {background:#eee;border-color:#bbb}
.btn.btn-default:focus {background:#ddd;border-color:#bbb}
.btn.btn-primary {background-color:#007ec4;border-color:#005A8C;color:#fff}
.btn.btn-primary:hover {background-color:#158CCF;border-color:#005A8C}
.btn.btn-primary:focus {background-color:#005A8C;border-color:#005A8C}
.btn.btn-default[disabled] {background:#fafafa!important;border-color:#ccc!important;color:#aaa}
.btn.btn-primary[disabled] {background:#3F9DD0!important;border-color:#537FA9!important;color:#ACD3E8;box-shadow:none!important}

.btn.btn-left {float:left;margin:0 5px 0 0!important}


/* tabs */
.tabs_container {padding:10px 5px 0;border-bottom:1px solid #ddd}
.tabs_container:after {content:'';clear:both;display:table}
.tabs_container > .tab {float:left;line-height:40px;cursor:pointer;border-bottom:2px solid transparent;color:#555;margin:0 15px;margin-bottom:-1px;font-size:14px}
.tabs_container > .tab.active {border-color:#007ec4;color:#000}
.tabs_container > .tab:hover {color:#000}
.page_container {}
.page_container > .page {display:none}
.page_container > .page.active {display:block}


@media (max-width: 840px){
#page {width:auto;min-width:0;margin:20px 20px 100px}
}