/* Cantik2U Stylesheet * coded by mad */
/* Frame */
body { background: #FFF url(images/bg.jpg) repeat-x 0 0; margin: 0; padding: 0; }
#wrapper { background: url(images/wrapper.png) repeat-y; width: 850px; height: auto; margin: 0 auto; padding: 0; text-align: center; }
#wrapper_bot { background: url(images/wrapper_bot.png) no-repeat; width: 850px; height: 31px; margin: 0 auto; padding: 0; }
#top { width: 850px; height: 25px; margin: 0 auto; padding: 0; text-align: center; clear: both; }

/* Header */
#date { width: 300px; height: 20px; margin: 0; padding: 10px 0 0 0; text-align: left; float: left; font: 11px "Lucida Grande", Helvetica, Arial, sans-serif; color: #FFF; }
#lang { width: 300px; height: 20px; margin: 0; padding: 10px 0 0 0; text-align: right; float: right; font: 11px "Lucida Grande", Helvetica, Arial, sans-serif; color: #FFF; }
#header { width: 850px; height: 200px; margin: 0 auto; padding: 0; text-align: center; clear: both; }
#logo { width: 350px; height: 150px; margin: 0; padding: 30px 0 0 0; float: left; }
#welcome { background: url(images/welcome.png) no-repeat; width: 450px; height: 200px; margin: 0; padding: 0; float: left; } 
p.welcome { font: 11px "Lucida Grande", Helvetica, Arial, sans-serif; color: #FFF; padding: 70px 0 0 0; margin: 0 auto; width: 400px; height: auto; text-align: justify; }

/* Navigation */
#navi { width: 850px; height: 50px; margin: 0 auto; padding: 0; clear: both; }
#navi ul { margin: 0 auto; padding: 0 0 0 50px; list-style: none; }
#navi ul li { font: 14px "Lucida Grande", Helvetica, Arial, sans-serif; color: #FFF; text-decoration: none; }
#navi ul li, #navi ul li a { float: left; display: block; }
#navi ul li a { margin: 15px; padding: 5px; font: 14px "Lucida Grande", Helvetica, Arial, sans-serif; color: #FFF; text-decoration: none; }
#navi ul li a:hover, #navi ul li a.selected { color: #9062CF; text-decoration: none;}


/* Content */
#product { width: 800px; height: 200px; margin: 0 auto; padding: 0 0 10px 0; text-align: left; }
#news { width: 800px; height: auto; margin: 0 auto; padding: 10px 0 0 0; text-align: center; }
#contest { width: 430px; height: auto; margin: 0; padding: 0; float: left; text-align: center; font: 14px "Lucida Grande", Helvetica, Arial, sans-serif; color:#40137C; }
#contest ul { margin: 0 auto; padding: 0; list-style: none; }
#contest li { list-style: none; margin:  }
#latest { background: url(images/right-mid.jpg) repeat-y; width: 350px; height: 220px; margin: 0; padding: 0; float: right; text-align: center; }
#ads { width: 800px; height: auto; margin: 0 auto; padding: 10px 0 0 0; }
#winners { width: 800px; height: auto; margin: 0 auto; padding: 0; }

/* Inner Content */
#box { width: 800px; height: auto; margin: 0 auto; padding: 0; text-align: left;  }
#box2 { width: 800px; height: auto; margin: 0 auto; padding: 0; text-align: left;  }

/* Footer */
#footer { width: 100%; height: 200px; background: url(images/footer_bg.jpg) repeat-x; clear: both; }
#blank { width: 850px; height: 100px; background: transparent; margin: 0 auto; padding: 0; }
#copy { width: 850px; height: 100px; font: 11px "Lucida Grande", Helvetica, Arial, sans-serif; color: #FFF; margin: 0 auto; padding: 0; text-align: center; }

/* Styling */
h1 { background: url(images/globe.png) left no-repeat; font: 18px "Lucida Grande", Helvetica, Arial, sans-serif; color: #40137A; text-align: left; padding: 5px 0 10px 35px; margin: 0; line-height: 14px;}
h2 { width: 350px; height: 25px; background: url(images/right-top.png) no-repeat; padding: 10px 0 5px 0 ; margin: 0; font: 14px "Lucida Grande", Helvetica, Arial, sans-serif; color: #FFF; }
h3 { font: 12px "Lucida Grande", Helvetica, Arial, sans-serif; color: #40137C; padding: 0 0 0 10px; margin: 0; text-align: left; }
img { border: none; }
span.sub { font: 11px "Lucida Grande", Helvetica, Arial, sans-serif; color: #666; text-align: left; }
span.date { font: 10px "Lucida Grande", Helvetica, Arial, sans-serif; color: #666; text-align: left; }
p.news { font: 11px "Lucida Grande", Helvetica, Arial, sans-serif; color: #000; text-align: justify; padding: 0 10px 0 10px; margin: 0; }
p.bottom { background: url(images/right-bottom.png) no-repeat; width: 350px; height: 28px;  margin: 0; padding: 0; }
p { width: 780px; height: auto; margin: 0 auto; padding: 0 0 10px 0; font: 12px "Lucida Grande", Helvetica, Arial, sans-serif; color: #000; text-align: justify; }
p.gallery { font: 12px "Lucida Grande", Helvetica, Arial, sans-serif; color: #000; text-align: justify margin: 0 auto; padding: 10px 0 0 0; width: 700px; height: auto; }

/* Image Slider */
#slider { clear: both; width: 800px; height: 200px; margin: 0 auto; padding: 0; text-align: center;  }
#slider ul{ margin:0; padding:0; list-style:none; }
#slider li{ width:800px; height:200px; overflow:hidden; margin: 0; padding: 0; }	

/* Gallery */
.hoverbox { cursor: default; list-style: none; text-align: center; }
.hoverbox a { cursor: default; }
.hoverbox a .preview { display: none; }
.hoverbox a:hover .preview { display: block; position: absolute; top: -33px; left: -45px; z-index: 1; }
.hoverbox img {	background: #fff; border-color: #aaa #ccc #ddd #bbb; border-style: solid; border-width: 1px; color: inherit; padding: 2px; vertical-align: top; width: 100px; height: 75px; }
.hoverbox li { background: #eee; border-color: #ddd #bbb #aaa #ccc; border-style: solid; border-width: 1px; color: inherit; display: inline; float: left; margin: 3px; padding: 5px; position: relative; }
.hoverbox .preview { border-color: #000; width: 200px; height: 150px; }
.hoverbox .preview2 { border-color: #000; width: 100px; height: 250px; }

/* Products Slider */
.boxgrid { background: url(images/boxgrid.png) no-repeat; width: 250px; height: 200px; margin:5px 5px 0 7px; float:left; border: solid 2px #CCC; overflow: hidden; position: relative; }
.boxgrid img { position: absolute; top: 0; left: 0; border: 0; }
.boxgrid p{ padding: 0 10px; color:#afafaf; font-weight:bold; font:10pt "Lucida Grande", Arial, sans-serif; }
.boxcaption{ float: left; position: absolute; background: #000; height: 100px; width: 100%; opacity: .5; filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=80); -MS-filter: rogid:DXImageTransform.Microsoft.Alpha(Opacity=80)"; }
.captionfull .boxcaption { top: 260; left: 0; }
.caption .boxcaption { top: 220; left: 0; }