/*
Theme Name: tokojazirah
Version: 1.0
Theme URI: http://www.oketheme.com/themes/tokojazirah-theme/
Author: Tri Yuli Kurniawan
Author URI: http://www.oketheme.com
Description: tokojazirah Theme adalah template toko online Wordpress yang dirancang dengan desain yang profesional, elegan dan tentunya mempunyai fitur-fitur yang keren. Theme option yang rapi dan teratur membuat pengguna tidak akan kesulitan untuk mengkonfigurasi tokojazirah Theme. Responsive Layout, template ini akan menyesuaikan layar pengunjung website agar website tetap terlihat cantik apabila diakses dari tablet maupun gadget layar mini lainnya.
*/

@font-face
{
font-family: OpenSans;
src: local('OpenSans'), local('OpenSans'), url('font/OpenSans.ttf') format('opentype'); 
}

*,
*: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: OpenSans;
font-size : 15px;
color : #888;
background-image : url("images/pattern/Light Brickwall.png");
margin : 0;
}
nav, ul, li, a {
margin : 0;
padding : 0;
}
.clear:before, .clear:after {
content : ' ';
display : table;
}
.clear:after {
clear : both;
}
.error404z {
float : left;
max-width : 50%;
}
.small {
font-size : 80%;
}
.hidden {
font-size : 0px;
}
.warning {
width : 100%;
padding : 10px;
background : #FFD5D5;
margin : 10px 0;
}
.sukses{
width : 100%;
padding : 10px;
border : 4px dotted #00A3D9;
margin : 10px 0;
}
.katalog {
margin-left : -10px;
}


/* LINK */

a {
color : #00A3D9;
text-decoration : none;
}
a:hover {
color : #777;;
transition-duration : 0.5s;
}
a:focus {
outline : 0;
}
a:hover, a:active {
outline : 0;
}

/* HEADING */

h1 {
font-size : 140%;
}
h2 {
font-size : 130%;
}
h3 {
font-size : 120%;
}
h4 {
font-size : 110%;
}
h1,h2,h3,h4{
color : #00A3D9;
margin : 5px 0;
}

/* INPUT */

input, textarea, select{
font-family: OpenSans;
font-size : 100%;
color : #999;
outline : none;
border : #DDD solid 1px;
}

button,.thebutton {
text-transform : uppercase;
background : #00A3D9;
color : #FFF;
border : 0;
padding : 5px 10px;
cursor: pointer;
}
input {
line-height : 20px;
padding : 5px;
}

iframe {
width : 100%;
height : 500px;
}

blockquote {
font-family : Georgia;
font-style : italic;
margin : 10px 10px 10px 20px;
padding : 5px 20px;
border-left : 5px solid #DDD;
background : #EEE;
}
code {
background : #EEE;
}

/* IMAGES */

img {
max-width : 100%;
vertical-align : bottom;
}
p img {
max-width : 100%;
}

a img {
border : none medium;
}

img.alignnone {
max-width : 100%;
}

img.centered {
display : block;
margin-left : auto;
margin-right : auto;
}

img.aligncenter {
display : block;
margin : 5px auto;
}
img.alignright {
display : inline;
margin : 0 0 5px 5px;
padding : 5px;
}
img.alignleft {
display : inline;
margin : 0 5px 5px 0;
padding : 5px;
}

/* ALIGN */

.alignleft {
float : left;
}
.alignright {
float : right;
}


/* IMAGE OPACITY */
.mirips  img:hover,.item img:hover, .thumbpil2 img:hover, .thumb2 img:hover, .blogpost img:hover{
opacity : 0.5;
transition-duration : 0.5s;
}

/*------------------------------------------*\
START - OKETHEME © Oketheme.com
\*------------------------------------------*/
#wrap {
width : 100%;
background : #FFF;
}

#wrapper { 
max-width : 1240px;
margin: 0 auto;
padding : 10px;
background : #FFF;
}

