/*
Theme Name:		Blue Halus
Description:	Just simple soft blue appereance.
Version:		1.00
Author:			Aswzen
Author URI:   http://asw.web.id
Theme URI:		http://aswzen.wordpress.com
License:			GPL
License URI:	http://www.gnu.org/licenses/gpl.html
Tags:			blue, gray, white, light, two-columns, fixed-layout, fluid-layout, responsive-layout, custom-background, custom-menu, editor-style, featured-images, full-width-template, threaded-comments, translation-ready
Text Domain:  blue-halus
*/

html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code,
del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var,
b, i,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
main, article, aside, canvas, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section, summary,
time, mark, audio, video {margin: 0; padding: 0; border: 0; outline: 0; font-size: 100%; vertical-align: baseline; background: transparent;}
article,aside,details,figcaption,figure, footer,header,hgroup,menu,nav,section {display: block;}
nav ul {list-style: none;}
blockquote, q {quotes: none;}
blockquote:before, blockquote:after, q:before, q:after {content: ''; content: none;}
a {margin: 0; padding: 0; vertical-align: baseline; background: transparent;}
ins {background-color: #ff9; color: #000; text-decoration: none;}
mark {background-color: #ff9; color: #000; font-style: italic; font-weight: bold;}
del {text-decoration: line-through;}
abbr[title], dfn[title] {border-bottom: 1px dotted; cursor: help;}
table {border-collapse: collapse; border-spacing: 0; padding: 5px; font-size: 1em; width: 100%; border-top: 1px solid #ddd; border-right: 1px solid #ddd; margin-bottom: 20px;}
tr, th, td, tbody, thead, tfoot {padding: 10px; vertical-align: top; border-left: 1px solid #ddd; border-bottom: 1px solid #ddd;}
th {background: #efefef;}
dl {margin-bottom: 20px;}
input, select {vertical-align: middle;}
:focus {outline: 0;}
hr {background: none; border: none; margin: 10px 0; border-bottom: 1px solid #ccc; clear: both;}
code {font-size: 1.1em;}
code {display: inline-block; border: 1px solid #eee; font-size: 0.9em; padding: 0 3px;}
pre {overflow: auto; font-family: 'courier new', courier, monospace; font-size: 0.85em; padding: 10px;  border: 1px solid #ccc;}

/* Overall */
body {font: 400 .75em/1.9em Verdana, Arial, Tahoma, Sans-serif; color: #272727; background: #efefef;}
body p {margin-bottom: 10px; -ms-word-wrap: break-word; word-wrap: break-word;}

/* hgroup */
h1,
h2,
h3,
h4,
h5,
h6 {line-height: 1.2em; margin-bottom: 5px; font-weight: bold; -ms-word-wrap: break-word; word-wrap: break-word;}
h1 {font-size: 1.6em; color: #000;}
h2 {font-size: 1.4em; color: #000;}
h3 {font-size: 1.2em; color: #333;}
h4 {font-size: 1.2em; color: #333;}
h5 {font-size: 1em; color: #555;}
h6 {font-size: 1em; color: #555;}

/* Links */
a {color: #000; text-decoration: none}
a:active {color: #000;}
a:hover {color: #0060A7;}

/* .header */
.header h1,
.header h5 {font-size: 2.1em; font-weight: 400;padding-left: 10px; text-align: left; text-transform: uppercase; margin: 0;}
.header h1 a,
.header h5 a { text-decoration: none;}
.header-desc {text-align: left; margin: 0; padding-left: 10px}

/* .nav */
.nav .current-menu-item > a,
.nav .current-menu-ancestor > a,
.nav .current_page_item > a,
.nav .current_page_ancestor > a {color: #000;}

.nav li {display: inline-block; float: left; position: relative; z-index: 100;}
.nav li:hover {}

.nav ul li:after {content: ''; border: 1px solid #000; position: absolute; top: 15px; bottom: 15px; right: 0;}
.nav ul li:nth-last-child(1):after {content: ''; border: none;}

.nav ul ul {position: absolute; width: 200px; background: #87e0fd; z-index: 1000; -webkit-box-shadow: 5px 5px 0 0 #ccc; box-shadow: 5px 5px 0 0 #ccc;}
.nav ul ul li {display: block; float: none;}
.nav ul ul li:after {content: ''; border: none;}
.nav ul ul ul {position: absolute; left: 200px; top: 0;}

.nav ul ul {opacity: 0; filter: alpha(opacity=0); -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; zoom: 0; visibility: hidden; height: 0;}
.nav li:hover > ul {opacity: 1; filter: alpha(opacity=100); -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; zoom: 1; visibility: visible; height: auto;}

.nav ul li.has-sub > a:after {content: ' \25BE'; font-size: 1.2em; display: inline-block; position: absolute; top: 13px; right: 5px; color: #000;}
.nav ul ul li.has-sub > a:after {content: ' \25B8'; top: 14px; right: 5px;}

/* .article */
.sticky {background: #f9f9f9; padding: 20px;}
.article {margin-bottom: 10px; overflow: hidden; clear: both;}
.article-page {margin-bottom: 0;}
.article .post-header {margin-bottom: 5px; }
.article .page-title,
.article .post-title {font-family: Arial;font-size: 1.6em; font-weight: 700; }
.article .post-title a {text-decoration: none;}
.article .post-meta {font-size: .9em; line-height: 1.2em;}
.article .post-meta .post-meta-separator {color: #000; padding: 0 0px; font-size: 1.5em; vertical-align: middle;}
.article .post-comment-footer {text-align: right;}
.article .post-comment-footer a { padding: 5px 5px; text-decoration: none; position: relative; text-transform: uppercase;}
.article .post-comment-footer a:hover {}

/* .article misc */
.article blockquote:before {content: '\201C'; color: #ccc; font-family: Georgia, Serif; font-size: 3em; position: absolute; top: 5px; left: 0;}
.article blockquote:after {content: '\201D'; color: #ccc; font-family: Georgia, Serif; font-size: 3em; position: absolute; bottom: 0; right: 5px;}
.article blockquote {overflow: hidden; position: relative; display: block; clear: both; margin: 20px 0; padding: 10px 30px; font-style: italic; color: #888;}
.article blockquote p {padding: 0;}
.article ul {margin: 0 0 20px 25px; list-style: circle outside;}
.article ol {margin: 0 0 20px 25px; list-style: decimal outside;}
.article li {margin: 3px 0; line-height: 1.8em;}

.page-pagination {clear: both; padding: 5px 0; line-height: 1em;}
.page-pagination .page-pagination-title {font-weight: bold;}
.page-pagination .page-pagination-number {display: inline-block; border: 1px solid #ccc; padding: 5px 8px;}
.page-pagination a .page-pagination-number {}
.page-pagination a .page-pagination-number:hover {}

/* .article misc */
.pagetitle {font-size: .9em; font-weight: normal; margin-bottom: 10px; color: #999;}
.pagetitle-desc {font-size: .9em; font-style: italic;}

.pagination {clear: both; padding: 10px 0; overflow: hidden; text-align: center;}
.pagination a {padding: 10px 15px; margin-right: 5px; background: #ccc; color: #000;}
.pagination a:hover {background: #05abe0; color: #fff;}
.pagination .current {padding: 10px 15px; margin-right: 5px; background: #05abe0; color: #fff;}

.post-footer {clear: both; padding: 10px 0; margin: 5px 0; overflow: hidden;}
.post-footer ul {margin: 0; list-style: none;}
.post-footer ul li {margin: 5px 0;}
.post-footer ul li .dashicons {line-height: 1em; color: #000;}
.post-tags {font-size: .8em; line-height: 1.4em;}
.post-tags .dashicons {font-size: 1.4em;}
.footer-navi {background-color:#EAEAEA;clear: both; overflow: hidden; padding: 0 !important; margin-bottom: 20px; border-top: 1px solid #eee; border-bottom: 1px solid #eee;}
.footer-navi li.previous {float: left;}
.footer-navi li.next {float: right;}

/* .gallery */
.gallery {clear: both; overflow: hidden; margin: 15px 0;}
.gallery .gallery-item {display: inline-block; text-align: center; vertical-align: top; width: 100%;}
.gallery-columns-2 .gallery-item {max-width: 50%;}
.gallery-columns-3 .gallery-item {max-width: 33.33%;}
.gallery-columns-4 .gallery-item {max-width: 25%;}
.gallery-columns-5 .gallery-item {max-width: 20%;}
.gallery-columns-6 .gallery-item {max-width: 16.66%;}
.gallery-columns-7 .gallery-item {max-width: 14.28%;}
.gallery-columns-8 .gallery-item {max-width: 12.5%;}
.gallery-columns-9 .gallery-item {max-width: 11.11%;}
.gallery-caption {}
.gallery dl {margin: 0;}
.gallery a {padding: 5px; display: block;}
.gallery a img {max-width: 100%; height: auto; border: none !important;}
.gallery-caption {font-size: .9em;}

/* .side-widget */
.side-widget {font-family: Arial; padding: 10px 10px 5px 10px; margin-bottom: 10px; overflow: hidden; clear: both; }
.textwidget {overflow: hidden; margin-bottom: 10px; clear: both;}
.side-widget h3 {background: #345FA0; color: #fff; padding: 5px; margin: -10px -10px 5px -10px; font-size: 1em; font-weight: 700; text-transform: uppercase; letter-spacing: .1em;}
.side-widget select {width: 80%;}
.side-widget ol,
.side-widget ul {clear: both; margin: 0 0 0 15px;}
.side-widget ol li,
.side-widget ul li {margin: 0 0; line-height: 1.5em;}
.side-widget ol ol,
.side-widget ol ul,
.side-widget ul ol,
.side-widget ul ul {clear: both; list-style: square outside none; padding-left: 10px;}

/* .search-form */
.search-form {clear: both; overflow: hidden; text-align: center;}

/* .footer */
p.footer-copy {font-size: .8em; color: #000; overflow: hidden; margin: 10px; text-align: center; text-transform: uppercase; letter-spacing: .1em;}
p.footer-copy a {color: #000;}

/* .comment-box */
.comment-box {clear: both; margin-top: 5px; padding: 0 10px; overflow: hidden;}
.comment-box h4 {font-size: 1.4em; margin: 10px 0;}

.comment-form {padding: 20px; border: 1px solid #ddd; background: #f9f9f9;}
.comment-form .comment-form-author label,
.comment-form .comment-form-email label,
.comment-form .comment-form-url label,
.comment-form .comment-form-comment label {display: block;}
.comment-form .comment-form-author input,
.comment-form .comment-form-email input,
.comment-form .comment-form-url input,
.comment-form .comment-form-comment textarea {width: 97%; padding: 1%; background: #fff;}

.comment-form .comment-form-author,
.comment-form .comment-form-email,
.comment-form .comment-form-url,
.comment-form .comment-form-comment {margin-bottom: 10px;}
.comment-form .form-allowed-tags {font-size: 1.2em; display: none;}
.comment-form .form-submit {}

#respond {margin-top: 20px;}
.required-input {color: #f00;}
.avatar {margin-right: 20px; float: left; border: 1px solid #999;}
.comment-meta {clear: both; overflow: hidden; font-size: .8em; margin-bottom: 10px;}
.comment-meta small {font-style: italic; color: #999; font-size: .85em;}
ol.commentlist {margin: 0;}
ol.commentlist li {border-bottom: 1px solid #ddd; margin-bottom: 20px; list-style: none;}
ol.commentlist li ul {padding: 0;}
ol.commentlist li ul.children li {border: none; border-left: 1px solid #ddd; padding: 0 0 0 30px; margin: 0; list-style: none;}
ol.commentlist li ul.children li.alt {}
ol.commentlist li ul.children li.byuser {}
ol.commentlist li ul.children li.comment {}
ol.commentlist li ul.children li.bypostauthor {}
ol.commentlist li ul.children li.comment-author-admin {}
ol.commentlist .parent {}
ol.commentlist .comment {overflow: hidden; padding: 10px 0;}
ol.commentlist .comment-content {overflow: hidden;}
ol.commentlist .children {}
ol.commentlist .pingback {}
ol.commentlist .bypostauthor {}
ol.commentlist .comment-author {}
ol.commentlist .comment-author-admin {}
ol.commentlist .alt {}
ol.commentlist .odd {}
ol.commentlist .even {}
ol.commentlist .thread-alt {}
ol.commentlist .thread-odd {}
ol.commentlist .thread-even {}
ol.commentlist li ul.children .alt {}
ol.commentlist li ul.children .odd {}
ol.commentlist li ul.children .even {}
ol.commentlist .vcard {}
ol.commentlist .vcard cite.fn {}
ol.commentlist .vcard span.says {}
ol.commentlist .vcard img.photo {}
ol.commentlist .vcard img.avatar {}
ol.commentlist .vcard cite.fn a.url {}
#cancel-comment-reply-link {background: #000; color: #fff; padding: 2px 5px; font-family: Verdana, Arial, Tahoma, Sans-serif; font-size: .9em; font-weight: normal;}
a.comment-reply-link {background: #000; color: #fff; padding: 2px 5px; font-family: Verdana, Arial, Tahoma, Sans-serif;}
.comment-pagination {clear: both; overflow: hidden; margin: 5px 0;}

/* #wp-calendar */
#wp-calendar {text-align: center; width: 100%; font-size: .9em; background: #fff;}
#wp-calendar caption {font-weight: bold; background: #fff; text-align: center; padding: 5px 0; border-top: 1px solid #eee; border-left: 1px solid #eee; border-right: 1px solid #eee;}
#wp-calendar th {font-style: normal; text-transform: capitalize; padding: 2px; border-right: 1px solid #eee;}
#wp-calendar td {font-style: normal; padding: 2px; border-right: 1px solid #eee;}
#wp-calendar tr {border-top: 1px solid #eee; border-left: 1px solid #eee;}
#wp-calendar tfoot td {border-bottom: 1px solid #eee;}

/* img */
img {max-width: 100%; height: auto;}
img.aligncenter {display: block; margin: 0 auto 10px auto;}
img.alignright {display: inline; margin: 0 0 10px 20px;}
img.alignleft {display: inline; margin: 0 20px 10px 0;}
.aligncenter,
.centered {display: block; margin: 0 auto 10px auto;}
.alignleft {float: left; margin: 0 20px 5px 0;}
.alignright {float: right; margin: 0 0 5px 20px;}
.attachment-caption {text-align: center; font-weight: 700;}
.attachment-desc {text-align: center;}

/* .wp-caption */
.aligncenter,
div.aligncenter {display: block; margin-left: auto; margin-right: auto;}
.wp-caption {border: 1px solid #ccc; background: #efefef; padding: 1%; text-align: center; max-width: 96%;}
.wp-caption img {border: 0;}
.wp-caption .wp-caption-text {font-size: 0.85em; line-height: 1.2em; padding: 3px 0; margin: 0;}

/* .screen-reader-text */
.screen-reader-text {display: none;}
.screen-reader-text:focus {}

/* Input and label */
select:focus,
textarea:focus,
input:focus {}

label {display: inline-block; margin-right: 20px; vertical-align: top;}
select,
textarea,
input {font-family: Verdana, Arial, Tahoma, Sans-serif; font-size: 1em;}
.input-button,
input[type=submit] {cursor: pointer; font-family: Verdana, Arial, Tahoma, Sans-serif; font-size: 1em;}

/* Misc */
.hidden {display: none;}
.require {color: #f00;}
.focused {border: 1px solid #888; -webkit-box-shadow: 0px 0px 2px 1px rgba(0, 0, 0, .2); box-shadow: 0px 0px 2px 1px rgba(0, 0, 0, .2);}
.highlight {background: #efefef; padding: 0 2px;}
.button {padding: 1px 5px;}
.fade {filter: alpha(opacity=50); opacity: .5;}
.clearfix {clear: both; height: 10px;}
.shadow {-webkit-box-shadow: 0 0 1px 0 #aaa; box-shadow: 0 0 1px 0 #aaa;}
.text-shadow {text-shadow: 1px 1px 1px gray;}
.transparency {background-color: rgba(255, 255, 255, .8);}

.noborder,
.noborder tbody,
.noborder thead,
.noborder tfoot,
.noborder tr,
.noborder td,
.noborder th {border: none;}
.radius-50 {-moz-border-radius: 50%; -webkit-border-radius: 50%; border-radius: 50%;}
.radius-30 {-moz-border-radius: 30px; -webkit-border-radius: 30px; border-radius: 30px;}
.radius-20 {-moz-border-radius: 20px; -webkit-border-radius: 20px; border-radius: 20px;}
.radius-10 {-moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px;}
.radius-8 {-moz-border-radius: 8px; -webkit-border-radius: 8px; border-radius: 8px;}
.radius-4 {-moz-border-radius: 4px; -webkit-border-radius: 4px; border-radius: 4px;}
.radius-2 {-moz-border-radius: 2px; -webkit-border-radius: 2px; border-radius: 2px;}
.width-100 {width: 100%;}
.width-95 {width: 95%;}
.width-90 {width: 90%;}
.width-85 {width: 85%;}
.width-80 {width: 80%;}
.width-75 {width: 75%;}
.width-70 {width: 70%;}
.width-65 {width: 65%;}
.width-60 {width: 60%;}
.width-55 {width: 55%;}
.width-50 {width: 50%;}
.width-45 {width: 45%;}
.width-40 {width: 40%;}
.width-35 {width: 35%;}
.width-30 {width: 30%;}
.width-25 {width: 25%;}
.width-20 {width: 20%;}
.width-15 {width: 15%;}
.width-10 {width: 10%;}

/*************************************************************************************************************************
Screen smaller than 480px
*************************************************************************************************************************/
@media all and (max-width: 480px) {

  /* Overall */
  	.wrapper {
  		margin: 0px auto;
  		width: 90%;	
  	}
  	.container { 
  		background: #fff;
  		margin-top: -110px;
  		margin-bottom: 60px;
		border-top: 5px solid #345FA0;
  	}
  	.header {
  		position: relative; 
  		width: 100%; 
  		margin: 0 auto; 
  		padding: 5px 0; 
  		background: white;
		border-bottom: 3px solid #345FA0;
	}
	.section,
	.section-wide,
	.aside  {
		clear: both;
		float: left; 
		width: 90%; 
		margin: 15px;
	}
  .nosidebar{
    width: 90% !important;
  }
	.footer {
		clear: both; 
		overflow: hidden;
		margin: 20px auto 0px auto;
		width: 100%; 
		color: #000; 
		background:white; 
		border-top: 3px solid #345FA0;
	}
  	/* .nav */
  	.navwrapper {
  		height:150px;
  		background: #88bfe8; /* Old browsers */
		background: -moz-linear-gradient(top, #88bfe8 0%, #70b0e0 100%); /* FF3.6-15 */
		background: -webkit-linear-gradient(top, #88bfe8 0%,#70b0e0 100%); /* Chrome10-25,Safari5.1-6 */
		background: linear-gradient(to bottom, #88bfe8 0%,#70b0e0 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
		filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#88bfe8', endColorstr='#70b0e0',GradientType=0 );
  	}
  	.tinynav {display: block; width: 90%; margin: 0 auto;}
  	.nav {
  		padding-top: 10px;
  		position: relative; 
  		width: auto; 
  		clear: both; 
  		font-size: .8em; 
  		font-weight: 700; 
  		line-height: 1em; 
  		text-align: center; 
  		text-transform: uppercase; 
  	}
  	.nav ul {list-style: none; display: none;}
  	.nav a {display: block; padding: 8px 15px;}
  	.nav a:hover {}

}

/*************************************************************************************************************************
Screen between 481px and 839px
*************************************************************************************************************************/
@media all and (min-width: 481px) and (max-width: 839px) {

  /* Overall */
  	.wrapper {
  		margin: 0px auto;
  		width: 90%;	
  	}
  	.container { 
  		background: #fff;
  		margin-top: -110px;
  		margin-bottom: 60px;
		border-top: 5px solid #345FA0;
  	}
  	.header {
  		position: relative; 
  		width: 100%; 
  		margin: 0 auto; 
  		padding: 5px 0; 
  		background: white;
		border-bottom: 3px solid #345FA0;
	}
	.section {
		float: left; 
		width: 61%; 
		margin: 15px;
	}
  .nosidebar{
    width: 95% !important;
  }
 	.section-wide {clear: both; width: 96%; margin: 2%;}
  	.aside {float: right; width: 30%; margin: 2%;}
	.footer {
		position:fixed;
		bottom:0;
		clear: both; 
		overflow: hidden;
		margin: 20px auto 0px auto;
		width: 100%; 
		color: #000; 
		background:white; 
		border-top: 3px solid #345FA0;
	}
  	/* .nav */
  	.navwrapper {
  		height:150px;
  		background: #88bfe8; /* Old browsers */
		background: -moz-linear-gradient(top, #88bfe8 0%, #70b0e0 100%); /* FF3.6-15 */
		background: -webkit-linear-gradient(top, #88bfe8 0%,#70b0e0 100%); /* Chrome10-25,Safari5.1-6 */
		background: linear-gradient(to bottom, #88bfe8 0%,#70b0e0 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
		filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#88bfe8', endColorstr='#70b0e0',GradientType=0 );
  	}
  	.tinynav {display: none;}
  	.nav {
  		float:right;
  		position: relative; 
  		width: auto; 
  		clear: both; 
  		font-size: .8em; 
  		font-weight: 700; 
  		line-height: 1em; 
  		text-align: center; 
  		text-transform: uppercase; 
  	}
  	.nav ul {list-style: none; display: inline-block; text-align: left;}
  	.nav a {display: block; padding: 15px; color: #fff;}
  	.nav a:hover {color: #000;}

}

/*************************************************************************************************************************
Screen larger than 840px
*************************************************************************************************************************/
@media all and (min-width: 840px) {

  	/* Overall */
  	.wrapper {
  		margin: 0px auto;
  		width: 980px;
  	}
  	.container { 
  		background: #fff;
  		/*border: 1px solid #345FA0;*/
  		margin-top: -110px;
  		margin-bottom: 60px;
		border-top: 5px solid #345FA0;
  	}
  	.header {
  		position: relative; 
  		width: 100%; 
  		margin: 0 auto; 
  		padding: 5px 0; 
  		background: white;
		border-bottom: 3px solid #345FA0;
	}
	.section {
		float: left; 
		width: 720px; 
		margin: 15px;
	}
	.section-wide {clear: both; width: 770px; margin: 15px;}
  .nosidebar{
    width: 95% !important;
  }
	.aside {float: right; width: 200px; margin: 15px;}
	.footer {
		position:fixed;bottom:0;
		clear: both; 
		overflow: hidden;
		margin: 20px auto 0px auto;
		width: 100%; 
		color: #000; 
		background:white; 
		border-top: 3px solid #345FA0;
	}
  	/* .nav */
  	.navwrapper {
  		height:150px;
  		background: #88bfe8; /* Old browsers */
		background: -moz-linear-gradient(top, #88bfe8 0%, #70b0e0 100%); /* FF3.6-15 */
		background: -webkit-linear-gradient(top, #88bfe8 0%,#70b0e0 100%); /* Chrome10-25,Safari5.1-6 */
		background: linear-gradient(to bottom, #88bfe8 0%,#70b0e0 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
		filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#88bfe8', endColorstr='#70b0e0',GradientType=0 );
  	}
  	.tinynav {display: none;}
  	.nav {
  		float:right;
  		position: relative; 
  		width: auto; 
  		clear: both; 
  		font-size: .8em; 
  		font-weight: 700; 
  		line-height: 1em; 
  		text-align: center; 
  		text-transform: uppercase; 
	}
	.nav ul {list-style: none; display: inline-block; text-align: left;}
	.nav a {display: block; padding: 15px; color: #fff; text-decoration: none;}
	.nav a:hover {color: #000;}

}