@import "graph.css";

/**
 * @notes some color reference
 * pink       #d62652
 * orange     #de6e13
 * yellow     #f4e4A0
 * brown      #6f3c27
 */
/**
* Primary Layout
*/

body {
  background: #de6e13;
  width: 975px;
  margin: auto;
  margin-top: 10px;
}

#page_wrapper {
  position: relative;
  float: left;
  display: block;
  width: 975px;
  height: 570px;
  margin-left: auto;
  margin-right: auto;
  background: #ffffff;
}

#page_wrapper.fluid_height{
  height: auto;
}

#header {
  position: relative;
  height: auto;
}

#header #logo span{
  display: none;
}

#header #logo{
  display: block;
  
  height: 170px;
  width: 290px;
  
  position: relative;
  top: 10px;
  left: 10px;
  background-image: url("../images/logo.png");
  
  margin-right: 5px;
}

#header a img{
  border: none;
}

#utilities {
  position: absolute;
  right: 10px;
  top: 10px;

  height: 170px;
  width: 655px;

}

#tag_cloud{

  height: 130px;
  position: relative;

  overflow: hidden;

  background: #de6e13;

  text-align: center;
}

#tag_cloud ul {
  margin: 0;
  /* TODO: This seems like a bit of a hack, attempting to center the tags vertically.
   *       As there is no 'vertical-align' that can be applied to this, the other 
   *       solution may be a JS one. */
  margin-top: 5px;
  padding: 0;
}

#tag_cloud li {
  display: inline;
  padding: .5em;
}

#navigation_bar {

  padding: 0;
  padding-top: 5px;
  height: 25px;
  width: 100%;
  margin-top: 20px;

  background: #d62652;
}

#primary_navigation {
  float: left;

  width: 70%;
  padding: 0;
  margin: 0;

}

#utilities .bar {
  top: 10px;
  position: relative;
  padding: 5px;
  height: 20px;
  background: #de6e13;

}


#search #keywords{

  width: 60%;

  padding: 0;
  margin: 0;
  
  margin-top: 1px;
  margin-right: 5px;

  border: none;
}

#utilities input[type="submit"]{
  position: relative;
  font-size: 13px;
  padding: 0 3px;
  margin: -2px 5px 0 5px;
  border-color: white;
  border-width: 2px;
}

#utilities input[type="submit"]:hover{
  background: #d62652;
  cursor: pointer;
}

#utilities form {
  position: absolute;
  display: block;
  height: 30px;
  margin: 0;
  padding: 0;
}


#language {
  float: left;
  top: 4px;
}


#search {
/*TODO for some reason including the search bar bumps down the auxillary content panel. */
  right: -20px;
}

#content_wrapper {
/*  position: relative; */
  height: auto;
  margin: 0;
  padding: 10px;
/*  padding-bottom: 10px; */ /* TODO there is an inconsistancy here with pages containing a single main panel. Thecontent wrapper doesn't wrap the content the same as with multiple column layouts. I dont know why. */
}

#bottom_content {
  clear: both;
  width: 935px;
  min-height: 60px;
}

#main {
  float: left;
  width: 635px; /*655- 10(left) - 10(right) */
  margin-bottom: 10px;
}

#main.sole{
  width: 935px;
}
#main.sole #content {
  display: block;
}

#main_wrapper{
  float: left;
  width: 635px; /*655- 10(left) - 10(right) */
  margin-top: -5px;
}

#auxillary{
  float: right;

  padding: 5px;
  width: 280px; /* 290px - 5(left) -5(right) */
  height: 300px; /* 310px - 5(top) -5(bottom) */

  background: #de6e13;
}

#footer { 
  position: relative;

  float: left;
  width: 975px;
  height: 30px;
  top: 0px;
  text-align: center;
  padding-top: 3px;
  background: #d62652;
}



.fluid_height #auxillary, .fluid_height #main {
  /*TODO BUG The columns should always be the same height, so the one with less content should stretched to be baselined with the longer. This might be fixed by making the content_wrapper height be dependent on the main and auxillary interior divs. In fact, I'm not sure why it isnt*/
  height: 100%;
  /*TODO fixed width displays the footer 10px lower than fluid. The following is a workaround. */
  margin-bottom: 10px;
  min-height: 300px;
}

.fluid_height #main {
  /* TODO: javascript hack for ensuring two-column/same-height effect 
  height: expression(document.getElementById('main').height); */
}

.fluid_height #auxillary {
  /* TODO: javascript hack for ensuring two-column/same-height effect
  height: expression(document.getElementById('auxillary').height < document.getElementById('main').height? document.getElementById('main').height: "auto" );; */
}

