body  {
  background-image: url(/images/site/background-damask.jpg);
  background-color: #4c2132;
  color: #dfdfdd;
  font-family: "Lucida Grande", "Bitstream Vera Sans", Helvetica, Verdana, Arial, sans-serif;
  /*font-family:  Tahoma, sans-serif;*/
  font-size: 12px;}

h1  {
  background-color: #DE9853 /*#5a6965*/;
  border-bottom: 2px dotted #283339; 
  color: #9BBBD2; 
  font-family: Trebuchet, sans-serif;
  font-size: 1.7em;
  font-weight: bold;
  margin: 0; 
  padding: 4px 30px 5px 30px;
 text-shadow: 0 0 0 #000;
} 

h2  {
/*   background-color: #557485;  */
  border-bottom: 2px dotted #dfdfdd; 
/*   color: #dfdfdd;  */
/*   color: #283339; */
  font-size: 1.3em; 
  font-weight: bold;
  margin: 0 20px 0 30px; 
  padding: 17px 30px 0 10px;
  text-shadow: 0 0 0 #000;
}

h3  {
  background-color: #557485;  
  color: #283339; 
  font-size: 1em;
  font-weight: bold; 
  margin: 0;
  padding: 17px 30px 0 30px;
  text-align: center;
  text-shadow: 0 0 0 #000;
}



p    {
  /*font-size: 1em;*/ 
  line-height: 160%; 
  text-shadow: 0 0 0 #000;}

p a  {
  color: #dfdfdd; 
  text-decoration: underline; 
  text-shadow: 0 0 0 #000; }

img {border: 0;}

big {font-size: 160%; font-weight: bold;}

pre {margin: 0; padding: 0;}

.center       {text-align: center;}
.right        {text-align: right;}
.clear        {clear: both;}
.clearleft    {clear: left;}
.clearright   {clear: right;}
.inline       {display: inline;}
.left_inline  {display: inline; float: left;}
.right_inline {display: inline; float: right;}
.hidden       {visibility: hidden;}
.smaller      {font-size: 90%;}

/*#smalldivision li.nomar {margin: 0;}*/

hr.translateme {color: #ccffff; height: 4px;}
 


#containcontent {
  margin-right:auto;
  margin-left:auto;
  margin-top:10px;
  padding:0px;
  text-align:left;
  width: 760px;
}




/* --- ----------------------------------------- --- */
/* --- ----- BANNER -------------------------------- */
/* --- ----------------------------------------- --- */
#banner {
  background-image: url(/images/site/banner.jpg); 
  background-color: #dfdfdd; 
  background-repeat: no-repeat; 
  height: 200px;
 }




/* --- ----------------------------------------- --- */
/* --- TEXT MENU --- */
/* --- ----------------------------------------- --- */
#textmenu     {margin: 0;  text-align: right; padding: 0 14px 0 0; margin: 0;}
#textmenu ul  {display: inline; list-style-type: none;  } 
#textmenu li  {display: inline; } 

    #textmenu a:Link    {color: #ffffff; font-size: 12px; padding: 5px 3px 0 3px; text-decoration: none;}
    #textmenu a:Visited {color: #ffffff; font-size: 12px; padding: 5px 3px 0 3px; text-decoration: none;}
    #textmenu a:Hover   {color: #ffffff; font-size: 12px; padding: 5px 3px 0 3px; text-decoration: none;}
    #textmenu a:Active  {color: #ffffff; font-size: 12px; padding: 5px 3px 0 3px; text-decoration: none;}





/* --- ----------------------------------------- --- */
/* --- VERTICAL NAVIGATION --- */
/* --- ----------------------------------------- --- */
#vnav     {margin: 0; padding: 0;}

.nav        {font-size: 12px; padding: 9px 0 0 0 ; }
ul.nav      {float: right; text-align: right; margin: 0}
.nav li     {background-color: #994466; border-bottom: 1px solid #dcdcdc; list-style-type: none; }
#vnav li a  {display: block; color: #dfdfdd; padding: 4px 14px; text-decoration: none; }

#vnav li a:link     {background-color: #994466; text-decoration: none;}
#vnav li a:visited  {background-color: #994466; text-decoration: none;}
#vnav li a:hover    {background-color: #77354F; text-decoration: none;}
#vnav li a:active   {background-color: #994466; text-decoration: none;}




/* --- ----------------------------------------- --- */
/* --- MAIN CONTENT --- */
/* --- ----------------------------------------- --- */

#content {
  background-color: #000000;  
  margin: 0; 
  padding: 0; 
  width: 100%;
}

#content p {
  margin: 0; padding: 10px 30px 20px 30px;}

