/* v 0.91 */

/* ------ Section 1 - Global Body, Font and Link Settings ------ */


body {
background: url(../image-files/bg_earth11.gif) top; /*#4A689A; url(../image-files/laut.jpg) repeat-x center top; #0099E9; #FFFFFF  #787878; #D5DBB5; #f0f5fb; **/
margin: 0;
padding: 0;
font-family: Calibri, Georgia, Helvetica, 'Lucida Sans Unicode', 'Lucida Grande', Verdana, Arial, sans-serif;
color: #383838; /*  #525252, bila mau lebih gelap lagi #454545, lebih gelap lagi #383838, lagi #2B2B2B, lagi #1E1E1E, #3C1700; #000; **/
font-size: 103%;

}


/* -- General Link Styling -- */

a:link {
color: #336633; /*#0D8F63; hijau rose garden, #6DA01B; hijau muda, #78A036; 7DAA39; blue; */
text-decoration: underline;
}

a:visited {
color: purple;
text-decoration: underline;
}

a:hover {
color: #04448E; /*#11539E; kalau sama dg headline #1D478E; red;*/
text-decoration: underline;
background-color: #DBFFEF;  /***kalau biru muda:#69C;***/
}

/* ------ Section 2 - Global Page Structure ------- */

#PageWrapper {
width: 1010px;
}

#Header {
height: 250px;
}

#ContentWrapper {
float: left;
width: 100%;
}

#CenterColumn {
margin: 0 205px 0 200.5px;    /* STEP 1: set to "0 RightColumnWidth 0 LeftColumnWidth" */
}

#LeftColumn {
float: left;
width: 199.5px;               /* STEP 2: to set left column at 200.5, set 1 less than 200.5 here */
margin-left: -1010px;        /* STEP 3: set to the same width specified in #PageWrapper above (but with minus sign)  */
}

#RightColumn {
float: left;
width: 204px;               /* STEP 4: to set right columns at 205, set 1 less than 205 here */
margin-left: -205px;        /* STEP 5: set to -(RightColumnWidth) */
}

#Footer {
clear: both;
width: 100%;
text-align: center;
padding: 8px 0;
}

.Liner {
padding: 10px 10px;
}

#Header .Liner {
padding: 10px 10px;
}

#Footer .Liner {
margin: 0;
padding: 0;
}



/* ------ Section 3 - Page Structure Details ------ */

#PageWrapper {
border: 0;
margin-top: 20px; /*waktu biru ini 0px*/
margin-bottom: 30px; /*waktu biru ini 24px*/
margin-right: auto;
margin-left: auto;
background-color: #F9FCFE; /*ini adalah warna dasar halamanku, yang mirip putih itu*/
background-image: url(); /**(../image-files/mybg-ungu.jpg);**/
background-repeat: repeat-y;
}

#Header {
background-image: url(../image-files/suksestotal-logo-hitam.gif); /* sebelum hitam url(../imagr-files/sukses-logo-baru-total2.gif*/
background-repeat: no-repeat;
background-color: transparent;
background-position: top left;
border-top: transparent; /*15px solid #08100E (hitam); 4A689A (biru); #80B4FF;*/
border-bottom: 12px solid #08100E; /*4A689A; biru*/ 
}

#ContentWrapper {
background-image: url(); /** atau ../image-files/mybg-ungu.jpg);**/
background-color: #F9FCFE;
background-repeat: repeat-y;
}

/*content box, uji coba, susah..

.content-box {
	height: auto;
	margin: 0;
	padding: 20px;
	background: #ffffff url(../image-files/center-bg-top-mine.jpg) no-repeat center top;
}
**/


#LeftColumn {
background-image: url();
background-repeat: repeat-y;
background-color: transparent;
}

#CenterColumn {
background-image: url();
background-repeat: no-repeat;
background-color: transparent;
/*border-left: 1px solid #4A689A;*/
padding: 15px;
}

#RightColumn {
background-image: url();
background-repeat: no-repeat;
background-color: transparent;
}

#Footer {
background-image: url();
background-repeat: no-repeat;
background-color: #abc4e3;     /* blue-gray used in left and right columns of anguilla-background.gif and for footer and horizontal text-navbar */
border-top: 1px solid #f0f5fb;
}


/**TOP BOX NAVIGATION FROM BOXEDTYPES**/

/* Pages */

#pages ul {
	display: block;
	width: 1010px;
	height: 60px;
	margin: 0;
	padding: 0;
}

#pages li {
	display: inline;
}

#pages a {
	float: left;
	width: 110px;
	height: 60px;
	padding: 15px 0 0 0;
	text-align: center;
	text-decoration: none;
	text-transform: lowercase;
	/* bila mau agak rengket, letter-spacing: -1px; */
	font-size: 1.1em;
	font-weight: normal;
	color: #ffffff; /**#333333;**/
}

#pages a:hover {
	color: #000000;
	text-decoration: underline;
}

#page1 { background: url() no-repeat; } /**url(../image-files/boxhijautuaa.gif) no-repeat; } ini kalau mau ada tampilan top nav yg warna-warni**/
#page2 { background: url() no-repeat; } /**url(../image-files/boxmeraha.gif) no-repeat; }**/
#page3 { background: url() no-repeat; } /**url(../image-files/boxorangea.gif) no-repeat; }**/
#page4 { background: url() no-repeat; } /**url(../image-files/boxungua.gif) no-repeat; }**/
#page5 { background: url() no-repeat; } /**url(../image-files/boxhijaua.gif) no-repeat; }**/
#page6 { background: url() no-repeat; } /**url(../image-files/boxpinka.gif) no-repeat; }**/
#page7 { background: url() no-repeat; } /**url(../image-files/boxbirua.gif) no-repeat; }**/

#page1:hover, #pages .active #page1 { background-image: url(../image-files/boxhijautuab.gif); }
#page2:hover, #pages .active #page2 { background-image: url(../image-files/boxmerahb.gif); }
#page3:hover, #pages .active #page3 { background-image: url(../image-files/boxorangeb.gif); }
#page4:hover, #pages .active #page4 { background-image: url(../image-files/boxungub.gif); }
#page5:hover, #pages .active #page5 { background-image: url(../image-files/boxhijaub.gif); }
#page6:hover, #pages .active #page6 { background-image: url(../image-files/boxpinkb.gif); }
#page7:hover, #pages .active #page7 { background-image: url(../image-files/boxbirub.gif); }


/* ------ Section 4 - Left Column Navigation ------ */

