*{
margin: 0;
padding: 0;
}

body{
background: #28254c url("/images/site/bg.gif") 620px 0 no-repeat;
padding: 20px 40px;
color: #28254c;
font: 84%/1.4 normal Verdana, "Lucida Grande", sans-serif;
}

#container{
background: #ececf3 url("/images/site/con_bg.jpg") 0 0 repeat-x;
float: left;
width:88%;
max-width: 920px;
margin-bottom: 5px;
position: relative;
padding: 40px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
-moz-box-shadow: 3px 3px 17px #03002F;
-webkit-box-shadow: 3px 3px 17px #03002F;
-o-box-shadow: 3px 3px 17px #03002F;
box-shadow: 3px 3px 17px #03002F;
}

#topnav{
max-width: 1000px;
text-align: right;
color: #fff;
font-size: .9em;
}

#topnav p{
margin: 0 0 3px;
padding: 0;
}

#wrapper{
float:left;
width:100%;
margin-left:-35%;
}

#content{
color: #28254c;
padding: 30px;
margin: 10px 0 0 35%;
background: #fff;
border-top: solid 10px #ff9805;
min-height: 400px;
-moz-box-shadow: 2px 2px 8px #aaa;
-webkit-box-shadow: 2px 2px 8px #aaa;
-o-box-shadow: 2px 2px 8px #aaa;
box-shadow: 2px 2px 8px #aaa;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
}

/************************************************** side */

#side{
width:33%;
float:right;
margin-top: 10px;
}

.box{
color: #145313;
padding: 30px;
margin-bottom: 15px;
background: #9acc99;
border-top: solid 10px #61a25f;
-moz-box-shadow: 2px 2px 8px #999;
-webkit-box-shadow: 2px 2px 8px #999;
-o-box-shadow: 2px 2px 8px #999;
box-shadow: 2px 2px 8px #999;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
}

#side .box.rss a,
#side .box.rss a:visited{
display: inline-block;
margin: 5px 0 0;
padding: 4px 8px;
font-size: 1.4em;
text-transform: uppercase;
text-decoration: none;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
background: #28254C;
color: #D3D1EF;
text-shadow: 0 0 0;
}

#side .box.rss a:hover,
#side .box.rss a:focus{
background: rgb(255,255,255);
background: rgba(255,255,255,.4);
color: #FF740B;
text-shadow: 0 1px 1px #aaa;
}

.box.rss img{
margin-bottom: -4px;
}

/************************************************ footer */

#footer{
margin: 0 0 50px 10px;
color: #D1D1DF;
clear: left;
font-size: .9em;
}

#footer a,
#footer a:visited{
color: #D1D1DF;
}

#footer ul li{
list-style: none;
float: left;
display: block;
margin-left: 10px;
padding-left: 10px;
border-left: solid 1px;
}

#footer ul,
#footer ul li:first-child{
border: none;
padding: 0;
margin: 0;
}

/******************************************** typography */

a{
color: #B81A05;
}

a:visited{
color: #28254c;
}

#side a:visited{
color: #145313;
}

a:hover,
a:focus{
background: #B81A05;
color: #fff;
text-decoration: none;
}

#side a:hover,
#side a:focus{
color: #fff;
}

p{
margin-bottom: 1.5em;
}

ul, ol{
margin: 0 0 1.5em 18px;
}

ul li{
list-style: url("/images/site/list.gif");
}

h1{
margin: 0;
}

h1 a,
h1 a:visited{
color: #666699;
font-size: .9em;
font-weight: normal;
text-decoration: none;
padding: 3px 0 4px;
}

h1 span{
color: #a5a5c8;
font-size: .8em;
font-style: italic;
}

h1 a:hover,
h1 a:focus,
h1 a:hover span,
h1 a:focus span{
background: #D3D1EF;
color: #222;
-moz-border-radius: 2px;
-webkit-border-radius: 2px;
border-radius: 2px;
}

h2{
font-size: 2.1em;
font-weight: normal;
line-height: 1;
margin-bottom: .25em
}

h3{
margin-bottom: .5em;
}

