/*
Original design: Variant Multi (v1.0 - Dec 15th, 2010) - A free xhtml/css website template by Andreas Viklund.
For more information, see http://andreasviklund.com/templates/variant-multi/
1a1a1a
*/

/*Smart phones*/
@media only screen and (min-width:319px){

span.highlight{background-color:yellow;}
*{margin:0;padding:0;}
form{font-size:1.5em; width:100%;}
body{background:#bdd7ee;color:#444;font:100%; font-size:1.4em; Verdana,Helvetica,sans-serif;}
p{line-height:2em; font-size:2em; margin-bottom:15px;}
div a{font-size:1.2em}
a{color:#467aa7;}
a:hover{color:#333;}
h1{color:#2a5a7a;font-family:Georgia,serif;font-size:1.8em;}
h2{color:#467aa7;font-family:Georgia,serif;font-size:1.7em;font-weight:400;margin:0 0 10px 0;}
h3{color:#467aa7;font-family:Georgia,serif;font-size:1.8em;font-weight:400;margin:0 0 8px;}
ul,ol,dl{margin:0 0 20px 20px; padding:0;}
li{padding-bottom:5px;}

#containerfull,#container980,#container760,#container600{margin:0 auto;padding:0;overflow:hidden;border-left:1px solid #ddd;border-right:1px solid #ddd;}

#container980{width:100%;}

/*
#containerfull{width:100%;border:0;}
#container760{width:760px;}
#container600{width:600px;}
*/

#header{background-color:#467aa7;margin:0 auto;padding:10px 25px;}
#header h1{margin:0;padding:20px 0 10px;}
#header h1 a{color:#eee;font-family:Georgia,serif;font-size:2.5em;font-weight:400;text-decoration:none;}
#header h2{color:#ddd;padding:0 0 10px 25px;margin:0;font-family:Georgia,serif;font-size:1.8em;font-weight:400;}

#menu{background-color:#467aa7;height:77px;}
#menu ul{float:auto;height:77px;list-style:none;margin:0 center;padding:0 25px 0 0;}
#menu ul li{background-color:#2a5a7a;display:block;float:left;margin:0 0 0 5px;padding:0;}
#menu ul li a{background-color:#2a5a7a;color:#ddd;display:block;font-size:1.8em;padding:10px 12px;text-decoration:none;}
#menu ul li a:hover{color:#fff;}
#menu ul li a.current{background-color:#eee;color:#333;border-bottom:1px solid #eee;}

#feature{background-color:#eee;color:#555;padding:25px 25px 5px;border-top:1px solid #ccc;border-bottom:1px solid #ccc;}
#feature h2{color:#467aa7;font-size:2em;line-height:1em;}
#feature p{font-size:2em;margin:0 0 15px 0; line-height:1.5em;}
#main{clear:both;margin:0;background-color:#fff;padding:25px 25px 5px;}
#content{width:100%;}

.products { padding-bottom: 24px; }
.products .title { margin: 0 0 27px 16px; width: 632px; }
.products .title a.title-link { position: absolute; top: 15px; right: 2px; color: #00a7e7; text-decoration: underline; }
.products .title a.title-link:hover { text-decoration: none; }
.products .row { height: 298px; }
.products .active { background-position: 0 0; }
.best-sellers { padding-bottom: 0; }

/*.row { height: 298px; }*/

/*.product-holder p {margin-bottom: 0px; line-height:16px}*/
.product-holder p {margin-bottom: 0px; }
/*.product-holder { display: inline; float: left; padding: 0 8px; width: 30%; }*/
.product-holder { display: inline; float: left; padding: 0 8px; width:45%;}
.product { position: relative; padding: 5px 0 0 6px; background: url(image/product-active.png) repeat-y -4000px 0; cursor: pointer; }
/*.product-bottom { height: 12px; line-height: 0; font-size: 0; background: url(image/product-bottom.png) no-repeat -4000px 0; }*/
.product-bottom { height: 12px; line-height: 0; font-size: 0; }
/*.product img { display: block; width: 190px; height: 193px; border: solid 1px #bababa; }*/
/*.product img { display: block; margin:auto; height: 193px; border: solid 1px #bababa; }*/
.product img { display: block; height: 193px; border: solid 1px #bababa; }
/*.product .desc { padding: 8px 0 0 10px; width: 182px; background: #ff9600 url(image/desc.png) repeat-x 0 0;}*/
.product .desc { padding: 8px 0 0 10px; background: #ff9600 url(image/desc.png) repeat-x 0 0;}
.product .desc p { font-weight: bold; font-size: 1.4em; margin:auto}
.product .desc p.price { color: #fff; font-size: 25px; }
.product .desc span.dollar { font-size: 12px; }
.product .desc strike { color: #595959; font-style: italic; }
/*.product .bottom { height: 11px; line-height: 0; font-size: 0; background: url(image/bottom-desc.png) no-repeat 0 bottom;  }*/
.product .bottom { height: 11px; line-height: 0; font-size: 0;}
.product img.top-label { position: absolute; top: 7px; left: 8px; display: block; width: 88px; height: 70px; border: 0; }
.product img.new-label { position: absolute; top: 7px; right: 10px; display: block; width: 88px; height: 70px; border: 0; } 


#sidebar{background:transparent url('https://tokoalatlukis.com/images/sidebar-top.jpg') no-repeat scroll top left;float:right;width:100%;}
#sidebar .sidebarbox {margin:0 0 25px 0;background-color:#fff; border:1px solid #467aa7;}
#sidebar p{margin:10px 0 10px 10px;}
#sidebar ul{list-style:none;margin:10px 0 10px 10px;padding:0;}
#sidebar ul li{margin:0 0 5px 0;}
#sidebar ul li a{color:#467aa7;font-weight:400;}
#sidebar ul.sidemenu {margin:0;}
#sidebar ul.sidemenu li{display:inline;padding:0;margin:0;}
#sidebar ul.sidemenu li a{display:block;padding:7px 5px 6px 10px;font-size:1.7em; font-weight:400;text-decoration:none;border-bottom:1px solid #ddd;}
#sidebar ul.sidemenu li a:hover{background-color:#eee;color:#333;border-bottom:1px solid #ccc;}
#sidebar ul.sidemenu ul{margin:0;padding:0;font-size:0.9em;border-bottom:1px solid #ccc;}
#sidebar ul.sidemenu ul li a{padding:5px 5px 5px 25px;border:0;font-weight:400;}
#sidebar ul.sidemenu ul li a:hover{border:0;}
#sidebar ul li a:hover{color:#333;}
#sidebar h2{background-color:#467aa7;color:#fff;font-size:1.5em;margin:0 0 0 0;padding:10px;}
#sidebar h3{font-size:1.4em; padding:10px 10px 0 10px;}

#footer{background-color:#ddd;margin:0 auto;padding:20px 25px 10px;border-top:1px solid #ccc;}
#footer h2{color:#467aa7;font-weight:400;font-size:1.5em;}
#footer p{color:#555;margin:0 0 10px 0;padding:0;}
#footer ul{border-top:1px solid #ccc;list-style:none;margin:0 0 15px 0;padding:0;}
#footer ul li{padding:0;margin:0;}
#footer ul li a{border-bottom:1px solid #ccc;color:#333;display:block;padding:7px 10px;text-decoration:none;}
#footer ul li a:hover{background-color:#eee;}

#footersections{display:block;margin:0 auto;}
#footersections .half{float:left;margin:0 3% 0 0;width:47%;}
#footersections .lasthalf{float:left;margin:0;width:50%;}
#footersections .quarter{float:left;margin:0 3% 0 0;width:22%;}
#footersections .lastquarter{float:left;width:25%;margin:0;}

#credits{background-color:#333;color:#aaa;padding:15px 25px;}
#credits p{text-align:left;font-size:1.2em;margin:0;padding:0;line-height:1.4em;}
#credits a{color:#aaa;font-weight:400;}

.left{float:left;width:50%;}
.right{float:right;width:50%;}
.clear{clear:both;visibility:hidden;}
.small{font-size:0.8em;}

}


/*Desktops and laptops sebelumnya 1224px*/
@media only screen and (min-width:1081px){


span.highlight{background-color:yellow;}
*{margin:0;padding:0;}
body{background:#bdd7ee;color:#444;font:76% Verdana,Helvetica,sans-serif;}
p{line-height:1.7em;margin-bottom:15px;}
a{color:#467aa7;}
a:hover{color:#333;}
h1{color:#2a5a7a;font-family:Georgia,serif;font-size:2.4em;}
h2{color:#467aa7;font-family:Georgia,serif;font-size:2.2em;font-weight:400;margin:0 0 10px 0;}
h3{color:#467aa7;font-family:Georgia,serif;font-size:1.6em;font-weight:400;margin:0 0 8px;}
ul,ol,dl{margin:0 0 20px 20px; padding:0;}
li{padding-bottom:5px;}

#containerfull,#container980,#container760,#container600{margin:0 auto;padding:0;overflow:hidden;border-left:1px solid #ddd;border-right:1px solid #ddd;}
#containerfull{width:100%;border:0;}
#container980{width:980px;}
#container760{width:760px;}
#container600{width:600px;}

#header{background-color:#467aa7;margin:0 auto;padding:10px 25px;}
#header h1{margin:0;padding:20px 0 10px;}
#header h1 a{color:#eee;font-family:Georgia,serif;font-size:2em;font-weight:400;text-decoration:none;}
#header h2{color:#ddd;padding:0 0 10px 25px;margin:0;font-family:Georgia,serif;font-size:1.8em;font-weight:400;}

#menu{background-color:#467aa7;height:40px;}
#menu ul{float:right;height:40px;list-style:none;margin:0;padding:0 25px 0 0;}
#menu ul li{background-color:#2a5a7a;display:block;float:left;margin:0 0 0 5px;padding:0;}
#menu ul li a{background-color:#2a5a7a;color:#ddd;display:block;font-size:1.4em;padding:10px 12px;text-decoration:none;}
#menu ul li a:hover{color:#fff;}
#menu ul li a.current{background-color:#eee;color:#333;border-bottom:1px solid #eee;}

#feature{background-color:#eee;color:#555;padding:25px 25px 5px;border-top:1px solid #ccc;border-bottom:1px solid #ccc;}
#feature h2{color:#467aa7;font-size:2em;line-height:1em;}
#feature p{font-size:1.3em;margin:0 0 15px 0; line-height:1.5em;}

#main{clear:both;margin:0;background-color:#fff;padding:25px 25px 5px;}
#content{width:72%;}

.products { padding-bottom: 24px; }
.products .title { margin: 0 0 27px 16px; width: 632px; }
.products .title a.title-link { position: absolute; top: 15px; right: 2px; color: #00a7e7; text-decoration: underline; }
.products .title a.title-link:hover { text-decoration: none; }
.products .row { height: 298px; }
.products .active { background-position: 0 0; }
.best-sellers { padding-bottom: 0; }

.row { height: 298px; }

.product-holder p {margin-bottom: 0px; line-height:16px}
.product-holder { display: inline; float: left; padding: 0 8px; width: 206px; }
.product { position: relative; padding: 5px 0 0 6px; background: url(image/product-active.png) repeat-y -4000px 0; cursor: pointer; }
.product-bottom { height: 12px; line-height: 0; font-size: 0; background: url(image/product-bottom.png) no-repeat -4000px 0; }
.product img { display: block; width: 190px; height: 193px; border: solid 1px #bababa; }

.product .desc { padding: 8px 0 0 10px; width: 182px; background: #ff9600 url(image/desc.png) repeat-x 0 0; }
.product .desc p { font-weight: bold; }
.product .desc p.price { color: #fff; font-size: 18px; }
.product .desc span.dollar { font-size: 12px; }
.product .desc strike { color: #595959; font-style: italic; }
.product .bottom { height: 11px; line-height: 0; font-size: 0; background: url(image/bottom-desc.png) no-repeat 0 bottom;  }
.product img.top-label { position: absolute; top: 7px; left: 8px; display: block; width: 88px; height: 70px; border: 0; }
.product img.new-label { position: absolute; top: 7px; right: 10px; display: block; width: 88px; height: 70px; border: 0; } 


#sidebar{background:transparent url('https://tokoalatlukis.com/images/sidebar-top.jpg') no-repeat scroll top left;float:right;width:25%;}
#sidebar .sidebarbox {margin:0 0 25px 0;background-color:#fff; border:1px solid #467aa7;}
#sidebar p{margin:10px 0 10px 10px;}
#sidebar ul{list-style:none;margin:10px 0 10px 10px;padding:0;}
#sidebar ul li{margin:0 0 5px 0;}
#sidebar ul li a{color:#467aa7;font-weight:400;}
#sidebar ul.sidemenu {margin:0;}
#sidebar ul.sidemenu li{display:inline;padding:0;margin:0;}
#sidebar ul.sidemenu li a{display:block;padding:7px 5px 6px 10px;font-size:1.2em; font-weight:400;text-decoration:none;border-bottom:1px solid #ddd;}
#sidebar ul.sidemenu li a:hover{background-color:#eee;color:#333;border-bottom:1px solid #ccc;}
#sidebar ul.sidemenu ul{margin:0;padding:0;font-size:0.9em;border-bottom:1px solid #ccc;}
#sidebar ul.sidemenu ul li a{padding:5px 5px 5px 25px;border:0;font-weight:400;}
#sidebar ul.sidemenu ul li a:hover{border:0;}
#sidebar ul li a:hover{color:#333;}
#sidebar h2{background-color:#467aa7;color:#fff;font-size:1.5em;margin:0 0 0 0;padding:10px;}
#sidebar h3{font-size:1.4em; padding:10px 10px 0 10px;}

#footer{background-color:#ddd;margin:0 auto;padding:20px 25px 10px;border-top:1px solid #ccc;}
#footer h2{color:#467aa7;font-weight:400;font-size:1.5em;}
#footer p{color:#555;margin:0 0 10px 0;padding:0;}
#footer ul{border-top:1px solid #ccc;list-style:none;margin:0 0 15px 0;padding:0;}
#footer ul li{padding:0;margin:0;}
#footer ul li a{border-bottom:1px solid #ccc;color:#333;display:block;padding:7px 10px;text-decoration:none;}
#footer ul li a:hover{background-color:#eee;}

#footersections{display:block;margin:0 auto;}
#footersections .half{float:left;margin:0 3% 0 0;width:47%;}
#footersections .lasthalf{float:left;margin:0;width:50%;}
#footersections .quarter{float:left;margin:0 3% 0 0;width:22%;}
#footersections .lastquarter{float:left;width:25%;margin:0;}

#credits{background-color:#333;color:#aaa;padding:15px 25px;}
#credits p{text-align:left;font-size:1.2em;margin:0;padding:0;line-height:1.4em;}
#credits a{color:#aaa;font-weight:400;}

.left{float:left;width:49%;}
.right{float:right;width:48%;}
.clear{clear:both;visibility:hidden;}
.small{font-size:0.8em;}

}