html, body {padding:0; margin:0; background:#fff; min-width:320px;}
header {height:80px; position:absolute; width:100%; min-width:320px; top:0; left:0; background:#329cd2; z-index:100002; text-align:center; display:flex; justify-content:space-between;}
header img {display:block;}
header #banner {width:170px;}

header h1 {padding:15px 0 0 0; margin:0; font:300 28px/30px 'Lato', arial, sans-serif; color:#fff;}
header h1 span {display:inline-block; background:#fff; color:#329cd2; width:28px; text-align:center; margin:0 2px; font:700 28px/30px 'Lato', arial, sans-serif;}
header p {padding:0; margin:0; font:400 15px/20px 'Lato', arial, sans-serif; color:#fff; text-transform:uppercase}

ul.main {padding:0; margin:0; list-style:none; position:absolute; top:80px; left:0; width:100%; min-width:320px; min-height:30px; background:#000; z-index:100002; box-shadow:0 3px 6px rgba(0,0,0,0.3); display:flex; justify-content:center; flex-flow: row wrap;}
ul.main li a {display:block; font:400 15px/26px 'Lato', arial, sans-serif; color:#fff; text-decoration:none; padding:0 6px; border-bottom:4px solid #000;}
ul.main li a:hover {border-color:#aaa;}

.top-banner h1 {padding:0; margin:0; font:300 24px/30px 'Lato', arial, sans-serif; color: #2b9cd5;}
.top-banner img {display:block; width:100%; max-width:750px; margin:0 auto;}

#wrapper {width:100%;}
#tutorial {width:95%; max-width:1000px; margin:0 auto; padding:0; display:flex; justify-content:space-between; flex-flow: row wrap;}
#info {width:100%; padding:150px 0 50px 0;}
#info h3 {padding: 0; margin: 20px 0 0 0; font: 400 22px/30px 'Lato', arial, sans-serif; color: #329cd2;}
#info blockquote p.cite {padding: 0; margin: 0; font: 400 20px/30px 'Lato', arial, sans-serif; color: #7cb447;}
#info p {padding: 5px 0; margin: 0; font: 400 15px/20px 'Lato', arial, sans-serif; color: #333; text-align:justify;}
#info p a {color:#c00; text-decoration:underline;}
#info p a:hover {color:#000; text-decoration:none;}
#info .float_left {float:left; padding: 10px 10px 10px 0;}

ul.sub {padding:0; margin:0; list-style:none; width:100%; background:#000; display:flex; justify-content:center; flex-flow: row wrap; color:#6cf;}
ul.sub li {font:400 14px/30px 'Lato', arial, sans-serif; color:#6cf; padding:0 6px;} 
ul.sub li a {color:#fff; text-decoration:none;}
ul.sub li a:hover {color:#6cf;}

.footer {text-align:center;}
.footer p {padding:10px 0 20px 0; margin:0; font:300 13px/18px 'Lato', arial, sans-serif; color:#333;}

#adv {width:100%; display:flex; justify-content:space-evenly; align-items: stretch; flex-flow: row wrap; margin-top:30px;}
.adBox {width:300px; height:250px; margin:10px;}


#search-paypal {width:100%; display:flex; justify-content:space-evenly; align-items: stretch; flex-flow: row wrap; margin-top:30px;}
#search-paypal div.flexBox {width:300px; padding:0; margin:10px; box-sizing:border-box; background:#eee;}
#search-paypal div div {padding:0; margin:0 auto; background:none;}
#search-paypal div p {padding:10px 20px; margin:0; font: 400 13px/18px 'Lato', arial, sans-serif; color:#000; text-align:justify;}
#search-paypal div p a {font-weight:bold; color:#09c; text-decoration:none;}
#search-paypal div p a:hover {color:#000;}

#search-paypal div h3 {padding:8px 0 8px 20px; margin:0; font:300 18px/30px 'Lato', arial, sans-serif !important; color:#fff; background:rgba(0,0,0,0.6);}
#search-paypal div h3 span {display:inline-block; background:#fff; color:#000; width:25px; text-align:center; margin:0 2px; font:700 18px/30px 'Lato', arial, sans-serif;}
#search-paypal div.paypal {background:#7cb447;}
#search-paypal div.paypal form {text-align:center; margin-bottom:10px;}
#search-paypal div.search {background:#fc6; text-align:center;}
#search-paypal div.search input.search {padding: 0 10px; height: 38px; border: 0; width: 185px; float: left; font: 400 14px/37px 'Lato', arial, sans-serif; margin-bottom:20px; margin-left:20px;}
#search-paypal div.search .cse-search {width: 50px; height: 39px; border: 0; background: #583 url(/new-images/search-icon.png) no-repeat center center; float: left; cursor: pointer;}

/* service page */
ol.service li {padding: 5px 0; margin: 0; font: 400 14px/18px 'Lato', arial, sans-serif; color: #333; text-align:justify;}

/* FAQs page */
dl.faqs {padding: 0; margin: 0 0 30px 0;}
dl.faqs dt {font: 700 16px/22px 'Lato', arial, sans-serif; color: #000;}
dl.faqs dd {padding: 0 0 10px 0; margin: 5px 0; font: 400 14px/18px 'lATO', arial, sans-serif; color: #333;}
dl.faqs dd a {color:#c00;}
dl.faqs dd a:hover {text-decoration:none;}

/* opacity index */
.opacity header {background: #9e6ba9;}
.opacity header h1 span {color: #9e6ba9;}
.opacity .top-banner h1 {color: #9e6ba9;}
.opacity ul.main li#opacity a {border-color: #9e6ba9;}

#info .index {padding: 0; margin: 30px 0; display:flex; justify-content:space-around; flex-flow: row wrap;}
#info .index dd {margin: 0; width: 280px; padding: 5px 10px; font: 400 14px/20px 'Lato', arial, sans-serif; color: #333; border: 1px solid #ddd; border-bottom:1px solid #080; margin: 3px; text-align: left; border-radius:5px;}
#info .index dd a {color:#c00; text-decoration:none;}
#info .index dd a:hover {color:#000;}

.demoNav {text-align:center;}
.demoNav a {color:#c00; text-decoration:none; font: 700 14px/20px 'Lato', arial, sans-serif;}
.demoNav .prevDemo {display:inline-block; width:130px;}
.demoNav .prevDemo::before {content:""; display:inline-block; margin:0 3px 0 0; width:8px; height:8px; border:1px solid #000; border-color:transparent transparent #c00 #c00; transform:rotate(45deg);}
.demoNav .nextDemo {display:inline-block; width:130px;}
.demoNav .nextDemo::after {content:""; display:inline-block; margin:0 0 0 3px; width:8px; height:8px; border:1px solid #000; border-color:transparent transparent #c00 #c00; transform:rotate(-135deg);}
.demoNav a:hover {color:#000;}
.demoNav a:hover::before,
.demoNav a:hover::after {border-color:transparent transparent #000 #000;}

#info h2 {padding:0; margin:0; font: 700 26px/35px 'Lato', arial, sans-serif; color:#000;}
.opacity #info h2 a {color: #9e6ba9; text-decoration:none; transition:0.5s;}
#info h5 {padding: 0; margin: 0; font: 300 16px/20px 'Lato', arial, sans-serif;}
#info h5.date {color: #069;}
#info h4 {padding: 0; margin: 0; font: 300 20px/25px 'Lato', arial, sans-serif; color: #000;}

/* explorer index */
.explorer header {background: #8b37aa;}
.explorer header h1 span {color: #8b37aa;}
.explorer .top-banner h1 {color: #8b37aa;}
.explorer ul.main li#explorer a {border-color: #8b37aa;}
.explorer #info h2 a {color: #8b37aa; text-decoration:none; transition:0.5s;}

/* mozilla index */
.mozilla header {background: #1672bb;}
.mozilla header h1 span {color: #1672bb;}
.mozilla .top-banner h1 {color: #1672bb;}
.mozilla ul.main li#mozilla a {border-color: #1672bb;}
.mozilla #info h2 a {color: #1672bb; text-decoration:none; transition:0.5s;}

/* boxes index */
.boxes header {background: #7cb447;}
.boxes header h1 span {color: #7cb447;}
.boxes .top-banner h1 {color: #7cb447;}
.boxes ul.main li#boxes a {border-color: #7cb447;}
.boxes #info h2 a {color: #7cb447; text-decoration:none; transition:0.5s;}

/* layouts index */
.layouts header {background: #ffc20f;}
.layouts header h1 span {color: #ffc20f;}
.layouts .top-banner h1 {color: #ffc20f;}
.layouts ul.main li#layouts a {border-color: #ffc20f;}
.layouts #info h2 a {color: #ffc20f; text-decoration:none; transition:0.5s;}

/* demos index */
.demos header {background: #e23b2d;}
.demos header h1 span {color: #e23b2d;}
.demos .top-banner h1 {color: #e23b2d;}
.demos ul.main li#demos a {border-color: #e23b2d;}
.demos #info h2 a {color: #e23b2d; text-decoration:none; transition:0.5s;}
.numberlist li {padding: 2px 0; margin: 0; font: 400 15px/18px 'Lato', arial, sans-serif; color: #333;}

#info h2 a:hover {color:#000 !important;}