/*** LEFT NAVIGATION ASLI FROM SBI **/

.Navigation {
width: 105%;
font-family: Verdana, Georgia, Arial, Helvetica, 'Lucida Sans Unicode', 'Lucida Grande', sans-serif;
background-color: transparent;
}

/* -- Nav Headers -- */

.Navigation h4 {
padding: 7px 15px;
font-size: 95%;
color: #fff;
background: url(../image-files/nav-bg1.jpg) no-repeat; /*sebelumnya biru-nav3.gif*/
/*border-bottom: 1px solid #fff;*/
margin: 0 -4px 10px -5px; /*--*18px -7px;*/
}

 /*-- Nav List -- */

.Navigation ul {
list-style-type: none;
padding: 5px -4px 5px -4px; /* 0 0 8px 5px; */
margin: -3px -3px 15px -5px;
font-size: 81%;

}

.Navigation li {
/**background-color: none; atau * #ffc;  -- tan, for button and RSS box backgrounds -- */
background: url(../image-files/2arrowsmall.gif) left center no-repeat; 
/*padding-left : 10px;*/
margin-bottom: 3px;
/*display: block;
color: #000000; #fff;*/
/*font-weight: bold;*/
/*background:url(../images/opaque.png); background opague ini bagus kalau belakangnya gambar*/
background-color: #F6F6FF; /* kalau tanpa warna bg, putih aja/none, juga bagus sih; #B8CFCF; atau #7f7f9c;*/
border: none; 
}

/* -- Navigation Link styles -- */

.Navigation a {
color: #3A5277; /*kalau mau lebih light, yang ini #4A689A;*/
display: block;      /* this makes the whole box highlight rather than just the text */
padding: 5px 0 4px 13px; /*4px 2px 2px 4px;*/
text-decoration: none;
border-right: 1px solid #C5C5E3; /*abu-abu tua #C0C0C0; #036;*/
border-bottom: 1px solid #C5C5E3; /*#C0C0C0; #036;*/
border-top: none; 
border-left: none;
}

.Navigation a:visited {
/*color: purple;*/
/*background: url(../image-files/centang-aqua-berbayang.png) no-repeat center right; sekarang tidak pakai tanda centan untuk link yang sudah dikunjungi*/
text-decoration: none;
}

.Navigation a:hover {
display: block;
color: #000000; /*fff;*/
font-weight: bold;
/*background:url(../images/opaque.png); background opague ini bagus kalau belakangnya gambar
background-color: #B8CFCF; /*atau #7f7f9c;*/
background: url(../image-files/nav-base6.gif) no-repeat center right; /*pilihan:biru nav-base5.gif; nave-base9.gif; kalau pink agak muda nav-base7.gif*/
border-top: 1px solid #808080; /*#036;*/
border-left: 1px solid #808080; /*#036;*/
border-right: none; /*1px solid #fff; /* atau none; #A0A0A0;*/
border-bottom: none; /*1px solid #fff; /*atau none; #A0A0A0;*/ /*** ini sebelumnya color: purple;  background-color: #B2CF42;*/ 
/*background: url(../image-files/nav-base3.gif) no-repeat center right
text-decoration: underline; ***/
}

#active a
{
display: block;
color: none; /*#000000; *fff;*/
font-weight: bold;
background: url(../image-files/nav-base-active.gif) no-repeat center right; /*opaque.png); background opague ini bagus kalau belakangnya gambar*/
background-color: none; /*#B8CFCF; /*atau #7f7f9c;*/
/*border-top: 1px solid #036;
border-left: 1px solid #036;
border-right: 1px solid #A0A0A0;
border-bottom: 1px solid #A0A0A0;*/
}



/****ini untuk navcontainer2 yang listnya horizontal, di bagian bottom***/

#navcontainer2 ul
{
margin: 0;
padding: 0;
list-style-type: none;
text-align: center;
}


#navcontainer2 ul li { display: inline; }

#navcontainer2 ul li a
{
text-decoration: none;
padding: .2em .8em;
color: #000;
background-color: #BCE;
border-top: 1px solid #fff;
border-left: 1px solid #fff;
border-right: 1px solid #036;
border-bottom: 1px solid #036;
}


#navcontainer2 ul li a:hover
{
color: #fff;
background-color: #0033cc;
border-top: 1px solid #036;
border-left: 1px solid #036;
border-right: 1px solid #fff;
border-bottom: 1px solid #fff;
}


#navcontainer2 li a:visited 
{  
color: #000000;  
padding-right: 15px;  
background-image: url('http://www.suksestotal.com/images/tick10.png'); 
background-repeat: no-repeat; 
background-position: center right; 
} 






/* ------ Section 5 - Additional Navigation ------ */


/* Bar - ROUNDED BOXES AT THE RIGHT FROM SNOWFLAKES CSS*/

#bar {
	float: left;
	margin-top: 0;
	margin-left: -8px;
	width: 200px;
}

/* Box Style One - Green*/

.boxed1 {
	margin-bottom: 20px;
}

.boxed1 h2 {
	height: 35px;
	margin: 0 0 2px 0;
	padding: 10px 0 0 30px;
	background: #AFB43C url(../image-files/snow-hijau.jpg) no-repeat;
	text-transform: lowercase;
	letter-spacing: -1px;
	font-size: 26px;
	font-weight: normal;
	color: #990000; /*merah maroon tua*/
}

.boxed1 h3 {
	height: 35px;
	margin: 0 0 2px 0;
	padding: 10px 0 0 30px;
	background: #AFB43C url(../image-files/snow-hijau.jpg) no-repeat;
	text-transform: lowercase;
	letter-spacing: -1px;
	font-size: 24px;
	font-weight: normal;
	color: #990000;
}

.boxed1 ul {
	/* aslinya: margin: 0px;
	padding: 18px;*/
	list-style-type: none;
  padding-left: 0;
  margin: 0 0 13px 0;
	background: #E4E9C5 url(../image-files/snow07.gif) no-repeat left bottom;
	/*list-style-type: circle;*/
}


.boxed1 li {
background: url(../image-files/square_bullet_hijau1.gif) left top no-repeat; /*(../image-files/round-bullet-ungu.gif) left top no-repeat; */
padding-left : 17px;
margin-bottom: 15px;
margin-left: 5px;
	/*padding: 0px;
	background: url(../image-files/snow08.gif) repeat-x;*/
	font-size: 100%; /*or small*/
}


