/* 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; }

/* 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: 900px; height: 50px; margin: 0 auto; padding: 0; clear: both; }
#navi ul { margin: 0 auto; padding: 0 0 0 10px; 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: 260px; 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; text-align: center; }

/* 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; }
s
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; }

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

/* Gallery */
.gallery { list-style: none; margin: 0 auto; padding: 0; text-align: center; }
.gallery li { padding: 0 10px 10px 20px ; margin: 0 auto; float: left; position: relative; width: 180px; height: 130px; }
.gallery li:hover img { border-color: #000; }
.gallery img { background: #fff; border: solid 1px #888; padding: 5px; }
.gallery em { background: #fff url(images/grey-gradient.gif) repeat-y; color: #000; font-style: normal;  padding: 2px 10px; display: block; position: absolute; top: 110px; left: 9px; border: 1px solid #999; border-left-color: #888; }
.gallery a { text-decoration: none; }
.gallery a:hover em { background: url(images/orange-gradient.gif) repeat; border-color: #40137A; color: #FFF; }

/* 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; }