#side h3{
text-transform: lowercase;
}

#content h3{
font-size: 1.5em;
color: #406F3E;
font-weight: normal;
margin-bottom: 0.25em;
line-height: 1.2;
padding: 0;
}

#content h4{
color: #28254C;
background: #ECECF3;
margin-bottom: 1em;
padding: 2px 5px;
}

code{
font-size: 1.2em;
background: #eee;
}

/************************************************** misc */

a img{
border: 0;
}

hr{
display: none;
}

/************************************************** tabs */

.tabbed ul{
list-style: none;

margin: 0;
padding: 0;
list-style: none;
margin: auto;
max-width: 1200px;
}

.tabbed ul li{
list-style: none;
}

.tabbed ul li a{
position: absolute;
top: -1000px;
left: -1000px;
padding: 10px 20px;
font-size: 1.5em;
font-weight: bold;
background: #FEAB41;
color: #000;
text-decoration: none;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
-moz-box-shadow: 3px 3px 17px #03002F;
-webkit-box-shadow: 3px 3px 17px #03002F;
-o-box-shadow: 3px 3px 17px #03002F;
box-shadow: 3px 3px 17px #03002F;
}

.tabbed ul li a:focus,
.tabbed ul li a:active{
position: absolute;
top: 10px;
left: 10px;
z-index: 5;
color: #fff;
background: #FEAB41;
outline: 0;
}

/*************************************************** nav */

#nav{
background: #28254c;
padding: 3px 0;
margin: 0 0 10px;
}

#nav ul{
margin: 0;
padding: 0 10px;
overflow: hidden;
min-height: 32px;
border-top: solid 1px #cbcbdc;
border-bottom: solid 1px #cbcbdc;
}

#nav ul li{
list-style: none;
display: block;
float: left;
}

#nav ul li a,
#nav ul li a:visited{
display: block;
float: left;
line-height: 32px;
color: #fff;
text-decoration: none;
padding: 0 22px;
font-size: 1.3em;
font-family: Georgia, "Times New Roman", serif;
font-style: italic;
}

#nav ul li a:focus{
background: #FF9805;
color: #28254C;
}

#nav ul li a:hover{
background: #fff;
color: #28254C;
}

#nav ul li.active a,
#nav ul li.active a:visited{
background: #D3D1EF;
color: #28254C;
}

/******************************************** front page */

#usability_event{
background: #ff9805;
padding: 20px 40px;
position: relative;
color: #3F1C00;
min-height: 300px;
margin-bottom: 10px;
-moz-box-shadow: 2px 2px 8px #aaa;
-webkit-box-shadow: 2px 2px 8px #aaa;
-o-box-shadow: 2px 2px 8px #aaa;
box-shadow: 2px 2px 8px #aaa;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
}

#usability_event div{
padding: 0 340px 0 0;
}

#usability_event #usability_image{
width: 329px;
max-height: 300px;
height: 100%;
text-align: center;
position: absolute;
right: 30px;
top: 20px;
z-index: 100;
padding: 0;
}

#usability_event h2{
font-family: Georgia, "Times New Roman", serif;
font-size: 3.5em;
font-weight: normal;
margin: 0 330px .2em 0;
color: #fff;
text-shadow: 2px 1px 5px #B81A05;
}

#usability_event #event_date{
font-size: 1.5em;
color: #B81A05;
margin-bottom: .5em;
}

#event_button a,
#event_button a:visited{
background: #d81805 url("/images/site/button_bg.png") 0 100% repeat-x;
color: #fff;
text-decoration: none;
font-size: 1.75em;
font-weight: bold;
padding: 5px 20px 8px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
float: left;
margin-right: 20px;
}

#event_button a:hover,
#event_button a:focus{
background: #28254C url("/images/site/button_bg.png") 0 100% repeat-x;
}

#usability_event #more_info a,
#usability_event #more_info a:visited{
line-height: 40px;
color: #b81a05;
}

#usability_event #more_info a:hover,
#usability_event #more_info a:focus{
color: #fff;
text-decoration: none;
padding: 0 3px;
}

