/*
	Theme Name: MagaziZimple (Personal)
	Theme URI: http://www.oketheme.com/themes/magazimple-theme
	Description: MagaZimple is a multipurpose WordPress magazine theme with simple design so it can be used for any type of blog or website.
	Version: 1.0
	Author: Tri Yuli Kurniawan
	Author URI: http://www.oketheme.com
	Tags: magazimple, news, magazine, responsive, oketheme
*/

/*------------------------------------------*\
    MAIN STYLE - MAGAZIMPLE © Oketheme.com
\*------------------------------------------*/

*,
*:after,
*:before {
	box-sizing:border-box;
	-webkit-box-sizing:border-box;
	-moz-box-sizing:border-box;
	-webkit-font-smoothing:antialiased;
	font-smoothing:antialiased;
	text-rendering:optimizeLegibility;
}
body {
font-family : Tahoma;
font-size : 80%;
color : #444;
background-color : #000;
background-image : url("img/pattern/Brushed Alu Dark.png");
}
nav, ul, li, a {
margin : 0;
padding : 0;
}
.clear:before, .clear:after {
content : ' ';
display : table;
}
.clear:after {
clear : both;
}
.error404z {
float : left;
}
.date {
font-size : 11px;
}
h1 {
font-size : 140%;
margin : 3px 0 3px 0;
}
h2 {
font-size : 120%;
margin : 3px 0 3px 0;
}
h3 {
font-size : 100%;
margin : 3px 0 3px 0;
}
img {
max-width : 100%;
vertical-align : bottom;
}
a {
color : #E91B23;
text-decoration : none;
}
a:hover {
color : #E91B23;
text-decoration : underline;
}
a:focus {
outline : 0;
}
a:hover, a:active {
outline : 0;
}
input, textarea {
border : #DDD solid 1px;
}
blockquote {
color : #444;
font-family : georgia;
font-style : italic;
margin : 10px 10px 10px 20px;
padding : 5px;
border-left : 5px solid #555;
background : #EEE;
}
code {
color : #444;
background : #EEE;
}
p img {
max-width : 100%;
padding : 0;
}
a img {
border : none medium;
}
img.centered {
display : block;
margin-left : auto;
margin-right : auto;
}
img.aligncenter {
display : block;
margin-left : auto;
margin-right : auto;
margin-bottom : 10px;
}
img.alignright {
display : inline;
margin : 0 0 2px 7px;
padding : 4px;
}
img.alignleft {
display : inline;
margin : 0 7px 2px 0;
padding : 4px;
}
.alignleft {
float : left;
}
.alignright {
float : right;
}

/* Wrapper Body */
.wrapper {
max-width : 870px;
width : 100%;
margin : 0 auto;
position : relative;
}

/* Wrapper Content */
.wrap-content {
width : 100%;
background : #F5F5F5;
}

/* Wrapper Page */
.wrap-page {
width : 100%;
padding : 0 15px 0 15px;
background : #FFF;
float : left;
}

/* Wrapper Single Page */
.wrap-single {
width : 70%;
padding : 0 15px 0 15px;
background : #FFF;
float : left;
}

/* Wrapper Post */
.wrap-post input {
width : 100px;
}
.wrap-post {
border-bottom : 1px solid #EEE;
margin-bottom : 5px;
padding-bottom : 5px;
}
.wrap-post ul li {
list-style-image : url("img/li.gif");
line-height : 20px;
border-bottom : 1px dotted #CCC;
padding : 5px;
margin : 2px 10px 2px 40px;
}
.wrap-post img {
border : #EEE solid 2px;
padding : 4px;
}
.wrap-post a:hover img {
border : #CCC solid 2px;
padding : 4px;
}

/* Header */
.header {
width : 100%;
height : 90px;
margin : 10px 0 10px 0;
}

/* Logo */
.logo {
width : 300px;
float : left;
font-size : 110%;
text-shadow : 1px 1px #000;
margin : 0 0 5px 0;
}
.logo a {
color : #EEE;
text-decoration : none;
}
.logo a:hover {
color : #FFF;
}
.logo h1 {
font-size : 180%;
font-family : Arial;
margin : 0;
}

/* Information Box */
.information {
color : #999;
width : 99%;
padding : 6px;
border-left : 8px solid #E91B23;
background : #111;
margin : 4px;
float : left;
text-align : justify;
}
.information_text {
width : 100%;
padding : 4px;
margin-bottom : 4px;
border-bottom : 1px dashed #222;
}