.topcolor {
background : #00A3D9;
margin: 0 auto;
width : 100%;
height : 10px;
background-image : url("images/pattern/garis.png");
}

/* Slider */

.topslider{
width : 1240px;
height : auto;
margin: 0 auto;
padding : 0 10px;
}
.topkontak {
width : 100%;
height : auto;
background : #00A3D9;
padding : 10px;
border-top-left-radius: 10px;
border-top-right-radius: 10px;
color : #FFF;
text-align : center;
}
.topkontak ul li {
list-style-type: none;
width : 20%;
float : left;
height : 20px;
margin-top : 10px;
display : none;
}
.kontak {
background : #F3F3F3;
color : #00A3D9;
}
#sliderwrap {
width : 100%;
background : #F3F3F3;
border-top : 1px solid #DDD;
}
.slider, .welcome{
width : 1240px;
height : auto;
margin: 0 auto;
padding :10px;
font-size : 110%;
}
.welcome p {
margin : 0px;
}

#slider1 .item img{
display: block;
width: 100%;
height: auto;
}

#slider2 .item{
margin: 0 10px;
border : 4px solid #EEE;
width: 150px;
display: block;
}
#testi .item {
display: block;
width: 100%;
height: auto;
}

/* Header Logo */
.header {
margin: 0 auto;
width : 1240px;
padding : 10px;
}
.logo {
width : 45%;
float : left;
font-size : 110%;
}
.logo h1 {
font-size : 180%;
margin : 0;
}

.sidelogo {
width : 55%;
float : right;
}
.toppage {
padding : 0 0 5px 0;
margin-bottom : 5px;
text-align : right;
line-height : 20px;
}

/* Contain*/

#container { 
width : 974px;
float : right;
margin-left : 10px;
}
.contain { 
width : 100%;
background : #F3F3F3;
padding : 10px 10px 1px 0;
margin-bottom : 10px;
border : 1px solid #EEE;
}
.contain h1, .contain h3{
font-weight : normal;
margin: 0 0 10px 10px;
padding-bottom : 10px;
border-bottom : 1px solid #EEE;
}

/* Pagination */
.pagination{
line-height : 30px;
text-align : center;
margin-bottom: 10px;
}
.pagination a {
padding : 2px 6px;
}
.pagination a:hover{
text-decoration : underline;
}

/* Produk Detail */

.produx {
width : 70%;
float : left;
margin-bottom : 5px;
padding : 0 10px 0 5px;
}
.produx h1{
margin : 0 0 10px 0;
}
.produx ul li {
list-style : none;
line-height : 16px;
border-bottom : 1px solid #EEE;
padding : 5px;
text-align : left;
}

.produxthumb {
width : 308px;
height : auto;
background : #F3F3F3;
border : 4px solid #F3F3F3;
float : left;
margin : 0 10px 5px 0;
}

/* Zoom Post */
#tokojazirah_gallery img{margin:4px;opacity : 0.4;}
#tokojazirah_gallery img:hover{opacity :1}
.active_gal img{margin:5px;opacity :1 !important;}

/* Related Post */

.mirip {
width : 30%;
float : right;
padding : 10px;
background : #F3F3F3;
border : 1px solid #EEE;
}
.mirips {
margin-top : 5px;
padding-top : 5px;
border-top : 1px solid #EEE;
}
.mirips li{
list-style-type : none;
font-size : 85%;
}
.mirips img {
margin-right : 10px;
float : left;
}

/* Single Text */
.singletext {
width : 100%;
background : #F3F3F3;
border : 1px solid #EEE;
padding : 10px;
margin : 10px 0;
}
.isisingletext{
width : 100%;
background : #FFF;
padding : 10px;
margin : 5px 0;
}

/* Popup */
.popup {
max-width : 800px;
padding : 10px;
background : #F3F3F3;
border : 1px solid #EEE;
}

/* Wrapper Post */

