/* set our custom font family using @font-face */

@font-face {
   font-family: champ;
   src: url("../fonts/CL.ttf") format("truetype");
}


* { margin:0;padding:0; }
body {background:url(../img/bodybg.png) top left repeat;color:#FFF;}

p { font:normal 12px  Arial, Helvetica, sans-serif;color:#FFF;padding:8px 0; }

a {font:normal 12px  Arial, Helvetica, sans-serif;color:#FFF;}
a:hover {color:#CCC;}

a.button { padding:6px;background:#69a707;color:#FFF;-moz-border-radius-topleft: 10px;-moz-border-radius-bottomright: 10px;-moz-border-radius-bottomleft: 10px;margin:10px;text-decoration:none;font-size:12px;text-transform:uppercase;font-weight:bold;border:2px solid transparent; }
a.button:hover { border:2px solid #fff; }
h1, h2, h3, h4 { text-transform:uppercase;font-family:champ, arial, verdana, sans-serif; }
#container {background:#444;width:860px;border:1px solid #FFF;-moz-border-radius-topleft: 30px;-moz-border-radius-bottomright: 30px;-moz-border-radius-bottomleft: 30px;margin:20px auto;padding:20px;}

#header {}

#header h1 { font-family:champ, arial, sans-serif;text-transform:uppercase;font-size:50px;color:#9bec1b;display:block;float:left;width:200px;text-align:center; }
#header p { font-family:arial, sans-serif;color:#CCC;display:block;float:right;width:620px; }

#nav { width:860px;clear:both;border-bottom:1px dotted #666;height:32px;padding:16px 0 0 0; }
#nav ul {}
#nav li { list-style:none;display:block;float:left;border:1px solid #666;padding:6px;margin:0 3px 0 0;-moz-border-radius-topleft: 10px;-moz-border-radius-topright: 10px;border-bottom:0; }
#nav li a { font:bold 16px champ, arial, verdana, sans-serif;text-transform:uppercase;text-decoration:none; }
#nav li:hover { background:#000; }
#nav li:hover a { color:#FFF; }

#content { float:left;width:640px;padding:20px 20px 0 0; }

#welcome { border-bottom:1px dotted #666;padding:0 0 20px 0; }

.column { float:left;width:206px;padding:10px 10px 10px 0; }
.column img { border:3px solid #333;margin:4px 0;opacity:0.5; }
.column:hover img { opacity:1; }
.column p { font-size:11px;padding:4px 0; }
.column:last-of-type { padding:10px 0; }


#sidebar { float:left;width:200px;padding:20px 0 0 0; }

.sidepanel { width:188px;border:1px dotted #666;-moz-border-radius-bottomleft: 5px;-moz-border-radius-topright: 5px;-moz-border-radius-bottomright: 5px;padding:5px;margin:0 0 8px 0;color:#CCC; }
.sidepanel h4 { font-family:arial;font-size:13px; }
.sidepanel p { padding:4px 0;font-size:11px;color:#CCC; }


#footer { clear:both;width:860px;padding:30px 0 10px 0;text-align:right; }