.two_columns .content{
  width: 635px; /*655- 10(left) - 10(right) */
}

.content{
  background: #f4e4a0;
  margin: 5px 0px;

  width: 935px;

  padding: 5px 10px;
}

.two_columns .content{
  width: 635px; /*655- 10(left) - 10(right) */
  height: 100%
}


.content.final{
  margin-bottom: 0px; /*the last element needs no margin. It's more straightforward for the footer to have it. at least, until I figure out how to size the content_wrapper.*/
}



/**
* Rounded Corners. 
* The block being  must have the rounded class.
* At the begining of the bock must be a "top left corner" classed block, and a "top right corner" classed block.
* Similarly, at the end of the block, there must be a "bottom left corner" classes block and a "bottom right corner" class block.
*/
.rounded {
  position: relative;
}

.corner{
  background-image: url('../images/corners.png');
  background-repeat: no-repeat;
  position: absolute; 
  margin: 0;
  padding: 0;
  width: 25px;
  height: 25px;
}

.left {
  margin-right: auto;
}

.right{
  margin-left:auto;
}

.top.left{
  background-position: 0px 0px;
}

.top.right{
  background-position: -25px 0px;
}

.bottom.left{
  background-position: 0px -25px;
}

.bottom.right{
  background-position: -25px -25px;
}

.top{
  top: -1px;
}

.left{
  left: -1px;
}

.right{
  right: -1px;
}

.bottom{
  bottom: -1px;
}

/* TODO: abstract these classes..maybe a centered_form class?*/
#reset {
  display: block;
  margin-left: auto;
  margin-right: auto;
}

.clear {
  clear:both;
}

form#reset table{
  margin-left: auto;
  margin-right: auto;
}

#login {
  display: block;
  margin-left: auto;
  margin-right: auto;
}

form#login table{
  margin-left: auto;
  margin-right: auto;
}

input[type=submit] {
  background: none;

  border-style: solid;
  border-width: 3px;
}

.content_listing input[type=submit], #main input[type=submit] {
  font-size: 13pt;
  margin-top: 20px;
  color: #6f3C27;
  border-color: #6f3C27;
}

.content_listing input[type=submit]:hover, #main input[type=submit]:hover {
  background-color: #de6e13;
  color: #f4e4A0;
  cursor: pointer;
}


/**
* Non-layout
*/

hr {
  color: #6f3c27;
}

ul#primary_navigation li {
  display: table-cell;
  
  white-space: nowrap;

  margin: 1em;
  margin-top: 0;
  margin-bottom: 0;

  padding: 0;
  padding-left: 1em;
  padding-right: 1em;
}


a {
  text-decoration: none;
}


/**
* Fonts
*/

h1 {

  text-align: left;
  margin: 0;
  padding: 0;
  color:#de6e13; 
  font-size:18pt; 
  font-family: "Bell Gothic BT", "Lucida Sans Unicode", "Lucida Grande", "Tahoma", "Verdana", "Sans Serif";

 /* TODO for links: no decoration, 6f3c27 for hover, de6e13 for visited*/
}

.with_tabs h1 {
  float: left;
}

p {
  margin-top: .2em;
}

#header {
  font-family: "Bell Gothic BT", "Lucida Sans Unicode", "Lucida Grande", "Tahoma", "Verdana", "sans-serif" ;
}

#content_wrapper {
  text-align: center;
  color: #6f3c27; 
  font-size:13pt;

  /*for links use d62652, no decoration, no hover, 6f3c27 for visited*/
  font-family: "Trebuchet MS", "Tahoma", "sans-serif";
}

#content_wrapper a {
  color: #d62652;
}

#content_wrapper a:visited{
  color: #6f3c27;
}

#auxillary, #auxillary h2 {
  color:#f4e4a0;
  text-align:left;
  font-size: 13pt;
  font-family: "Lucida Sana Unicode", "Tahoma", "Sans Serif";
}

#auxillary .poll h2 {
  font-size: 15pt;
}

#auxillary input[type="submit"] {
  background: none;
  border-width: 3px;
  border-style: solid;
  border-color: #f4e4a0;
  font-size: 14pt;
  margin-left: 90px; /*TODO, instead of a static margin, "center" it for real */
  color: #f4e4a0; 
}

#auxillary #comment input[type="submit"] {
  margin-left: 40px; /*TODO, instead of a static margin "center" it for real, then remove this.*/
}

#auxillary input[type="submit"]:hover {
  background: #d62652;
  cursor: pointer;
}


#content_wrapper .entry, .content_listing .vertex.preview h2, .preview.entry h2{
  text-align: left;
  margin-bottom: 0.1em;
  margin-top: 0;
}