/* Recent Post */
.recent {
width : 100%;
font-size : 12px;
padding : 5px;
margin-bottom : 4px;
border-bottom : 1px solid #DDD;
background : #EEE;
float : left;
}
.recent img {
float : left;
border : #DDD solid 1px;
padding : 2px;
margin : 0 4px 0 0;
}

/* Related Post */
.related {
width : 100%;
font-size : 12px;
padding : 5px;
margin-bottom : 4px;
border : #DDD solid 1px;
background : #EEE;
}
.related ul li {
list-style-type : square;
border-bottom : 1px dashed #DDD;
margin : 2px 0 2px 16px;
}

/* Breadcrumbs */
.crumbs {
border-bottom : 1px dotted #EEE;
padding : 5px;
margin-bottom : 5px;
}

/* Slider */
.slider {
width : 61%;
position : relative;
margin : 4px 2px 4px 4px;
padding : 5px;
border-left : 8px solid #E91B23;
background : #111;
float : left;
}
.callbacks_container {
float : left;
width : 100%;
position : relative;
}
.callbacks_container a {
color : #999;
}
.callbacks_container a:hover {
color : #FFF;
text-decoration : none;
}
.callbacks {
position : relative;
list-style : none;
overflow : hidden;
width : 100%;
padding : 0;
margin : 0;
}
.callbacks li {
position : absolute;
width : 100%;
left : 0;
top : 0;
}
.callbacks img {
display : block;
position : relative;
z-index : 1;
height : auto;
width : 100%;
border : 0;
}
.callbacks .caption {
display : block;
position : absolute;
z-index : 2;
font-size : 12px;
text-shadow : none;
color : #999;
background : #000;
background : rgba(0, 0, 0, 0.8);
left : 0;
right : 0;
bottom : 0;
padding : 5px 10px;
margin : 0;
max-width : none;
}
.callbacks_nav {
position : absolute;
top : 50%;
left : 0;
opacity : 0.699999988079071044921875;
z-index : 3;
text-indent : -9999px;
overflow : hidden;
text-decoration : none;
height : 30px;
width : 30px;
background : url("img/navi.gif") left top no-repeat transparent;
margin-top : -35px;
}
.callbacks_nav:active {
opacity : 1;
}
.callbacks_nav.next {
left : auto;
background-position : right top;
right : 0;
}

/* Advertisment */
.iklan300x250 {
width : 300px;
height : 250px;
margin : 10px 0 0 10px;
float : left;
}
.iklan468x60 {
width : 468px;
margin : 5px 0 10px 0;
float : right;
}
.iklan728x90 {
width : 728px;
margin : 5px 0 5px 0;
text-align : center;
}
.iklan160kiri {
display : inline;
position : fixed;
top : 10px;
left : 10px;
}
.iklan160kanan {
display : inline;
position : fixed;
top : 10px;
right : 10px;
}

.categoriz {
background : #111;
width : 100%;
margin-bottom : 3px;
border-left : 8px solid #E91B23;
text-align : center;
line-height : 30px;
}
.categoriz a {
color : #FFF;
font-weight : bold;
text-decoration : none;
}
.view_categoriz {
background : #F5F5F5;
border : #E5E5E5 solid 1px;
width : 100%;
font-size : 11px;
margin-top : 6px;
text-align : center;
line-height : 20px;
}

/* Popular Post */
.terpopular {
width : 61%;
margin : 4px;
text-align : justify;
}
.terpopular img, .editor-pick-thumb img, .grid img, .recent img, .social img:hover {
opacity : 1;
}
.terpopular img:hover, .editor-pick-thumb img:hover, .grid img:hover, .recent img:hover {
opacity : 0.699999988079071044921875;
}
.terpopular img, .editor-pick-thumb img {
float : left;
margin : 0 5px 0 0;
}
.popular {
width : 37%;
margin : 4px;
}
.terpopular h3, .popular h3, .information h3 {
margin : 0 0 8px 0;
padding-bottom : 4px;
border-bottom : 1px solid #222;
text-transform : uppercase;
text-shadow : 1px 1px #000;
color : #FFF;
}
.popular ul li {
list-style-type : decimal;
border-bottom : 1px solid #222;
margin : 2px 0 2px 20px;
}
.popular a {
color : #999;
}
.popular a:hover {
color : #FFF;
text-decoration : none;
}
.editor-pick {
width : 100%;
float : left;
margin-bottom : 6px;
}
.editor-pick-thumb {
width : 32%;
float : left;
padding : 6px;
margin : 4px 0 4px 8px;
border : #DDD solid 1px;
background : #EEE;
}
.editor-pick-thumb ul li {
list-style-type : square;
border-bottom : 1px dashed #DDD;
margin : 2px 0 2px 16px;
font-size : 11px;
}
.terpopular, .popular {
color : #999;
padding : 6px;
border-left : 8px solid #E91B23;
background : #111;
float : left;
}

