body {
  background: #141414;
  color: #AAA;
  font: 90%/1.4 Helvetica, Verdana, Arial, sans-serif;
  min-width: 1000px;
}

body, h1, h2, h3, h4, h5, h6, ul, ol, p, img {
    margin: 0;
    padding: 0;
    border: 0;
}

a { 
    color: #E02D35;
    text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

/* -- Forms ----------------------------------------------------------------- */
/*
label {
    display: block;
    text-transform: lowercase;
    margin-bottom: 3px;
    color: #ddd;
}

label span {
    color: #aaa;
    font-size: 80%;
}

input,
textarea {
  font: 90%/1.4 'Trebuchet MS', Verdana, Helvetica, Arial, sans-serif;
  letter-spacing: 1px; 
  padding: 4px;
}

.text_field input,
.text_field textarea,
.file_field .fakefile input {
    border: 1px solid #eee;
    background-color: #000;        
    font-size: 110%;
    margin-bottom: 8px;
    color: #FFF;
}

.check_field {
    margin-bottom: 8px;
}

.terms_of_use {
    overflow: scroll;
    width: 90%;
    height: 200px;
    border: 1px solid #ccc;
    padding: 6px 12px;
    margin: 20px 0 10px;
}

.terms_of_use h2 {
    margin-top: 0px !important;    
}

form textarea {
    width: 90% !important;
}

* html form textarea {
    width: 500px !important;
}


.errors {
    padding: 10px;
    border: 1px solid #ddd;
    width: 70%;
    margin-bottom: 2em;
}
.errors p {
    color: #FFF;
}
.errors ul {
    list-style: square;
}

.fieldWithErrors input,
.fieldWithErrors textarea {
    border: 2px solid #771116;    
}


.buttons input {
    display: block;
    float: left;
    height: 38px !important;
    text-indent: -10000px; 
    overflow: hidden;
    border: 0;
    cursor: pointer;
}

.buttons .login {
    width: 127px;
    background: #141414 url(../images/button_login.png) no-repeat left;    
}

.buttons .signup {
    width: 105px;
    background: #141414 url(../images/button_signup.png) no-repeat left;    
}

.buttons .change_url {
    width: 127px;
    background: #141414 url(../images/button_url.png) no-repeat left;    
}

.buttons .password {
    width: 170px;
    background: #141414 url(../images/button_password.png) no-repeat left;    
}

.buttons .submit {
    width: 181px;
    background: #141414 url(../images/button_submit.png) no-repeat left;    
}

.buttons .forgot {
    width: 181px;
    background: #141414 url(../images/button_forgot.png) no-repeat left;    
}

.buttons .cancel {
    display: block;
    float: left;
    height: 38px;
    width: 90px;
    background: #141414 url(../images/button_cancel.png) no-repeat left;
    margin-left: 10px;
    
}

.buttons .cancel span {
    display: none;
}
*/

/* From Quirksmode http://www.quirksmode.org/dom/inputfile.html */
/*
input:focus {
	background-color: transparent;
}

div.fileinputs {
	position: relative;
	height: 30px;
	width: 300px;
}

input.file {
	width: 300px;
	margin: 0;
}

input.file.hidden {
	position: relative;
	text-align: right;
	margin-top: 5px;
	-moz-opacity:0 ;
	filter:alpha(opacity: 0);
	opacity: 0;
	z-index: 2;
}

div.fakefile {
	position: absolute;
	top: 0px;
	left: 0px;
	width: 350px;
	padding: 0;
	margin: 0;
	z-index: 1;
	line-height: 90%;
}

div.fakefile input {
    border: 1px solid #eee;
    background-color: #000;        
    font-size: 110%;
    margin-bottom: 8px;
    color: #FFF;
	margin-right: 4px;
	width: 210px;
}
*/
/* -- Header ---------------------------------------------------------------- */

#header {
    height: 111px;
    background: #141414 url(../images/header_bg.png) left no-repeat;
    color: #FFF;
    border-bottom: 3px solid #FFF;
}


#header h1 a {
    display: block;
    height: 66px;
    width: 350px;
    position: absolute;
    top: 10px;
    left: 24px;
}

#header cite,
#header a span,
#sponsor span  {
    display: none;
}

#sponsor {
    position: absolute;
    top: 10px;
    right: 30px;
    text-align: right;
    font-size: 85%;
}

#sponsor a {
    display: block;
    width: 168px;
    height: 25px;    
    position: absolute;
    top: 0px;
    right: 5px;
    background: url(../images/mc2_bg.png) left no-repeat;
}


#know_more,
#register {
    display: block;
    height: 34px;
    position: absolute;
    top: 94px;
}

