:root{
--primary-font-family: "Athiti", sans-serif;
--secondary-font-family: "Roboto", sans-serif;
--third-font-family: "Montserrat", sans-serif;
}


html{font-family:sans-serif;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%;}

.subscriber-container{
    height:100px; background-color:rgba(230,232,250,1); float:left; width:67%; margin:70px 0px 20px 0px;   position:relative; margin-left:17%;
    
}
.subContainer{
    width:270px;
    height:auto;
    position:absolute;
    margin:0 auto;
    left:0px;
    right:0px;
    top:32px;

}


.gradLink{
    display: inline-block;
    padding: 6px 10px;
    background: #646464;
    border: 1px solid #fff;
    color: #fff;
    text-decoration: none;
    font-family: athiti,sans-serif;
    border-radius: 30px;
    background-image: linear-gradient(90deg, rgba(76,175,80,1), rgba(172,175,80,1));
    font-size: 17px;
}


.gradLink:hover{
border: 1px solid #646464;
color:white;
}

.helpContainer{
    margin-top: 25px;
    text-align: center;
    height: 130px;
    width: 106.6%;
    float: left;
    border: 1px solid #dadce0;
    position: relative;
    left: -3.3%;
    top: 33px;
    border-width: 1px 0px 0px 0px;
}

.helpContainer p{
	top:35px;
	font-family:athiti,sans-serif!important;
	font-size:20px;
}


.yesHelpful, .noHelpful{
	display:inline-block;
	width:65px;
	height:40px;
	border:1px solid rgba(200, 200, 200, 1);
	outline:0px;
	background-color:white;
	border-radius:4px;
	cursor:pointer;
	font-size:20px;
	font-family:athiti,sans-serif!important;
}
.yesHelpful:hover, .noHelpful:hover{
	border-color:rgba(76,175,80,1);
	color:rgba(76,175,80,1);
}


.emailSubscriberContainer{
	background-color:white;
	height:200px;
	width:90%;
	position:relative;
}

.emailSubscriberContainer p{
font-family:Athiti, sans-serif;
text-align:center;
font-size:20px;
}

.emailInput{
    outline: none;
    padding: 5px;
    width: 90%;
    font-size: 16px;
    border: 1px solid rgba(200,200,200,0.5);
    position: relative;
    top: 30px;
    left: 5%;
	font-family:Athiti, sans-serif;
}
.emailSubscribe{
	width:94%;
	background-color:rgba(76,175,80,1);
	border:2px solid rgba(76,175,80,1);
	color:white;
	padding:3px 6px;
	outline:0px;
	position:relative;
	left:0%;
	font-size:15px;
	top:30px;
	font-family:Athiti, sans-serif;
}
.emailSubscribe:hover{
	background-color:rgba(100,100,100,1);
	border:2px solid rgba(100,100,100,1);
	cursor:pointer;
}


#subscribtionStatusOnRight, .subscribtionStatus{
    position:absolute;
    bottom:2px;
    text-align:center;
}

#subscribtionStatus{
    position:absolute;
    bottom:-70px;
    text-align:center;
}
.sidebarHeading{
    padding:0px 5px; background-color:rgba(76,175,80,1); margin:0px; color:white; font-family:athiti,sans-serif!important; color:white;font-size:25px
}
.subscriptionEmail{
	outline:none; position:absolute; padding:5px; width:190px; height:37px; font-size:16px; border-radius:4px; border:0px; position:absolute;
}
.subscriberButton{
	padding:9px; background-color:rgba(76,175,80,1); color:white; border:none; outline:none; position:absolute; right:0px; top:0px;cursor:pointer;
	font-family:athiti,sans-serif;
}
.subscriberButton:hover{
	background-color:rgba(100,100,100,1);
}
.subsribtionStatus{
    text-align:center;
    
}
.subsribtionStatus p{
    font-size:20px;
    font-family:'Athiti', sans-serif !important;
}


.browserSupport table, .browserSupport table td{
border:1px solid rgba(210,210,210,0.7);
border-collapse:collapse;
}
.browserSupport table td p, .browserSupport table td p{
text-align:center;
color:#170;
}
.browserSupport table{
border-radius:4px;	
}

.breakOuterBlock{
text-align:center; background-color:rgba(220,220,220,0.8); border-width:1px 0px; padding:60px 20px;    
}
.breakInnerBlock{
text-align:center; background-color:white; border-width:1px; padding:20px;
}


.syntax{
width:100%;
box-shadow:-3px -3px 10px rgba(210,210,210,0.7), 3px 3px 10px rgba(210,210,210,0.7);
padding:7px;
float:left;
height:auto;
margin-bottom:20px;
}

.syntax p{
font-family:monospace;
font-size:16px;
}




body{margin:0;}
article,
aside,
details,
figcaption,
figure,
footer,
header,
main,
menu,
nav,
section,
summary{display:block;}
audio,
canvas,
progress,
video{display:inline-block;vertical-align:baseline;}
a{background-color:transparent;-webkit-transition:all 0.3s linear 0s;-moz-transition:all 0.3s linear 0s;-o-transition:all 0.3s linear 0s;transition:all 0.3s linear 0s;}
code{font-size:16px}
h1{font-size:36px;margin:0.50em 0;font-weight:500 !important;color:rgb(10,10,10);}
h2{font-size:30px;margin:0.50em 0;}
h3{font-size:24px;font-weight:normal;margin:1em 0em 0.3em 0em;}
h4{font-size:20px;font-weight:normal;margin:1.5em 0em 0.50em 0em;}
h5{font-size:15px;font-weight:normal;}
h6{font-size:16px;font-weight:normal;}
caption{caption-side:bottom;font-family:athiti, sans-sarif;font-size:18px;}
caption p{font-family:athiti, sans-sarif;font-size:18px;}
.heading3{position:absolute;font-size:16px;top:-17px;left:-1px;padding:2px;border-radius:2px;box-shadow:1px 1px 2px rgba(200,200,200,1);}
p{margin:15px 0.2em;padding:0;font-family:var(--secondary-font-family);font-size:17px;line-height:30px;color:rgba(20,20,20,1);clear:both;letter-spacing:0.2px;}
hr{background-color:rgba(230,230,230,1);margin-top:1.5em; border: 0.5px solid rgba(240,240,240);}
#page{max-width:2660px;width:100%;margin:0 auto;}
i.try-style{font-size:22px;display:inline-block;font-family:FontAwesome;font-style:normal;font-weight:normal;line-height:1;-webkit-font-smoothing:antialiased;}
a i.try-style-block{font-size:15px;background-color:rgba(100,100,100,1);color:rgba(255,255,255,1);
border:1px solid rgba(100,100,100,1);padding:6px;float:right;display:inline-block;font-family:FontAwesome;font-style:normal;font-weight:normal;line-height:1;-webkit-font-smoothing:antialiased;position:absolute;right:5px;bottom:5px;box-shadow:2px 2px 2px rgba(180,180,180,0.6), 3px 3px 2px rgba(150,150,150,0.5) inset;}
a i.try-style-block:hover{background-color:rgba(255,255,255,1);color:rgba(100,100,100,1);}
a i.result-style-block{font-size:15px;color:rgba(100,100,100,1);padding:6px;border-radius:4px;float:right;display:inline-block;font-family:FontAwesome;font-style:normal;font-weight:normal;line-height:1;-webkit-font-smoothing:antialiased;position:absolute;right:5px;bottom:3px;box-shadow:2px 2px 2px rgba(180,180,180,0.6), 3px 3px 2px rgba(150,150,150,0.5) inset;}
a i.result-style-block:hover{color:rgba(255,255,255,1);background-color:rgba(100,100,100,1);}
i.try-style-block-insert{    font-size: 22px;
    background-color: rgba(100,100,100,1);
    color: rgb(255,255,255);
    padding: 8px;
    position: relative;
    line-height: 1.05;
    display: inline-block;
    font-family: FontAwesome;
    font-style: normal;
    font-weight: normal;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
    
}
i.try-style-block-insert:hover{box-shadow:3px 3px 5px 0px rgba(200,200,200,1);}

