/* CASCADING STYLESHEET
	author: penjajah
	email: aku@penjajah.com
	web: http://www.penjajah.com
*/

/* mainframe */
body { background: #fff url(../images/login/bg.png) top repeat-x; margin: 0 auto; padding: 0; font: 12px Helvetica, Arial, sans-serif; color: #666; }
#wrapper { width: 960px; height: auto; margin: 0 auto; padding: 5px 10px 5px 10px; }

/* styling */
img, img.a, img.a:hover { border: none; }
a { text-decoration: none; color: #666; }
a:hover { text-decoration: underline; font-weight: bold; color: #f6C; }
br.clear { clear: both; }
span.pink { color: #f6C }
span.more a { font-size: 11px; font-style: italic; color: #f6c; text-decoration: none; float: right; padding: 0 20px 0 0; }
span.more a:hover { color: #666; text-decoration: underline; font-weight: normal; float: right; }
h1 { font: 16px Helvetica. Arial, sans-serif; font-weight: bold; line-height: 10px; }

/* form */
label { font-size: 14px; font-weight: bold; }
input { height: 15px; border: 1px solid #ddd; padding: 5px 5px 5px 5px; color: #f6c;}
input.submit { width: 70px; height: 30px; font-weight: bold; background: #f6c; color: #fff; float: left; }
input.submit:hover { background: #fff; color: #f6c; }
label.reset a { text-decoration: none; float: left; line-height: 30px; font-weight: normal; font-size: 12px; color: #f6c; padding: 0 0 0 20px; }
label.reset a:hover { text-decoration: underline; color: #666; }

/* top */
#top { width: 100%; height: 80px; margin: 0 auto; padding: 0; }
#tbox { width: 960px; height: 50px; margin: 0 auto; padding: 20px 0 0 0; }
#logo { width: 400px; height: 50px; margin: 0 auto; padding: 0; float: left; }
#lang { width: 300px; height: 50px; margin: 0 auto; padding: 0; float: right; }

/* header */
#header { background: transparent url(../images/login/pompuan.png) no-repeat; width: 100%; height: 250px; margin: 0 auto; padding: 0; clear: both; }
#headerBox { width: 960px; height: 230px; margin: 0 auto; padding: 0; color: #fff; text-align: center; }
#headerBox p { width: 550px; font: normal 16px Helvetica, Arial, sans-serif; color: #fff; padding: 0; line-height: 20px; text-align: justify; float: left }

/* content */
#content { width: 950px; height: auto; margin: 0 auto; padding: 10px 0 10px 0; clear: both; }
#c1 { width: 280px; height: auto; margin: 0 auto; padding: 0; float: left; }
#c2 { width: 370px; height: auto; margin: 0 auto; padding: 5px 0 0 0; float: left; }
#c3 { width: 300px; height: auto; margin: 0 auto; padding: 5px 0 0 0; float: right; }
#c3 span.tb { padding: 2px; float: left; }
#c3 img { border: none; }

/* content 2 */
#contentBoxLeft { width: 450px; height: auto; margin: 0 auto; padding: 0; float: left; }
#contentBoxRight { width: 450px; height: auto; margin: 0 auto; padding: 0; float: right; }
p { font: normal 14px Helvetica, Arial, sans-serif; color: #666; margin: 0 auto; padding: 0; line-height: 20px; text-align: justify; }

/* error */
#errorContainer { width: 500px; height: 250px; margin: 0 auto; padding: 10px; clear: both;  }
#form { width: 250px; height: auto; margin: 0 auto; padding: 0; float: left; border-right: 1px solid #ccc; }
#facebook { width: 230px; height: auto; margin: 0 auto; padding: 0; float: right; }
span.error { font-weight: bold; color: #ff0000; }

/* footer */
#footer { witdh: 100%; height: 50px; margin: 0 auto; padding: 0; clear: both; text-align: center; border-top: 1px solid #eee; font: 11px Helvetica, Arial, sans-serif; color: #666; }
#fbox { width: 960px; height: 50px; margin: 0 auto; padding: 5px 0 0 0; }
#copy { witdh: 200px; height: auto; margin: 0 auto; padding: 0; float: left; } 
#crumb { width: 400px; height: auto; margin: 0 auto; padding: 0; float: right; text-align: right; }
#crumb ul { margin: 0 auto; pading: 0; display: inline; }
#crumb ul li { margin-left: 0; padding: 3px 5px; border-left: 1px solid #ccc; list-style: none; display: inline; }
#crumb li a { text-decoration: none; color: #666; }
#crumb li a:hover { text-decoration: underline; font-weight: bold; color: #f6C; }
#crumb ul li.first { margin-left: 0; border-left: none; list-style: none; display: inline }