.wrap-post {
border-top : 4px solid #F3F3F3;
border-bottom : 1px solid #F3F3F3;
margin-bottom : 5px;
padding : 0 5px;
}
.wrap-post ul li, .popup ul li{
list-style-image : url("images/li.gif");
line-height : 20px;
border-bottom : 1px dashed #EEE;
padding : 5px;
margin : 2px 10px 2px 50px;

}

/* Grid Post */

.grid {
float : left;
width : 20%;
height : 390px;
padding : 0 0 10px 10px;
font-size : 90%;
}
.thumb1, .thumb2 {
width : 100%;
height : 100%;
background :#FFF;
padding :  5px;
text-align : center;
}
.thumb1 {
border : 1px solid #EEE;
}
.thumb2 {
border : 2px solid #E5E5E5;
}
#badge {
width: 86px;
height: 64px;
position: absolute;
margin: 0;
z-index : 100;
}

#badge .ibad { width:86px;height: 64px; background-repeat : no-repeat; }

.titleloop {
width : 100%;
height : 40px;
}
.titleloop h4{
font-size : 100%;
}
.harga {
color : #00A3D9;
margin : 5px 0;
padding-top : 5px;
font-weight : bold;
}

/* Blog Post */
#blog {
width : 100%;
padding-left: 10px;
}
.blogpost {
width : 100%;
padding : 10px;
background : #FFF;
margin-bottom : 10px;
border : 1px solid #EEE;
}
.blogpost img {
float : left;
margin : 5px 5px 5px 0;
padding : 5px;
border : 1px solid #EEE;
}

/* Sidebar */

#sidebar {
width : 236px;
float : left;
}
#sidebar h3,.singletexthead{
font-weight : normal;
color : #00A3D9;
margin-bottom : 10px;
padding-bottom : 10px;
border-bottom : 1px solid #EEE;
}

.sidebar {
width : 100%;
padding : 10px;
background : #F3F3F3;
margin-bottom : 10px;
border : 1px solid #EEE;
}
.sidebar ul {
list-style-type : none;
}
.sidebar ul li {
padding : 5px;
margin-left : 5px;
}
.sidebar ul li li {
border-left : 4px solid #EEE;
}
.sidebar p{
padding : 5px;
margin : 0;
}

/* Menu Produk */

#menuwrapper {
width : 100%;
padding : 10px;
background : #F3F3F3;
margin-bottom : 10px;
border : 1px solid #EEE;
}
#menuwrapper2 {
display : none;
}
#menuwrapper ul, #menuwrapper ul li{
margin:0;
padding:0;
list-style:none;
z-index : 200;
}
#menuwrapper ul li{
line-height : 18px;
width:214px;
cursor:pointer;
}
#menuwrapper ul li a{
padding:5px 15px;
display:inline-block;
text-decoration:none;
z-index : 200;
}
#menuwrapper ul li:hover{
background:#F1F1F1;
position:relative;
}
#menuwrapper ul li ul{
position:absolute;
display:none;
}
#menuwrapper ul li:hover ul{
left:214px;
top:0px;
display:block;
}
#menuwrapper ul li ul li{
background:#EEE;
z-index : 300;
}
#menuwrapper ul li:hover ul li:hover{
background:#E5E5E5;
}
#menuwrapper ul li ul li a{
display:inline-block;
width:214px;
}
#menuwrapper ul li:hover ul li ul{
position:absolute;
display:none;
}
#menuwrapper ul li:hover ul li:hover ul{
display:block;
left:214px;
top:0;
}
#menuwrapper ul li:hover ul li:hover ul li{
background:#E1E1E1;
z-index : 400;
}
#menuwrapper ul li:hover ul li:hover ul li:hover{
background:#DDD;
z-index : 500;
}

/* Breadcrumbs */

.crumbs {
border-bottom : 1px solid #F3F3F3;
padding : 5px;
margin-bottom : 5px;
}


/* Advertisement */

.ads728{
width : 100%;
text-align : center;
height : 90px;
margin-bottom : 10px;
}