#register {
    width: 141px;
    left: 378px;
    background: transparent url(../images/register_know_more_buttons.gif) no-repeat -169px -34px;
}
#register:hover {
    background: transparent url(../images/register_know_more_buttons.gif) no-repeat -169px 0px;
}

#know_more {
    width: 169px;
    left: 209px;
    background: transparent url(../images/register_know_more_buttons.gif) no-repeat 0px -34px;
}

#know_more:hover {
   background: transparent url(../images/register_know_more_buttons.gif) no-repeat 0px 0px;
}

.logged_user #know_more {
    width: 174px;
    background: transparent url(../images/know_more_buttons.gif) no-repeat 0px -34px;
}

.logged_user #know_more:hover {
   background: transparent url(../images/know_more_buttons.gif) no-repeat 0px 0px;
}


#user_options {
    position: absolute;
    top: 22px;
    right: 30px; 
    margin: 0;
    padding: 0;           
}

#user_options form {
    margin: 0 !important;
    p
}

#user_options .buttons {
    margin-top: 0px !important;
    padding-top: 0px !important;
    margin-left: 60px;
}

#user_options .buttons input {
    margin-left: 50px;    
}

#user_options .text_fields input {
    margin-bottom: 0 !important;
}

.forgot_link {
    display: block;
    padding-top: 10px;    
}

#user_options p {
    padding: 0 20px !important;
    text-align: right !important;  
}

#user_options p.last {
    padding-bottom: 26px !important;
}

.user_info {
    top: 50px !important;
}

.user_info .action,
.user_info a {
    text-transform: lowercase;
}

#user_options.login_form form {
   font-size: 90%;
}

#user_options.login_form label {
    float: left;
    text-align: right;
    width: 7.5em;
    padding-right: 1em;
}

#user_options.login_form .text_field input {
    font-size: 90%;
}

#user_options.login_form .buttons a {    
    padding-right: 20px;
}

/* -- Flash ----------------------------------------------------------------- */
#flash {
    width: 80%;
    color: #FFF;
    margin: 0px auto 20px;
    background-color: #1e1e1e;
    padding: 20px;
    border: 2px solid #FFF;
    z-index: 1;
}

.ontop {
    position: absolute;
    top: 80px;
    left: 10%;
}


/* -- Footer ---------------------------------------------------------------- */


#footer {    
    border-top: 3px solid #ccc;
    background: #1e1e1e url(../images/footer_bg.png) repeat-x top;
    padding: 8px 30px 0 30px;
}

#mendeleiev_links_left {
    width: 50%;
    float: left;
    padding-bottom: 20px;
    list-style: none;
}


#mendeleiev_links_right {    
    float: left;
    width: 35.5%;
    padding-bottom: 20px;
}

.mendeleiev_links h2 {
    display: block;
    height: 18px;
    width: 171px;
    background: #1e1e1e url(../images/h2_about.png) no-repeat left;
    margin-top: 4px;
    margin-bottom: 6px;
    margin-left: 15px;
}

.mendeleiev_links h2 span {
    display: none;
}

.mendeleiev_links p {
    padding-left: 15px;
}

.mendeleiev_links h3 {
    color: #fff;
    font-weight: normal;
    margin-top: 0.5em;
    padding-left: 15px;    
}
.mendeleiev_links h3 span {
    font-size: 80%;
}

#copyright {
    clear: both;
    background: #141414;
    margin: 0px -30px;
    border-top: 3px solid #aaa;
    padding: 5px 30px 20px 10px;
    text-align: right;
    font-size: 90%;
}

/* -- Content --------------------------------------------------------------- */

h1, h2, h3 {
    font-family : 'Trebuchet MS', Verdana, Arial, sans-serif !important;
}

#content {
    padding: 0px 30px 3em;
       
}

#table_link {
    height: 40px;
    background: #141414 url(../images/table_icon_bg.png) no-repeat left top;    
    padding: 4px 10px 20px;
}

#table_link a {
    display: block;
    background: #333 url(../images/table_icon.png) no-repeat 0px -40px;
    width: 150px;
    height: 40px;    
}

#table_link a:hover {
    background: #333 url(../images/table_icon.png) no-repeat 0px 0px; 
}

#table_link span {
    display: none;
}


.box {
    position: absolute;
    width: 400px; 
    right: 30px;
    top: 15em;
    color: #FFF;
    padding: 20px 0px;
    margin: 0 !important;
    font-size: 90%;
}

html>body .box {
    top: 14em;
}

.box_top {
    top: 25px !important;
}

.box h2 span {
    display: none;
}

.box h2 {
    display: block;
    height: 28px !important;
    background: transparent url(../images/box_top.gif) no-repeat top left;
    margin-bottom: 0  !important;
    width: 400px !important;
}

.box p,
.box div {
   background: transparent url(../images/box_medium.png) repeat-y left;
   padding: 0px 20px 10px 20px;
   text-align: justify;
   margin: 0 !important;
}