.code-example{width:100%;background-color:rgb(210,210,210);margin:auto;border-width:5px 5px 0px 5px;border-style:solid;border-color:rgb(210,210,210);height:40px;border-radius:15px 15px 0px 0px;padding:0px;}
span.style-try{font-family:arial;font-size:14px;font-weight:900px;}
body,
button,
input,
select,.relevantTags
textarea{color:#404040;font-family:arial;font-size:16px;font-size:0.8rem;line-height:1.5;}
input,textarea{
    font-family:athiti,sans-serif;
    font-size:17px;
}
input::placeholder, textarea::placeholder{
font-family:athiti,sans-serif;    
color:rgba(180,180,180,1);
}

input::-webkit-input-placeholder, textarea::-webkit-input-placeholde { /* WebKit, Blink, Edge */
  font-family:athiti,sans-serif; 
  color:rgba(180,180,180,1);
}
input::-moz-placeholder, textarea::-moz-placeholder { /* Mozilla Firefox browser */
  font-family:athiti,sans-serif;  
  color:rgba(180,180,180,1);
}
input::-ms-input-placeholder, textarea::-ms-input-placeholder { /* For Microsoft */
  font-family:athiti,sans-serif;  
  color:rgba(180,180,180,1);
}

h1,
h2,
h3,
h4,
h5,
h6{clear:both;font-family:athiti,sans-serif!important;color:#000;font-weight:normal; text-shadow:1px 1px 1px rgba(200,200,200,1);}
ul{list-style-type:bullet;font-family:var(--secondary-font-family);font-size:15px;color:rgb(0,0,0);font-weight:normal;padding:0px 30px;}
img{border:1px solid black;margin:0px 2px;-webkit-margin:0px 2px;}
a{color:rgba(50,50,50,1);text-decoration:underline;font-weight:600;}
a:hover,
a:active{color:rgba(0,0,0,0.9);outline:0;}
html{box-sizing:border-box;}
*,
*:before,
*:after{box-sizing:inherit;}
header .codingb-branding{padding:10px;float:left;width:45%;}
header .codingb-branding .codingb-title{font-family:'Padauk', sans-serif;font-size:30px;margin:0;word-wrap:break-word;font-weight:900;}
header .codingb-branding .codingb-title a{color:rgba(76,175,80,1);text-decoration:none;-webkit-transition:all 0.4s linear 0s;-moz-transition:all 0.4s linear 0s;-o-transition:all 0.4s linear 0s;transition:all 0.4s linear 0s;font-family:athiti,sans-serif;}
header .codingb-branding .codingb-title a:hover{color:rgba(76,175,80,1);}
header .codingb-branding .codingb-description{text-align:left;color:#222222;font-size:14px;margin:0;padding:0 0 10px 5px;}
.site-header{border-top:1px solid #7A7A7A;background-repeat:no-repeat;background-size:cover;background-position:center;}
.advertisement{margin:10px 10px 10px 0px;width:42%;height:90px;float:right;box-shadow:2px 2px 5px 0px rgba(210,210,210,0.8), -2px -2px 5px 0px rgba(210,210,210,0.8);}
.clear:before,
.clear:after,
.entry-content:before,
.entry-content:after,
.site-header:before,
.site-header:after,
.site-content:before,
.site-content:after,
.site-footer:before,
.site-footer:after{content:"";display:table;table-layout:fixed;}
.clear:after,
.entry-content:after,
.site-header:after,
.site-content:after,
.site-footer:after{clear:both;}
.topic-title{margin-bottom:0;}
.primary{
    height: auto;
    float: left;
    width: 67%;
	margin-left:17%;
    padding: 0% 2% 2% 2%;
    background-color: white;
    position:relative;
    top:53px;
    border: solid #dadce0;
    border-width: 0px 1px 1px 1px;
    min-height:1200px;
}
  
#content main{height:auto;float:left;width:100%;padding:0%;background-color:white;border-radius:5px;}
#content main h1,h2,h3,h4,h5{font-family:athiti,sans-serif!important;}
main{word-wrap:break-word;}
main header,
main header h1{padding:0;margin:0;font-weight:semi-bold;font-size:26px;font-family:athiti,sans-serif!important;}
main{background:#FFFFFF;}
#togglebox{display:none;}
div.mobilesidemenu{	
	overflow:auto;
	position: fixed;
	height: 93.5%;
	width: 17%;
	overflow:auto;
	word-wrap: break-word;
	top:53px;
}

#msidemenu{width:100%;float:left;background-color:rgba(255,255,255,1);}
#msidemenu ul{list-style-type:none;margin:0;padding:0;background-color:rgb(255,255,255);}
#msidemenu ul li a{display:block;padding:6px 10px;text-decoration:none;font-size:15px;font-weight:normal;font-family:var(--secondary-font-family);color:black; border-bottom:1px solid #f4f4f4;}
#msidemenu ul li a::before{font-size:12px;margin-right:5px;margin-left:2px;content:'\2713';}
#msidemenu ul li a:hover{
    background-color:rgba(76,175,80,1);
    color:white;
}

#mobileLogoDesc{
    color: white;
    text-decoration: none;
    font-family: athiti,sans-serif;
    border: 1px solid white;
    padding: 6px;
    border-radius: 4px;
}
.mobilesidemenu li a{color:black;}
aside ul li a:hover{background-color:#F0F0F0; color:white;text-decoration:none;}
h2.widget-title{position:fixed;background-color:rgba(76,175,80,1);padding:5px;width:18.53%;color:white;font-weight:bold;font-size:15px;font-family:Oswald, sans-serif;border:1px solid rgba(76,175,80,1);margin-top:-40px;border-radius:10px 10px 0px 0px;}
.navigation{  
  z-index:1;
  width:100%;
  height: 50px;
max-width:1200px;
display:flex;
flex-flow:row wrap;
background-color:#fbfbfb;    
}

.logoContainer{
width:50px;	
}

img{
border:0px;    
}

.brand{display:none;position:absolute;padding-left:50%;line-height:50px;font-size:1.4em;}
.brand a,
.brand a:visited{color:#ffffff;text-decoration:none;}
.nav-container{max-width:1000px;margin:0 auto;margin-left:220px;	}
nav{margin:0px;float:left;}
nav ul{list-style:none;margin:0;padding:0;}
nav ul li{float:left;position:relative;}
nav ul li a,
nav ul li a:visited{font-family:athiti,sans-serif!important;display:block;padding:0 18px;line-height:50px;color:rgba(100,100,100,1);text-decoration:none;font-size:18px; background-color:#fbfbfb;}
nav ul li a:hover,
nav ul li a:visited:hover{background-color:#d0d0d0;text-decoration:none;color:rgba(100,100,100,1);}
nav ul li a:not(:only-child):after,
aside ul li a:visited:not(:only-child):after{padding-left:4px;content:'\025BE';}
nav ul li ul{position:absolute; display:none;z-index:1; 
    border: solid rgba(230,230,230,1);
    border-width: 3px 1px 1px 1px;}
nav ul li ul li{float:none;min-width:190px;}
nav ul li ul li a{padding:10px;line-height:20px; color:rgb(100,100,100);
background-color:#fbfbfb;}
nav ul li:hover ul{
	display:block;
}

.nav-dropdown{margin-top:-25px;position:absolute;display:none;z-index:1;box-shadow:0 3px 12px rgba(0, 0, 0, 0.15);}
.nav-mobile{display:none;position:absolute;top:0;right:0;background:rgba(100,100,100,1);height:50px;width:50px;}
#nav-toggle{position:absolute;left:10px;top:12px;cursor:pointer;padding:10px 35px 16px 0px;}
#nav-toggle span,
#nav-toggle span:before,
#nav-toggle span:after{cursor:pointer;border-radius:1px;height:5px;width:35px;background:#ffffff;position:absolute;display:block;content:'';transition:all 300ms ease-in-out;-webkit-transition:all 300ms ease-in-out;}
#nav-toggle span:before{top:-10px;}
#nav-toggle span:after{bottom:-10px;}
#nav-toggle.active span{background-color:transparent;}
#nav-toggle.active span:before, #nav-toggle.active span:after{top:0;}
#nav-toggle.active span:before{transform:rotate(45deg);-webkit-transform:rotate(45deg);-webkit-transform-origin:center;}
#nav-toggle.active span:after{transform:rotate(-45deg);-webkit-transform:rotate(-45deg);-webkit-transform-origin:center;}
@media screen and (min-width:800px){.nav-list{display:block !important;}
}
.codingb-footer{margin-left:17%;width:67%;float:left;height:250px;clear:both;margin-bottom:1%;background-color:#fff;border:1px solid #dadce0;}
div.div1{float:left;width:33.33%;height:100px;background-color:rgb(200,200,200);border-right:1px solid rgb(200,200,200);}
div.div2{float:left;width:33.33%;height:100px;background-color:rgb(200,200,200);border-right:1px solid rgb(200,200,200);}
div.div3{float:left;width:33.33%;height:100px;background-color:rgb(200,200,200);}
div.footer-description{height:100%;width:100%;text-align:center;padding:8px;line-height:1.5;color:rgb(10,10,10);}
.navbar-fixed{background:rgba(76,175,80,1);top:0;position:fixed;width:100%;z-index:1}
.aside-fixed{top:50px;position:fixed;width:100%; }
pre.coding-style{margin-bottom:10px;margin-top:1px;height:auto;width:100%;font-size:15px;white-space:pre-wrap;white-space:-moz-pre-wrap;white-space:-pre-wrap;white-space:-o-pre-wrap;word-wrap:break-word;padding:6px;line-height:1.35;border-bottom:1px solid rgba(240,240,240,1);}
pre.coding-stylew{margin-bottom:10px;margin-top:1px;height:auto;width:100%;font-size:15px;white-space:pre-wrap;white-space:-moz-pre-wrap;white-space:-pre-wrap;white-space:-o-pre-wrap;word-wrap:break-word;padding:6px;line-height:1.35;}
.main-box{position:relative;width:100%;max-height:auto;border-radius:0px;border:3px solid rgb(210,210,210);margin:auto;overflow:auto;height:auto;}
.resultbox{width:100%;height:auto;min-height:200px;font-size:14px;box-shadow:-3px -3px 10px rgba(210,210,210,0.7),3px 3px 10px rgba(210,210,210,0.7);padding:30px 10px 30px 10px;margin-top:25px;margin-bottom:25px;line-height:1.4;position:relative;display:grid;}
.resultboxw{width:100%;height:auto;min-height:200px;font-size:14px;padding:30px 10px 30px 10px;line-height:1.4;position:relative;border-left:1px solid rgba(210,210,210,1); margin:25px 0px;display:grid;}

.stylish-block-container{
    position: relative;
    margin: 25px 0px;
    width: 100%;
    box-shadow:-3px -3px 10px rgba(210,210,210,0.7), 3px 3px 10px rgba(210,210,210,0.7);
    display:grid;
}
.stylish-block{width:50%;height:auto;font-size:15px;white-space:pre-wrap;white-space:-moz-pre-wrap;white-space:-pre-wrap;white-space:-o-pre-wrap;word-wrap:break-word;padding:30px 10px 30px 10px;margin-top:25px;margin-bottom:25px;line-height:1.4; 
    float: left;}

.result-image-container{
    width: 50%;
    height: auto;
    float: left;
    position:absolute;
    right:0px;
    top:0px;
    position:absolute;
}
figure.caption-image-container{
    float:right;
    margin:0px 0px 35px 0px;
}
figure.caption-image-container img{
    border:0px;
    margin:0px;
}
figure.caption-image-container figcaption{
    text-align:center;
    font-size:18px;
    font-family:athiti, sans-serif;
}

@media screen and (max-width: 682px){
    
    .stylish-block{width:100%;height:auto;font-size:15px;white-space:pre-wrap;white-space:-moz-pre-wrap;white-space:-pre-wrap;white-space:-o-pre-wrap;word-wrap:break-word;padding:30px 10px 30px 10px;margin-top:25px;margin-bottom:25px;line-height:1.4; 
    float: left;}
    
    .gradLink{
        display:none;
    }

.result-image-container{
    width: 100%;
    height: auto;
    float: left;
    position:static;
}
figure.caption-image-container{
    float:left;
    position:static;
    margin-bottom:30px;
}
figure.caption-image-container img{
    border:0px;
    margin:0px;
}

}
.static-block{width:100%;height:auto;min-height:70px;border:3px solid rgb(210,210,210);font-size:14px;white-space:pre-wrap;white-space:-moz-pre-wrap;white-space:-pre-wrap;white-space:-o-pre-wrap;word-wrap:break-word;box-shadow:-3px -3px 10px rgba(210,210,210,0.7), 3px 3px 10px rgba(210,210,210,0.7);
padding:5px;margin:25px 0px;}
.note{width:100%;border-left:5px solid rgba(255,0,0,0.5);background-color:rgba(255,0,0,0.1);height:auto;margin:15px 0px;padding:5px;display:grid;}
.note p{font-size:14px;}
.tip{border-left:5px solid rgb(96,139,196);background-color:rgba(96,139,196,0.2);height:auto;padding:5px;margin:15px 0px; display:grid;}
.tip p{font-size:14px;}
#next{text-decoration:none;padding:7px 24px 7px 24px;background-color:rgba(240,240,240,1); float:right;margin-top:8px;font-size:15px;border:1px solid rgba(240,240,240,1);border-radius:1px;line-height:1.2;
}
#previous{text-decoration:none;padding:7px 24px 7px 24px;background-color:rgba(240,240,240,1);float:left;margin-top:8px;font-size:15px;border:1px solid rgba(240,240,240,1);border-radius:1px;line-height:1.2;}
#previous span{
font-size: 22px;
font-family: athiti,sans-serif!important;
color: rgb(120,120,120);    
}

#next span{
font-size: 22px;
font-family: athiti,sans-serif!important;
color: rgb(120,120,120);    
}
#next:hover,#previous:hover{box-shadow:5px 5px 10px 0px rgba(200,200,200,1);}
.styled-table{border:1px solid rgba(230,230,230,0.7);border-collapse:collapse;width:100%;overflow:auto;}
.styled-table th, .styled-table td{border:1px solid rgba(190,190,190,1);font-family:var(--secondary-font-family);border-bottom:none;border-top:none;}
.styled-table thead th{background-color:rgba(76,175,80,1);color:white;padding:10px;font-size:15px;border:1px solid rgba(76,175,80,1);border-right:1px solid rgb(190,190,190);}
.styled-table tbody td{font-size:16px;padding:5px;}
.styled-table tbody td a{font-size:16px;font-family:Alegreya,Arvo,Bitter, serif;}
tr.border-bottom{border-bottom:1px solid rgb(200,200,200);}
.attributes-table{border:1px solid rgba(230,230,230,0.7);border-collapse:collapse;width:100%;overflow:auto;}
.attributes-table th, .attributes-table td{border:1px solid rgb(190,190,190);font-family:var(--secondary-font-family);border-bottom:none;border-top:none;}
.attributes-table thead th{background-color:rgba(76,175,80,1);color:white;padding:10px;font-size:16px;border:1px solid rgba(76,175,80,1);border-right:1px solid rgb(190,190,190);}
.attributes-table tbody td{font-size:16px;padding:5px;border-bottom:1px solid rgb(190,190,190);}
.attributes-table tbody td a{font-size:16px;font-family:var(--secondary-font-family); color:rgba(76,175,80,1);}
pre.insertcell{font-size: 15px;
    padding: 8px 8px 18px 8px;
    margin: 0px;
    border: 1px solid rgb(210,210,210);
    background-color: rgb(250,250,250);
    white-space: pre-wrap;
    white-space: -moz-pre-wrap;
    white-space: -pre-wrap;
    white-space: -o-pre-wrap;
    word-wrap: break-word;
    position: relative;}
    
  pre.insertcell a{
    text-decoration: none;
    position: absolute;
    right: 0px;
    bottom: 0px;
    }
.demobox{width:100%;height:auto;border:2px solid rgb(210,210,210);border-top:50px solid rgb(210,210,210);border-radius:10px 10px 0px 0px; margin:25px 0px;}
.attributes , th, td{border:1px solid black;border-collapse:collapse;}
.attributes a{padding:10px 16px;display:block;}
.attributes a:hover{transition:all .4s ease-in-out;-webkit-transition:all .4s ease-in-out;background-color:rgba(150,150,150,0.3);}
.tags , th, td{border:1px solid black;border-collapse:collapse;}
.tags a{padding:10px 16px;display:block;}
.tags a:hover{transition:all .4s ease-in-out;-webkit-transition:all .4s ease-in-out;background-color:rgba(150,150,150,0.3);}
.rightside{width:16%;height:auto;float:left;margin:auto; margin-top:53px;}
.rightSideAd{width:100%;height:600px;float:left;margin:5px auto;}
.innerAd{
    width: 100%;
    height: auto;
}
.right-side-nav{width:90%;height:auto;float:left;text-align:center;margin:0 auto; margin-left:5%;}
#right-side-nav{width:90%;}
#right-side-nav ul{width:98%;list-style-type:none;display:block;padding:10px;box-shadow:1px 1px 10px 0px rgba(230,230,230,0.5), -1px 0px 10px 0px rgba(230,230,230,0.5);margin:10px auto;}
#right-side-nav ul li{display:block;}
#right-side-nav ul li a{padding:2px;display:block;font-size:16px;color:rgb(10,10,10);font-family:Alegreya, Arvo, Bitter, serif;font-weight:normal;text-decoration:none;}

#right-side-nav ul li a:hover{background-color:transparent;text-decoration:underline;}
.bottom-ad{width: 100%;
height: 250px;
margin: 5px 5px;
display: flex;
flex-flow: wrap row;
place-content: space-between;}
@media screen and (min-width:400px){.bottom-right-ad{width:auto;
height:250px;
width:300px;
margin-left:1%;margin-right:1%;}
}
@media screen and (max-width:400px){.bottom-right-ad{width:auto;
height: 250px;
width:300px;margin-left:1%;margin-right:1%;}
}
.bottom-left-ad{width:auto;
height: 250px;
width:300px;margin-left:1%;margin-right:1%;}
.bottom-side-tags-container{width:350px;box-shadow:1px 1px 2px 2px rgba(210,210,210,0.5), -1px 0px 2px 2px rgba(210,210,210,0.5);height:300px;margin:auto;}
#bottom-side-tags{width:100%;height:auto;float:left;}
#bottom-side-tags ul{list-style-type:none;display:block;float:left;padding:5px 10px;}
#bottom-side-tags ul li{display:block;}
#bottom-side-tags ul li a{display:block;text-decoration:none;font-size:14px;color:rgb(10,10,10);font-family:var(--secondary-font-family);font-weight:normal;}
#bottom-side-tags ul li a:hover{border-left:none !important; background-color:rgb(255,255,255) !important;color:rgb(10,10,10);text-decoration:underline;}
.icon-material{float:left;}
.icon-material ul{list-style-type:none;padding-left:20px;}
.icon-material ul li{float:left;}
.social:hover{-webkit-transform:scale(1.1);-moz-transform:scale(1.1);-o-transform:scale(1.1);}
.social{-webkit-transform:scale(0.8);-moz-transform:scale(0.8);-o-transform:scale(0.8);-webkit-transition-duration:0.5s;-moz-transition-duration:0.5s;-o-transition-duration:0.5s;}
#social-fb{color:#5C6465;}
#social-tw{color:#5C6465;}
#social-gp{color:#5C6465;}
#social-fb:hover{color:#3B5998;}
#social-tw:hover{color:#4099FF;}
#social-gp:hover{color:#d34836;}
#social-em:hover{color:#f39c12;}
@media screen and (max-width:1030px){
    
.helpContainer{
width:100%;
left:0px;
}



.rightSideAd{
display:none;    
}

#websocial{
margin-right: 32.5%;  
}
    
.subscriber-container{
	width:100%; height:100px; float:left; margin-left:0%; width:100%; margin-bottom:-3px;
}
.subscriberPart1, .subscriberPart2{
	width:50%; height:100%; float:left;
}
header .codingb-branding{padding:10px;float:left;width:45%;}
header .codingb-branding .codingb-title{font-family:Oswald, sans-serif;font-size:40px;margin:0;word-wrap:break-word;font-weight:900;}
header .codingb-branding .codingb-title a{color:rgba(76,175,80,1); font-family: athiti,sans-serif;text-decoration:none;-webkit-transition:all 0.4s linear 0s;-moz-transition:all 0.4s linear 0s;-o-transition:all 0.4s linear 0s;transition:all 0.4s linear 0s;}
header .codingb-branding .codingb-title a:hover{color:rgb(11, 117, 66);}
header .codingb-branding .codingb-description{text-align:left;color:#222222;font-size:16px;margin:0;padding:0 0 10px 5px;}
.site-header{display:none;border-top:1px solid #7A7A7A;background-repeat:no-repeat;background-size:cover;background-position:center;}
.primary{height:auto;float:left;width:100%;padding:2%;background-color:white;border-radius:5px; margin-left:0%;}
.rightside{width:100%;height:auto;float:left;margin-top:90px;}


#content main{height:auto;width:100%;background-color:white;border-radius:5px; }
#content main h1,h2,h3,h4,h5{font-family:Alegreya, Arvo, Bitter, serif;}
main{word-wrap:break-word;}
main header,
main header h1{padding:0;margin:0;font-weight:semi-bold;font-size:26px;font-family:athiti,sans-serif!important;}
main{background:#FFFFFF;border-radius:10px;}
div.mobilesidemenu{		margin-top:100px;
	position:fixed;
	width: 0px;
	overflow:auto;
	border:none;
	left:0px;
	top:0px;
    z-index:1;
}
h2.widget-title{display:none;margin-left:-4px;position:fixed;background-color:rgba(76,175,80,1);padding:5px;width:100%;color:white;font-weight:bold;font-size:15px;font-family:Oswald, sans-serif;border:1px solid rgba(76,175,80,1);margin-top:-5px;border-radius:10px 10px 0px 0px;}
body{-webkit-animation:bugfix infinite 1s;}
@-webkit-keyframes bugfix{from{padding:0;}
to{padding:0;}
}
.mobilesidemenu{width:0;}
.mobilesidemenu, .mobilesidemenu *{-moz-box-sizing:border-box;box-sizing:border-box;}
.mobilesidemenu input[type="checkbox"]{position:absolute;left:0;top:0;visibility:hidden;}
.mobilesidemenu > label{
    display: block;
    margin: 5px;
    position: relative;
    position: fixed;
    font-size: 12px;
    width: 35px;
    height: 25px;
    top: 0;
    left: 0;
    background: none;
    padding: 6px;
    text-indent: -1000px;
    border: 5px solid rgb(100,100,100);
    border-radius: 1px;
    margin-top: 12px;
    border-width: 5px 0;
    cursor: pointer;
    -moz-transition: all 0.3s ease-in;
    -webkit-transition: all 0.3s ease-in;
    transition: all 0.3s ease-in;
    z-index: 1;
    
}
.mobilesidemenu > label::before, .mobilesidemenu > label::after{content: "";
    display: block;
    position: absolute;
    border-radius: 1px;
    width: 35px;
    height: 5px;
    top: 5.8px;
    margin-top: -1px;
    left: 0;
    background-color: rgb(100,100,100);
    -moz-transform: rotate(0);
    -webkit-transform: rotate(0);
    transform: rotate(0);
    -moz-transition: all 0.2s ease-in;
    -webkit-transition: all 0.2s ease-in;
    transition: all 0.2s ease-in;}
.mobilesidemenu aside{margin:0px;padding:0px;position:fixed;font:bold 10px Verdana;width:230px;height:100%;left:-680px;top:0;-webkit-transform:translate3d(0, 0, 0);transform:translate3d(0, 0, 0);-moz-transition:all 0.2s ease-in;-webkit-transition:all 0.2s ease-in;transition:all 0.2s ease-in;}
.mobilesidemenu aside{overflow:auto;}
.mobilesidemenu aside h2{color:rgb(256,256,256);margin-bottom:10px;}
.mobilesidemenu ul{margin-right:-4px;margin-left:-3px;list-style:none;margin-top:12%;padding:0;}
.mobilesidemenu li{}
.mobilesidemenu li a{display:block;text-decoration:none;font-size:1.4em;border-bottom:1px solid #c1c1c1;color:black;margin:0;padding:12px;}
.mobilesidemenu li a:hover{background:rgb(0,256,0,0.4);color:rgb(0,0,0,0.7);}
.mobilesidemenu aside label{    cursor: pointer;
    position: absolute;
    text-transform: uppercase;
    right: 0px;
    margin-top: 0px;
    top: 0;
    width: 40px;
    height: 40px;
    background: rgba(76,175,80,1);
    text-align: center;}
.mobilesidemenu aside label:hover{background:rgba(50,50,50,0.3);}
.mobilesidemenu aside label::after{content: "x";
    color: white;
    padding: 5px 0px 0px 0px;
    display: block;
    font-size: 23px;
    font-weight: 300;
    -moz-transition: all 0.3s ease-in;
    -webkit-transition: all 0.3s ease-in;
    transition: all 0.3s ease-in;}
.mobilesidemenu .overlay{position:fixed;width:100%;height:100%;left:0;top:0;opacity:.6;background:black;visibility:hidden;}
.mobilesidemenu .overlay label{width:100%;height:100%;position:absolute;}
.mobilesidemenu aside label:hover::after{-moz-transform:rotatey(180deg);-ms-transform:rotatey(180deg);-webkit-transform:rotatey(180deg);transform:rotatey(180deg);}
.mobilesidemenu input[type="checkbox"]:checked ~ label{border-color:transparent;}
.mobilesidemenu input[type="checkbox"]:checked ~ label::before{transform:rotate(-45deg);-webkit-transform:rotate(-45deg);}
.mobilesidemenu input[type="checkbox"]:checked ~ label::after{transform:rotate(45deg);-webkit-transform:rotate(45deg);}
.mobilesidemenu input[type="checkbox"]:checked ~ aside{left:0;}
.mobilesidemenu input[type="checkbox"]:checked ~ div.overlay{visibility:visible;}
</style>
<!--[if lte IE 8]>
<style>
.mobilesidemenu > label{border:6px solid black;background:#eee;height:30px;}
</style>
<script>//ie 8 menu compatibility code:document.createElement("aside")
window.onload = function(){var mobilemenunav = document.getElementById("msidemenu");var mobilemaintoggler = document.getElementById("maintoggler");var mobilenavtoggler = document.getElementById("navtoggler");mobilemaintoggler.onclick = function(){mobilemenunav.style.left = 0px;mobilemaintoggler.style.display = none;}
mobilenavtoggler.onclick = function(){mobilemenunav.style.left = '-500px';}
}
</script>
<![endif]-->
.navigation{z-index:1;background-color:#fbfbfb;}
.nav-container{max-width:1000px;margin:0 auto;margin-left:50px;}
.logoContainer{
display:none;    
}
nav{margin:0px;float:left;}
nav ul{list-style:none;margin:0;padding:0;}
nav ul li{float:left;position:relative;}
nav ul li a,
nav ul li a:visited{font-family:var(--secondary-font-family);display:block;padding:0 18px;line-height:50px;color:rgb(100,100,100);
background-color:#fbfbfb;text-decoration:none;font-size:15px;}
nav ul li a:hover,
nav ul li a:visited:hover{background-color:#d0d0d0;
color:rgba(100,100,100,1);text-decoration:none;}
nav ul li a:not(:only-child):after,
nav ul li a:visited:not(:only-child):after{padding-left:4px;content:'\025BE';}
nav ul li ul li{min-width:190px;display:block;}
nav ul li ul li a{padding:10px;line-height:20px; color:rgb(100,100,100);
background-color:#fbfbfb;}
.nav-dropdown{margin-top:-25px;position:absolute;display:none;z-index:1;box-shadow:0 3px 12px rgba(0, 0, 0, 0.15);}
.nav-mobile{display:none;position:absolute;top:0;right:0;background:rgba(100,100,100,1);height:50px;width:50px;}

.logoContainer{
display:none;    
}
#nav-toggle{position:absolute;left:10px;top:12px;cursor:pointer;padding:10px 35px 16px 0px;}
#nav-toggle span,
#nav-toggle span:before,
#nav-toggle span:after{cursor:pointer;border-radius:1px;height:5px;width:35px;background:#ffffff;position:absolute;display:block;content:'';transition:all 300ms ease-in-out;-webkit-transition:all 300ms ease-in-out;}
#nav-toggle span:before{top:-10px;}
#nav-toggle span:after{bottom:-10px;}
#nav-toggle.active span{background-color:transparent;}
#nav-toggle.active span:before, #nav-toggle.active span:after{top:0;}
#nav-toggle.active span:before{transform:rotate(45deg);-webkit-transform:rotate(45deg);-webkit-transform-origin:center;}
#nav-toggle.active span:after{transform:rotate(-45deg);-webkit-transform:rotate(-45deg);-webkit-transform-origin:center;}
#msidemenu{width:230px;z-index:1;}
@media screen and (min-width:800px){
    .nav-list{display:block !important;} 
    nav ul li:hover ul{display:block !important;}
   
    
}
.codingb-footer{margin-top:2%;margin-left:0%;width:100%;float:left;height:auto;clear:both;margin-bottom:1%;}
div.div1{float:left;width:33.33%;height:100px;background-color:rgb(100,100,100);border-right:1px solid rgb(100,100,100);}
div.div2{float:left;width:33.33%;height:100px;background-color:rgb(100,100,100);border-right:1px solid rgb(100,100,100);}
div.div3{float:left;width:33.33%;height:100px;background-color:rgb(100,100,100);}
}
@media screen and (max-width:900px){p{margin:0.2em;padding:0;font-family:var(--secondary-font-family);font-size:15px;line-height:30px;color:rgba(20,20,20,1);}
code{font-size:15px}

h1{font-size:32px;}
h2{font-size:26px;}
h3{font-size:22px;}
h4{font-size:16px;}
}
@media screen and (max-width:800px){
.emailSubscriberContainer{
    display:none;
}    
.subscriber-container{
	height:100px;  float:left; margin-left:0%; width:100%; margin-bottom:17px;
}
.subscriberPart1, .subscriberPart2{
	width:50%; height:100%; float:left;
}    
code{font-size:14px}
h1{font-size:30x;margin:0.50em 0;font-weight:500 !important;color:rgb(10,10,10);}
h2{font-size:25px;}
h3{font-size:21px;font-weight:normal;}
h4{font-size:20px;font-weight:normal;}
h5{font-size:14px;font-weight:normal;}
h6{font-size:16px;font-weight:normal;}
p{margin:0.2em;padding:0;font-family:var(--secondary-font-family);font-size:15px;line-height:30px;color:rgba(20,20,20,1);}

.styled-table thead th{background-color:rgba(76,175,80,1);color:white;padding:0px;border:1px solid rgba(76,175,80,1);border-right:1px solid rgb(190,190,190);}


    
.styled-table tbody td{padding:5px;}
.styled-table tbody td a{font-size:15px;}
.attributes-table thead th{background-color:rgba(76,175,80,1);color:white;padding:0px;font-size:14px;border:1px solid rgba(76,175,80,1);border-right:1px solid rgb(190,190,190);}
.attributes-table tbody td{font-size:14px;padding:5px;}
.attributes-table tbody td a{font-size:14px;}
.primary{height:auto;width:100%;background-color:white;border-radius:5px;margin:0 auto;clear:both;}
.rightside{width:100%;height:auto;margin-top:12px;}
.right-side-ad{display:none;}
#content main{height:auto;margin:auto;width:100%;padding:3%;background-color:white;}
#content main h1,h2,h3,h4,h5{font-family:athiti,sans-serif!important;}
main{word-wrap:break-word;}
main header,
main header h1{padding:0;margin:0;font-weight:normal;font-size:26px;font-family:athiti,sans-serif!important;}
.navigation{z-index:1;color:white;
background-color:rgb(100,100,100);}
.webName{display:none;text-align:center;color:rgba(76,175,80,1);font-size:28px;line-height:45px;vertical-align:middle;}
@media screen and (min-width:800px){.mobileLogo{position:absolute;color:white;left:42%;top:6px;display:none !important;}
nav ul li ul {
	display:block !important;
}
}
@media screen and (max-width:800px){.webName{display:block;}
.aside-fixed{margin-top:100px;margin-left:1%;position:fixed;width:0px;overflow:auto;border:none;left:0px;top:0px;background:red;z-index:1;}
.mobileLogo{display:block !important;}

nav ul li a{color:white;}
nav ul li ul {
	position:relative;
	box-shadow:none;
	color:rgba(100,100,100,1);
background-color:#fbfbfb;
}
nav ul li ul li a{color:white;
background-color:rgb(100,100,100);
}
div.mobilesidemenu{z-index:1;}
}

@media screen and (max-width:600px){
.subscriber-container{
	width:100%; height:100px;  float:left; margin-left:0%; width:100%; margin-bottom:17px;
}
.subscriberPart1{
	display:none;
}
.subscriberPart2{
	float:none;
	width:100%;
}
.inputContainer{
	margin:auto;
}
}

@media screen and (max-width:350px){.mobileLogo{left:32% !important;}
}
.brand a,
.brand a:visited{color:#ffffff;text-decoration:none;}



.nav-container{max-width:1000px;margin:0 auto;margin-left:0px; width:100%;}
.nav-mobile{display:block;}
nav{width:100%;margin:55px 0px 0px 0px;}
nav ul{display:none;margin-top:-6px;max-height:250px;}
nav ul li{float:none;}
nav ul li a{padding:15px;line-height:20px;border-top:1px solid rgba(255,255,255,1);color:rgba(100,100,100,1);}
nav ul li ul li a{padding-left:30px;}

.nav-dropdown{position:static;}
.codingb-footer{margin:100px;width:100%;float:none;height:20%;clear:both;margin:auto;}
div.div1{float:left;width:33.33%;height:100%;background-color:rgb(100,100,100);border-right:1px solid rgb(100,100,100);}
div.div2{float:left;width:33.33%;height:100%;background-color:rgb(100,100,100);border-right:1px solid rgb(100,100,100);}
div.div3{float:left;width:33.33%;height:100%;background-color:rgb(100,100,100);}
}
@media screen and (max-width:380px){code{font-size:14px}
h1{font-size:30x;margin:0.50em 0;font-weight:500 !important;color:rgb(10,10,10);}
h2{font-size:25px;}
h3{font-size:21px;font-weight:normal;}
h4{font-size:20px;font-weight:normal;}
h5{font-size:14px;font-weight:normal;}
h6{font-size:16px;font-weight:normal;}
p{margin:0.2em;padding:0;font-family:var(--secondary-font-family);font-size:14px;line-height:30px;color:rgba(20,20,20,1);}
.bottom-side-tags-container{width:100%;box-shadow:1px 1px 2px 2px rgba(210,210,210,0.5), -1px 0px 2px 2px rgba(210,210,210,0.5);height:300px;float:left;height:auto;}
}
.yes_article{padding:10px 0px 8px 0px;width:100%;height:auto;position:relative;box-shadow:1px 1px 2px 2px rgba(210,210,210,0.5), -1px -1px 2px 2px rgba(210,210,210,0.5);border-radius:10px;border-left:1px solid rgba(210,210,210,0.5); margin:25px 0px;}
.yes_articlew{padding:10px 0px 8px 0px;width:100%;height:auto;position:relative;border-left:1px solid rgba(210,210,210,0.5); margin:25px 0px;}
.try_yes{display:block;width:80px;height:40px;margin:auto;text-decoration:none;border-radius:5px;box-shadow:2px 2px 2px rgba(180,180,180,0.6), 3px 3px 2px rgba(150,150,150,0.5) inset;text-align:center;line-height:44px;background-color:rgba(100,100,100,1);color:rgba(255,255,255,1);}
.try_yes:hover{color:rgba(100,100,100,1);background-color:rgba(255,255,255,1);}
.example_yes{box-shadow:1px 1px 3px 0px rgba(180,180,180,0.6), -1px 0px 3px 0px rgba(180,180,180,0.6);border-radius:0px 0px 5px 5px;margin:auto;width:100px;text-align:center;margin-top:-10px;}


#websocial{float:right;width:10%;margin-right: 2.5%;  }
#websocial ul{list-style-type:none;background-color:rgba(255,255,255,0.1);padding:29px 0px;width:0px;position:relative;float:right;}
#websocial ul li{float:right;}
#websocial ul li a{display:block;padding:8px;background-color:rgba(220,220,220,1);text-decoration:none;position:absolute;top:0px;right:0px;}
#websocial ul li .goweb{right:10px;background-color: #ff4500;
    color: white;}
#websocial ul li .faweb{right:60px; background-color: rgb(59,89,152);
    color: white;}
#websocial ul li .twweb{right:110px; background-color: rgb(0,132,180);
    color: white;}
#websocial ul li a:hover{top:-10px;}
@-webkit-keyframes fluidmotion{0%{-webkit-animation-timing-function:ease-in;zoom:100%;}
20%{zoom:102%;-webkit-animation-timing-function:ease-in;}
40%{zoom:106%;-webkit-animation-timing-function:ease-in;}
60%{zoom:108%;-webkit-animation-timing-function:ease-in;}
80%{zoom:110%;-webkit-animation-timing-function:ease-in;}
100%{zoom:112%;-webkit-animation-timing-function:ease-in;}
}


/* PrismJS 1.11.0
http://prismjs.com/download.html?themes=prism&languages=markup+css+clike+javascript */
/**
 * prism.js default theme for JavaScript, CSS and HTML
 * Based on dabblet (http://dabblet.com)
 * @author Lea Verou
 */

code[class*="language-"],
pre[class*="language-"] {
	color: black;
	background: none;
	font-family:monospace;
	text-align: left;
	word-spacing: normal;
	word-break: normal;
	line-height: 1.5;

	-moz-tab-size: 4;
	-o-tab-size: 4;

	-webkit-hyphens: none;
	-moz-hyphens: none;
	-ms-hyphens: none;
}

pre[class*="language-"]::-moz-selection, pre[class*="language-"] ::-moz-selection,
code[class*="language-"]::-moz-selection, code[class*="language-"] ::-moz-selection {
	text-shadow: none;
	background: #b3d4fc;
}

pre[class*="language-"]::selection, pre[class*="language-"] ::selection,
code[class*="language-"]::selection, code[class*="language-"] ::selection {
	text-shadow: none;
	background: #b3d4fc;
}

@media print {
	code[class*="language-"],
	pre[class*="language-"] {
		text-shadow: none;
	}
}

/* Code blocks */
pre[class*="language-"] {
	margin: .5em 0;
	overflow: auto;
}

:not(pre) > code[class*="language-"],
pre[class*="language-"] {
	background: none;
}

/* Inline code */
:not(pre) > code[class*="language-"] {
	padding: .1em;
	border-radius: .3em;
	white-space: normal;
}

.token.comment,
.token.prolog,
.token.doctype,
.token.cdata {
	color: slategray;
}

.token.punctuation {
	color: #a11;
}

.namespace {
	opacity: .7;
}

.token.property,
.token.tag,
.token.boolean,
.token.number,
.token.constant,
.token.symbol,
.token.deleted {
	color: #170;
}


.token.attr-name,
.token.string,
.token.char,
.token.builtin,
.token.inserted {
	color: #f00;
}
.token.selector{
	color:#00c;
	
}
.token.operator,
.token.entity,
.token.url,
.language-css .token.string,
.style .token.string {
	color: #a67f59;
	background: hsla(0, 0%, 100%, .5);
}

.token.atrule,
.token.attr-value,
.token.keyword {
	color: #00c;
}

.token.function {
	color: #DD4A68;
}

.token.regex,
.token.important,
.token.variable {
	color: #e90;
}

.token.important,
.token.bold {
	font-weight: bold;
}
.token.italic {
	font-style: italic;
}

.token.entity {
	cursor: help;
}



#mobileLogo{
	position:absolute !important;
	color:white;
	left:42%;
	top:6px;
	display:none !important;
	font-family:'Padauk', sans-serif !important;
}

@media screen and (max-width:800px){
#mobileLogo{
	display:block !important;
}



.mobilesidemenu > label{

    border: 5px solid rgb(255,255,255);
    border-width:5px 0px;
    
}
.mobilesidemenu > label::before, .mobilesidemenu > label::after{

    background-color: rgb(255,255,255);
}


}
@media screen and (max-width:350px){
#mobileLogo{
	left:32% !important;
}
}

#summaryList dt, #summaryList dd{
font-family:'Athiti', sans-serif !important;
font-size:15px;
}



/* Email feedback or suggestion */

.main-comment-container{
width: 60%;
height: 80%;
border-radius: 2px;
position: fixed;
padding: 5px;
background-color: white;
border: 2px solid rgba(200,200,200,0.5);
z-index: 1;
display: none;
right: 20%;
top: 55px;
min-width: 250px;
box-shadow: 2px 2px 6px 2px rgba(210,210,210,0.5), -2px -2px 6px 2px rgba(210,210,210,0.5);
}


@media screen and (max-width:600px){
.main-comment-container{
width: 100%;
height: 84%;
top: 0px;
left: 0px;
margin-top: 50px;
}
}

.feedOpen{
width: 50px;
height: 50px;
background-color: rgba(76,175,80,1);
border-radius: 50%;
position: fixed;
box-shadow:1px 1px 0px 2px rgba(230,230,230,1), -1px -1px 4px 2px rgba(230,230,230,1);
cursor: pointer;
right: 5px;
bottom: 5px;
z-index:1;
}
.comment-feed{
width: 35px;
height: 30px;
border-radius: 50%;
background-color: white;
text-align: center;
position: absolute;
font-size: 15px;
top: 6.5px;
left: 8px;
}
.comment-feed::after{
position: absolute;
content: "";
border-top: 20px solid white;
border-right: 18px solid transparent;
top: 18px;
left: 9px;
}

.feedClose{
width:30px;
height:30px;
border:solid rgba(210,210,210,1);
border-width:0px 0px 1px 1px;
background-color:rgba(255,255,255,1);
position:absolute;
right:0px;
top:0px;
outline:none;
cursor:pointer;
}
.feedClose span{
font-size:25px;
position:absolute;
top:-5px;
right:5px;
}

.feedClose:hover{
outline:none;
}
#feedBackForm{
width:80%;
height:70%;
margin:auto;
box-shadow:-1px -1px 3px rgba(200,200,200,0.5), 1px 1px 2px rgba(200,200,200,0.5);
padding:20px;
margin-top:1.5%;
}

.sendMessage
{
outline:none;
background-color:rgba(15,157,88,1);
padding:8px 10px;
color:white;
font-size:17px;
border:none;
position: absolute;
bottom: 10px;
right: 20px;
cursor:pointer;
font-family:athiti,sans-serif;
}
.sendMessage:hover{
box-shadow:2px 2px 2px 0px rgba(200,200,200,1);    
}
textarea{
font-family:'Alegreya','Arvo','Bitter', serif;
border-radius:3px;
outline:none;
border:1px solid rgba(200,200,200,1);
font-size:17px;
width:95%;
}
#guestEmail{
outline: 0px;
border: 1px solid rgba(200,200,200,1);
padding: 3px;
height: 26px;
width: 165px;
border-radius: 3px;
font-family:athiti,sans-serif;
}
#guestMessage{
  font-family:athiti,sans-serif;  
}

/* Email feedback, suggestion */












/* tag page designing */






#tagDescription, #tagDemo, #tagUses, #tagOmission, #globalAttributes, #relatedAttributes{
border-left: 3px solid #9bcf2f;
padding: 6px;
margin: 90px auto 0px auto;
background-color: rgba(250,250,250,1);
position: relative;	
//box-shadow:1px 1px 5px 0px rgba(200,200,200,1), -1px -1px 5px 0px rgba(230,230,230,1);
}



.tagDefinition{
padding-bottom:15px;	
text-align:center; 
}

.tagDefinition p {
color:white;
}
.tagDefinition p:first-child:before{
display:inline-block;
content:"\0201C";
font-size:30px;
color:white;
font-family:athiti,sans-serif!important;
}

.tagDefinition p:last-child:after{
display:inline-block;
content:"\0201D";
font-size:30px;
color:white;
font-family:athiti,sans-serif!important;	
}




#tagDescriptionbefore, #tagDemobefore,  #tagUsesbefore, #tagOmissionbefore, #globalAttributesbefore,#relatedAttributesbefore{
background-color: #9bcf2f;
color: white;
position: absolute;
left: -10px;
top: -25px;
width: max-content;
font-family: athiti,sans-serif!important;
}

#tagDescriptionbefore h2{
margin:0px;
color:white;
font-size:14px;	
padding: 2px 4px;
}
#tagDescriptionbefore:after{
    position: absolute;
    content: "";
    border-top: 10px #739825 solid;
    border-left: 10px solid transparent;
    top: 25px;
    left: 0px;	
}