.boxed1 a {
	text-decoration: none;
	font-weight: normal;
	color: #007F00; /* hijau agak pastel #87B740; #A7B83F;*/
}

.boxed1 a:hover {
	color: #545C20;
	text-decoration: underline;
}


/* Box Style Two - Purple ini yang BARU - warna hijau tetapi tanpa list style type */ 

.boxed2 {
	margin-bottom: 20px;
}

.boxed2 h2 {
	height: 35px;
	margin: 0 0 2px 0;
	padding: 10px 0 0 30px;
	background: #AFB43C url(../image-files/snow-hijau.jpg) no-repeat;
	text-transform: lowercase;
	letter-spacing: -1px;
	font-size: 26px;
	font-weight: normal;
	color: #990000; /*merah maroon tua*/
}

.boxed2 h3 {
	height: 35px;
	margin: 0 0 2px 0;
	padding: 10px 0 0 30px;
	background: #AFB43C url(../image-files/snow-hijau.jpg) no-repeat;
	text-transform: lowercase;
	letter-spacing: -1px;
	font-size: 24px;
	font-weight: normal;
	color: #990000;
}

.boxed2 ul {
	/* aslinya: margin: 0px;
	padding: 18px;*/
	list-style-type: none;
  padding-left: 0;
  margin: 0 0 13px 0;
	background: #E4E9C5 url(../image-files/snow07.gif) no-repeat left bottom;
	/*list-style-type: circle;*/
}


.boxed2 li {
	padding: 5px;
	background: url(../image-files/snow08.gif) repeat-x;
	font-size: 100%;
}

.boxed2 a {
	text-decoration: none;
	font-weight: normal;
	color: #007F00; /* hijau agak pastel #87B740; #A7B83F;*/
}

.boxed2 a:hover {
	color: #545C20;
	text-decoration: underline;
}




/* Box Style Two - Purple ini yang lama 

.boxed2 {
	margin-bottom: 20px;
}

.boxed2 h2 {
	height: 35px;
	margin: 0 0 2px 0;
	padding: 10px 0 0 30px;
	background: #AFB43C url(../image-files/snow-ungu.jpg) no-repeat;
	text-transform: lowercase;
	letter-spacing: -1px;
	font-size: 26px;
	font-weight: normal;
	color: #FFFFFF;
}

.boxed2 h3 {
	height: 35px;
	margin: 0 0 2px 0;
	padding: 10px 0 0 30px;
	background: #AFB43C url(../image-files/snow-ungu.jpg) no-repeat;
	text-transform: lowercase;
	letter-spacing: -1px;
	font-size: 24px;
	font-weight: normal;
	color: #FFFFFF;
}

.boxed2 ul {
	margin: 0;
	padding: 0;
	background: #D4C5E8 kalau biru, as sebelumnya #C5DFE9 url(../image-files/snow-ungu2.gif) no-repeat left bottom;
	list-style: none;
}

.boxed2 li {
	padding: 5px;
	background: url(../image-files/snow-ungu3.gif) repeat-x;
	font-size: 100%;
}

.boxed2 a {
	text-decoration: none;
	font-weight: bold;
	color: #7540B7; kalau biru as before #3F95B8;
}

.boxed2 a:hover {
	color: #204B5C;
	text-decoration: underline;
}

.boxed2 .active, .boxed2 .active a {
	background-color: #204B5C;
	color: #FFFFFF;
}

*/




/* Box Style Three - orange */

.boxed3 {
	margin-bottom: 20px;
}

.boxed3 h2 {
	height: 35px;
	margin: 0 0 2px 0;
	padding: 10px 0 0 30px;
	background: url(../image-files/snow-orange.jpg) no-repeat;
	text-transform: lowercase;
	letter-spacing: -1px;
	font-size: 26px;
	font-weight: normal;
	color: #FFFFFF;
}

.boxed3 h3 {
	height: 35px;
	margin: 0 0 2px 0;
	padding: 10px 0 0 30px;
	background: url(../image-files/snow-orange.jpg) no-repeat;
	text-transform: lowercase;
	letter-spacing: -1px;
	font-size: 24px;
	font-weight: normal;
	color: #FFFFFF;
}

.boxed3 ul {
	margin: 0;
	padding: 0;
	background: #F7E3DE /*kalau biru, as sebelumnya #C5DFE9*/ url(../image-files/snow-orange4.jpg) no-repeat left bottom;
	list-style: none;
}

.boxed3 li {
	padding: 5px;
	background: url(../image-files/snow-orange3.jpg) repeat-x;
	font-size: 90%;
}

.boxed3 a {
	text-decoration: none;
	font-weight: normal;
	color: #DD5E01; /* coklat tua #55391C; kalau biru as before #3F95B8;*/
}

.boxed3 a:hover {
	color: #204B5C;
	text-decoration: underline;
}

.boxed3 .active, .boxed3 .active a {
	background-color: #204B5C;
	color: #FFFFFF;
}

/* Box Style Four - blue */

.boxed4 {
	margin-bottom: 20px;
}

.boxed4 h2 {
	height: 35px;
	margin: 0 0 2px 0;
	padding: 10px 0 0 30px;
	background: url(../image-files/biru-top.jpg) no-repeat;
	text-transform: lowercase;
	letter-spacing: -1px;
	font-size: 26px;
	font-weight: bold;
	color: #FFFFFF;
}

.boxed4 h3 {
	height: 35px;
	margin: 0 0 2px 0;
	padding: 10px 0 0 20px;
	background: url(../image-files/biru-top2.jpg) no-repeat;
	text-transform: lowercase;
	letter-spacing: -1px;
	font-size: 23px;
	font-weight: normal;
	color: #FFFFFF;
}


.boxed4 ul {
	margin: 0;
	padding: 0;
	background: #CED5F8 url(../image-files/biru-bottom3.gif) no-repeat left bottom; /***bila biru bottom.gif, warnanya #C5DFE9;, biru-bottom2.gif, #C9CBE2***/
	list-style: none;
}

.boxed4 li {
	padding: 5px;
	background: url(../image-files/biru-spacer.gif) repeat-x;
	font-size: 105%;
	font-family: Georgia, Verdana;
	font-weight: normal;
	color: #3C004A; /*#DD5E01; kalau biru as before #3F95B8;*/
}

.boxed4 a {
	text-decoration: none;
	font-weight: bold;
	color: #3C004A: /*#DD5E01; kalau biru as before #3F95B8;*/
}