/*#content .dropcap {background-color: #d79b53; border: 1px solid #000000; float:left; font-size: 38px; font-weight: bold;
                   margin: 1px 3px; padding: 0 5px 2px 5px;}*/

#content pre {
  color: #ffffff; 
padding: 4px 10px;
  }

#content ul {
  margin: 0; 
  padding: 0px 30px 0px 30px;
}

#content li {
  color: #dcdcdc; 
  margin: 0px 40px; 
}



/* --- ----------------------------------------- --- */
/* --- LOGIN / LANGSWITCHER BAR ------ */
/* --- ----------------------------------------- --- */

div#langswitcher {
  background-image: url(/images/site/background-login.jpg);
/*   height: 30px; */
  margin: 0;
  padding: 0;
  padding-right: 30px;
  text-align: right;}

#langswitcher p {
  background-color: transparent;
  color: #000000;
  padding: 4px 14px 4px 0;
  }

#langswitcher img {padding: 4px 2px 2px 2px;}


/* --- ----------------------------------------- --- */
/* --- SUB DIVISION --- */
/* --- ----------------------------------------- --- */


#left-content {
  float: left; 
  margin: 0 0 17px 0px; 
  width: 500px; 
}

#subdivision {
/*   background-color: #557485; */
/*   background-color: #4079A6; */
  background-color: #3A6E96;
}

#subdivision h1  {
  background-image: url(/images/site/subdivision-upper-right.gif); 
  background-position: right top; 
  background-repeat: no-repeat; 
  background-color: #C99F55 /*#669943*/;
/*   background-color: #434E4B;  */
  color: #000000;
/*   color: #9BBBD2;  */
  margin: 13px 0 0 0; 
  padding: 8px 0 5px 20px;
}


#subdivision blockquote  {
  background-image: url(/images/site/background-login.jpg);
  margin: 0;
  padding: 1em; 
}

#subdivision blockquote p {
/*   background: transparent; */
  color: #000000; 
  font-size: 140%; 
  font-weight: bold;
  font-style: italic; 
  line-height: 140%;
  padding: 10px;}

#subdivision img {
/*   border: 4px solid #557485; */
  float: left;
  margin:  .05em 1em;
}

#subdivision  ul, #subdivision ol {  
  clear: both; 
  margin: 0; 
  padding: 10px 0 20px 0px;
}

#subdivision  li {
  border-bottom: 0px dotted #ffffff; 
  color: #dcdcdc;  
  margin: 0 20px 3px 60px; 
  padding: 5px 3px;
}


#subdivision div.code {
  background-color: #000000; 
  border: 1px solid #dcdcdc;
  margin: 0; 
  padding: 0;
}
ul#nestedlist {padding: 0; list-style-type: disc;}
#nestedlist li {margin: 1em 0 1em 1em; padding: 0;}




/* --- ----------------------------------------- --- */
/* --- SMALL DIVISION --- */
/* --- ----------------------------------------- --- */
#smalldivision {
/*    background-image: url(/images/site/background-login.jpg);   */
  float: right;  
/*   color: #dfdfdd;  */
  margin: 20px 12px 20px 0; 
  *margin-right: 6px;
  width: 234px;}


#smalldivision .box {
/*   background-image: url(/images/site/background-sponge.jpg);  */
/*   background-repeat: no-repeat; */
/*   border-top: 7px solid #669943;  */
  margin-bottom: 3em;

}

#smalldivision h1 {
  background-color: #9DA9AD;
  color: #000000;  
  font-size: 16px; 
  margin: 0; 
  padding: 3px 15px 3px 5px; 
  text-align: right;}

#smalldivision h2 {
  background-color:   /*#6B2D51*/ /*#669943*/ /*#806536*/; 
/*   color: #d0ced3;   */
  font-size: 100%;
  margin: 0; 
  padding: 1em .5em .3em .5em;} 

#smalldivision p    {
  background-color: #57777F /*#587B79*/ /*#557485*/ ;
  font-size: 90%;  
  margin: 0; 
  padding: 10px 15px; 
  text-align: left;
}