.tagDefinition{
	white-space:normal;
}


#tagDemo{
border-left: 3px solid #fab125;
}


#tagDemobefore{
background-color: #fab125;
}

#tagDemobefore h2, #tagUsesbefore h2, #tagOmissionbefore h2, #globalAttributesbefore h2, #relatedAttributesbefore h2{
margin:0px;
color:white;
font-size:14px;	
padding: 2px 4px;
}


#tagDemobefore:after, #tagUsesbefore:after, #tagOmissionbefore:after, #globalAttributesbefore:after, #relatedAttributesbefore:after{
position: absolute;
content: "";
border-top: 10px #fab125 solid;
border-left: 10px solid transparent;
top: 25px;
left: 0px;	
}

#tagUses{
border-left: 3px solid #0fbfcf;
}



#tagUsesbefore{
background-color: #0fbfcf;
}

#tagUsesbefore:after{
border-top: 10px #22929c solid;
}

#tagOmission{
border-left: 3px solid #fab125;
}

#tagOmissionbefore {
background-color: #fab125;
}


#tagOmissionbefore:after {
border-top: 10px #b78931 solid;	
}

#globalAttributes{
border-left: 3px solid #c869bf;
}

#globalAttributesbefore{
background-color: #c869bf;
}

#globalAttributesbefore:after{
border-top: 10px #8c3584 solid;
}

