/*html { background: #222222 url(/images/sam_brown/bg-tile.jpg) repeat; height: 100% }*/

body {
  font-family:  "Lucida Grande","Lucida Sans",Verdana,sans-serif;
  font-size:    62.5%;
  line-height:  1.125em;
  background:   #222222 url(/images/sam_brown/background.jpg) repeat-x fixed center top;
  color:        rgb(230, 230, 230);
}

/** Global Styles **/

h1 { color: rgb(229, 46, 46); }
h2 {
  font-size:      1.2em;
  letter-spacing: 1px;
  padding:        5px 3px;
  margin:         8px 0;
  color:          white;
  border-bottom:  1px dotted #555;
}
h3 {
  font-size:      1em;
  letter-spacing: 1px;
  padding:        5px 3px;
  margin:         8px 0;
  color:          white;
  border-bottom:  1px dotted #555;
}
h4 {
  font-size:      1em;
}

a       { color: rgb(229, 46, 46); text-decoration: none; }
a:hover { color: #D54E21; }
strong  { font-weight: bold; }

/** Notifications **/

.success, .notice {
  border:     1px solid rgb(170, 218, 255);
  background: rgb(229, 246, 255) none repeat scroll 0%;
  color:      rgb(7, 79, 136);
  padding:    3px;
}
.error {
  border:     1px solid rgb(255, 128, 128);
  background: rgb(255, 223, 223) none repeat scroll 0%;
  color:      rgb(229, 46, 46);
  padding:    5px;
  margin:     2px 0;
}
.error_message { color: rgb(229, 46, 46); }
.error_message p { font-size: 1.1em; padding: 3px 0; }

/** Forms **/

label { display: block; font-size: 1.1em; margin: 8px 0 2px 0; }
input:not(:radio) { display: block; }

input[type="text"],
input[type="password"],
textarea {
  font-family: "Trebuchet MS",Arial,Helvetica,sans-serif;
  background-color: rgba(172, 186, 139, 0.2);
  color:  white;
  font-size: 14px;
  border: 1px solid #666;
  padding: 5px;
  width: 240px;
}
input[type="submit"], a.submit {
  display: inline-block;
  margin-top: 20px;
  background-color: rgba(172, 186, 139, 0.1);
  border: none;
  color:  white;
  font-size: 12px;
  -moz-border-radius:     5px;
  -webkit-border-radius:  5px;
  padding: 6px 12px;
}
input[type="submit"]:hover, a.submit:hover { background-color: #D54E21; }

/*
  Table Styles  // #1E1712
*/

table { width: 100%; margin-top: 5px; }
table tr th { padding: 3px 4px; }
table tr:nth-child(2n) td { background-color: rgba(140, 140, 140, 0.1); }
table tr td:first-child {
  border-radius:      4px 0 0 4px;
  -moz-border-radius: 4px 0 0 4px;
  -webkit-border-top-left-radius:    4px;
  -webkit-border-bottom-left-radius: 4px;
}
table tr td:last-child {
  border-radius:      0 4px 4px 0;
  -moz-border-radius: 0 4px 4px 0;
  -webkit-border-top-right-radius:    4px;
  -webkit-border-bottom-right-radius: 4px;
}
table tr td { padding: 7px 4px; font-size: 1.2em; line-height: 1.2em; }

/* Tabs */

/** **/

#container {
  position:   relative;
  width:      1000px;
  margin:     0px auto;
}

/** Header **/

#container > header { position: absolute; top:-12px; left:25px; width: 160px; -webkit-transform: rotate(-3deg); -moz-transform: rotate(-3deg); }
#container > header h1 {
  background: url(/images/ds_logo.png) no-repeat center center;
  font-size: 4px;
  color: rgb(179, 9, 9);
  text-align: center;
  width: 152px;
  height: 54px;
}

/*
  Navigation
*/