.boxed4 a:hover {
	color: #204B5C;
	text-decoration: underline;
}

.boxed4 .active, .boxed4 .active a {
	background-color: #204B5C;
	color: #FFFFFF;
}




/** QUOTE BOX **/

#Quote-box {
	float: right;
	margin: 10px;
	width: 300px;
}

.boxed-quote {
background: #F3B6CE url(../image-files/box-pink-top.gif) repeat-x ;
height: auto;
}

.boxed-quote h2 {
  background: #F3B6CE url(../image-files/box-pink-top.gif);
	margin: 0 0 1px 0;
	letter-spacing: 0px;
	padding-top: 9px;
	padding-bottom: 6px;
	font-size: 125%;
	font-family: Harrington, 'Lucida Handwriting';
	color: #903;
	text-align: center;
}

.boxed-quote p {
	margin: 0 0 2px 0;
	padding: 8px 10px;
	letter-spacing: 0px;
	font-size: 100%;
	text-align: center;
	font-family: Cambria, Georgia;
	color: #000000; /*kalau abu #525252;*/
	background: url(../image-files/box-pink-bottom.gif) no-repeat left bottom;
}

/** CALLOUT BOX atau QUOTE BOX HIJAU & BIRU**/

.CalloutBox-hijau {
background: url(../image-files/quote-hijau.png) no-repeat;
width: 325px;
float: right;
}

div.CalloutBox-hijau p {
  margin: 15px 15px 15px 35px;
	letter-spacing: -1px;
	font-size: 110%;
	font-weight: normal;
	font-family: Georgia, Cambria;
	color: #660000; /*#903; #3C1700; kalau abu #525252;*/
}

div.CalloutBox-hijau h1, h2, h3, h4, h5, h6 {
margin: 0;
}

p.CalloutBox-hijau h1, h2, h3, h4, h5, h6 {
padding: 0;
}


.CalloutBox-biru {
background: url(../image-files/quote-biru.png) no-repeat;
width: 325px;
float: left;
}


div.CalloutBox-biru p {
  margin: 15px 25px 15px 15px;
	letter-spacing: -1px;
	font-size: 110%;
	font-weight: normal;
	font-family: Georgia, Cambria;
	color: #660066; /*#fff; kalau abu #525252;*/

}

p.CalloutBox-biru {
padding: 13px;
}

div.CalloutBox-biru h1, h2, h3, h4, h5, h6 {
margin: 0;
}

p.CalloutBox-biru h1, h2, h3, h4, h5, h6 {
padding: 0;
}

/** CALLOUT BOX atau QUOTE BOX HIJAU & BIRU KECIL**/

.CalloutBox-hijau-kecil {
background: url(../image-files/quote-hijau-kecil.png) no-repeat;
width: 300px;
float: right;
}

div.CalloutBox-hijau-kecil p {
  margin: 15px 15px 15px 35px;
	/*letter-spacing: 1px;*/
	font-size: 105%;
	font-weight: normal;
	font-family: Georgia, Cambria;
	color: #660000; /*#903; #3C1700; kalau abu #525252;*/
}

div.CalloutBox-hijau-kecil h1, h2, h3, h4, h5, h6 {
margin: 0;
}

p.CalloutBox-hijau-kecil h1, h2, h3, h4, h5, h6 {
padding: 0;
}


.CalloutBox-biru-kecil {
background: url(../image-files/quote-biru-kecil.png) no-repeat;
width: 300px;
float: left;
}


div.CalloutBox-biru-kecil p {
  margin: 15px 25px 15px 15px;
	/*letter-spacing: 1px;*/
	font-size: 105%;
	font-weight: normal;
	font-family: Georgia, Cambria;
	color: #660066; /*#fff; kalau abu #525252;*/

}

p.CalloutBox-biru-kecil {
padding: 13px;
}

div.CalloutBox-biru-kecil h1, h2, h3, h4, h5, h6 {
margin: 0;
}

p.CalloutBox-biru-kecil h1, h2, h3, h4, h5, h6 {
padding: 0;
}


/** CALLOUT BOX atau QUOTE BOX HIJAU & BIRU LEBIH KECIL LAGI**/

.CalloutBox-kecil-kiri {
background: url(../image-files/quote-kecil.gif) no-repeat;
width: 250px;
float: right;
}

div.CalloutBox-kecil-kiri p {
  margin: 15px 15px 15px 35px;
	/*letter-spacing: 1px;*/
	font-size: 105%;
	font-weight: normal;
	font-family: Georgia, Cambria;
	color: #660000; /*#903; #3C1700; kalau abu #525252;*/
}

div.CalloutBox-kecil-kiri h1, h2, h3, h4, h5, h6 {
margin: 0;
}

p.CalloutBox-kecil-kiri h1, h2, h3, h4, h5, h6 {
padding: 0;
}


.CalloutBox-kecil-kanan {
background: url(../image-files/quote-kecil-ungu.gif) no-repeat;
width: 250px;
float: left;
}


div.CalloutBox-kecil-kanan p {
  margin: 15px 25px 15px 15px;
	/*letter-spacing: 1px;*/
	font-size: 105%;
	font-weight: normal;
	font-family: Georgia, Cambria;
	color: #660066; /*#fff; kalau abu #525252;*/

}

p.CalloutBox-kecil-kanan {
padding: 13px;
}

div.CalloutBox-kecil-kanan h1, h2, h3, h4, h5, h6 {
margin: 0;
}

p.CalloutBox-kecil-kanan h1, h2, h3, h4, h5, h6 {
padding: 0;
}





/* -- Thumbnail-with-Caption Navigation -- */

.imageCaptionLinkGroup {
text-align: center;
}

.imageCaptionLinkGroup a {
text-decoration: none;
}

.imageCaptionLinkGroup .caption {
text-decoration: underline;
}


/* -- Horizontal Text NavBar -- */

/**ini horizontal-text navbar yang ada di bag bawah semua halaman. INI YANG ASLI DARI SBI. aku akan coba 
rubah dg navbarku sendiri yang tampak lebih keren, dengan warna yang lebih cantik, merah, dulu code aslinya 
dari main.css adalah --- navlist --- */