.box .last {
    background: transparent url(../images/info_box_bottom.png) no-repeat bottom left;
    padding-bottom: 20px;
}


#content h2 {
    height: 18px;
    width: 600px;
    margin: 30px 0px 10px;
}

#content h2 span {
    display: none;
}

#content p {
    text-align: justify;
    margin-bottom: 1em;
}

#content ul {
    margin-left: 18px;  
    list-style: square;  
}

#content ul li {
    margin-bottom: 0.5em;
    text-align: justify;
}

.brv {
    margin: 0 8em 0 4em;
}

#about_1 { background: transparent url(../images/h2_about_1.png) no-repeat bottom left; }
#about_2 { background: transparent url(../images/h2_about_2.png) no-repeat bottom left; }
#about_3 { background: transparent url(../images/h2_about_3.png) no-repeat bottom left; }
#about_4 { background: transparent url(../images/h2_about_4.png) no-repeat bottom left; }
#about_5 { background: transparent url(../images/h2_about_5.png) no-repeat bottom left; }
#about_6 { background: transparent url(../images/h2_about_6.png) no-repeat bottom left; }

#what_1 { background: transparent url(../images/h2_what_1.png) no-repeat bottom left; }
#what_2 { background: transparent url(../images/h2_what_2.png) no-repeat bottom left; }
#what_3 { background: transparent url(../images/h2_what_3.png) no-repeat bottom left; }
#what_4 { background: transparent url(../images/h2_what_4.png) no-repeat bottom left; }
#what_5 { background: transparent url(../images/h2_what_5.png) no-repeat bottom left; }
#what_6 { background: transparent url(../images/h2_what_6.png) no-repeat bottom left; }
#what_7 { background: transparent url(../images/h2_what_7.png) no-repeat bottom left; }


#what_1_image {
    text-align: center;
}

#what_1_image a img {
    border: 1px solid #777;
}

#what_1_image a:hover img {
   border: 1px solid #fff;
}

h2#login {
    background: transparent url(../images/h2_login.png) no-repeat left bottom; 
    margin-bottom: 20px;
}

h2#signup {
   background: transparent url(../images/h2_signup.png) no-repeat left bottom; 
   margin-bottom: 20px;
}

h2#forgot_password {
  background: transparent url(../images/h2_forgot.png) no-repeat left bottom; 
  margin-bottom: 20px;
}

h2#change_password {
  background: transparent url(../images/h2_change_password.png) no-repeat left bottom; 
  margin-bottom: 20px;
}

h2#change_url {
  background: transparent url(../images/h2_change_url.png) no-repeat left bottom; 
  margin-bottom: 20px;
}


h2#legal {  background: transparent url(../images/h2_legal.png) no-repeat left bottom; }
h2#info_copyright {  background: transparent url(../images/h2_copyright.png) no-repeat left bottom; }
h2#terms {  background: transparent url(../images/h2_terms.png) no-repeat left bottom; }

.info_text h3 {
    font-size: 105%;
}

h2#map { background: transparent url(../images/h2_map.png) no-repeat left bottom; }

h2#not_found { background: transparent url(../images/h2_not_found.png) no-repeat left bottom; }
h2#error { background: transparent url(../images/h2_error.png) no-repeat left bottom; }

#map_elements {
    list-style: none !important;    
    margin-bottom: 20px;
}

#map_elements li {
    display: block ! important;
    float: left;
    margin-right: 20px;
    width: 10em;
    white-space: nowrap;
}
#map_elements span {
    font-size: 80%;
}

/* -- Periodic table -------------------------------------------------------- */


#table {
    margin-top: 4.5em !important;
    width: 100% !important;
    background: transparent url(../images/h2_table.png) no-repeat bottom;    
}


.periodic_table {
    border-collapse: collapse;  
    table-layout: fixed;
    margin: 0 auto;
}

.hint {
    text-align: center !important;
    font-size: 90%;    
}

.hint em {
    font-style: normal;
    color:  #ba1b22;
}

.periodic_table caption {
    display: none;
}

.periodic_table td {
  text-align: center;
  font-size: 9px;
  padding-top: 1px;
  padding-bottom: 4px;
  width: 50px;
  color: #ddd;
}

* html .periodic_table td {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

.periodic_table a  {
    width: 32px;
    height: 32px;
    display: block;
    margin: 0 auto;
}

.periodic_table a img {
   border: 3px solid #000;
}

html>body .periodic_table a img {
   border: 3px solid transparent;
}

.periodic_table a:hover img {
    border: 3px solid #771116;
}


.periodic_table .symbol {
    font-weight: bold;
    color: #FFF;
}

.periodic_table .voted {
    color:  #ba1b22 !important
}

.periodic_table .no_element {
    border: 0px;
}

#periodic_table {
   background: #141414 url(../images/table_1_bg.png) no-repeat top center;
   padding-top: 10px;
   padding-bottom: 20px;
   margin-bottom: 30px;
}