#container > nav {
  background-color: rgba(0, 0, 0, 0.6);
  font-size: 10px;
  text-transform:uppercase;
  border-radius: 0 0 8px 8px;
  -moz-border-radius: 0 0 8px 8px;
  -webkit-border-bottom-left-radius:  8px;
  -webkit-border-bottom-right-radius: 8px;
  margin-bottom: 4px;
}
#container > nav ul  { margin-left:200px; }
#container > nav li  { display: inline-block; margin-right: 5px; }
#container > nav li > a {
  display: block;
  padding: 8px 8px;
  color: #BBBBBB;
  -moz-transition-property: width;
  -moz-transition-duration: 0.4s;
  -webkit-transition-duration: 0.4s, 0.4s;
  -webkit-transition-property: color, background;
}
#container > nav li > a:hover { color: #D54E21; }
#container > nav li.on-controller a { color: #D54E21; }


/*
  Content
*/

/** Home Page **/

#header-image {
  background-image: url('/images/header_image.jpg');
  height: 165px;
  -moz-box-shadow: inset 0px 0px 20px rgb(0,0,0);
  -webkit-box-shadow: inset 0px 0px 20px rgb(0,0,0);
  border-radius:          8px;
  -moz-border-radius:     8px;
  -webkit-border-radius:  8px;
}

#home section:nth-of-type(1) {
  display:      inline-block;
  width:        725px;
  margin-right: 20px;
  font-size:    1.2em;
  line-height:  1.3em;

}
#home section header { margin-bottom: 10px; }
#home section header h4 { font-size: 1.1em; }
#home section header span { font-style: italic; font-size: 0.9em; }
#home section article { border-top: 4px solid rgba(0,0,0,0.2); margin-bottom: 15px; padding: 5px; line-height: 1.4em; }
#home section article div a { display: block; margin: 5px 0; }

#home section:nth-of-type(2) { display: inline-block; width: 250px; margin-top: 10px; }

/** Topics **/

#breadcrumb { margin: 10px 0; }

#forum-topics table tr td p { font-size: 0.9em; }

