/* @override http://localhost/projects/secret_santa/css/secretsantabot.css */

/** 
 * 
 * SecretSantaBot 
 * Dec. 2009 
 * Ben Watts (benwatts.ca) 
 *
 * HoHoHo ...
 * Intetionally untested in IE. I get enough of that in my dayjob. 
 *
 */ 
 
 
*{ margin: 0; padding: 0}

html {
    font: 62.5%/160% 'helvetica neue', helvetica, arial, sans-serif;
    background: #421570;
    color: #fff;
    }
    
body{
    background: url(../images/bg.jpg) 48% 0 no-repeat;
    }    
    
h2{
    color: #faa4a4;
    font-size: 130%;
    margin: 0 0 15px 0;
    }    
    
ol, ul{
    margin: 0 0 15px 22px;
    }    
li{
    margin: 0 0 5px; 
    }    
p{
    margin: 0 0 15px 0;
    }   

a{
    color: #fff;
    }
    
    
    
/** STRUCTURE */    

#wrapper{
    width: 900px;
    margin: 0 auto;
    font-size: 140%;
    line-height: 130%;
    }
    
    
/** HEADER */    
#header{
    position: relative;
    padding: 40px 0 0 0;
    margin: 0 0 50px 0;
    }    
#header h1{
    width: 418px;
    height: 55px;
    background: url(../images/title.png) 0 0 no-repeat; /* transparent pngs feel so RIGHT */
    text-indent: -900em;
    overflow: hidden;
    margin: 0 auto;
    }
    
#header #goback{
    display: block;
    width: 138px;
    height: 24px;
    background: url(../images/goback.png) 0 0 no-repeat;
    text-indent: -900em;
    overflow: hidden;
    position: absolute;
    top: 15px; right: 0;    
    }    
#header #goback:hover{
    opacity: 0.85;
    }    
    
    
/** LEFT COLUMN */    

#leftcolumn{
    float: left;
    width: 400px;
    margin: 0 0 0 20px;
    }    
    
.box{
    -moz-border-radius: 8px;
    -webkit-border-radius: 8px;
    border-radius: 8px;
    background: rgba(255,255,255, .2);
    padding: 15px;
    margin: 0 0 15px 0;
    }        
    
        
#footer{
    clear: both;
    }    
    
    
/** RIGHT COLUMN */    

#rightcolumn{
    margin: 15px 0 0 0;
    width: 430px;
    float: right;
    }
#rightcolumn form li{
    font-size: 140%;
    color: #69458d;
    position: relative;
    }       
    
form input{
    padding: 3px;
    width: 177px;
    border: solid 2px #6a448e;
    font: 80% 'helvetica neue', helvetica, arial, sans-serif;
    color: #666;
    }     
    
form .remove{
    display: block;
    position: absolute; 
    top: 2px;
    right: 0;
    width: 24px;
    height: 24px;
    background: url(../images/delete.png) 0 0 no-repeat;
    border: none;
    text-indent: -900em;
    overflow: hidden;
    cursor: pointer;
    }    
form .remove:hover{
    background-position: 0 -24px;
    }    
    
    
#add-person{
    background: rgba(255,255,255, .1) url(../images/add.png) 4px 4px no-repeat;
    padding: 6px 12px 6px 35px;
    margin-left: 19px;
    }
#add-person:hover{
    background-position: 4px -44px;
    }
    
.button{
    float: left;
    color: #e2c5ff;
    font-size: 90%;
    font-weight: bold;
    display: block;
    -moz-border-radius: 8px;
    -webkit-border-radius: 8px;
    border-radius: 8px;
    background-color: rgba(255,255,255, .1);
    padding: 6px 10px;    
    text-decoration: none;  
    cursor: pointer;  
    }    
    
#send-out-email{
    margin: 0 0 0 5px;
    background-color: #d63939
    }
    
#try-it-out{
    margin: 0 0 0 5px;
    background-color: #d63939    
    }    
     
.button:hover{    
    text-decoration: none;
    color: #fff;
    }
    
#output{
	padding: 25px 0 0 0;
    clear: both;
    }
#test-output{
	font-size: 90%;
	margin: 0;
	padding: 12px 0 6px 0;
	border-top: solid 2px #572e80;
	border-bottom: solid 2px #572e80;
	list-style: none;
	}  
#rightcolumn form li{
	color: #9776b9;
	}	
#rightcolumn form li strong{
    color: #fff;
    } 	  
#test-output img{
	vertical-align: middle;	
	}	


/** FEEDBACK */    
.error{
	color: #D63939;
	text-align: center;
	}
.error strong{
	color: #f85959;
	}