#relatedAttributes{
border-left: 3px solid #49a7e9;
}

#relatedAttributesbefore{
background-color: #49a7e9;
}

#relatedAttributesbefore:after{
border-top: 10px #2779b3 solid;	
}


.heading1{
margin: auto;
margin-bottom:0px;	
}

.heading1 h1{
color:white;	
}

.pdtdd{
display:grid;
grid-template-columns:100%;
grid-template-rows:100%;
border-bottom:1px solid rgba(0,0,0,0.1);
}

.dtdd {
padding:10px 10px 20px 10px;	
}

.dtdd > dt > a{
font-weight: 900;
color: #005A9C;
text-decoration:none;
font-size:14px;
letter-spacing:0.5px;
}


.definitionArea{
display:grid;
grid-template-rows: 100%;
grid-template-columns: 50% 50%;
height:auto; 
width:100%; 
background-color:white; 
}

.codeArea{
grid-row: 1;
grid-column: 1/2;	
position:relative;
}



.demoArea{
grid-row: 1;
grid-column: 2/3;
position:relative;
padding:4px 6px;
}




.defineContainer{
width:100%; height:auto; background-color:rgba(250,250,250,1); 
box-shadow:2px 2px 10px 0px rgba(230,230,230,1);
margin-bottom:90px;
background-image: linear-gradient(90deg, #9bcf2f, #9bcf2f);
border:2px solid #9bcf2f;
margin-top:40px;
}




.tryBtn{
font-family: athiti,sans-serif!important;
background-color: rgba(76,175,80,1);
text-decoration:none;
position:absolute;
border-radius: 50%;
color: white;
width: 50px;
height: 50px; 
bottom:-25px;
right: -25px;
}

.tryBtn:hover{
box-shadow:1px 1px 21px rgba(220,220,220,1);    
color:white;
}

.tryBtnSpan{
position: absolute;
top: 28%;
left: 5px;
width: 40px;
height:40px;
}


.lta{
position:absolute;
/*animation:ltAnim 5s infinite ease-in-out;*/
left:5%;
}

.gta{
position:absolute;
/*animation:gtAnim 5s infinite reverse ease-in-out;*/
right:5%;
}

.tryBtn:hover .lta, .tryBtn:hover .gta{
animation-play-state:paused;	
}

.slasha{
position:absolute;
left:40%;
animation:slashaAnim 2s infinite ease-in-out;
}

@keyframes slashaAnim{
0%{
top:-5px;

}

5%{
top:5px;
}

10%{
top:-5px;
}

15%{
top:5px;
}

20%{
top:-5px;
}

30%{
top:0px;	
}

100%{
top:0px;	
}

}

@keyframes ltAnim{
0%{
	left:5%;
	opacity:0;
}	
25%{
	left:15%;
	opacity:1;
}

50%{
	left:5%;
	opacity:0;
}
75%{
	left:15%;
	opacity:1;
}
100%{
	left:5%;
	opacity:0;
}
}

@keyframes gtAnim{
0%{
	right:5%;
	opacity:0;
}	
25%{
	right:15%;
	opacity:1;
}

50%{
	right:5%;
	opacity:0;
}
75%{
	right:15%;
	opacity:1;
}
100%{
	right:5%;
	opacity:0;
}
}




.stylish-block-container, .language-markup{
width:100%;
height:100%;	
padding:0px;
}

.language-markup{
white-space:pre-wrap;    
}

pre.stylish-block{
width:100%;
margin:0px;
padding:30px 8px 8px 8px;		
}


pre.nstylish-block{
width:100%;
margin:0px;
padding:8px;
}


.stylish-block code{
font-size:14px;	
}


#tagUses, #relatedAttributes{
padding:0px;	
}