.ads160{
width : 160px;
height : 600px;
margin : 0 auto;
}


/* Main Navigation */
.navback {
width : 100%;
background : #00A3D9;
}

.toggleMenu {
width : 1240px;
padding : 10px 15px;
line-height : 14px;
background : #00A3D9;
margin-bottom : 5px;
text-transform : uppercase;
display : none;
}
.toggleMenu a, .toggleMenu a:hover {
color : #FFF;
font-size : 100%;
}
.nav {
width : 1240px;
list-style : none;
line-height : 14px;
font-size : 100%;
text-align : left;
background : #00A3D9;
text-transform : uppercase;
margin: 0 auto;
}
.nav:after {
content : " ";
display : table;
}
.nav:after {
clear : both;
}
.nav ul {
list-style : none;
width : 140px;
}
.nav a {
padding : 10px 15px;
color : #FFF;
}
.nav a:hover {
color : #777;
background : #EEE;
}
.nav li {
position : relative;
}
.nav > li {
float : left;
}
.nav > li > .parent {
background-image : url("images/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 : #00A3D9;
color : #FFF;
position : relative;
z-index : 100;
}
.nav li li a :hover{
color : #777;
}
.nav li li li a {
z-index : 200;
}
.nav li li li li a {
z-index : 300;
}

/* Footer */
#wrapfooter {
width : 100%;
background : #00A3D9;
}
#footerback { 
max-width : 1240px;
margin: 0 auto;
padding : 10px 0;
}
#footerback a{
color : #F3F3F3;
}
#footerback a:hover{
color : #FFF;
text-decoration : underline;
}
.footer {
width : 100%;
font-size : 100%;
padding-top : 10px;
text-align : center;
color : #FFF;
border-top : 1px dashed #CCC;
}

/* Footbar */

.footbar {
width : 100%;
color : #FFF;
padding : 5px;
height : auto;
}
.footbar h3 {
color : #FFF;
border-bottom : 0px;
font-weight : normal;
margin-bottom : 10px;
padding-bottom : 10px;
}

.footbar1,.footbar3 {
width : 33%;
padding : 4px;
float : left;
}
.footbar2{
width : 34%;
padding : 4px;
float : left;
}
.foot {
width : 100%;
padding : 10px;
margin-bottom : 10px;
}
.foot ul {
list-style-type : square;
margin-left : 15px;
}
.foot ul li {
padding : 5px;
margin-left : 5px;
}
.foot ul li li {
border-left : 4px solid #EEE;
}
.foot p{
padding : 0;
margin : 0;
}

/* Search */
.searchz {
width : 100%;
float : right;
border : 1px solid #DDD;
}
.searchz input {
width : 50%;
height : 44px;
padding : 0 5px;
background : #FFF;
border : #EEE solid 4px;
float : left;
margin : 0;
}
.searchz select {
width : 30%;
height : 44px;
background : #FFF;
border : #EEE solid 4px;
float : left;
margin : 0;
}
.searchz button {
width : 20%;
color : #FFF;
height : 44px;
padding : 0 5px;
background : #00A3D9;
border : #EEE solid 4px;
float : right;
margin : 0;
}

/* Comment */
.comments{
width : 100%;
padding : 10px;
background : #F3F3F3;
text-align : left;
margin : 10px 0;
border : 1px solid #EEE;
}

.comments textarea, .comments input {
width : 100%;
padding : 5px;
margin : 0;
}
.form-submit input {
background : #00A3D9;
width : 150px;
border : none;
color : #FFF;
cursor: pointer;
text-transform : uppercase;
}
.comments li {
list-style-type : none;
padding : 10px;
margin : 5px 0;
border-bottom : 1px solid #E5E5E5;
background : #F3F3F3;
}
.comments li li {
margin : 5px 0 5px 10px;
background : #EEE;
}
.comments li li li {
background : #F3F3F3;
}
.comments li li li li {
background : #EEE;
}

/* Magravatar */
.avatar {
border-radius : 50%;
float : left;
margin : 0 5px 5px 0;
}