/** Posts **/
.avatar       { display:inline-block; width: 100px; }
.avatar img   { display: block; border: 1px solid #444; padding: 1px; margin: 0 auto; }
.avatar span  {
  display: block;
  width: 100%;
  text-align: center;
  text-transform: capitalize;
  margin-top: 6px;
  font-family: 'Trebuchet MS',Arial,Helvetica,sans-serif;
  font-size: 1.3em;
  color: #677E86;
  text-shadow: 1px 1px #283434;
}

.post {
  width:          100%;
  min-height:     100px;
  margin-bottom:  15px;
  padding-top:    5px;
  -webkit-box-shadow: 3px 3px 5px rgba(0,0,0,0.3);
  -moz-box-shadow:    3px 3px 5px rgba(0,0,0,0.3);
  border-radius:      0 4px 4px 0;
  -moz-border-radius: 0 4px 4px 0;
  -webkit-border-top-right-radius:    4px;
  -webkit-border-bottom-right-radius: 4px;
}
.post:nth-child(2n){ background-color: rgba(130,130,130,0.1); }

.post h4      { color: #ddd; padding: 6px 0; }
.post h4 span { color: rgb(160,160,160); }
.post h4 a    { display: inline-block; padding: 0 3px; }
.post .body {
  display: inline-block;
  width: 880px;
  vertical-align: top;
}
.post .post-text { font-size: 1.2em; line-height: 1.4em; padding: 8px 0; }
.post .post-text img { }
.post p { margin: 10px 0; }
.post p.signature { border-top: 1px solid rgb(60,60,60); padding:10px 0; }

#quick-reply { width: 600px; height: 200px; }

/* Editor */

.editor { margin-top: 5px; border: 1px solid rgba(20, 20, 20, 0.6); }
.editor-toolbar {
  padding: 4px 0;
  background: -moz-linear-gradient(top, rgba(10, 10, 10, 0.1), rgba(20,20,20,0.5));
  background: -webkit-gradient(linear, left top, left bottom, from(rgba(10, 10, 10, 0.1)), to(rgba(20,20,20,0.5)));
}
.editor-toolbar li { display: inline; margin-left: 4px; }
.editor-toolbar li a {
  display: inline-block;
  text-indent: -9999px;
  width: 16px;
  height: 16px;
  -moz-border-radius: 2px;
  -webkit-border-radius: 2px;
  padding: 4px;
}

.toolbar-button-bold          { background: url(/images/editor/text_bold.png) center center no-repeat; }
.toolbar-button-italic        { background: url(/images/editor/text_italic.png) center center no-repeat; }
.toolbar-button-createlink    { background: url(/images/editor/link.png) center center no-repeat; }
.toolbar-button-unorderedlist { background: url(/images/editor/text_list_bullets.png) center center no-repeat; }
.toolbar-button-justifyleft   { background: url(/images/editor/text_align_left.png) center center no-repeat; }
.toolbar-button-justifycenter { background: url(/images/editor/text_align_center.png) center center no-repeat; }
.toolbar-button-justifyright  { background: url(/images/editor/text_align_right.png) center center no-repeat; }
.toolbar-button-insertimage   { background: url(/images/editor/picture.png) center center no-repeat; }

.editor-content { min-height: 40px; padding: 4px; overflow: auto; margin: 0px 0 14px 0; font-size: 1.2em; }
.post-text > ul, .editor-content > ul { list-style-type: disc; padding: 5px 0 0 20px; }

.quote-text { border-left: 2px solid #677E86; font-style: italic; padding-left: 5px; margin: 4px 4px 8px 4px; }

/** Screenshots **/

#screenshots { margin-top: 30px; }
#screenshots-list li { display:inline-block; }

/** Users pages **/

#login { margin: 0 auto; width: 300px; }
#login form fieldset a { display: block; margin-top: 5px; }
#login form fieldset input[type="submit"] { display: block; }

#register { margin: 0 auto; width: 600px; }
#register section:nth-of-type(1) { display: inline-block; width: 300px; }
#register section:nth-of-type(2) { display: inline-block; width: 290px; }
#register section:nth-of-type(2) p { font-size: 1.2em; line-height: 1.4em; margin-top: 17px;}
#register form fieldset input[type="submit"] { display: block; }

#tabs     { display: inline-block; width: 100px; }
.tabs     { margin-top: 12px; }
.tabs li  { margin: 4px 0; }
.tabs a   {
  display: block;
  background-color:       rgba(0, 0, 0, 0.2);
  padding:                10px 10px;
  -moz-border-radius:     5px 0 0 5px;
  -webkit-border-top-left-radius:     5px;
  -webkit-border-bottom-left-radius:  5px;
}
.tabs a.current {
  background-color: rgba(172, 186, 139, 0.1);
  color: white;
  text-shadow: 2px 2px #000000;
  -webkit-box-shadow: -3px 2px 6px #111;
  -moz-box-shadow:    -3px 2px 6px #111;
}

#content { display: inline-block; vertical-align: top; margin-left: 10px; width: 830px; }
#content div:not(:first-child) { display: none; }

#details textarea { height: 50px; }
#details input[type="submit"] { display: block; }

#characters p { margin: 8px 0; }

.deathknight  { color: rgb(196, 30, 59); }
.druid        { color: rgb(255, 124, 10); }
.hunter       { color: rgb(170, 211, 114); }
.mage         { color: rgb(104, 204, 239); }
.paladin      { color: rgb(244, 140, 186); }
.priest       { color: white; }
.rogue        { color: rgb(255, 244, 104); }
.shaman       { color: rgb(35, 89, 255); }
.warlock      { color: rgb(147, 130, 201); }
.warrior      { color: rgb(198, 155, 109); }

#avatar-list { margin-top: 10px; }
#avatar-list li { display: inline-block; padding: 10px 10px; -webkit-border-radius: 5px; }
#avatar-list li.selected { background-color: rgba(213, 78, 33, 0.6); }
#avatar-list img { display: block; width: 65px; }

/** Characters **/

#characters ul { padding: 3px 5px; }
#characters ul li { margin: 3px 0; }

/*
  Footer
*/

footer {
  background-color: rgba(0, 0, 0, 0.3);
  padding: 8px 0;
  margin: 20px 0;
  border-radius:          7px;
  -moz-border-radius:     7px;
  -webkit-border-radius:  7px;
  border-radius:          7px;
}
footer p { margin-left: 10px;}