.labelDesignTagUses,.labelDesignTagAtt{
position: absolute;
top: -28px;
left: 0px;
background-color: rgb(100,100,100);
color: white;
padding: 4px;
font-size: 13px;
width:max-content;
display: none;
}

#tagUsesbefore:hover  .labelDesignTagUses{
display:block;	
}

#relatedAttributesbefore:hover .labelDesignTagAtt{
display:block;	
}

.relevantTags{
width:100%; 
border-left:5px solid rgb(230,230,230); 
background-color:rgb(250,250,250);
margin-top:90px;
padding:10px;
font-size:18px;
}



/* attributes designing */


#attributeValues{
border-left: 3px solid #0fbfcf;
margin: 40px auto 0px auto;
background-color: rgba(250,250,250,1);
position: relative;		
margin-bottom:90px;
}



#attributeValuesbefore{
background-color: #0fbfcf;
color: white;
position: absolute;
left: -10px;
top: -25px;
width: max-content;
font-family: athiti,sans-serif!important;
font-size: 14px;	
}

#attributeValuesbefore h2{
margin:0px;
color:white;
font-size:14px;	
padding: 2px 4px;
}

#attributeValuesbefore:after{
position: absolute;
content: "";
border-top: 10px #22929c solid;
border-left: 10px solid transparent;
top: 25px;
left: 0px;	
}