/* Scroll Top */
.scrollup {
width : 40px;
height : 40px;
opacity : 0.7;
position : fixed;
bottom : 20px;
right : 20px;
display : none;
z-index : 600;
text-indent : -9999px;
background : url(images/icon_top.png) no-repeat;
}

/* SEO H1-H3 */
.seo h1, .seo h2, .seo h3 {
font-size: 0px;
display: none;
}

/* JCART */
#jcart, #jcart input, #jcart-tooltip {
font-size: 90%;}
#jcart input {
text-align : center;
color : #777;
}

#jcart-error {
text-align: center;
padding: 5px; }

#jcart table {
width: 100%;
border: 0;
background: #FFF;
border-collapse: collapse;
color: #777; }

#jcart th {
background-color: #EEE;
text-align: center;
font-weight: bold;
color: #777; }

#jcart th, #jcart td {
padding: 5px;
border: 0;
border: 1px solid #DDD;
vertical-align: middle;
text-align: center;
font-weight: normal; }

#jcart #jcart-empty { text-align: center; }

.jcart-item-qty { width: 10%}

#jcart .jcart-item-name {
width: 60%;
font-size: 95%;
text-align: left; }

#jcart .jcart-item-price {
width: 30%;
text-align: right; }

.jcart-item-price span { display: block; }

.jcart-remove {
font-size: 90%;
font-weight: normal; }

#jcart-subtotal {
display: block;
text-align: right; }

#jcart-subtotal strong {  }

#jcart-buttons input {
padding: 2px;
margin: 2px; }

#jcart-tooltip, #jcart-sizetip {
display: none;
position: absolute;
border: 1px solid #DDD;
z-index: 1000;
background-color: #F3F3F3;
padding : 10px;
font-size: 140%;
font-weight: bold;
color : #00A3D9;
}

#jcart-sizetip {
color : red;
}

#external-subtotal {
font-size: 120%;
font-weight: bold; }

#pilihan {
display: block;
padding : 5px;
max-width: 300px;
}

.keranjang {
width : 600px;
background : #FFF;
padding : 5px;
border : 1px solid #DDD;
display : none;
margin : 5px 0;
z-index: 200;
position: absolute;
}

.scrollcart {
width : 120px;
height : 40px;
opacity : 0.7;
position : fixed;
bottom : 20px;
left : 20px;
display : none;
z-index : 600;
text-indent : -9999px;
background : url(images/cart.png) no-repeat;
}


/* Featured */
#featured{
width : 50%;
padding-left: 10px;
float : left;
font-size : 90%;
}
.thumbpil1,.thumbpil2 {
width : 100%;
height : 162px;
padding : 5px;
background : #FFF;
border : 1px solid #EEE;
margin-bottom : 10px;
text-align : left;
}
.thumbpil2 {
border : 2px solid #E5E5E5;
}
.thumbpil1 img, .thumbpil2 img {
float : right;
margin-left : 5px;
}

/* Tabs */

.tabs input[type=radio] {
position: relative;
display : none;
}
.tabs {
width: 100%;
height : 410px;
list-style: none;
position: relative;
margin-bottom : 15px;
}
.tabs li{
float: left;
}
.tabs label {
display: block;
padding: 10px 20px;
background: #ECECFB;
cursor: pointer;
border-left : 2px solid #F3F3F3;
position: relative;
-webkit-transition: all 0.2s ease-in-out;
-moz-transition: all 0.2s ease-in-out;
-o-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
}
.tabs label:hover {
background: #F3F3F3;
}
[id^=tab]:checked + label {
background: #F3F3F3;
color : #00A3D9;
}
[id^=tab]:checked ~ [id^=tab-content] {
display: block;
}
.tab-content{
z-index: 200;
display: none;
text-align: left;
width: 100%;
padding : 10px 0 5px 0;
background: #F3F3F3;
position: absolute;
left: 0;
}
.featuredlink a{
background : #EEE;
padding : 5px 10px;

}
.featuredlink a:hover {
background : #00A3D9;
color : #FFF;
}