/**Ini asli dari SBI

.text-NavBar {
font-family: Verdana, 'Lucida Sans Unicode', 'Lucida Grande', Calibri, Arial, sans-serif;
font-size: 90%;
margin: 12px auto 12px auto;
background-color: #abc4e3;
width: 610px;            same width as the width of the center column (1010 -200 - 200) 
}

.text-NavBar ul {
list-style-type: none;
padding: 0;
}

.text-NavBar ul li {
display: inline;
background-color: #ffc;
text-align: center;
}

.text-NavBar a {
color: blue;
text-decoration: none;
text-align: center;
padding: 0 4px;
}

.text-NavBar a:visited {
color: purple;
text-decoration: none;
}

.text-NavBar a:hover {
color: red;
background-color: #d3e4fb;
text-decoration: underline;
}

**/



/***untuk nav list horizontal juga, misal: back   home   top    next di bawah text, keren...., ini html codenya
HTML CODE
<ul id="navlist">
<li><a href="#">Item one</a></li>
<li><a href="#">Item two</a></li>
<li><a href="#">Item three</a></li>
</ul>
***/

.text-NavBar {
font-family: Calibri, 'Lucida Sans Unicode', 'Lucida Grande', Verdana, Arial, sans-serif;
font-size: 90%;
margin: 12px auto 12px auto;
/***background-color: #abc4e3;**/
width: 605px;
}

.text-NavBar ul {
padding: 0;
margin: 0;
list-style-type: none;
float: left;
width: 605px;         /* same width as the width of the center column (1010 -205 - 200), ini dr sbi, kalau punyaku width: 100%;*/
color: #fff;
background-color: #903;
}

.text-NavBar ul li {
display: inline;
}


.text-NavBar a {
float: left;
width: 8.5em;
color: #fff;
background-color: #D4535A; 
padding: 0.3em; 0.8em;
text-align: center;
text-decoration: none;
border-right: 1px solid #fff;
}

.text-NavBar a:hover {
color: #fff;
background-color: #903;
}



/* ------ Section 6 - Specific Font Styles ------ */

#LeftColumn {
font-size: 85%;
color: black;
}

#RightColumn {
font-size: 85%;
}

#Footer {
font-size: 80%;
}

h2, h3, h4, h6 {
background-color: transparent;
color: #1d487e;
clear: both;
}

h2, h3, h4, h5, h6 {
margin-top: 20px;
}

h1 { font-size: 160%; color: #017DCD; }
h2 { font-size: 180%; }
h3 { font-size: 108%; }
h4 { font-size: 110%; }
h5 { font-size: 130%; }


h1 {
font-family: Georgia, Helvetica, Cambria, Verdana, sans-serif;
margin-top: 0;
text-align: left;
}

h2 {
font-family: 'Maiandra GD', 'Berlin Sans FB', Georgia, 'Lucida Sans Unicode', 'Lucida Grande', Arial, Verdana, sans-serif;
border-bottom: 1px solid #8f8fb3;
}

h3 {
font-family: Georgia, 'Lucida Sans Unicode', 'Lucida Grande', Arial, Verdana, sans-serif;
border-bottom: 1px dotted #8f8fb3;
}

h5 {
font-family: 'Berlin Sans FB', Georgia, 'Lucida Sans Unicode', 'Lucida Grande', Arial, Verdana, 'Times New Roman', sans-serif;
font-color: #333333;
}

.hbg {
background-image: url(../image-files/hbg2.jpg);
font-family: 'Edwardian Script ITC', Vivaldi, Pristina, 'Harlow Solid Italic', sans-serif;
color: #7F415A;
font-size: 2.3em;
padding: 3px 10px 2px 35px;
}


#LeftColumn h4 {
font-size: 100%;
color: black;
margin-top: 0;
}

#RightColumn h4 {
font-size: 90%;
color: black;
margin-top: 0;
}

.Caption {
font-size: 85%;
font-weight: bold;
color: #000099;
clear: both;
line-height: 16px;
}

blockquote {
margin: 12px 36px; /*56px;*/
font-size: 90%;
line-height: 140%;
font-family: Georgia, Cambria, 'Book Antiqua', 'Courier New', Courier, monospace;
color: #003399;
background-color: #EEF8FD;
padding-top: 10px;
padding-right: 20px;
padding-bottom: 10px;
padding-left: 20px;
border-top: 1px solid #003399;
border-bottom: 1px solid #003399;
}

/*
.bqstart {
     float: left;
     height: 45px;
     margin-top: -20px;
     padding-top: 45px;
     margin-bottom: -50px;
     font-size: 800%;
     font-family: Arial, Georgia, Impact, Calibri;
     color: #6E9393; #FF0000;
 }

 .bqend {
     float: right;
     height: 25px;
     margin-top: 0px;
     padding-top: 45px;
     font-size: 800%;
     font-family: Arial, Georgia, Impact, Calibri;
     color: #6E9393; bila merah #FF0000;
 }


blockquote-left {
  font: 1.2em/1.6em Georgia, "Times New Roman", Times, serif;
  width: 400px;
  background: url(image-files/close-quote1.gif) no-repeat right bottom;
  padding-left: 18px;
  text-indent: -18px;
  float: left;
}

blockquote-left:first-letter {
  background: url(image-files/quotes5.gif) no-repeat left top;
  padding-left: 18px;
  font: italic 1.4em Georgia, "Times New Roman", Times, serif;
}

blockquote-right {
  font: 1.2em/1.6em Georgia, "Times New Roman", Times, serif;
  width: 400px;
  background: url(images/close-quote1.gif) no-repeat right bottom;
  padding-left: 18px;
  text-indent: -18px;
  float: right;
}

blockquote-right:first-letter {
  background: url(images/open-quote.gif) no-repeat left top;
  padding-left: 18px;
  font: italic 1.4em Georgia, "Times New Roman", Times, serif;
}

*/


/*** quote warna jambon muda***/


div.center-box2 {
   width: 85%;
   font-family: 'Book Antiqua', Verdana,
font-size: 100%;
line-height:140%;
color: #4B2B1C;
   background-color: #FFFFCC;
	margin-left:auto;
	margin-right:auto;
padding-top: 10px;
padding-right: 20px;
padding-bottom: 10px;
padding-left: 20px;
   border-top: 2px solid #903;
    border-bottom: 2px solid #903;
}


/***hijau***/

div.PromosiBox {
    background-color: #DAEED6;
   font-family: 'Book Antiqua', Verdana;
   color: #353535;  
font-size: 90%;
	margin: 12px 0px 10px 0px;
	padding: 10px;
   border: 1px solid #000066;
    border-top: 3px solid #38804C;
    border-bottom: 3px solid #38804C;
     border-right: 1px solid #24B407;
    border-left: 1px solid #24B407;
}