#usability_event ul li{
list-style: url("/images/site/list3.gif");
}

/******************************************* four columns */

#four_cols #upa,
#four_cols #why_join,
#four_cols #twitter,
#four_cols #mailing_list{
background: #fff;
border-top: solid 10px #ff9805;
padding: 0;
min-height: 295px;
width: 19.875%;
margin: 0 0 0 1.5%;
float: left;
padding: 1% 2%;
position: relative;
-moz-box-shadow: 2px 2px 8px #aaa;
-webkit-box-shadow: 2px 2px 8px #aaa;
-o-box-shadow: 2px 2px 8px #aaa;
box-shadow: 2px 2px 8px #aaa;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
}

#four_cols #upa{
margin-left: 0;
}

#four_cols ul li{
list-style: url("/images/site/list2.gif");
}

#four_cols img{
float: right;
margin-right: -18px;
}

#four_cols p img{
float: left;
margin: 0 10px 0 0;
border: solid 2px #fff;
display: block;
}

#four_cols h3{
color: #28254c;
text-transform: lowercase;
font-size: 1.4em;
margin: 0 0 .5em;
font-weight: normal;
}

#four_cols form div{
padding: 0;
margin-bottom: 10px;
}

#four_cols fieldset{
border: 0;
}

#four_cols legend{
display: none;
}

#four_cols form label{
display: block;
}

#four_cols #tweet{
background: #eee;
padding: 10px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
min-height: 113px;
}

#four_cols #tweet p{
margin: 0;
overflow: hidden;
}

#four_cols #tweet p img{
border: 0;
margin: 45px 70px;
}

#four_cols #tweet ul,
#four_cols #tweet ul li{
list-style: none;
padding: 0;
margin: 0;
}

/************************************************* forms */

#content fieldset fieldset,
#admin #content fieldset{
border: solid 1px #ccc;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
padding: 10px 20px 10px;
margin-bottom: 30px;
}

legend.main-legend{
display: none;
}

legend{
font-weight: bold;
padding: 0 5px;
}

label.main-label{
display: block;
}

#content input,
#content select,
#content textarea{
margin-bottom: 15px;
}

input, select, textarea{
background: #f0f0f0;
border: solid 1px #bfbfc9;
border-bottom: 0;
border-right: 0;
font-size: 1em;
padding: 2px;
font-family: Verdana, "Lucida Grande", sans-serif;
}

textarea{
width: 90%;
}

input:focus,
select:focus,
textarea:focus{
background: #FF9805;
color: #000;
}

input.button{
width: auto;
background: #d81805 url("/images/site/button_bg.png") 0 100% repeat-x;
color: #fff;
font-weight: bold;
border: 0;
padding: 2px 8px 4px;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
}

input.button:hover,
input.button:focus{
cursor: pointer;
background: #28254C url("/images/site/button_bg.png") 0 100% repeat-x;
}

input#antispam{
width: 75px;
}

.labels div{
margin-bottom: 1em;
position: relative;
padding-left: 20px;
}

label.check{
display: block;
}

.check input{
position: absolute;
left: 0;
top: 3px;
}

input.error2,
select.error2,
textarea.error2{
border-left: solid 1px #B81A05;
border-top: solid 1px #B81A05;
}

label.error2{
color: #B81A05;
font-weight: bold;
}

.check{
position: relative;
padding-left: 20px;
}

/********************************************** messages */

.success{
background: #B6DFB5;
color: #145313;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
padding: 20px 25px;
margin-bottom: 1em
}

.success a,
.success a:visited,
#content .success h3{
color: #145313;
}

.success a:hover, .success a:focus{
color: #145313;
background: #fff;
}

.error{
background: #FFC0CB;
color: #B81A05;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
padding: 20px 25px;
margin-bottom: 1em
}

#four_cols .error{
padding: 10px 15px;
}

.error a,
.error a:visited,
#content .error h3{
color: #B81A05;
}

.error a:hover, .error a:focus{
color: #B81A05;
background: #fff;
}

.error ul,
.error ol,
.success ul,
.success ol{
margin-bottom: 1em;
}

