.round-container{
text-align:center;
font-family:  verdana, 'Trebuchet MS', Arial, Verdana, sans-serif;
font-size: 100%;
font-weight:bold;
background-color:#5F3EBB; 
color:#fff;
width: auto;
padding:0px;
margin: 0px;
}

.top-right-image{
background-image: url(http://www.suksestotal.com/images/tr-round-purple.gif);
background-repeat: no-repeat;
background-position:top right;
}
.top-left-image{
background-image: url(http://www.suksestotal.com/images/tl-round-purple.gif);
background-repeat: no-repeat;
background-position:top left;
}
.bottom-right-image{
background-image: url(http://www.suksestotal.com/images/br-round-purple.gif);
background-repeat: no-repeat;
background-position:bottom right;
}
.bottom-left-image{
background-image: url(http://www.suksestotal.com/images/bl-round-purple.gif);
background-repeat: no-repeat;
background-position:bottom left;
}

.text{
font-family:  verdana, sans-serif;
font-size: 86%;
font-weight:normal;
color:#000;
background-color:#fff; 
border-left:1px solid #2c1c8d; 
border-right:1px solid #2c1c8d; 
text-align:left; 
padding-left:5px; 
padding-right:5px;
}

.text2{
font-family:  verdana, sans-serif;
font-size: 86%;
font-weight: normal;
color:#000;
background-color: #fff;
background-image: url(http://www.suksestotal.com/images/text-bg-lightblue.gif);
background-repeat: repeat-x; 
border-left:1px solid #2c1c8d; 
border-right:1px solid #2c1c8d; 
text-align:left; 
padding-left:5px; 
padding-right:5px;
}

/***rounded box hijau muda***/

/* powered by http://mierendo.com/software/rounded_css_boxes/ */
.my_corners_tl, .my_corners_t, .my_corners_tr, .my_corners_l, .my_corners_r, .my_corners_bl, .my_corners_b, .my_corners_br, .my_corners {
    width: auto;
    margin: 0;
    padding: 0;
    border: 0;
    position: relative;
}
.my_corners_t {
    /*
        change this div to layout the whole box (width, height, float, margin, ...)
        example lines:
        width: 60%;
        margin: 7px 35px 0px 1px
        to change distance to content/text scroll to class ".my_corners" and change the padding
    */
    
    background-color: #DCF5EC;
    background-image: url(../images/my_corners_border.png);
    background-repeat: repeat-x;
    background-position: top;
}
.my_corners_tl {
    height: 100%;
    background-image: url(../images/my_corners_topleft.png);
    background-repeat: no-repeat;
    background-position: left top;
}
.my_corners_tr {
    height: 100%;
    background-image: url(../images/my_corners_topright.png);
    background-repeat: no-repeat;
    background-position: right top;
}
.my_corners_bl {
    height: 100%;
    background-image: url(../images/my_corners_bottomleft.png);
    background-repeat: no-repeat;
    background-position: left bottom;
}
.my_corners_br {
    height: 100%;
    background-image: url(../images/my_corners_bottomright.png);
    background-repeat: no-repeat;
    background-position: right bottom;
}
.my_corners {
    height: 100%;
    /* change this if you want to change the distance distance to text/content */
    padding: 10px 20px 10px 20px;
}

.my_corners_l {
    height: 100%;
    background-image: url(../images/my_corners_border.png);
    background-repeat: repeat-y;
    background-position: left;
}
.my_corners_r {
    height: 100%;
    background-image: url(../images/my_corners_border.png);
    background-repeat: repeat-y;
    background-position: right;
}
.my_corners_b {
    height: 100%;
    background-image: url(../images/my_corners_border.png);
    background-repeat: repeat-x;
    background-position: bottom;
}

/***rounded box ungu***/

/* powered by http://mierendo.com/software/rounded_css_boxes/ */
.my_corners2_tl, .my_corners2_t, .my_corners2_tr, .my_corners2_l, .my_corners2_r, .my_corners2_bl, .my_corners2_b, .my_corners2_br, .my_corners2 {
    width: auto;
    margin: 0;
    padding: 0;
    border: 0;
    position: relative;
}
.my_corners2_t {
    /*
        change this div to layout the whole box (width, height, float, margin, ...)
        example lines:
        width: 60%;
        margin: 7px 35px 0px 1px
        to change distance to content/text scroll to class ".my_corners2" and change the padding
    */
    background-color: #E8DEE8;
}
.my_corners2_tl {
    height: 100%;
    background-image: url("../images/my_corners2_topleft.png");
    background-repeat: no-repeat;
    background-position: left top;
}
.my_corners2_tr {
    height: 100%;
    background-image: url("../images/my_corners2_topright.png");
    background-repeat: no-repeat;
    background-position: right top;
}
.my_corners2_bl {
    height: 100%;
    background-image: url("../images/my_corners2_bottomleft.png");
    background-repeat: no-repeat;
    background-position: left bottom;
}
.my_corners2_br {
    height: 100%;
    background-image: url("../images/my_corners2_bottomright.png");
    background-repeat: no-repeat;
    background-position: right bottom;
}
.my_corners2 {
    height: 100%;
    /* change this if you want to change the distance distance to text/content */
    padding: 6px 7px 6px 7px;
}


/***ini untuk roundbox, yang warna abu***/
dl {
width: 170px;
height: 600px;
margin: 0 0 0 0;
background: #CBCDCA url(../images/rounded-bottom200.png);
background-repeat: no-repeat;
background-position:bottom center;
}

dt {
width: 170px;
height: 60px;
margin: 0;
padding: 0;
background: #9A9C99 url(../images/rounded-top200a.png);
background-repeat: no-repeat;
background-position:top center;
border-bottom: 2px solid #fff;
}

dd {
margin: 0;
padding: 10px;
font-family:  verdana, sans-serif;
font-size: 86%;
font-weight:normal;
color:#000;

}

/*** dari http://www.cssplay.co.uk/boxes/chunky.html***/

#container {background:#d8d8ee; width:350px; margin:5px; padding:5px;}

.xsnazzy h1, .xsnazzy h2, .xsnazzy p {margin:0 10px; letter-spacing:1px;}
.xsnazzy h1 {font-size:2em; color:#fc0;}
/*  ini perintah css aslinya, yaitu tulisan merah agak berantakan dan bg warna sama dg p : .xsnazzy h2 {font-size:1.4em; color:#903; border: 0; font-family: 'Lucida Handwriting';}*/
.xsnazzy p {padding:1em; color:#000;} /***atau #234***/
/* ini juga aslinya, tapi dihilangkan krn berhubungan dg yang atas yang juga sudah dihilangkan: .xsnazzy h2 {padding-top:0.5em; padding-left:5px;} */
.xsnazzy {background: transparent; margin:1em;}
 
.xsnazzy em {display:block; width:0; height:0; color:#7f7f9c; overflow:hidden; border-top:12px solid #7f7f9c; border-left:12px dotted transparent; border-right:12px dotted transparent; margin-left:50px;}
/* hack for IE5.5 */
* html .xsnazzy em {width:24px; height:12px; w\idth:0; hei\ght:0;}
.xsnazzy span {display:block; width:0; height:0; color:#7f7f9c; overflow:hidden; border-top:10px solid #d8d8ee; border-left:10px dotted transparent; border-right:10px dotted transparent; margin-left:52px; margin-top:-15px;}
* html .xsnazzy span {width:20px; height:10px; w\idth:0; hei\ght:0;}
 
.xb1, .xb2, .xb3, .xb4, .xb5, .xb6, .xb7 {display:block; overflow:hidden; font-size:0;}
.xb1, .xb2, .xb3, .xb4, .xb5, .xb6 {height:1px;}
.xb4, .xb5, .xb6, .xb7 {background:#ccc; border-left:1px solid #7f7f9c; border-right:1px solid #7f7f9c;}
 
.xb1 {margin:0 8px; background:#7f7f9c;}
.xb2 {margin:0 6px; background:#7f7f9c;}
.xb3 {margin:0 4px; background:#7f7f9c;}
.xb4 {margin:0 3px; background:#d8d8ee; border-width:0 5px;}
 
.xb5 {margin:0 2px; background:#d8d8ee; border-width:0 4px;}
.xb6 {margin:0 2px; background:#d8d8ee; border-width:0 3px;} 
.xb7 {margin:0 1px; background:#d8d8ee; border-width:0 3px; height:2px;} 
 
.xboxcontent {display:block; background:#d8d8ee; border:3px solid #7f7f9c; border-width:0 3px;}

#picture {width:500px; height:400px; background:url(../images/earth-atmosphere.jpg) center top; padding:40px 20px 0 20px; margin:15px;}

/*** ini html code fr the above box: <div class="xsnazzy">
<b class="xb1"></b><b class="xb2"></b><b class="xb3"></b><b class="xb4"></b><b class="xb5"></b><b class="xb6"></b><b class="xb7"></b>
<div class="xboxcontent">
<h2><div align="center"><b>Inspirasi Sukses Hari Ini:</b></div></h2>
<hr>
<p>Or this can be used as a speech bubble with the addition of a little CSS pointer. This does require a careful choice of colors for the foreground, border and background to hide the chunky non-anti aliased corners, and it works with javascript off and images off.</p>
</div>
<b class="xb7"></b><b class="xb6"></b><b class="xb5"></b><b class="xb4"></b><b class="xb3"></b><b class="xb2"></b><b class="xb1"></b>
<em></em><span></span>
</div>
*/






/***curvy box warna aslinya #9caf9c, abu-abu gelap keunguan, bagus kok, tapi agak kegelapan, jadi aku ganti***/

.curvy-orange {position:relative; width:400px; background:#FEF8CB; color:#000; margin:5em auto;}
#ctl, #cbl, #ctr, #cbr {position:absolute; width:20px; height:20px; color:#FEF8CB; background:#fff; overflow:hidden; font-style:normal; z-index:1;}
#ctl {top:0; left:0;}
#cbl {bottom:0; left:0;}
#ctr {top:0; right:0;}
#cbr {bottom:0; right:0;}
.curvy-orange em b {position:absolute; font-size:150px; font-family:arial; color:#FEF8CB; line-height:40px; font-weight:normal;}
#ctl b {left:-8px;}
#ctr b {left:-25px;}
#cbl b {left:-8px; top:-17px;}
#cbr b {left:-25px; top:-17px;}
.curvy-orange p {position:relative; z-index:100; padding:15px 15px; font-size:11px;}
.curvy-orange h2 {font-size:1.2em; color:#903;}
.curvy-orange h3 {font-size:1em; color:#903; border:0;}
.curvy-orange h2 {padding-top:0.5em; padding-left:5px;}
.curvy-orange h3 {padding-top:0.5em; padding-left:5px;}



.curvy-pink {position:relative; width:400px; background:#FFE8E8; color:#000; margin:5em auto;}
#ctl, #cbl, #ctr, #cbr {position:absolute; width:20px; height:20px; color:#FFE8E8; background:#fff; overflow:hidden; font-style:normal; z-index:1;}
#ctl {top:0; left:0;}
#cbl {bottom:0; left:0;}
#ctr {top:0; right:0;}
#cbr {bottom:0; right:0;}
.curvy-pink em b {position:absolute; font-size:150px; font-family:arial; color:#FFE8E8; line-height:40px; font-weight:normal;}
#ctl b {left:-8px;}
#ctr b {left:-25px;}
#cbl b {left:-8px; top:-17px;}
#cbr b {left:-25px; top:-17px;}
.curvy-pink p {position:relative; z-index:100; padding:15px 15px; font-size:11px;}
.curvy-pink h2 {font-size:1.2em; color:#004D4D;}
.curvy-pink h3 {font-size:1em; color:#903; border:0;}
.curvy-pink h2 {padding-top:0.5em; padding-left:5px;}
.curvy-pink h3 {padding-top:0.5em; padding-left:5px;}



.curvy-hijau {position:relative; width:400px; background:#B9DAB8; color:#000; margin:5em auto;}
#ctl, #cbl, #ctr, #cbr {position:absolute; width:20px; height:20px; color:#B9DAB8; background:#fff; overflow:hidden; font-style:normal; z-index:1;}
#ctl {top:0; left:0;}
#cbl {bottom:0; left:0;}
#ctr {top:0; right:0;}
#cbr {bottom:0; right:0;}
.curvy-hijau em b {position:absolute; font-size:150px; font-family:arial; color:#B9DAB8; line-height:40px; font-weight:normal;}
#ctl b {left:-8px;}
#ctr b {left:-25px;}
#cbl b {left:-8px; top:-17px;}
#cbr b {left:-25px; top:-17px;}
.curvy-hijau p {position:relative; z-index:100; padding:15px 15px; font-size:11px;}
.curvy-hijau h2 {font-size:1.2em; color:#004D4D;}
.curvy-hijau h3 {font-size:1em; color:#903; border:0;}
.curvy-hijau h2 {padding-top:0.5em; padding-left:5px;}
.curvy-hijau h3 {padding-top:0.5em; padding-left:5px;}



.curvy-biru {position:relative; width:400px; background:#C6E4E8; color:#000; margin:5em auto;}
#ctl, #cbl, #ctr, #cbr {position:absolute; width:20px; height:20px; color:#C6E4E8c; background:#fff; overflow:hidden; font-style:normal; z-index:1;}
#ctl {top:0; left:0;}
#cbl {bottom:0; left:0;}
#ctr {top:0; right:0;}
#cbr {bottom:0; right:0;}
.curvy-biru em b {position:absolute; font-size:150px; font-family:arial; color:#C6E4E8; line-height:40px; font-weight:normal;}
#ctl b {left:-8px;}
#ctr b {left:-25px;}
#cbl b {left:-8px; top:-17px;}
#cbr b {left:-25px; top:-17px;}
.curvy-biru p {position:relative; z-index:100; padding:15px 15px; font-size:11px;}
.curvy-biru h2 {font-size:1.2em; color:#004D4D;}
.curvy-biru h3 {font-size:1em; color:#903; border:0;}
.curvy-biru h2 {padding-top:0.5em; padding-left:5px;}
.curvy-biru h3 {padding-top:0.5em; padding-left:5px;}


.curvy-ungu {position:relative; width:400px; background:#E8DEE8; color:#000; margin:5em auto;}
#ctl, #cbl, #ctr, #cbr {position:absolute; width:20px; height:20px; color:#E8DEE8; background:#fff; overflow:hidden; font-style:normal; z-index:1;}
#ctl {top:0; left:0;}
#cbl {bottom:0; left:0;}
#ctr {top:0; right:0;}
#cbr {bottom:0; right:0;}
.curvy-ungu em b {position:absolute; font-size:150px; font-family:arial; color:#E8DEE8; line-height:40px; font-weight:normal;}
#ctl b {left:-8px;}
#ctr b {left:-25px;}
#cbl b {left:-8px; top:-17px;}
#cbr b {left:-25px; top:-17px;}
.curvy-ungu p {position:relative; z-index:100; padding:15px 15px; font-size:11px;}
.curvy-ungu h2 {font-size:1.2em; color:#903;}
.curvy-ungu h3 {font-size:1em; color:#903; border:0;}
.curvy-ungu h2 {padding-top:0.5em; padding-left:5px;}
.curvy-ungu h3 {padding-top:0.5em; padding-left:5px;}


/**kode html-nya 
<br>
<div class="curvy-pink">
<em id="ctl"><b>&bull;</b></em>
<em id="cbl"><b>&bull;</b></em>
<em id="ctr"><b>&bull;</b></em>
<em id="cbr"><b>&bull;</b></em>
<div align="center"><h2>Apa yang Anda inginkan?</h2></div>
<p>I know it's been done before, but not this way!<br />A box with curved corners into which you can put text that goes right up to the corners.<br />
Again, no graphics were used in the making of this demonstration.<br />All it takes is four quadrants of a bullet point positioned absolutely in each corner (arial font this time as it's the safest one to use).</p>
</div>
<br>
<div class="curvy-orange">
<em id="ctl"><b>&bull;</b></em>
<em id="cbl"><b>&bull;</b></em>
<em id="ctr"><b>&bull;</b></em>
<em id="cbr"><b>&bull;</b></em>
<div align="center"><h2>Apa yang Anda inginkan?</h2></div>
<p>I know it's been done before, but not this way!<br />A box with curved corners into which you can put text that goes right up to the corners.<br />
Again, no graphics were used in the making of this demonstration.<br />All it takes is four quadrants of a bullet point positioned absolutely in each corner (arial font this time as it's the safest one to use).</p>
</div>
<br>
<div class="curvy-hijau">
<em id="ctl"><b>&bull;</b></em>
<em id="cbl"><b>&bull;</b></em>
<em id="ctr"><b>&bull;</b></em>
<em id="cbr"><b>&bull;</b></em>
<div align="center"><h2>Apa yang Anda inginkan?</h2></div>
<p>I know it's been done before, but not this way!<br />A box with curved corners into which you can put text that goes right up to the corners.<br />
Again, no graphics were used in the making of this demonstration.<br />All it takes is four quadrants of a bullet point positioned absolutely in each corner (arial font this time as it's the safest one to use).</p>
</div>
<br>
<div class="curvy-biru">
<em id="ctl"><b>&bull;</b></em>
<em id="cbl"><b>&bull;</b></em>
<em id="ctr"><b>&bull;</b></em>
<em id="cbr"><b>&bull;</b></em>
<div align="center"><h2>Apa yang Anda inginkan?</h2></div>
<p>I know it's been done before, but not this way!<br />A box with curved corners into which you can put text that goes right up to the corners.<br />
Again, no graphics were used in the making of this demonstration.<br />All it takes is four quadrants of a bullet point positioned absolutely in each corner (arial font this time as it's the safest one to use).</p>
</div>


<br>

<div class="curvy-ungu">
<em id="ctl"><b>&bull;</b></em>
<em id="cbl"><b>&bull;</b></em>
<em id="ctr"><b>&bull;</b></em>
<em id="cbr"><b>&bull;</b></em>
<div align="center"><h2>Apa yang Anda inginkan?</h2></div>
<p>I know it's been done before, but not this way!<br />A box with curved corners into which you can put text that goes right up to the corners.<br />
Again, no graphics were used in the making of this demonstration.<br />All it takes is four quadrants of a bullet point positioned absolutely in each corner (arial font this time as it's the safest one to use).</p>
</div>


**/