/* ********* */
/* RESET CSS */
/* ********* */

/* First blob here is derived from YUI's "reset" CSS file v 2.5.0 */

html{color:#000;background:#FFF;}
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td{margin:0;padding:0;}
table{border-collapse:collapse;border-spacing:0;}
img{border:0;}
address,caption,cite,code,dfn,em,strong,th,var{font-style:normal;font-weight:normal;}
li{list-style:none;}
caption,th{text-align:left;}
h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal;}
q:before,q:after{content:'';}
abbr,acronym {border:0;font-variant:normal;}
/* to preserve line-height and selector appearance */
sup {vertical-align:text-top;}
sub {vertical-align:text-bottom;}
input,textarea,select{font-family:inherit;font-size:inherit;font-weight:inherit;}
/*to enable resizing for IE*/
input,textarea,select{font-size:100%;}
/*because legend doesn't inherit in IE */
legend{color:#000;}

/* Global modifications to "reset" to make it more typical */

h1,h2,h3,h4,h5,h6{font-weight:bold;}
input,select {font-size: 90%;}
strong, th {font-weight: bold;}
em {font-style: italic;}
ul li {list-style-type: disc;}
ol li {list-style-type: decimal;}
p {margin: 15px 0;}
img { display: block; }



/* STRUCTURE */

html 
{
  font: 90% Verdana, sans-serif; 
  background: white;
  color: black;
  line-height: 150%;
}

#wrapper
{
  position: relative;
  width: 960px;
  margin: 0 auto;
  padding: 0;
  border: 1px solid transparent; /* fixes border + margin errors */
}



/* GENERAL FORMATTING */

a:link { color: black; }
a:visited { color: black; }
a:hover { color: blue; }
a:active { color: blue; }

a img { border: 0; }

h2 { font-size: 125%; }
h3 { font-size: 110%; }
h4 { font-size: 90%; }

ul, ul li { list-style-type: none; }

input[type=submit],
input[type=button]
{
  padding: 2px 4px;
}


.centered
{
  text-align: center;
  margin: 0 auto;
}

.left
{
  float: left;
  margin: 0 15px 15px 0;
}

.right
{
  float: right;
  margin: 0 0 15px 15px;
}

.clear { clear: both; }
.small { font-size: 85%; }
.hidden { display: none; }
.error { color: red; }
.note { color: blue; }
.inline { display: inline; }
.offscreen { position: absolute; top: 0; left: -999px; width: 990px; }

table, table th, table td { border-collapse: collapse; }
table { margin: 20px 0; }
table td, table th { padding: 10px; }
table td.label { width: 90px; }

div.hr hr { display: none; }
div.hr 
{ 
  margin: 15px 0;
  border-bottom: 1px dotted blue; 
}

select { border: 1px solid #aaa; }


/* HEADER */

#header { margin: 15px 0; }
#header img
{
  height: 95px;
  width: 225px;
  display: inline; /* Otherwise the link goes all the way across the page and interferes with the ad. */
}

#header #search
{
  position: absolute;
  top: 80px;
  right: 0;
  margin: 15px 0;
  padding: 0;
}

#header #search_term
{
  width: 200px;
  padding: 0;
}



/* MENU */

#menu
{
  float: left;
  width: 184px;
  padding: 0 8px;
  font-size: 95%;
  font-variant: small-caps;
  background: white url('menu.png') top repeat-x;
  border-right: 1px dotted blue;
  border-top: 1px dotted blue;
}

#menu ul, 
#menu ul li
{
  list-style-type: none;
  margin: 20px 0 0 0;
  padding: 0;
}

#menu ul ul, 
#menu ul ul li
{
  margin: 4px 0 0 10px;
}

#menu ul li
{
  padding-left: 10px;
}

#menu #rss img
{
  display: inline;
  margin-bottom: -1px;
}

#menu #update
{
  margin: 25px 0 0 0;
  font-size: 70%;
  text-align: center;
}



/* MENU POINTERS */

body#user #menu li#user,
body#char1 #menu li#char1,
body#char2 #menu li#char2,
body#char3 #menu li#char3,
body#new #menu li#new,
body#gallery #menu li#gallery,
body#gallery_alliance #menu li#gallery_alliance,
body#gallery_horde #menu li#gallery_horde,
body#search #menu li#search,
body#alliance #menu li#alliance,
body#horde #menu li#horde,
body#class #menu li#class,
body#achievement #menu li#achievement,
body#argenttournament #menu li#argenttournament,
body#reputation #menu li#reputation,
body#pvp #menu li#pvp,
body#crafted #menu li#crafted,
body#event #menu li#event,
body#tcg #menu li#tcg,
body#loot #menu li#loot,
body#retired #menu li#retired,
body#cataclysm #menu li#cataclysm,
body#patch41 #menu li#patch41,
body#blog #menu li#blog,        /* for the blog, but here to use same arrow graphic */
body#archive #menu li#archive   /* for the blog, but here to use same arrow graphic */
{
  background: transparent url('arrow.png') left center no-repeat;
}



/* CONTENT */

#content
{
  margin-left: 220px; /* Includes fake padding. That gives us 740px to work with. */
}



/* FOOTER */

#footer
{
  clear: both;
  padding-top: 10px;
  font-size: 70%;
  text-align: center;
  color: #888;
}

/* The footer is dueling with the blog archive and the #about page, which was dueling with the menu, so we specify it *very* clearly. */
#content #footer ul.footer_menu, 
#content #footer ul.footer_menu li
{
  display: inline;
  margin: 0;
  padding-top: 7px;
}

#footer ul.footer_menu { border-top: 1px solid #aaa; }

#footer p { margin: 0; }

#footer a { text-decoration: none; }
#footer a:link { color: #888; }
#footer a:visited { color: #888; }
#footer a:hover { color: blue; }
#footer a:active { color: blue; }



/* CAMEO TABLES */


table.cameo
{
  margin: 0 0 30px 0;
  text-align: center;
  vertical-align: top;
}

table.cameo td
{
  vertical-align: top;
  padding: 0;
}

table.cameo div.thumbnail
{
  position: relative;
  width: 150px;
  margin: 17px;
}

table.cameo div.thumbnail img
{
  margin: 0 auto;
}

table.cameo div.thumbnail img.retired
{
  position: absolute;
  top: 10px;
  left: 10px;
}



/* GALLERY & COLLECTION CAMEOS */


.gallery table.cameo div.thumbnail
{
  width: 120px;
  margin: 0 0 15px 0;

}

.gallery table.cameo table td.name
{
  padding: 0 3px;
}



/* HOME PAGE */

.home #news
{
  margin-bottom: 40px;
  padding: 15px;
  border: 1px solid blue;
}

.home #news h2
{
  font-size: 100%;
  font-weight: bold;
  font-variant: small-caps;
}

.home #news img
{
  display: inline;
}

.home #news ul
{
  margin: 5px 0 15px 20px;
}

.home #news ul, 
.home #news li
{
  list-style-type: circle;
  line-height: 175%;
}

.home #meta
{
  margin: 0;
  padding: 0;
  font-size: 90%;
}

.home #award
{
  clear: both;
  font-size: 90%;
  line-height: 125%;
}



/* BROWSE PAGES */

.browse h3
{
  margin-top: 30px;
}

.browse ul
{
  margin: 0 0 0 30px;
}



/* SEARCH PAGE */

#search #show_form, 
#search #hide_form
{
  margin: 5px 0;
  font-size: 90%;
  font-style: italic;
}

#search #parameters, #search #parameters th, #search #parameters td
{
  border-collapse: collapse;
  border: 1px solid black;
  padding: 3px 5px;
}

#search #parameters
{
  width: 100%;
}

#search #parameters td.hint
{
  font-size: 75%;
  color: maroon;
}

#search #results, #search #results th, #search #results td
{
  border-collapse: collapse;
  border: 1px solid black;
  margin: 0; 
  padding: 0 5px;
}

#search #results
{
  width: 100%;
}

#search #results img
{
  display: inline;
}

#search #results th
{
  padding: 3px 5px;
}

#search #results td img
{
  width: 50px;
  height: 50px;
  margin: 0 5px;
  vertical-align: middle;
}

#search #results td p
{
  margin: 0;
  padding: 0;
}



/* WIDGETS */

div.widget_data
{
  display: block;
}

div.widget_saving
{
  display: none;
}



/* MOUNT PAGES */

.mount img.mount
{
  width: 500px;
  float: right;
}

.mount h2
{
  font-size: 120%;
  padding-bottom: 5px;
  border-bottom: 1px dotted blue;
}

.mount h2 img
{
  display: inline;
  padding: 0 5px 0 0;
  vertical-align: -3px;
}

.mount h2 img.icon
{
  width: 32px;
}

.mount h3
{
  margin: 0;
  margin-top: 20px;
  padding: 0;
  font-size: 90%;
}

.mount h3.retired
{
  margin-bottom: -10px;
  color: red;
}

.mount table.mount_widget
{
  text-align: center;
}

.mount table.mount_widget td
{
  height: 2em;
}

.mount ul,
.mount ul li
{
  list-style-type: circle;
  margin: 0;
  margin-left: 10px;
  padding: 0;
}

.mount p
{
  margin: 0;
  padding: 0;
}

.mount p#patch
{
  margin: 30px 0;
}

.mount table, .mount table td
{
  margin: 0;
  padding: 3px;
  border: 1px solid #ccc;
}

.mount table
{
  width: 240px;
}

.mount #more_info
{
  font-size: 90%;
  clear: right;
}


/* USER PAGES */

/* Form table */

#user table.form, #user table.form th, #user table.form td
{
  margin: 0;
  padding: 2px 10px 2px 0;
  border: 0;
  vertical-align: top;
}

#user table.form th
{
  padding-top: 15px;
}

#user table.form td.security
{
  font-size: 75%;
  color: maroon;
}

#user table.form td.submit
{
  padding-top: 7px;
}

#user table.form input.text
{
  width: 250px;
}

#user h3
{
  margin-top: 15px;
}

/* Registration Page */


#user #login input.text
{
  width: 150px;
}

#user #registration
{
  margin-top: 30px;
}

#charRace, 
#charClass
{
  width: 10em;
}

/* Account Page */

#user table.characters, #user table.characters th, #user table.characters td
{
  margin: 10px 0;
  border: 1px solid #aaa;
}

#user #details
{
  margin-top: 15px;
}

#user #logout
{
  margin: 15px 0;

}

/* New Character Page */

#user #new_character
{
  margin: 15px 0;
}



/* COLLECTIONS */

/* Edit Collection */

#refresh
{
  float: right;
  margin: 15px 30px;
}

#share
{
  font-size: small;
  color: blue;
}
#share a { color: blue; }

#javascript
{
  display: block;
  margin: 20px 0;
  padding: 0 20px; 
  border: 1px solid blue;
}

.collection h3
{
  margin: 15px 0;
}

table.icon
{
  margin: 15px 0;
  text-align: center;
  vertical-align: top;
}

table.icon td
{
  vertical-align: top;
  padding: 0;
}

table.icon div.thumbnail
{
  position: relative;
  width: 110px;
  margin: 0;
  padding: 0 5px;
}

table.icon div.thumbnail img
{
  margin: 5px auto;
}

table.icon div.thumbnail img.retired
{
  position: absolute;
  top: -10px;
  left: 18px;
}

table.icon div.thumbnail p
{
  margin: 3px 0 0 0;
  padding: 0;
  line-height: 150%;
  font-size: 60%;
  height: 5em;
}



/* ABOUT */


#about h3
{
  margin: 20px 0 -10px 0;
}

#about #content ul, #about #content li
{
  list-style-type: circle;
  margin: 10px 0 0 15px;
}



/* ADMIN PAGES */

.admin table, .admin table th, .admin table td
{
  padding: 2px 5px;
  border: 1px solid #ccc;
}

.admin table
{
  width: 100%;
}



/* ADS */

#ads_header_468x60
{
  position: absolute;
  top: 15px;
  right: 0px;
  width: 468px;
  height: 60px;
  margin: 0;
  padding: 0;
}

#ads_side_120x600
{
  position: absolute;
  top: 125px;
  right: -140px;
  width: 120px;
  height: 600px;
  margin: 0;
  padding: 0;
}

#ads_side_160x600
{
  position: absolute;
  top: 125px;
  right: -180px;
  width: 160px;
  height: 600px;
  margin: 0;
  padding: 0;
}




/* CATACLYSM */

#cataclysm ul#remember,
#cataclysm ul#remember li
{
  list-style-type: circle;
  margin: 0;
  margin-left: 10px;
  padding: 0;
}

#cataclysm ul#remember
{
  margin-top: -10px;
  margin-bottom: 15px;
  margin-left: 30px;
}