@CHARSET "ISO-8859-1";

/* this layout is based on the work at 960.com? which specifies a 960px wide page layout */


/* Constants

Verdana,Geneva,sans-serif = 'Verdana,Geneva,sans-serif';
Tahoma,Arial,Helvetica,sans-serif = 'Tahoma,Arial,Helvetica,sans-serif';
Georgia,Utopia,Palatino,"Palatino Linotype",serif = 'Georgia,Utopia,Palatino,"Palatino Linotype",serif';
Verdana,Geneva,sans-serif = '"Times New Roman",Times,serif';
"Courier New",Courier,monospace = '"Courier New",Courier,monospace';

175px = '175px';

../images/web_banner.gif = '../images/banner.jpg';
../images/stars.jpg = '../images/vine_bg.jpg';

940px = '940px';
10px = '10px';
920px = '920px';
580px = '580px';
900px = '900px';
310px = '310px';
290px = '290px';


#00348A = '#00348A';
#993399 = '#993399';
#CC0000 = '#CC0000';
white = 'white';
blue = 'blue';
darkblue = 'darkblue';
lightblue = 'lightblue';

#1B70B6 = '#C2DEED';
#1B70B6 = '#6571AA';
#FFFAEF = '#FFFAEF';
#003D6B = '#003D6B';

*/



	
/******************** layout elements *************************/

body, #wrap, #header-banner, #navbar, #navbar ul, #navbar li
{ margin: 0; padding: 0; }

body, td
{
  font-family: Verdana,Geneva,sans-serif;
  font-size: 11px;
}

body {
  background: url(../images/stars.jpg); /*#007F0E;*/
}
	
#wrap {
	width: 940px; /* to allow for the 10px border */
  margin: 0em auto;
  /*background: #1B70B6;*/
  /*border: solid 10px #1B70B6; */
}

/*** Banner pict - 780 pixels by 120 pixels ***/
#header-banner {
  width: 100%;
  height: 175px;
  background: url(../images/web_banner.gif) no-repeat;
}

/****************************** menubar ************************************/

div#navbar {
  font-size: 14.0px;
  float: left;
  width: 100%;
  height: 2em; /* scales background image with font size */
  line-height: 2.0em;
  background: #1B70B6;
}

div#navbar ul {  
  list-style: none;
  display: block;
  font-weight: bold;
} 

div#navbar li {
  float: left;
  display: inline;
  white-space: nowrap;
}

div#navbar li a {
  padding: 5px 0.75em;
  border-left: 1px solid black;
  text-decoration: none;
  color: #FFFAEF;
}

div#navbar li.current {
  background: #FFFAEF;
}

div#navbar li.current a {
  color: #1B70B6;
}

div#navbar li a:hover {
  text-decoration: none;
  background: #FFFAEF;
  color: #1B70B6;
}

/****************************** other page elements ************************************/

/* searchbar */
div#navbar form.searchbar {
  float:right;
  margin-top:3px;
}

div#navbar form.searchbar input.searchbox {
  float: left;
  width: 100px;
}

/* for defining a breadcrumb (at the top of the content-area) */
.breadcrumb {
  border-bottom:medium double #EAEAEA;
  float:left;
  font-size:11px;
  margin:0 0 20px;
  padding:0 0 3px;
  width:570px;
}

/* the page update date at the bottom of the content */
div#page_update_date {
  clear: both;
  margin-left: 15px;
}

div#copyright {
  clear: both;
  margin-top: 10px;
  margin-bottom: 5px;
  border-top: 1px solid olive;
  padding-top: 5px;
  font-family:Times New Roman;
  font-size: 10px;
  text-align: center;
  color: chocolate;
}

/****************************** content definition ************************************/

/* the main content area within the wrap - everything after the navbar */
#content {
  margin:0 auto;
  padding:0;
  width: 920px;
 background: #FFFAEF;
}

/* left 2/3rds of content area - nothing physical yet, but (content-area) will be contained within it */
#content-left {
  float:left;
  margin:0;
  padding: 10px 0 0;
  width: 580px;
}

/* right 2/3rds of content area - nothing physical yet, but (content-area) will be contained within it */
#content-right {
  float:right;
  margin:0;
  padding: 10px 0 0;
  width: 580px;
}

/* all of content area - nothing physical yet, but (content-area) will be contained within it */
#content-all {
  float: left; /* to match the other content types - needed to display below the menubar by 10px */
  margin:0;
  padding: 10px 0 0;
  width: 900px;
}

/* the actual content pane - has color for example & padding */
.content-area {
  background: pink;
  float:left;
  margin:0 0 10px;
  padding: 10px 10px 10px;
  width: 100%; /*570px;*/
  background: #FFFAEF;
}

/****************************** sidebar definition ************************************/

/* the right 1/3 of content area; actual content defined in sidebar-area */
#sidebar-right {
  display:inline;
  float:right;
  margin:0;
  padding:10px 0;
  width: 310px;
}

/* the left 1/3 of content area; actual content defined in sidebar-area */
#sidebar-left {
  display:inline;
  float:left;
  margin:0;
  padding:10px 0;
  width: 310px;
}