#attTags{
border-left: 3px solid #fab125;
padding: 6px;
margin: 40px auto 0px auto;
background-color: rgba(250,250,250,1);
position: relative;	
margin-bottom:90px;
}

#attTagsbefore{
background-color: #fab125;
color: white;
position: absolute;
left: -10px;
top: -25px;
width: max-content;
font-family: athiti,sans-serif!important;
font-size: 14px;
}

#attTagsbefore h2{
margin:0px;
color:white;
font-size:14px;	
padding: 2px 4px;
}


#attTagsbefore:after {
position: absolute;
content: "";
border-top: 10px #b78931 solid;
border-left: 10px solid transparent;
top: 25px;
left: 0px;	
}


#attributeValues, #attTags{
padding:0px;	
}


.labelDesignattributeValues,.labelDesignTagAtt{
position: absolute;
top: -28px;
left: 0px;
background-color: rgb(100,100,100);
color: white;
padding: 4px;
font-size: 13px;
width:max-content;
display: none;
}

#attributeValuesbefore:hover  .labelDesignattributeValues{
display:block;	
}

#attTagsbefore:hover .labelDesignTagAtt{
display:block;	
}



    


.nstylish-block-container{
margin: 0px;
width: 99%;
height: 100%;
padding: 0px;
position: relative;
display: flex;
background-color: rgba(242,242,242,1);
}