.preview , #intro{
  overflow: hidden;
}

a h2 {
  color: #de6e13;
}

/* make sure h2 tags are not bold, as per monica's request. */
h2 {
  font-weight: normal;
}


#auxillary h1{
  text-align:center;
  color:#f4e4a0; 
  font-size:18pt; 
  font-family: "Bell Gothic BT", "Lucida Sans Unicode", "Lucida Grande", "Tahoma", "Verdana", "Sans Serif";
}

#auxillary a{
  color: #d62652;
}

#auxillary a:visited{
  color: #f4e4a0;
}

#footer {
  color:#f4e4a0; 
  font-size:10pt; 
  font-family: Trebuchet MS, Tahoma, Sans Serif;
}

#footer a {
  color: #f4e4a0;
}
#navigation_bar a {
  font-size:12pt; 

}
#navigation_bar a, #utilities input[type="submit"] {
  text-align:center;
  color:#ffffff; 
  font-weight: 700;
  font-family: "Bell Gothic BT", "Lucida Sans Unicode", "Lucida Grande", "Tahoma", "Verdana", "Sans Serif";
  /* TODO for links: no decoration, 6f3c27 for hover, f4e4a0 for visited */
}

ul.navigation{
  text-align: left;
  list-style: none;
  padding: 0;
  margin: 0;
  border-style: solid;
  border-width: 0 0 3px 0;
  border-color: #6f3c27;
}

ul.navigation li{
  display: inline-block;
  margin-left: 50px;
  padding: 3px 10px;

  border-style: solid;
  border-width: 3px;
  margin-bottom: -3px;
}

ul.navigation li.active{
  border-bottom-color: #f4e4a0;
  background: #f4e4a0;
}
 
#content_wrapper ul.navigation a h2, #content_wrapper ul.navigation a:visited h2{
  color: #6f3c27;
  margin-top: 0;
  margin-bottom: 0;
  font-size: 110%;
}

#content_wrapper ul.navigation .active a h2, #content_wrapper ul.navigation .active a:visited h2{
  color: #de6e13;
}

/* tag cloud */
.rank4 a{
  color: #6f3c27;
  font-size: 15pt;
}
.rank3 a{
  color:  #f4e4a0;
  font-size: 19pt;
}
.rank2 a{
  color: #ffffff;
  font-size: 23pt;
}
.rank1 a{
  color: #d62652;
  font-size: 27pt;
}

ul.comments {
  padding: 0;
}

.comments li {
  list-style: none;
}

.comments h2 {
  font-size: 100%;
  margin-bottom: .2em;
}



/**
* Aktuelles blog listing
*/
h2.post_info{
  margin-top: 0;
  font-size: 80%;
  text-align: left;
}

/**
* Content listing
*/
ul.content_listing {
  padding: 0;
  margin: 0;
  display: block;
  list-style-type: none;
}

.two_columns ul.content_listing {
  width: 100%; /*TODO wonkiness. Why isn't the width being inferred from the page_wrapper?*/
}

ul.content_listing li {
  padding: 0;
  margin: 0;
}

ul.content_listing li a{
  color: #6f3c27;
}

ul.tags {
  clear: both;
}

ul.tags h2 {
  display: inline;
  font-size: 80%;
  margin-right: 1em;
}

ul.tags li {
  display: inline;
}

ul.tags li a {
  padding-left: .5em;
  text-decoration: none;
  border-left-style: solid;
  border-width: 1px;
  border-color: #ddd;
}

#auxillary textarea{
  width: 96%;
  height: 10em;
  margin-left: .3em;
}

#auxillary p {
  margin-bottom: 10px;
}

#auxillary label{
  display: block;
}

#auxillary form{
  margin: 0;
}

#auxillary form [type="submit"] {
  margin-top: 1em;
  margin-bottom: 1em;
}

#content_wrapper form table {
  margin-left: auto;
  margin-right: auto;
}


/**
* sponsors page layour
*/

ul.sponsors {
  width: 935px; /*TODO wonkiness. Why isn't the width being inferred from the page_wrapper?*/
  
  padding: 0;
  margin: 0;
  text-align: left;
  list-style-type: none;
}

ul.sponsors a img {
  border: none;
}

ul.sponsors a.name {
  margin-top: 1em;
  margin-left: 1em;
  font-size: 120%;
}

/**
* tinymce styling
*/

/* make the text area larger if its in a single column page */
.sole textarea#id_content{
  width: 500px;
  height: 300px;
}

.content span.fade {
  position: absolute;
  display: block;
  height: 20px;
  bottom: 0px;
  width: 98%;
  right: 1%;
  background: url(../images/content_fade_out.png);
  background-repeat: x-repeat;
}