#periodic_table_extension {
    background: #141414 url(../images/table_2_bg.png) no-repeat top center;
    padding-bottom: 40px;
    padding-top: 10px;
}

/* -- Element  -------------------------------------------------------------- */


.no_elements {
    font-size: 120%;
    padding: 40px;
}

h2.element_name {
    display: none;
}

h2#send_character {     
    height: 35px;
    margin-left: 80px;
    background: transparent url(../images/h2_send_character.png) no-repeat bottom left;
}

html>body h2#send_character {     
    height: 45px;
    *height: 35px;
    *margin-bottom: 50px;
}

.element_info {
    float: left;
    margin: 20px 0px 20px;
    color: #FFF;
    background: #141414 url(../images/element_bg.png) no-repeat top left;
    width: 70px;
}

html>body .element_info {
    margin-top: 0px;
    *margin-top: 20px;
}

.element_info span {
    display: block;
}

.element_info .atomic_number {
    text-align: right;    
    width: 52px;
    padding-top: 2px;
    padding-right: 6px;
    font-size: 90%;
}
.element_info .symbol {
    font-size: 150%;
    line-height: 90% !important;  
    padding-bottom: 18px;
    text-align: center;   
    width: 58px;
    font-weight: bold;
}

.content_with_help {
    margin-right: 440px;
}

.want_to_submit {
    padding-top: 20px;
    margin: 40px 0px;
}

.want_to_submit a {
    margin-left: auto;
    width: 228px;
    height: 34px;
    display: block;
    background: #1e1e1e url(../images/button_want_to_submit.png) no-repeat 0px -34px;
}

.want_to_submit a:hover {
    background: #1e1e1e url(../images/button_want_to_submit.png) no-repeat 0px 0px;
}

.want_to_submit a span {
    display: none;
}


.character { 
    clear: both;
    margin-bottom: 40px;
    padding: 10px;
    padding-left: 0px;
    background: #141414 url(../images/character_bg.jpg) no-repeat top right;
}

.most_voted {
  background: #141414 url(../images/most_voted_bg.png) no-repeat top right;
}

.visual_info {
    float: right;
    margin-left: 15px;
    width: 100px;
}

.most_voted  .visual_info {
    width: 152px;
}

.character .votes {
    background: transparent url(../images/votes_bg.gif) no-repeat top left;
    display: block;
    width: 57px;
    height: 40px;
    text-align: center;        
    font-size: 90%;
    padding-top: 2px;
    margin: 0 0 0 auto;
}

.most_voted .votes {
    color: #FFF !important;
    background: transparent url(../images/most_voted_votes_bg.gif) no-repeat top left;
}

.character .votes span {
    display: block;
}

.character img {
    display: block;
    border: 1px solid #8c8c8c;
    background: #1e1e1e;
    padding: 3px;
    margin: 10px auto 0 auto;
}

.character h3 {
    color: #FFF;
    font-weight: normal;
    font-size: 120%;
    padding-left: 10px;
}

.character .authored {
    color: #b3b3b3;
    font-size: 90%;
    margin-bottom: 6px;
    padding-left: 10px;
}

.character .full_description {
    padding-left: 10px;
}

.vote_status {
    clear: both;
    background: #141414 url(../images/vote_status_bg.png) no-repeat left -88px;
}

.vote_status a,
.vote_status p {
    height: 24px;
    display: block;
    margin: 0 !important;
    padding: 0 !important;
    margin-left: 20px !important;          
}

.vote_status p span,
.vote_status a span {
    display: none;
}

.vote {    
    width: 78px;
    background: #141414 url(../images/button_vote.png) no-repeat 0px -24px;
}

.vote:hover {    
    background: #141414 url(../images/button_vote.png) no-repeat 0px 0px;
}


.change_vote {    
    width: 176px;
    background: #141414 url(../images/button_vote_change.png) no-repeat 0px -24px;
}

.change_vote:hover {    
    background: #141414 url(../images/button_vote_change.png) no-repeat 0px 0px;
}

.vote_status p {
    width: 276px;
    background: #141414 url(../images/button_your_vote.png) no-repeat 0px 0px;
}


/* -- Tips and Tricks (http://www.positioniseverything.net/easyclearing.html) */

.clearfix:after {
    content: "."; 
    display: block; 
    height: 0; 
    clear: both; 
    visibility: hidden;
}

.clearfix {display: inline-table;}

/* Hides from IE-mac \*/
* html .clearfix {height: 1%;}
.clearfix {display: block;}
/* End hide from IE-mac */