.avpad, .atpad{
padding:5px;    
}


.tagDefinition p{
position:relative;
color:white;
}

.tagDefinition p:first-child:before{
display: inline-block;
content: "\0201C";
font-size: 75px;
font-family: Oswald,sans-serif!important;
color: rgb(255,255,255);
position: absolute;
left: 0px;
top: -10px;
}




.tagDefinition p:last-child:after{
display: inline-block;
content: "\0201D";
font-size: 75px;
font-family: var(--secondary-font-family);
color: rgb(255,255,255);
position: absolute;
bottom: -50px;
right: 0px;
}


/* popup */



    
.block {
    display: none; 
    position: fixed; 
    z-index: 100; 
    padding-top: 40px; 
    left: 0;
    top: 0;
    width: 100%; 
    height: 100%; 
    overflow: auto; 
    background-color: rgba(0,0,0,0.4); 
		
}


.block-content {
    position: relative;
    background-color: #fefefe;
    margin: auto;
    padding: 0;
    width: 250px;
	height:250px;
    box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19);
    -webkit-animation-name: animatebottom;
    -webkit-animation-duration: 0.4s;
    animation-name: animatebottom;
    animation-duration: 0.5s;
		border-radius:5px;
	border:none;
}


@-webkit-keyframes animatebottom {
    from {top:80px; opacity:0} 
    to {top:140; opacity:1}
}