.date {
margin: 20px;
border-bottom: 0;
text-align: right;
}

/* ------ Section 7 - Boxes ------ */

div.VerseBox {
  margin: 15px auto 18px auto;
  line-height: 135%;
	border-top: 1px dotted #007D73;
	border-bottom: 1px dotted #007D73; /* kalau abu-abu #C0C0C0;*/
	padding: 4px 12px;
	width: 80%;
	font-family: Georgia, 'Book Antiqua', Verdana ;
  font-size: 92%;
  color: #000000; /*kalo coklat tua banget, seperti heading italics #4B2B1C; */
  background-color: #CCFFFB; /* atau BDEDFF; atau #CFECEC;*/
 }

div.VerseBox p {
margin: 13px;
}

p.VerseBox {
padding: 12px;
}

div.VerseBox h1, h2, h3, h4, h5, h6 {
margin: 0;
}

p.VerseBox h1, h2, h3, h4, h5, h6 {
padding: 0;
}


.CalloutBox {
background-color: #F1F2E1; /*#fff;*/
width: 90%;
/*border-top: 3px double #D7687B;
border-bottom: 3px double #D7687B;
border-left: 1px dotted #D7687B; ini warna border aslinya #8f8fb3;
border-right: 1px dotted #D7687B; */
margin: 15px auto 18px auto;
padding: 8px;
color: #682063; /*variasi ungu lain #5B1C57; #72236C; #561451; yang ini maroon tua aslinya #3C1700;*/
line-height: 140%;
font-family: Verdana, Calibri, Georgia, 'Times New Roman', 'Book Antiqua', Verdana;
font-size: 82%;
/*letter-spacing: 1px;
color: #3A5277; kalo lebih light : #2B698F; -- ini dua line terakhir baru aku tambahkan, if no like it, hilangkan saja*/
}


div.CalloutBox p {
margin: 12px;
}

p.CalloutBox {
padding: 12px;
}

div.CalloutBox h1, h2, h3, h4, h5, h6 {
margin: 0;
}

p.CalloutBox h1, h2, h3, h4, h5, h6 {
padding: 0;
}

.CalloutBox-google {
background-color: #D0EAEA; /*#FFE6DF; #CEE7E7;*/
width: 80%;
border-top: 3px double #33A1A1;
border-bottom: 3px double #33A1A1;
border-left: 1px dotted #33A1A1;
border-right: 1px dotted #33A1A1;
margin: 15px auto 20px auto;
padding: 5px;
color: #3C1700;
line-height: 135%;
font-family: Verdana, Calibri, Georgia, 'Times New Roman', 'Book Antiqua', Verdana;
font-size: 87%;
/*letter-spacing: 1px;
color: #3A5277; kalo lebih light : #2B698F; -- ini dua line terakhir baru aku tambahkan, if no like it, hilangkan saja*/
}


div.CalloutBox-google p {
margin: 13px;
}

p.CalloutBox-google {
padding: 13px;
}

div.CalloutBox-google h1, h2, h3, h4, h5, h6 {
font-family: Calibri, Verdana;
color: #2E2EB2; /*E50066; #3C1700;*/
margin: 0;
}

p.CalloutBox-google h1, h2, h3, h4, h5, h6 {
padding: 10px;
}



.CalloutBox-img {
background-color: #fff;
width: 98%;
border: 1px dotted #8f8fb3;
margin: 15px auto 20px auto;
padding: 5px;
}

div.CalloutBox-img p {
margin: 13px;
}

p.CalloutBox-img {
padding: 13px;
}

div.CalloutBox-img h1, h2, h3, h4, h5, h6 {
margin: 0;
}

p.CalloutBox-img h1, h2, h3, h4, h5, h6 {
padding: 0;
}


.WarningBox {
background-color: #fff;
width: 90%;
border: 1px solid #C0C0C0;
margin: 15px auto 20px auto;
padding: 5px;
color: #D10A2E;
line-height: 135%
font-family: Arial;
text-transform: uppercase;
letter-spacing: 1px;
font-size: 90%;
}

div.WarningBox p {
margin: 13px;
}

p.WarningBox {
padding: 13px;
}

div.WarningBox h1, h2, h3, h4, h5, h6 {
margin: 0;
}

p.WarningBox h1, h2, h3, h4, h5, h6 {
padding: 0;
}


.ReminderBox {           /* the container box */
background-color: #ddd;
width: 40%;
border: 1px solid #8f8fb3;
margin: 0 0 12px 15px;
float: right;             /* adding float enables text to flow around it */
color: #006;
}

.ReminderBox h4 {
margin: 0;
padding: 2px;
text-align: center;
background-color: #fff;
}

.ReminderBox p {
font-size: 85%;
padding: 0 4px;
line-height: 20px;
}

.ReminderBox-pink {           /* the container box */
background-color: #FFECEC;
width: 37%;
border: 1px solid #8f8fb3;
margin: 0 0 12px 15px;
float: right;             /* adding float enables text to flow around it */
color: #006;
}

.ReminderBox-pink h4 {
background-color: #fff;
margin: 0;
padding: 2px;
text-align: center;
}

.ReminderBox-pink p {
font-size: 70%;
font-family: Georgia;
padding: 0 4px;
line-height: 20px;
}

.ReminderBox-hijau {           /* the container box */
background-color: #C8E2C7;
width: 40%;
border: 1px solid #8f8fb3;
margin: 0 0 12px 15px;
float: right;             /* adding float enables text to flow around it */
color: #006;
}

.ReminderBox-hijau h4 {
background-color: #fff;
margin: 0;
padding: 2px;
text-align: center;
}

.ReminderBox-hijau p {
font-size: 85%;
padding: 0 4px;
line-height: 20px;
}


.ReminderBox-biru {           /* the container box */
background-color: #DCEEF1;
width: 40%;
border: 1px solid #8f8fb3;
margin: 0 0 12px 15px;
float: right;             /* adding float enables text to flow around it */
color: #006;
}

.ReminderBox-biru h4 {
background-color: #fff;
margin: 0;
padding: 2px;
text-align: center;
}

.ReminderBox-biru p {
font-size: 95%;
padding: 0 4px;
line-height: 20px;
}


.ReminderBox-orange {           /* the container box */
background-color: #FEF9CE;
width: 40%;
border: 1px solid #8f8fb3;
margin: 0 0 12px 15px;
float: right;             /* adding float enables text to flow around it */
color: #006;
}