/* Head Title */
.headtitle {
color : #fff;
width : 100%;
background : #111;
}
.headtitle h3 {
width : 33%;
margin : 0 0 0 33%;
padding : 7px 0 7px 0;
background : #E91B23;
text-transform : uppercase;
text-align : center;
text-shadow : 1px 1px #000;
}

/* Grid Post */
.detailpost {
width : 108%;
margin-left : -6px;
background : #DDD;
padding : 4px;
}
.grid {
width : 19%;
height : 370px;
padding : 6px;
margin : 4px;
border : #DDD solid 1px;
background : #EEE;
float : left;
}
.grid h2 {
font-size : 100%;
}

/* Main Navigation */
.toggleMenu {
background : #E91B23;
width : 100%;
padding : 5px 5px;
color : #FFF;
}
.toggleMenu a, .toggleMenu a:hover {
color : #FFF;
text-decoration : none;
}
.nav {
list-style : none;
background : #111;
border-top : 4px solid #E91B23;
border-bottom : 1px solid #222;
text-transform : uppercase;
font-size : 11px;
text-align : left;
}
.nav:after {
content : " ";
display : table;
}
.nav:after {
clear : both;
}
.nav ul {
list-style : none;
width : 140px;
}
.nav a {
padding : 10px 15px;
color : #FFF;
text-decoration : none;
}
.nav a:hover {
color : #FFF;
background : #E91B23;
}
.nav li {
position : relative;
}
.nav > li {
float : left;
}
.nav > li > .parent {
background-image : url("img/downArrow.png");
background-repeat : no-repeat;
background-position : right;
}
.nav > li > a {
display : block;
}
.nav li ul {
position : absolute;
left : -9999px;
}
.nav > li.hover > ul {
left : 0;
}
.nav li li.hover ul {
left : 100%;
top : 0;
}
.nav li li a {
display : block;
background : #222;
position : relative;
z-index : 100;
border-top : 1px solid #111;
}
.nav li li li a {
background : #333;
z-index : 200;
border-top : 1px solid #111;
}
.nav li li li li a {
background : #444;
z-index : 300;
border-top : 1px solid #111;
}

/* Sidebar & Footbar*/
.singlebar {
width : 30%;
float : left;
background : #EEE;
}
.singlebarz {
width : 100%;
padding : 5px;
float : left;
}
.singlebarz ul {
list-style-type : none;
margin : 0;
}
.singlebarz ul li {
border-bottom : 1px solid #DDD;
padding : 4px;
background : #EEE;
}
.sidebar {
width : 100%;
margin-top : 8px;
color : #777;
font-size : 12px;
background : #111;
float : left;
padding : 0px 0 8px 0;
}
.singlebarz a {
color : #111;
text-decoration : none;
}
.sidebar a {
color : #999;
}
.sidebar a:hover {
color : #FFF;
text-decoration : none;
}
.sidebar h3, .singlebarz h3 {
color : #FFF;
margin-top : 5px;
text-transform : uppercase;
background : #222;
padding : 8px;
border-left : 8px solid #E91B23;
}
.sidebar1, .sidebar2, .sidebar3 {
width : 32%;
margin : 6px 2px 6px 8px;
float : left;
}
.sidebar ul {
list-style-type : none;
margin : 0;
}
.sidebar ul li {
border-bottom : 1px dashed #222;
padding : 4px;
background : #111;
}

/* Footer */
.footer {
background : #111;
color : #999;
font-size : 14px;
padding : 5px 5px 10px 5px;
border-top : 4px solid #222;
text-align : center;
}
.footer a {
color : #999;
}
.copyright, .copyright a {
font-size : 11px;
color : #444;
}