@keyframes animatebottom {
    from {top:140px; opacity:0}
    to {top:0; opacity:1}
}


.exitContainer {
color: white;
float: right;
font-weight: bold;
text-align: center;
width: 45px;
height: 45px;
border-radius: 50%;
border: 1px solid rgb(15,157,88);
}

.exitContainer:hover,
.exitContainer:focus {
text-decoration: none;
cursor: pointer;
transition-duration: 200ms;
border:1px solid rgb(255,255,255); 
	transition-duration: 100ms;
}

.exit{
color: white;
width: 45px;
list-style-type: none;
margin: -3px -7px;
border-radius: 100%;
font-size: 35px;
position: absolute;
right: 16px;
top: 8px;
}

.block-header {
    padding: 2px 10px;
	padding-top:8px;
    background-color: rgb(15,157,88);
    color: white;
	borde:none;
	border-radius: 5px 5px 0px 0px;
}

.block-body {padding: 2px 16px; overflow:auto; height:80%;}


#asideSharing, .asideSharing{
	width:40%;
	margin:auto;
}
#asideSharing ul, .asideSharing ul{
    list-style-type: none;
   	margin-top:10px;
    padding: 0;
    background-color: rgb(255,255,255);

}
#asideSharing ul li a, .asideSharing ul li a{

    border-radius:5px;
       text-align:center;
	margin:10px 0px 10px 0px;
	display: block;
    padding: 8px 16px;
    text-decoration: none;
	font-size:15px;
	font-weight:normal;

}

.facebook {
background-color:rgb(59,89,152);
color:white;
border:1px solid rgb(59,89,152);
font-family:athiti,sans-serif!important;
}
.facebook:hover,.facebook:focus {
background-color:white;
color:rgb(59,89,152);
text-decoration: none;
}
.twitter {
background-color:rgb(0,132,180);
color:white;
border:1px solid rgb(0,132,180);
font-family:athiti,sans-serif!important;
}
.twitter:hover,.twitter:focus {
background-color: white;
color:rgb(0,132,180);
text-decoration: none;
}
.google-plus {
background-color:#ff4500;
color:white;
border:1px solid #ff4500;
font-family:athiti,sans-serif!important;
}
.google-plus:hover,.google-plus:focus {
background-color:white;
color:#ff4500;
text-decoration: none;
}

h2.share-heading {
    margin-top: 4px;
	font-size:25px;
	display:inline-block;
	color:white;
}




.latestLabel{
font-size: 12px;
position: absolute;
padding: 2px 5px;
background-color: orange;
color: white;
bottom: -15px;
left: 64px;    
}

.latestLabel:before{
position: absolute;
content: "";
top: -5px;
border-bottom: 10px solid orange;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
 }
 
 
</html>