.ReminderBox-orange h4 {
background-color: #fff;
margin: 0;
padding: 2px;
text-align: center;
}

.ReminderBox-orange p {
font-size: 85%;
padding: 0 4px;
line-height: 20px;
}



/*** right column Half of width box left ***/
div.half-width-box-left {
  margin: 5px 10px 5px 0px;
  line-height: 130%;
	border-right: 1px solid #903;
	border-left: 1px solid #903;
	padding: 1px 4px 1px 8px;
	width: 32%;
	float: left;
	font-family: Georgia, 'Book Antiqua', Verdana ;
font-size: 88%;
color: #4B2B1C;
   background-color: #FFFFCC;
	border-top: 5px solid #903;
    border-bottom: 5px solid #903;
}



/*** right column Half of width box right ***/
div.half-width-box-right {
   background-color: #EAF8FF;
	margin: 5px 0px 5px 10px;
	border-right: 1px solid #003399;
	border-left: 1px solid #003399;
	padding: 1px 4px 1px 8px;
	width: 35%;
	line-height: 130%;
	float: right;
	font-family: Georgia, 'Book Antiqua', Verdana ;
	font-size: 85%;
color: #003399;
 border-top: 5px solid #003399;
    border-bottom: 5px solid #003399;	
}



.AdSenseBoxLeft, .AdSenseBoxRight, .AdSenseBoxCenter468, .AdSenseBoxRightColumn {
padding: 5px;
background-color: #d3e4fb;
border: 0px;
}
.AdSenseBoxLeft {
margin: 0 18px 12px 18px;
float: left;
}
.AdSenseBoxRight {
margin: 0 18px 12px 18px;
float: right;
}
.AdSenseBoxCenter468 {
width: 468px;
margin: 0 auto 12px auto;
clear: both;
}
.AdSenseBoxRightColumn {
padding: 0;
margin: 0 auto 12px auto;
clear: both;
}


.ReturnToNavBox {
background-color: #fff;
width: 95%;
border-top: 1px solid #8f8fb3;
border-bottom: 1px solid #8f8fb3;
margin: 0 auto 12px auto;
padding: 4px;
}
	

/* -- RSS Box -- */

#RSSbox {
width: 148px;
background-color: #ffc;
border: 1px solid #8f8fb3;
margin: 8px auto 10px 3px;
padding: 2px 2px 10px 2px;
font-size: 100%;
font-weight: bold;
color: #1d487e;
line-height: 12px;
text-align: center;
}




/* ------ Section 8 - Frequently Used Styles ------ */


.clear {
clear: both;
}


img {
border: 0 solid #ddd;
}


/* -- lists -- */



/* this is a custom class for using graphics as bullets.  Upload a custom graphic to your 
graphics library in the usual way. Then replace my URL
with your own. Note there are no speech marks around the URL Change center to top, if you want bullets to line up with the top line of yr text*/


ul {
list-style-type: none;
padding-left: 0;
margin: 0 0 13px 8px;

}

li.bunga {
background: url(../image-files/icon-bunga.jpg) left center no-repeat; 
padding-left : 22px;
margin-bottom: 22px;
margin-top: 22px;
}

li.green {
background: url(../image-files/checkmark-green.gif) left top no-repeat; 
padding-left : 22px;
margin-bottom: 22px;
margin-top: 22px;
}


li.squarebiru {
background: url(../image-files/square_bullet_blue1.gif) left top no-repeat; 
padding-left : 22px;
margin-bottom: 22px;
margin-top: 22px;
}

li.merah {
background: url(../image-files/red_v1.gif) left top no-repeat; 
padding-left : 20px;
margin-bottom: 22px;
margin-top: 22px;
}


li.squaremerah {
background: url(../image-files/square_bullet_red2.gif) left center no-repeat; 
padding-left : 20px;
margin-bottom: 10px;
margin-top: 10px;
}

li.orange {
background: url(../image-files/checkmark-orange3.gif) left top no-repeat; /* atau (../image-files/bullet-orange-kecil.gif) left top no-repeat; */
padding-left : 27px;
margin-bottom: 22px;
margin-top: 22px;
} 

li.kecil {
background: url(../image-files/checkmark-orange1.gif) left top no-repeat; /* atau (../image-files/bullet-orange-kecil.gif) left top no-repeat; */
padding-left : 24px;
margin-bottom: 22px;
margin-top: 22px;
} 

li.biru {
background: url(../image-files/diablusmall.gif) left top no-repeat; 
padding-left : 25px;
margin-bottom: 22px;
margin-top: 22px;
}  

li.ungu {
background: url(../image-files/diaungu.gif) left top no-repeat; 
padding-left : 25px;
margin-bottom: 22px;
margin-top: 22px;
}  

 
li.purple 
{
background: url(../image-files/checkmark-purple.gif) left top no-repeat; /*http://www.suksestotal.com/images/tick-small-blue.gif) left top no-repeat; */
padding-left : 25px;
margin-bottom: 22px;
margin-top: 22px;
}

li.biru-tua 
{
background: url(../image-files/biru-tua.gif) left top no-repeat; /*http://www.suksestotal.com/images/tick-small-blue.gif) left top no-repeat; */
padding-left : 25px;
margin-bottom: 22px;
margin-top: 22px;
}

li.biru-muda 
{
background: url(../image-files/blue-tick.gif) left top no-repeat; 
padding-left : 20px;
margin-bottom: 22px;
margin-top: 22px;
}


li.coklat 
{
background: url(../image-files/coklat.gif) left top no-repeat; /*http://www.suksestotal.com/images/tick-small-blue.gif) left top no-repeat; */
padding-left : 25px;
margin-bottom: 22px;
margin-top: 22px;
}

li.merah-juga
{
background: url(../image-files/merah.gif) left top no-repeat; /*http://www.suksestotal.com/images/tick-small-blue.gif) left top no-repeat; */
padding-left : 25px;
margin-bottom: 22px;
margin-top: 22px;
}

li.mer-bay
{
background: url(../image-files/centang-merah-berbayang.jpg) left top no-repeat; /*http://www.suksestotal.com/images/tick-small-blue.gif) left top no-repeat; */
padding-left : 25px;
margin-bottom: 22px;
margin-top: 22px;
}

li.ung-bay
{
background: url(../image-files/centang-ungu-berbayang.jpg) left top no-repeat; /*http://www.suksestotal.com/images/tick-small-blue.gif) left top no-repeat; */
padding-left : 25px;
margin-bottom: 22px;
margin-top: 22px;
}

