/* guide */


form                    { margin:0px; padding:0px;}

.clearit                { clear:both; margin:0px; padding:0px;}
.left                   { float:left;}
.right                  { float:right;}

.center                 { text-align:center; }

/* background */
.bg_white               { background:#FFFFFF;}
.bg_black               { background: #000000;}

.bg_trans80             { filter:alpha(opacity=80); -moz-opacity:.80; opacity:.80;}
.bg_trans90             { filter:alpha(opacity=90); -moz-opacity:.90; opacity:.90;}



/* width */
.w20                    { width:20px;}
.w30                    { width:30px;}
.w50                    { width:50px;}
.w55                    { width:55px;}
.w60                    { width:60px;}
.w65                    { width:65px;}
.w80                    { width:80px;}
.w90                    { width:90px;}
.w100                   { width:100px;}
.w120                   { width:120px;}
.w130                   { width:130px;}
.w140                   { width:140px;}
.w130                   { width:130px;}
.w150                   { width:150px;}
.w155                   { width:155px;}
.w160                   { width:160px;}
.w180                   { width:180px;}
.w190                   { width:190px;}
.w200                   { width:200px;}
.w210                   { width:210px;}
.w225                   { width:225px;}
.w250                   { width:250px;}
.w260                   { width:260px;}
.w280                   { width:280px;}
.w300                   { width:300px;}
.w305                   { width:305px;}
.w310                   { width:310px;}
.w317                   { width:317px;}
.w320                   { width:320px;}
.w330                   { width:330px;}
.w333                   { width:333px;}
.w350                   { width:350px;}
.w400                   { width:400px;}
.w410                   { width:410px;}
.w425                   { width:425px;}
.w450                   { width:450px;}
.w500                   { width:500px;}
.w560                   { width:560px;}
.w600                   { width:600px;}
.w630                   { width:630px;}
.w650                   { width:650px;}
.w660                   { width:660px;}
.w700                   { width:700px;}
.w750                   { width:750px;}
.w780                   { width:780px;}
.w800                   { width:800px;}
.w950                   { width:950px;}
.w965                   { width:965px;}
.w990                   { width:990px;}

/*width in percent*/
.w17p   {width:17%}
.w27p   {width:27%}
.w30p   {width:30%}
.w35p   {width:35%}
.w37p   {width:37%}
.w40p   {width:40%}
.w45p   {width:45%}
.w50p   {width:50%}
.w55p   {width:55%}
.w60p   {width:60%}
.w65p   {width:65%}
.w70p   {width:70%}
.w75p   {width:75%}
.w80p   {width:80%}
.w85p   {width:85%}


/* height */
.h5                     { height:5px;}
.h10                    { height:10px;}
.h20                    { height:20px;}
.h32                    { height:32px;}
.h40                    { height:40px;}
.h50                    { height:50px;}
.h55                    { height:55px;}
.h60                    { height:60px;}
.h90                    { height:90px;}
.h100                   { height:100px;}
.h105                   { height:105px;}
.h110                   { height:110px;}
.h120                   { height:120px;}
.h130                   { height:130px;}
.h140                   { height:140px;}
.h170                   { height:170px;}
.h180                   { height:180px;}
.h190                   { height:190px;}
.h200                   { height:200px;}
.h225                   { height:225px;}
.h250                   { height:250px;}
.h300                   { height:300px;}
.h400                   { height:400px;}
.h450                   { height:450px;}
.h500                   { height:500px;}



/* color_hover */
.cc_white               { color: #FFFFFF;}
.cc_white a             { text-decoration:none; color:#FFFFFF;}
.cc_white a:hover       { color: #CCCCCC;}


.cc_black               { color: #000000;}
.cc_black a             { text-decoration:none; color:#000000;}
.cc_black a:hover       { text-decoration: underline;}

.cc_pink                { color: #dc2930;}
.cc_pink     a          { text-decoration:none; color: #dc2930;}
.cc_pink     a:hover    { text-decoration: underline;}

.cc_red                 { color: #990000;}
.cc_red a               { text-decoration:none; color: #990000;}
.cc_red a:hover         { text-decoration: underline;}

.cc_abu                 { color: #808080 ;}
.cc_abu a               { text-decoration:none; color:#808080;}
.cc_abu a:hover         { text-decoration: underline;}

.cc_abu2                { color: #333333;}
.cc_abu2 a              { text-decoration:none; color:#333333;}
.cc_abu2 a:hover        { text-decoration: underline;}

.cc_abu3                { color: #CCCCCC;}
.cc_abu3 a              { text-decoration:none; color:#CCCCCC;}
.cc_abu3 a:hover        { text-decoration: underline;}

.cc_abu4                { color: #333333;}
.cc_abu4 a              { text-decoration:none; color:#333333;}
.cc_abu4 a:hover        { text-decoration: none;}

.cc_blue_dark           { color: #0046b0;}
.cc_blue_dark a         { text-decoration:none; color:#0046b0;}
.cc_blue_dark a:hover   { text-decoration: underline;}

.cc_blue                { color: #C4E1FF;}
.cc_blue a              { text-decoration:none; color:#0046b0;}
.cc_blue a:hover        { text-decoration: underline;}

.cc_green               { color: #334b00;}
.cc_green a             { text-decoration:none; color:#3b5d1d;}
.cc_green a:hover       { color: #334b00;}

.cc_ungu                { color: #782866;}
.cc_ungu a              { text-decoration:none; color:#782866;}
.cc_ungu a:hover        { text-decoration: underline;}

.cc_toska               { color: #006d7a;}
.cc_toska a             { text-decoration:none; color:#006d7a;}
.cc_toska a:hover       { text-decoration: underline;}

.cc_orange              { color: #FF6600;}
.cc_orange a            { text-decoration:none; color:#FF6600;}
.cc_orange a:hover      { text-decoration: none;  color: #FF3300;}

.cc_cokelat             { color: #74634B;}
.cc_cokelat a           { text-decoration:none; color: #935d18;}
.cc_cokelat a:hover     { text-decoration:none; color: #74634B}



/* color_underline */
.c_white                { color: #FFFFFF;}
.c_white a              { text-decoration:none; color:#FFFFFF;}
.c_white a:hover        { text-decoration: underline;}

.c_white2               { color: #FFFFFF;}
.c_white2 a             { text-decoration:none; color:#FFFFFF;}
.c_white2 a:hover       { text-decoration: none; color:#CCCCCC;}

.c_black                { color: #000000;}
.c_black a              { text-decoration:none; color:#000000;}
.c_black a:hover        { text-decoration: underline;}

.c_pink                 { color: #dc2930;}
.c_pink  a              { text-decoration:none; color: #dc2930;}
.c_pink  a:hover        { text-decoration: underline;}

.c_red                  { color: #990000;}
.c_red a                { text-decoration:none; color: #990000;}
.c_red a:hover          { text-decoration: underline;}

.c_abu                  { color: #808080 ;}
.c_abu a                { text-decoration:none; color:#808080;}
.c_abu a:hover          { text-decoration: underline;}

.c_abu2                 { color: #333333;}
.c_abu2 a               { text-decoration:none; color:#333333;}
.c_abu2 a:hover         { text-decoration: underline;}

.c_abu3                 { color: #CCCCCC;}
.c_abu3 a               { text-decoration:none; color:#CCCCCC;}
.c_abu3 a:hover         { text-decoration: underline;}

.c_abu3a                { color: #CCCCCC;}
.c_abu3a a              { text-decoration: underline; color:#CCCCCC;}
.c_abu3a a:hover        { text-decoration: none;}

.c_abu4                 { color: #333333;}
.c_abu4 a               { text-decoration:none; color:#333333;}
.c_abu4 a:hover         { text-decoration: underline;}

.c_abu5                 { color: #666666;}
.c_abu5 a               { text-decoration:none; color:#666666;}
.c_abu5 a:hover         { text-decoration: underline;}

.c_blue_dark            { color: #0046b0;}
.c_blue_dark a          { text-decoration:none; color:#0046b0;}
.c_blue_dark a:hover    { text-decoration: underline;}

.c_blue                 { color: #C4E1FF;}
.c_blue a               { text-decoration:none; color:#0046b0;}
.c_blue a:hover         { text-decoration: underline;}

.c_blue2                { color: #278C9E;}
.c_blue2 a              { text-decoration:none; color:#278C9E;}
.c_blue2 a:hover        { text-decoration: underline;}

.c_green                { color: #334b00;}
.c_green a              { text-decoration:none; color:#334b00;}
.c_green a:hover        { text-decoration: underline;}

.c_ungu                 { color: #782866;}
.c_ungu a               { text-decoration:none; color:#782866;}
.c_ungu a:hover         { text-decoration: underline;}

.c_toska                { color: #006d7a;}
.c_toska a              { text-decoration:none; color:#006d7a;}
.c_toska a:hover        { text-decoration: underline;}

.c_orange               { color: #ff3c00;}
.c_orange a             { text-decoration:none; color:#ff3c00;}
.c_orange a:hover       { text-decoration: underline;}

.c_orange2              { color: #FF9900;}
.c_orange2 a            { text-decoration:none; color:#FF9900;}
.c_orange2 a:hover      { text-decoration: underline;}

.c_cokelat              { color: #89621f;}
.c_cokelat a            { text-decoration:none; color:#89621f;}
.c_cokelat a:hover      { text-decoration: underline;}

.c_cokelat2             { color: #74634B;}
.c_cokelat2 a           { text-decoration: underline; color:#74634B;}
.c_cokelat2 a:hover     { text-decoration: none;}


/* font size */
.font44                 { font-size:44px;}
.font30                 { font-size:30px;}
.font28                 { font-size:28px;}
.font26                 { font-size:26px;}
.font24                 { font-size:24px;}
.font22                 { font-size:22px;}
.font21                 { font-size:21px;}
.font20                 { font-size:20px;}
.font18                 { font-size:18px;}
.font16                 { font-size:16px;}
.font14                 { font-size:14px;}
.font12                 { font-size:12px;}
.font11                 { font-size:11px;}
.font10                 { font-size:10px;}

/* font type */

.arial                  { font-family: arial;}
.lucida                 { font-family: "Lucida Grande", "Lucida Sans", "Lucida Sans Unicode",  Arial;}
.avant                  { font-family: "AvantGarde Medium", "AvantGarde Md BT", "Lucida Grande", Arial;}
.trebuchet              { font-family:"Trebuchet MS", arial;}
.helvetica              { font-family:"Helvetica 65 Medium", arial;}
.tahoma                 { font-family: Tahoma, arial;}
.verdana                { font-family: Verdana, arial;}

/* margin */
.mg_0                   { margin:0;}
.mg_5                   { margin:5px;}
.mg_10                  { margin:10px;}
.mg_15                  { margin:15px;}
.mg_20                  { margin:20px;}

.mt_2                   { margin-top:2px;}
.mt_5                   { margin-top:5px;}
.mt_10                  { margin-top:10px;}
.mt_15                  { margin-top:15px;}
.mt_20                  { margin-top:20px;}

.mb_2                   { margin-bottom:2px;}
.mb_5                   { margin-bottom:5px;}
.mb_10                  { margin-bottom:10px;}
.mb_15                  { margin-bottom:15px;}
.mb_20                  { margin-bottom:20px;}

.mr_5                   { margin-right:5px;}
.mr_10                  { margin-right:10px;}
.mr_15                  { margin-right:15px;}
.mr_20                  { margin-right:20px;}

.ml_5                   { margin-left:5px;}
.ml_10                  { margin-left:10px;}
.ml_15                  { margin-left:15px;}
.ml_20                  { margin-left:20px;}

/* padding */
.pd_0                   { padding:0;}
.pd_2                   { padding:2px;}
.pd_3                   { padding:3px;}
.pd_5                   { padding:5px;}
.pd_10                  { padding:10px;}
.pd_15                  { padding:15px;}
.pd_20                  { padding:20px;}

.pl_5                   { padding-left:5px;}
.pl_10                  { padding-left:10px;}
.pl_15                  { padding-left:15px;}
.pl_20                  { padding-left:20px;}
.pl_30                  { padding-left:30px;}

.pr_5                   { padding-right:5px;}
.pr_10                  { padding-right:10px;}
.pr_15                  { padding-right:15px;}
.pr_20                  { padding-right:20px;}

.pt_3                   { padding-top:3px;}
.pt_5                   { padding-top:5px;}
.pt_10                  { padding-top:10px;}
.pt_15                  { padding-top:15px;}
.pt_20                  { padding-top:20px;}
.pt_30                  { padding-top:30px;}

.pb_5                   { padding-bottom:5px;}
.pb_10                  { padding-bottom:10px;}
.pb_15                  { padding-bottom:15px;}
.pb_20                  { padding-bottom:20px;}

/*halaman*/
.halaman                { }
.halaman ul             {list-style:none; margin:0px; padding:0px; padding-top:10px;}
.halaman ul li          {float:left; }
.halaman ul li a        { background:url(../images/hal_2.gif) no-repeat; padding:6px 3px 0px 7px; font:bold 12px arial; color:#333333; text-decoration:none; height:25px; float:left; padding-right:10px;}
.halaman ul li a:hover  { background:url(../images/hal_1.gif) no-repeat; padding:6px 3px 0px 7px; font:bold 12px arial; color: #FFFFFF; text-decoration:none; height:25px; float:left; padding-right:10px;}
.halaman ul li a.pilih  { background:url(../images/hal_1.gif) no-repeat; padding:6px 3px 0px 7px; font:bold 12px arial; color: #FFFFFF; text-decoration:none; height:25px; float:left; padding-right:10px;}

/*border*/
.bd_red {border:1px solid #f30;}
.bd_green {border:1px solid #690;}
.bd_blue {border:1px solid #06a;}

/*underline*/
.nouline {text-decoration:none}