/* the actual content for the sidebar pane - has color for example & padding */
.sidebar-area {
  float:left;
  margin:0 0 10px;
  padding:10px 10px 10px;
  width: 290px;
  background: #FFFAEF;
}

.sidebar-title {
  font-weight: bold;
  font-size: 1.2em;
  padding: 2px 2px 2px 2px;
  background: #1B70B6;
  color: #003D6B;
}

.sidebar-text {
  margin-top: 10px;
}

.sidebar-text ul, .sidebar-text li {
  list-style: none;
  padding-left: 0;
  margin-left: 0;
  margin-top: 0;
}

.sidebar-text li {
  margin-bottom: 5px;
}

.sidebar-text h1 {
    font-size: 1.5em;
}

/****************************** admin page stuff ************************************/
/* if you change the content width, you should override these items: */

/*
.blog-form {
  width
}
*/

/******************************* page elements **************************************/

a:link, a:active {
  color: #00348A; /*#0066B3;*/
}

a:visited {
	color: #993399;
}

a:hover {
	color: #CC0000-color;
}

div.blog-sidebar-div span.feed a {
  color: #00348A; /* don't use a visited color on the blog-sidebar */
}

a.button, input.button, a.small-button, input.small-button {
  color: white; /* white */
  background-color: blue; /* green */
  border: 2px outset blue;
}

/* hover coloring */
a.button:hover, input.button:hover {
  color: darkblue; /* darkgreen */
  background-color: lightblue; /* lightgreen */
  border: 2px outset lightblue;
}

input[disabled="disabled"], input[disabled="disabled"]:hover {
  background-color: lightgrey;
  color: white;
  border: medium none;
}


/************************** blog page overrides **************************************/

.article-sidebar h2 
{
  color: #003D6B;
  font-weight: bold;
  font-size: 1.2em;
  background-color: #1B70B6; /*#E6F4FF;*/
  padding: 2px;
  margin: 10px 0;
}

.article-sidebar ul, .articles li
{
  list-style: none;
  padding-left: 0;
  margin-left: 0;
  margin-top: 0;
}

.article-sidebar li
{
  margin-bottom: 5px;
}

.articleLog .post
{
  margin: 10px 0;
}

.articleLog .post h2
{
  font-family: "Trebuchet MS", verdana, sans-serif;
  size: 1.3em;
  margin-bottom: 5px;
}

.articleLog .post .details
{
  font-weight: bold;
  font-size: 0.9em;
  margin: 5px 0;
  color: #003D6B;
}

.articleLog .related_details
{
  font-style: italic;
}

.articleLog .comment
{
  padding:5px;
  margin: 5px;
  background: #eef;
  border: solid 1px #ccd;
}

.articleLog .comment .author
{
  font-weight: bold;
}

.articleLog form.add_comment .form_control
{
  margin: 2px;
}

.articleLog form.add_comment .form_control label
{
  padding-left:10px;
}

.articleLog form.add_comment .form_control input.text
{
  width: 200px;
}

.articleLog form.add_comment .form_control textarea
{
  width: 300px;
  height: 150px;
}

.articleLog .form_error
{
  color: red;
}

.comment.moderated
{
  font-style: italic;
  background-color: #FFFFEE;
}

/************************** various (are they used) overrides ********************************/

div#sf_guard_auth_form { /* fix for sfGuard login */
  float: left;
  margin: 5px;
  border: 1px solid black;
  padding: 5px; 
  /*margin-left: 150px;*/
}

/*** admin section ***/
/* layout is autogenerated, so we can't change it - we'll hack the CSS instead */

#sf_admin_content { /*sf_admin_container {*/
  float:left;
  margin:0;
  padding:10px 0 0;
  width:600px;
}

#sf_admin_content {
  background: #FFFAEF;
  float:left;
  margin:0 0 10px;
  padding:10px 10px 10px;
  width:570px;
}

#sf_admin_bar {
  display:inline;
  float:right;
  /*line-height:18px;*/
  margin:0;
  padding:10px 0;
  width:310px;
}

form.mce-form { 
  float: left;
}

td.text input {
  width: 120px;
}

td.sidebar-text { /* what is this? */
  width: 120px;
  border: 1px solid green;
}

/************************ pop-up forms *********************************/
div.modalTitleBar {
  background-color: $titlebar-color;
  color: #FFFAEF;
}

div.modalWindow div.content {
  background-color: #FFFAEF;
}


/************************* tables ***************************************/

div.symfony-form {
  border: 1px solid $table-masthead-color; /* darkBlue */
}

div.tableMastHead {
  background-color: $table-masthead-color;
  color: #FFFAEF;
}

table.stats {
  text-align: left; 
  width: 100%;
  border: 1px solid $table-masthead-color;
}

table.stats thead {
  background-color: $thead-color; /* lightBlue */
}

table.stats tr.alt {
  background-color: $table-alt-color; /* pink */
}

table.stats tr.over {
  background-color: red;
}