li.or-bay
{
background: url(../image-files/centang-orange-berbayang.png) left top no-repeat; /*http://www.suksestotal.com/images/tick-small-blue.gif) left top no-repeat; */
padding-left : 25px;
margin-bottom: 22px;
margin-top: 22px;
}

li.bir-bay
{
background: url(../image-files/centang-biru-berbayang.jpg) left top no-repeat; /*http://www.suksestotal.com/images/tick-small-blue.gif) left top no-repeat; */
padding-left : 25px;
margin-bottom: 22px;
margin-top: 22px;
}

li.hij-bay
{
background: url(../image-files/centang-hijau-berbayang.jpg) left top no-repeat; /*http://www.suksestotal.com/images/tick-small-blue.gif) left top no-repeat; */
padding-left : 25px;
margin-bottom: 22px;
margin-top: 22px;
}


li.aqua-bay
{
background: url(../image-files/centang-aqua-berbayang.png) left top no-repeat; /*http://www.suksestotal.com/images/tick-small-blue.gif) left top no-repeat; */
padding-left : 25px;
margin-bottom: 22px;
margin-top: 22px;
}

li.nav-bay
{
background: url(../image-files/centang-nav-berbayang.png) left top no-repeat; /*http://www.suksestotal.com/images/tick-small-blue.gif) left top no-repeat; */
padding-left : 25px;
margin-bottom: 22px;
margin-top: 22px;
}

li.kun-bay
{
background: url(../image-files/centang-kuning-berbayang.png) left top no-repeat; /*http://www.suksestotal.com/images/tick-small-blue.gif) left top no-repeat; */
padding-left : 25px;
margin-bottom: 22px;
margin-top: 22px;
}


li.hijmud-bay
{
background: url(../image-files/centang-hijmud-berbayang.png) left top no-repeat; /*http://www.suksestotal.com/images/tick-small-blue.gif) left top no-repeat; */
padding-left : 25px;
margin-bottom: 22px;
margin-top: 22px;
}


li.biru2-bay
{
background: url(../image-files/centang-biru-bagus-berbayang.png) left top no-repeat; /*http://www.suksestotal.com/images/tick-small-blue.gif) left top no-repeat; */
padding-left : 25px;
margin-bottom: 22px;
margin-top: 22px;
}

li.pink-bay
{
background: url(../image-files/centang-pink-berbayang.png) left top no-repeat; /*http://www.suksestotal.com/images/tick-small-blue.gif) left top no-repeat; */
padding-left : 25px;
margin-bottom: 22px;
margin-top: 22px;
}


li.birmud-bay
{
background: url(../image-files/centang-birmud-berbayang.png) left top no-repeat; /*http://www.suksestotal.com/images/tick-small-blue.gif) left top no-repeat; */
padding-left : 25px;
margin-bottom: 22px;
margin-top: 22px;
}

li.cen-bay
{
background: url(../image-files/centang-berbayang.png) left top no-repeat; /*http://www.suksestotal.com/images/tick-small-blue.gif) left top no-repeat; */
padding-left : 25px;
margin-bottom: 22px;
margin-top: 22px;
}

li.nav2-bay
{
background: url(../image-files/centang-nav5-berbayang.png) left top no-repeat; /*http://www.suksestotal.com/images/tick-small-blue.gif) left top no-repeat; */
padding-left : 25px;
margin-bottom: 22px;
margin-top: 22px;
}


li.kuning 
{
background: url(../image-files/kuning.gif) left top no-repeat; /*http://www.suksestotal.com/images/tick-small-blue.gif) left top no-repeat; */
padding-left : 25px;
margin-bottom: 22px;
margin-top: 22px;
}

li.abu-abu 
{
background: url(../image-files/abu-abu.gif) left top no-repeat; /*http://www.suksestotal.com/images/tick-small-blue.gif) left top no-repeat; */
padding-left : 25px;
margin-bottom: 22px;
margin-top: 22px;
}

li.mark-purple {
background: url(http://www.suksestotal.com/images/arrow-animated.gif) left top no-repeat; 
padding-left : 25px;
margin-bottom: 22px;
margin-top: 22px;
}

li.mark-green {
background: url(http://www.suksestotal.com/images/arrow-small-green.png) left top no-repeat; 
padding-left : 25px;
margin-bottom: 22px;
margin-top: 22px;
} 
 
li.redx {
background: url(http://www.suksestotal.com/images/redx.gif) left top no-repeat; 
padding-left : 25px;
margin-bottom: 22px;
margin-top: 22px;
}



#CenterColumn ol {
list-style-type: decimal;
margin: 0 0 18px 1px;
}

#CenterColumn li {
margin: 18px 0 18px 1px;
}


/** ini default list dari SBI #CenterColumn ul {
list-style-type: disc;
margin: 0 0 8px 10px;
}

#CenterColumn li {
margin: 0 0 8px 5px;
}

**/

/* -- floats -- */

.ItemRight {
float: right;
margin: 2px 0 12px 18px;
text-align: center;
}

.ItemCenter {
margin: 2px auto 12px auto;
text-align: center;
clear: both;
}

.ItemLeft {
float: left;
margin: 2px 18px 12px 0;
text-align: center;
}

.center { 
text-align: center;
}

/*class to set thinner horizontal rule. Change color if you like.*/

hr{
border: 0;
color:inherit;
background-color: #999;
height: 2px;
width: 90%;
text-align: center;
}

/***ini untuk navigation di bawah teks, back dan next, html-nya  
<ul id="navigation">
<li class="left"><a href="#">Back</a></li>
<li class="right"><a href="#">Next</a></li>
</ul>    ***/

ul#navigation .left
{
list-style-type: none;
margin: 0 0 0 -5px;
}

ul#navigation .right
{
list-style-type: none;
margin: 0 20px 0 0;
}

ul#navigation .left { float: left; }
ul#navigation .right { float: right; }





/** I don't remember what this is for **/


ul#navlist
{
padding: 0;
margin: 0;
list-style-type: none;
float: left;
width: 100%;
color: #fff;
background-color: #903;
}


ul#navlist li { display: inline; }

ul#navlist li a
{
float: left;
width: 5em;
color: #fff;
background-color: #D4535A; 
padding: 0.25em 1em;
text-align: center;
text-decoration: none;
border-right: 1px solid #fff;
}


ul#navlist li a:hover
{
background-color: #903;
color: #fff;
}