/* --- smalldivision Lists --- */

#smalldivision ul   {
  background-color: transparent; 
  list-style-type: none; 
  margin: 0 0 30px 0; 
  padding: 0;
}

#smalldivision li        {
  background-color: #7d8285; /*#e0e8e5;*/ /*#E2E0E6*/
  border-right: 2px solid #ffffff;
/*   background-color: #434e4b; */
/*   background-color: #224444;  */
/*   border-bottom: 1px solid #224444; */
  color: #000000; 
  display: block; 
  font-size: 85%;  
  margin: 0 0 2px 0; 
  padding: 4px 10px; 
  text-align: right;
}
#smalldivision li a      {
  color: #ffffff;
  padding: 4px 10px; 
  text-decoration: none;}

#smalldivision li a:hover {color: #000000;}

#smalldivision li:hover  {
  background-image: none;
  background-color: #d0ced3;
/*   background-color: #557485;  */
/*   border-bottom: 1px solid #000000;  */
  color: #000000; 
  padding: 4px 10px;  
}

#smalldivision li p {
  background-color: transparent; 
  margin: 0; 
  padding: 0; 
  text-align: right;
}



#smalldivision img  { float: right; padding: 1em 0;}




/* ------------------------------------------------ */
/* --- SMALL DIVISION DIVS WITH IMAGE HEADLINES --- */

#colophon,            #colortrends-2007,     #colortrends-2008,     #color-n-type-links,   #current-projects,
#prominent-examples,  #rails-links,          #tell-me-more      {
  background-position: top right;
  background-repeat: no-repeat;
  margin-bottom: 1em;
  padding-top: 25px;
  text-align: center;
  width: 100%;
}

#colophon            {background-image: url(/images/site/headline-colophon.png);}
#colortrends-2007         {background-image: url(/images/site/headline-color-trends.png);   height: 145px;}
#colortrends-2008         {background-image: url(/images/site/headline-color-trends-2008.png);   height: 145px;}
#color-n-type-links  {background-image: url(/images/site/headline-color-n-type-links.png);}
#current-projects    {background-image: url(/images/site/headline-current-projects.png);}

#prominent-examples  {background-image: url(/images/site/headline-prominent-examples.png);}
#rails-links         {background-image: url(/images/site/headline-rails-links.png);}

#tell-me-more        {background-image: url(/images/site/headline-tell-me-more.png);}
#tell-me-more big  {font-size: 120%;}

/* --- HIDE h2 for Accessibility --- */
#colophon h2, #colortrends-2007 h2, #colortrends-2008 h2,  #color-n-type-links h2,   #current-projects h2, 
#prominent-examples h2,   #rails-links h2,          #tell-me-more h2
 {
  display: none;
}
/* --------------------------------- */

#colortrends-2007 div.swatch, #colortrends-2008 div.swatch {  
  border: .2em solid #ffffff; 
  color: #000000;
  float: right;  
  font-size: 90%;
  height: 25px; 
  margin: 1%;
  padding: 4px;
  width: 24%;  }

/* -------------------------------------- */





/* --- SINGLE COLUMN LAYOUT --- */

#onecol {background-color: #3A6E96;
  margin-top: 8px;}

#onecol h1 {color: #000000; font-size: 200%;}

#onecol ul {
  margin: 1em 0;
  padding: 1em 0;}




/* --- FORM FIELDS --- */

fieldset {
  border-bottom: 0;
  border-left: 0;
  border-right: 0;
  margin: 1em 1.5em;
  padding: 1em 1.2em;}
legend   {font-size: 160%; padding: 0 7px;}
label    {float: left; width: 60px; }
fieldset div     {margin: .1em 0; padding: 0;}
input, textarea  {border: 1px solid #4d2b43; margin-left: 60px;}
div.button       {margin-left: 60px;} 







/* --- FOOTER ---  */

div#footer {
  clear: both;
  color: #dcdcdc; 
  font-size: 10px;
  padding: 0 0 20px  0;
  text-align: center; 
  text-shadow: 0 0 0 #000;
}

div#footer a {color: #ffffff;}



/* --- AFTERTHOUGHTS --- */

span.versioninfo {display: block; font-size: 90%; font-style: italic; margin-bottom: 17px;}