/* Ekspedisi */

.jne , .pos, .tiki,.wahana, .elteha, .pandu, .dakota, .rpx, .ekspedisi{
background-image: url("images/ekspedisi.jpg");
background-repeat: no-repeat;
float: left;
width: 75px;
height: 50px;
border : 1px solid #EEE;
margin : 5px 5%;
}
.jne { background-position: 0px 0px;} 
.pos{ background-position: -75px 0px;} 
.tiki{ background-position: -150px 0px;} 
.wahana{ background-position: -225px 0px;} 
.elteha{ background-position: -300px 0px;} 
.pandu{ background-position: -375px 0px;} 
.dakota{ background-position: -450px 0px;} 
.rpx{ background-position: -525px 0px;} 
.ekspedisi{ background-position: -600px 0px;} 

/*-------------------------------------------------*\
RESPONSIVE STYLE - tokojazirah © Oketheme.com
\*-------------------------------------------------*/
@media screen and (max-width:1254px) {
#wrapper, .topslider,.slider,.welcome,.header,.toggleMenu,.nav,#footerback,.topkontak { 
max-width : 100%;
}
#container { 
width : 79%;
}
#sidebar {
width : 20%;
}
}
@media screen and (max-width:1084px) {
.produx,.mirip {
width : 100%;
}
#container { 
width : 75%;
}
.sidelogo {
font-size : 90%;
}
#sidebar {
width : 23%;
}
.grid , .topkontak ul li {
width : 25%;
}
}
@media screen and (max-width:980px) {
.grid, .topkontak ul li  {
width : 33%;
}
}
@media screen and (max-width:945px) {
#container { 
width : 66%;
}
#sidebar {
width : 32%;
}
.grid {
width : 50%;
}
#featured{
width : 100%;
}
.tabs {
height : 745px;
}
.produxthumb {
float : none;
}
}


@media screen and (max-width:768px) {

.logo {
width : 100%;
margin: 0 auto;
float : none;
text-align : center;
}
.ads728 {
display : none;
}
.sidelogo {
width : 100%;
margin-top : 5px;
}
.toppage {
text-align : center;
}

.nav > li {
float : none;
}
.nav > li > .parent {
background-position : 95% 50%;
}
.nav li li .parent {
background-image : url("img/downArrow.png");
background-repeat : no-repeat;
background-position : 95% 50%;
}
.nav ul {
display : block;
width : 100%;
}
.nav > li.hover > ul, .nav li li.hover ul {
position : static;
}
}

@media screen and (max-width:690px) {
#container { 
width : 100%;
}
#sidebar {
width : 100%;
}

#featured, .topkontak ul li {
width : 50%;
}
.thumbpil1,.thumbpil2 {
padding : 10px;
}
.thumbpil1 img, .thumbpil2 img, .ads160 {
display : none;
}
.tabs {
height : 410px;
}

.searchz input ,.footbar1, .footbar2, .footbar3{
width : 100%;
}
.searchz select {
width : 60%;
}
.searchz button {
width : 40%;
}
#menuwrapper {
display : none;
}
.scrollcart, #menuwrapper2 {
display : block;
}
.keranjang {
width : 400px;
}
.produxthumb {
float : left;
}
}

@media screen and (max-width:620px) {
.produxthumb {
float : none;
}
}

@media screen and (max-width:460px) {
#featured, .topkontak ul li ,.grid,.produxthumb {
width : 100%;
}
.featuredlink {
display : none;
}
.ads160{
display : block;
}
.tabs {
height : 725px;
}
.keranjang {
width : 280px;
}
h1 {
font-size : 120%;
}
h2 {
font-size : 110%;
}
h3 {
font-size : 100%;
}
h4 {
font-size : 95%;
}
}

@media screen and (max-width:320px) {
.topslider,.slider{
display : none;
}
}