#content .success h3, #content .error h3{
margin: 0 0 3px;
}

#content .success p, #content .error p{
margin-bottom: 10px
}

/************************************************ events */

.event{
position: relative;
margin-bottom: 100px;
}

.event img{
float: right;
margin: 0 0 0 30px;
}

.event h2{
line-height: 1;
margin-bottom: .1em;
}

p.event_date,
.archived_event_date{
position: absolute;
width: 59px;
left: -101px;
top: 0;
background: #ff9805;
border-top: dotted 1px #ff9805;
font-weight: bold;
line-height: 1.1;
padding: 10px 5px;
margin: 0;
color: #fff;
text-align: center;
z-index: 1;
-moz-box-shadow: inset -3px 0 19px #d75100;
-webkit-box-shadow: inset 3px 0 0 #d75100;
-o-box-shadow: inset 3px 3px 7px #d75100;
box-shadow: inset 3px 3px 7px #d75100;
}

p.event_date span,
p.archived_event_date span{
display: block;
}

p.archived_event_date{
background: #D3D1EF;
color: #28254C;
left: -101px;
border-right: solid 2px #9E9BCF;
border-top: dotted 1px #D3D1EF;
-moz-box-shadow: inset -2px 0 3px #9E9BCF;
-webkit-box-shadow: inset 3px 0 0 #9E9BCF;
-o-box-shadow: inset 3px 3px 7px #9E9BCF;
box-shadow: inset 3px 3px 7px #9E9BCF;
}

p.event_date .day,
p.archived_event_date .day{
font-size: 1.8em;
text-transform: uppercase;
}

p.event_date .month_year,
p.archived_event_date .month_year{
font-size: 1.1em;
text-transform: uppercase;
}

p.event_date .time,
p.archived_event_date .time{
font-size: 1.2em;
color: #FFE5BF;
}

p.speakers{
font-size: 1.2em;
color: #757575;
margin-bottom: 1em;
font-style: italic;
}

#side dl{
margin-bottom: 20px;
}

#side dl dt{
font-size: .8em;
font-weight: bold;
background: #B6DFB5;
padding: 1px 7px;
margin: 0 0 5px;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
}

#side dl dd{
line-height: 1.1;
}

#side dl dd a{
display: block;
padding: 7px;
font-size: .9em;
text-decoration: none;
color: #145313;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
}

#side dl dd a:hover,
#side dl dd a:active,
#side dl dd a:focus,
#side dl dd.current a{
background: #EFFFEF;
color: #145313;
}

#side .fce{
background: #B6DFB5;
padding: 7px;
margin-bottom: 10px;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
}

#side .fce h4 a{
font-size: 1.2em;
line-height: 1.19;
}

#side .fce h4 a:visited{
color: #145313;
}

#side .fce h4 a:hover,
#side .fce h4 a:focus{
color: #fff;
}

iframe{
border: solid 1px #28254c;
width: 100%;
margin-bottom: 0;
}

#side .fce p{
margin: 0;
}

.event_button2 a,
.event_button2 a:active{
background: #d81805 url("/images/site/button_bg.png") 0 100% repeat-x;
color: #fff;
text-decoration: none;
font-size: 1.25em;
padding: 4px 15px 4px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
display: inline-block;
margin: 50px 0 0 0;
}

.event_button2 a:hover,
.event_button2 a:focus{
background: #28254C url("/images/site/button_bg.png") 0 100% repeat-x;
}

/************************************************** jobs */

.job{
padding: 30px;
border: solid 1px #9ACC99;
margin-bottom: 1em;
}

/************************************************ tables */

table{
border-collapse: collapse;
width: 100%;
}

th{
border-bottom: solid 1px #28254C;
text-align: left;
padding: 3px 10px;
color: #28254C;
}

td{
padding: 10px;
border-bottom: dotted 1px #D3D1EF;
}

/************************************************* admin */

#admin #wrapper{
float:left;
width:100%;
margin-left: 0;
}

#admin #content{
margin: 10px 0;
}

#admin #content label{
display: none;
}