/* Footer Category */
.navibottom a, .close_box a, .hot-tags a {
font-size : 11px;
color : #999;
text-decoration : none;
background : #222;
padding : 1px 4px;
margin:1px 2px;
border-radius : 4px;
transition-duration : 0.5s;
}
.navibottom a:hover, .close_box a:hover, .hot-tags a:hover {
color : #FFF;
background : #E91B23;
}

/* Pagination */
.pagination {
width : 100%;
height : 30px;
line-height : 30px;
text-align : center;
}
.pagination a {
border-radius : 4px;
padding : 2px 4px;
margin-left : 2px;
background : #EEE;
text-decoration : none;
transition-duration : 0.5s;
}
.pagination a:hover {
color : #FFF;
background : #E91B23;
}

/* Photo Galery */
.rslides {
margin : 0 auto 40px;
}
.rslides {
position : relative;
list-style : none;
overflow : hidden;
width : 100%;
padding : 0;
margin : 0;
}
.rslides li {
position : absolute;
display : none;
width : 100%;
left : 0;
top : 0;
}
.rslides li:first-child {
position : relative;
display : block;
float : left;
}
.rslides img {
display : block;
height : auto;
float : left;
width : 100%;
border : 0;
}
.list_photo {
width : 100%;
height : auto;
}
.list_photo ul {
margin : 0;
padding : 0;
list-style : none;
}
.list_photo li {
padding : 0;
margin : 8px;
float : left;
}
.clearfix {
float : none;
clear : both;
}

/* Newsticker */
.newsticker {
width : 100%;
color : #E91B23;
font-size : 11px;
text-shadow : 1px 1px #000;
padding-left : 5px;
}
.newsticker a {
text-decoration : none;
color : #EEE;
line-height : 20px;
}
.newsticker a:hover {
color : #FFF;
}
.newsticker ul {
width : 100%;
list-style-type : none;
}

/* Trending Topic */
.hot-tags {
width : 100%;
padding : 5px;
background : #111;
color : #999;
}

/* Search */
.searchz {
width : 100%;
font-size : 14px;
padding : 10px;
background : #111;
float : left;
}
.searchz input {
width : 70%;
line-height : 20px;
background : #FFF;
border : #111 solid 1px;
float : left;
}
.searchz button {
width : 27%;
color : #FFF;
font-size : 80%;
font-weight : bold;
line-height : 20px;
background : #E91B23;
border : #111 solid 1px;
float : right;
}

/* Comment */
.comments, .tags {
width : 100%;
border : #DDD solid 1px;
padding : 10px;
background : #EEE;
text-align : left;
margin-bottom : 10px;
}
.comments textarea, .comments input {
width : 100%;
padding : 5px;
}
.form-submit input {
background : #111;
line-height : 30px;
border : none;
color : #999;
}
.comments li {
list-style-type : none;
padding : 10px;
margin : 5px 0 5px 0;
border-bottom : 1px solid #DDD;
background : #EEE;
}
.comments li li {
margin : 5px 0 5px 10px;
background : #E5E5E5;
}
.comments li li li {
background : #EEE;
}
.comments li li li li {
background : #E5E5E5;
}

/* Author */
.author {
padding : 10px;
background : #EEE;
margin-bottom : 10px;
}

/* Magravatar */
.avatar {
border-radius : 50%;
float : left;
margin : 0 5px 5px 0;
}

/* Social Media */
.social img {
margin : 5px 0;
opacity : 0.3;
transition-duration : 0.5s;
}
.ads-id {
width:42px;
height:42px;
background:url('img/social.gif') 0px 0px;
}
.feed , .facebook, .twitter, .gplus, .youtube, .pinterest, .vimeo {
width:42px;
height:42px;
}
.feed {
background:url('img/social.gif') 294px 0px;
}
.facebook{
background:url('img/social.gif') 252px 0px;
}
.twitter{
background:url('img/social.gif') 210px 0px;
}
.gplus{
background:url('img/social.gif') 168px 0px;
}
.youtube{
background:url('img/social.gif') 126px 0px;
}
.pinterest{
background:url('img/social.gif') 84px 0px;
}
.vimeo{
background:url('img/social.gif') 42px 0px;
}

/* Scroll Top */
.scrollup {
width : 40px;
height : 40px;
opacity : 0.5;
position : fixed;
bottom : 50px;
right : 50px;
display : none;
text-indent : -9999px;
background : url(img/icon_top.png) no-repeat;
}

/* SEO H1-H3 */
.seo h1, .seo h2 {
font-size: 0px;
display: none;
}
