/* http://www.cssoptimiser.com/optimize.php  version = 0.3 */
/* the above script was converting background-position: into background: BEWARE! */
td { text-align: left }

/* POSITIONS */
#topbtns {position: absolute; left: 218px; top: 130px; vertical-align: top; z-index: 11; width: 480px; min-width: 480px;}
#logo {position: absolute; left: 25px; top: 0px; z-index: 9}
#logo2 {position: absolute; left: 14px; top: 130px; z-index: 8}
div.submenu {position: absolute; width: 210px; z-index: -1; top: 30px; left: 10px}
.sssignin {width: 280px; height: 170px; border: solid 1px darkgreen; -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px;}
.signin {width: 265px; height: 170px;}
.surround_signin {width: 580px}
.right_align_box {text-align: right; width: 420px;}
#loginspaces {width: 210px; text-align: right;}
#signupspaces {width: 75%; text-align: right}
div.err {position: absolute; top: 140px; width: 300px; border: dotted 2px red; background-color: #ADA381; padding: 10px; margin: 5px; z-index: 54; -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px;}
#maincontent {position: absolute; left: 170px; top: -40px; border: solid 0px purple; width: 74%; line-height: 1.4}
#maincontainer {border: solid 0px blue; top: -58px; left: -160px; position: relative; z-index: 0; width: 100%; min-width: 490px;}
#topstatbar {position: absolute; top: 12px; right: 10px; border: solid 0px blue; z-index: 15; line-height: 1.3}
h2 {padding: 5px; margin: 5px;}
h4 {padding: 1px; margin: 2px;}

/* COLORS / MISC */
body {background-color: #ADA381; color: darkgreen; font-size: 16px; font-family: arial, "lucida console";}
a:link, a:visited {color: darkgreen; text-decoration: underline}
a:link img, a:visited img, a img {color: darkgreen; text-decoration: none}
a:hover {color: darkgreen; text-decoration: none; border-bottom: 0px dotted darkgreen;}
a.topbtn, a.topbtn:visited {color: darkgreen; font-size: 28px; font-weight: bold; text-decoration: none; font-family: serif; padding: 6px;}
a.topbtn:hover             {color: darkgreen; font-size: 28px; font-weight: bold; text-decoration: none; border-bottom:2px dotted darkgreen; font-family: serif;}
a.sub, a.sub:visited       {color: darkgreen; text-decoration: none; font-size: 18px; padding: 3px; margin: 13px; line-height: 1.4}
a.sub:hover {color: #ADA381; text-decoration: none; border-bottom:2px dotted darkgreen; font-size: 18px; padding: 3px; margin: 13px; line-height: 1.4}
.bld {font-weight: bold;}
.sml{font-size: 12px}
.sml10{font-size: 10px}
.sml11{font-size: 11px}
.pg {font-size: 20px}
.jstf{text-align: justify;}
.pgc {font-size: 20px; color: #5e86b8}
.imgsel {color: darkgreen}
.imgsel img{border: 0px dotted #ADA381}
.imgsel:hover img{border: 4px dashed darkgreen}
label:hover {background-color:#ADA381;color:darkgreen}
input.frm_txtchat {background-color: #ADA381; border: solid 1px darkgreen; color: darkgreen; margin: 0px; font-size: 15px; -opera-border-radius: 10px; -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px;}
input.frm_txt {background-color: #ADA381; border: solid 1px darkgreen; color: darkgreen; margin: 2px;  -opera-border-radius: 10px; -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px; padding: 3px;}
input.frm_btn       {background-color: #ADA381; border: solid 1px black; border-color: black; color: black; margin: 20px; font-weight: bold; -opera-border-radius: 10px; -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px;}
input.frm_btn:hover {background-color: #beb699; border: solid 1px green; border-color: green; color: black; margin: 20px; font-weight: bold; -opera-border-radius: 10px; -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px;}
input.frm_btnsm       {background-color: #ADA381; border: solid 1px black; color: black; margin: 0px; -opera-border-radius: 10px; -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px;}
input.frm_btnsm:hover {background-color: #beb699; border: solid 1px green; color: black; margin: 0px; -opera-border-radius: 10px; -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px;}
textarea.frm_txt {background-color: #ADA381; border: solid 1px darkgreen; color: darkgreen; margin: 2px; -opera-border-radius: 10px; -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px; padding: 3px;}
select.frm_txt {background-color: #ADA381; color: darkgreen; font-size: 14px; border: darkgreen; border-style: solid; border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; margin: 0px;}


input.login1 {  
background-color: #ADA381;
border: solid 1px darkgreen;
color: darkgreen;
margin: 2px;
-opera-border-radius: 10px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
background-position: 4px;
background:url(http://i.capalls.com/Misc/Locked.png) left no-repeat;  
padding: 1px 4px 1px 25px;  
}  

input.login2 {  
background-color: #ADA381;
border: solid 1px darkgreen;
color: darkgreen;
margin: 2px;
-opera-border-radius: 10px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
background-position: 4px;
background:url(http://i.capalls.com/Misc/User.png) left no-repeat;  
padding: 1px 4px 1px 25px;  
}  


:link img {border: none;}

.hardfade {filter:alpha(opacity=12); -moz-opacity:.12; opacity:.12;}
.fadeout {filter:alpha(opacity=50); -moz-opacity:.50; opacity:.50;}
.fadeout2 {filter:alpha(opacity=69); -moz-opacity:.69; opacity:.69;}
.fadeout3 {filter:alpha(opacity=75); -moz-opacity:.75; opacity:.75;}
.fadein {filter:alpha(opacity=100); -moz-opacity:1.0; opacity:1.0;}

p.signupconfmsg {color: #a41c49; font-size: 18px; font-weight: bold}
div.priority_msg {border: solid 1px #a41c49; width: 400px}
p.errmsg {color: #a41c49; font-size: 20px;}
.red {color: #a41c49}
.hid {visibility: hidden}
hr {width: 85%}

tr.odd {background-color: #beb699;}
td.odd {background-color: #beb699;}

.nice1 {border: dotted 1px darkgreen; padding: 2px; margin: 2px; -o-border-radius: 10px; -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px; background-color: #beb699;}

div.nicee3af81 {border: dotted 1px darkgreen; padding: 5px; margin: 5px; -o-border-radius: 10px; -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px; background-color: #e3af81; z-index: 101;}
div.nicebcb2de {border: dotted 1px darkgreen; padding: 5px; margin: 5px; -o-border-radius: 10px; -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px; background-color: #bcb2de; z-index: 101;}
div.nicec0d084 {border: dotted 1px darkgreen; padding: 5px; margin: 5px; -o-border-radius: 10px; -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px; background-color: #c0d084; z-index: 101;}

div.niced890d6 {border: dotted 1px darkgreen; padding: 5px; margin: 5px; -o-border-radius: 10px; -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px; background-color: #d890d6; z-index: 101;}
div.nicecb858c {border: dotted 1px darkgreen; padding: 5px; margin: 5px; -o-border-radius: 10px; -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px; background-color: #cb858c; z-index: 101;}
div.nicee8a4be {border: dotted 1px darkgreen; padding: 5px; margin: 5px; -o-border-radius: 10px; -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px; background-color: #e8a4be; z-index: 101;}

div.nicebeb699 {border: dotted 1px darkgreen; padding: 5px; margin: 5px; -o-border-radius: 10px; -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px; background-color: #beb699; z-index: 101;}

div.nice {border: dotted 1px darkgreen; padding: 5px; margin: 5px; -o-border-radius: 10px; -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px; background-color: #beb699; z-index: 101;}
div.niceh {border: dotted 1px darkgreen; padding: 5px; margin: 5px; -o-border-radius: 10px; -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px; background-color: #dad3ba; z-index: 101;}
div.good {border: dotted 1px gold;      padding: 5px; margin: 5px; -o-border-radius: 10px; -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px; background-color: #ADA381; z-index: 101; -moz-box-shadow: darkgreen 0px 0px 5px;}
div.bad {border: dotted 1px red;       padding: 5px; margin: 5px; -o-border-radius: 10px; -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px; background-color: #ADA381; z-index: 101; -moz-box-shadow: red 0px 0px 5px;}

/* Other / Misc */
#fixed { position: absolute; visibility: hidden; z-index: 10; }

#vertgraph {                    
    width: 378px; 
    height: 207px; 
    position: relative; 
    background: url("http://i.capalls.com/graph/g_backbar-new.gif") no-repeat; }
#vertgraph ul { 
    width: 378px; 
    height: 207px; 
    margin: 0; 
    padding: 0; }
#vertgraph ul li {  
    position: absolute; 
    width: 28px; 
    height: 160px; 
    bottom: 34px; 
    padding: 0 !important; 
    margin: 0 !important; 
    background: url("http://i.capalls.com/graph/g_colorbar3.gif") no-repeat !important;
    text-align: center; 
    font-weight: bold; 
    color: white; 
    line-height: 2.5em; }
#vertgraph li.bravery { left: 24px; background-position: 0px bottom !important; }
#vertgraph li.intelligence { left: 101px; background-position: -28px bottom !important; }
#vertgraph li.conformation { left: 176px; background-position: -56px bottom !important; }
#vertgraph li.strength { left: 251px; background-position: -84px bottom !important; }
#vertgraph li.endurance { left: 327px; background-position: -112px bottom !important; }

/* Complex Bar Graph */
dl { 
	margin: 0; 
	padding: 0; 					
}
dt { 
	position: relative; /* IE is dumb */
	clear: both;
	display: block; 
	float: left; 
	width: 104px; 
	height: 20px; 
	line-height: 20px;
	margin-right: 17px;              
	font-size: .75em; 
	text-align: right; 
}
dd { 
	position: relative; /* IE is dumb */
	display: block; 				
	float: left;	 
	width: 197px; 
	height: 20px; 
	margin: 0 0 15px; 
	background: url("http://i.capalls.com/Graph/g_colorbar.jpg"); 
}
* html dd { float: none; } /* IE is dumb; Quick IE hack, apply favorite filter methods for wider browser compatibility */

dd div { 
	position: relative; 
	background: url("http://i.capalls.com/Graph/g_colorbar2.jpg"); 
	height: 20px; 
	width: 75%; 
	text-align:right; 
}
dd div strong { 
	position: absolute; 
	right: -5px; 
	top: -2px; 
	display: block; 
	background: url("http://i.capalls.com/Graph/g_marker.gif"); 
	height: 24px; 
	width: 9px; 
	text-align: left;
	text-indent: -9999px; 
	overflow: hidden;
}


#dropmenudiv{
position:absolute;
border:1px solid black;
border-bottom-width: 0;
line-height:18px;
z-index:100;
}

#dropmenudiv a{
width: 100%;
display: block;
text-indent: 3px;
border-bottom: 1px solid black;
padding: 1px 0;
text-decoration: none;
font-weight: bold;
}

#dropmenudiv a:hover{ /*hover background color*/
background-color: #dfd7ca;
}


/* Basic Bar Graph */
.graph { 
	position: relative; /* IE is dumb */
	width: 300px; 
	border: 1px solid #006400; 
	padding: 2px; 
	margin-bottom: .5em;					
}
.graph .bar { 
	display: block;	
	position: relative;
	background: #006400; 
	text-align: center; 
	color: #FFF; 
	height: 2em; 
	line-height: 2em;									
}
.graph .bar span { position: absolute; left: 1em; } /* This extra markup is necessary because IE doesn't want to follow the rules for overflow: visible */




/* SINGLE PROGRESS BAR */

.progressBar{
	width:216px;
	height:41px;
	background:url(http://i.capalls.com/apb/bg_bar.gif) no-repeat 0 0;
	position:relative;
}
.progressBar span{
	position:absolute;
	display:block;
	width:200px;
	height:25px;
	background:url(http://i.capalls.com/apb/bar.gif) no-repeat 0 0;
	top:8px;
	left:8px;
	overflow:hidden;
	text-indent:-8000px;
}
.progressBar em{
	position:absolute;
	display:block;
	width:200px;
	height:25px;
	background:url(http://i.capalls.com/apb/bg_cover.gif) repeat-x 0 0;
	top:0;
}

/*---------- bubble tooltip -----------*/
a.tt{
    position:relative;
    z-index:24;
}
a.tt span{ display: none; }

/*background:; ie hack, something must be changed in a for ie to execute it*/
a.tt:hover{ z-index:25; background:;}
a.tt:hover span.tooltip{
    display:block;
    position:absolute;
    top:20px; left:0;
	padding: 15px 0 0 0;
	width:200px;
    text-align: center;
	filter: alpha(opacity:93);
	KHTMLOpacity: 0.93;
	MozOpacity: 0.93;
	opacity: 0.93;
}
a.tt:hover span.top{
	display: block;
	padding: 30px 8px 0;
    background: url(http://i.capalls.com/bubble.gif) no-repeat top;
}
a.tt:hover span.middle{ /* different middle bg for stretch */
	display: block;
	padding: 0 8px; 
	background: url(http://i.capalls.com/bubble_filler.gif) repeat bottom; 
}
a.tt:hover span.bottom{
	display: block;
	padding:3px 8px 10px;
    background: url(http://i.capalls.com/bubble.gif) no-repeat bottom;
}


p.link a {text-decoration: none;}
p.link a:link span{display: none;}
p.link a:visited span{display: none;}
p.link a:hover {text-decoration: none;}
p.link a:hover span{position: absolute;
left: 220px;
margin:10px 0px 0px 10px;
background-color: #beb699;
max-width:460;
padding: 2px 10px 2px 10px;
border: 2px dotted darkgreen;
text-align:left;
display: inline;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
z-index:0;
}

ul									{ list-style: none; }
p                                   { margin: 15px 0; }

/* 
	LEVEL ONE
*/
ul.dropdown                         { position: relative; margin: 0; padding: 0; }
ul.dropdown li                      { font-weight: bold; float: left; zoom: 1; background: #ADA381; font-size: 16px; border: dotted 1px darkgreen; -o-border-radius: 10px; -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px;}}
ul.dropdown a:hover		            { color: darkgreen; }
ul.dropdown a:active                { color: #BEB699; }
ul.dropdown li a                    { display: block; padding: 4px 12px; color: #222; text-decoration: none;}
ul.dropdown li.hover,
ul.dropdown li:hover                { background: #DAD3BA; color: black; position: relative; }
ul.dropdown li.hover a              { color: black; }

/* 
	LEVEL TWO
*/
ul.dropdown ul 						{ width: 150px; visibility: hidden; position: absolute; top: 100%; left: 0; font-size: 16px; margin: 0; padding: 0; }
ul.dropdown ul li 					{ font-weight: normal; background: #BEB699; color: darkgreen; 
									  float: none; }
									  
                                    /* IE 6 & 7 Needs Inline Block */
ul.dropdown ul li a					{ border-right: none; width: 100%; display: inline-block; } 

/* 
	LEVEL THREE
*/
ul.dropdown ul ul 					{ left: 100%; top: 0; margin: 0; padding: 0; }
ul.dropdown li:hover > ul 			{ visibility: visible; }

.dimB {
background-color: rgb(0, 0, 0);
opacity: 0.7; /* Safari, Opera */
-moz-opacity:0.70; /* FireFox */
filter: alpha(opacity=70); /* IE */
z-index: 500;
height: 100%;
width: 100%;
background-repeat:repeat;
position:fixed;
top: 0px;
left: 0px;
display: none;
}