/* We use blueprint css.  The base font size (1em) is 12px, the line height is
   18px (1.5em).
*/


/* Buttons http://particletree.com/features/rediscovering-the-button-element/ */

.buttons a, .buttons button{
    display:block;
    float:left;
    margin: 1em 1em 0 1em;
    background-color:#f5f5f5;
    border:1px solid #dedede;
    border-top:1px solid #eee;
    border-left:1px solid #eee;

    font-family:"Lucida Grande", Tahoma, Arial, Verdana, sans-serif;
    font-size:100%;
    line-height:130%;
    text-decoration:none;
    font-weight:bold;
    color:#565656;
    cursor:pointer;
    padding:5px 10px 6px 7px; /* Links */
}

.buttons button{
    width: 22em;
    overflow:visible;
    padding:4px 10px 3px 7px; /* IE6 */
}
.buttons button[type]{
    padding:5px 10px 5px 7px; /* Firefox */
    line-height:17px; /* Safari */
}
*:first-child+html button[type]{
    padding:4px 10px 3px 7px; /* IE7 */
}
.buttons button img, .buttons a img{
    margin:0 3px -3px 0 !important;
    padding:0;
    border:none;
    width:16px;
    height:16px;
}

/* STANDARD */

button:hover, .buttons a:hover{
    background-color:#eeeeee;
    border:1px solid #cccccc;
    color: #444444;
}
.buttons a:active{
    background-color:#6299c5;
    border:1px solid #6299c5;
    color:#fff;
}

/* POSITIVE */

button.positive, .buttons a.positive{
    color:#529214;
}
.buttons a.positive:hover, button.positive:hover{
    background-color:#E6EFC2;
    border:1px solid #C6D880;
    color:#529214;
}
.buttons a.positive:active{
    background-color:#529214;
    border:1px solid #529214;
    color:#fff;
}

/* NEGATIVE */

.buttons a.negative, button.negative{
    color:#d12f19;
}
.buttons a.negative:hover, button.negative:hover{
    background:#fbe3e4;
    border:1px solid #fbc2c4;
    color:#d12f19;
}
.buttons a.negative:active{
    background-color:#d12f19;
    border:1px solid #d12f19;
    color:#fff;
}


/* IAmIT */

.display-in-cart
{ background-color: #000000;
  width: 10px;
  height: 10px;
}

.implicit-value
{ 
  color: #7389FF;
}

.iam-buttons .color-button-red {
    padding: 5px;
    color: #ffffff;
    background: #ff0000;
    width: 75px;
}
.iam-buttons .color-button-green {
    padding: 5px;
    color: #ffffff;
    background: #00ff00;
    width: 75px;
}
.iam-buttons .color-button-blue {
    padding: 5px;
    color: #ffffff;
    background: #0000ff;
    width: 75px;
}
.iam-buttons .color-button-yellow {
    padding: 5px;
    color: #000000;
    background: #FFFF00;
    width: 75px;
}
.iam-buttons .color-button-orange {
    padding: 5px;
    color: #000000;
    background: #FFA500;
    width: 75px;
}
.iam-buttons .color-button-fuchsia {
    padding: 5px;
    color: #000000;
    background: #FF00FF;
    width: 75px;
}

.iam-buttons .color-button-black {
    padding: 5px;
    color: #ffffff;
    background: #000000;
    width: 75px;
}
.iam-buttons .color-button-white {
    padding: 5px;
    color: #000000;
    background: #ffffff;
    width: 75px;
}
.iam-buttons .color-button-iamit-mint {
    padding: 5px;
    color: #000000;
    background: #CDFFCE;
    width: 75px;
}



/* Generic stuff start here */

/* Background on whole body instead of main div */
body
{ 
  background-image: url(background.png);
  background-repeat: repeat-x;
  margin: 0;
  margin-left: 10%;
  margin-right: 10%;
  background-color: #f5f4f5;
  overflow: hidden;
  }

/* #page wraps everything, only for adding a margin t=0/l/b/r */
#page
{ margin: 0 0.5em 0.5em 0.5em;
  }

/* Blueprint's containing-everything container class.
   We use the full width of the window instead of blueprint's
   900-something px width. */
.container
{ width: 100%;
  }

/* We give the header a fixed height to make sure the javascript height
   calculation has some definitive number to work with.  This assumes a logo
   of 48 pixels max in height (a bit less than 4em).  */
#header
{ width: 100%;
  height: 4em;
  }

/* At the top, you need room for the logo that floats left.  The biggest one
   till now is 220px.  We give the portal-tabs an additional left margin to
   offset it against the logo.
   And floated right portal actions. */
#logo
{ float: left;
  /*padding-left: 1em;*/
  width: 15em;
  height: 4em;
  overflow: hidden;
  /*background-color: white;
  border: 1px solid;
  border-color: #aaaaaa;*/
  }
#portal-toolbar
{ text-align: left;
  float: left;
  padding-left: 1em;
  }
#portal-actions
{ text-align: right;
  float: right;
  padding-right: 1em;
  }
#portal-tabs
{ text-align: center;
  }
#portal-tabs a
{ text-decoration: none;
  color: black;
  }
/* TODO: similar to object-actions, perhaps combine them? */


/* Tooltips, i.e. extra info on the left bar. */
.tooltip
{ display: none;
  width: 25em;
  padding: 1em;
  z-index: 10000;
  border: 1px solid black;
  background-color: white;
  /* CSS3 styling for latest browsers */
  -moz-box-shadow:0 0 10px 5px #aaa;
  -webkit-box-shadow: 0 0 10px #aaa;
  }

/* Horizontal alignment of sidebar, collapser and main content.
   Just like blueprint's columns, we float them all left.
   The main column gets a real width from our javascript code. */
#sidebar, #collapser, #main
{ float: left;
  }
.sidebar-open #sidebar
{ 
  width: 15em;  /* 300/12 */
  /*padding-left: 1em;*/
  }
.sidebar-closed #sidebar
{ width: 0;
  }
#collapser
{ width: 1em;  /* Icon is 5 px wide */
  }
#main
{ width: 10em;  /* Just some figure, will be set via javascript. */
  }

/* Layout of sidebar, collapser and main content. */
#sidebar
{ overflow: auto;
  background-color: white;
  border: 1px solid #aaaaaa;
  }
.sidebar-closed #sidebar
{ border: 0;
  }
#collapser
{ background-position: center center;
  background-repeat: no-repeat;
  cursor: pointer;
  }

/* Feedback that not only the little triangle is clickable, but the
   entire height of the collapser div. */
#collapser:hover
{ background-color: #f8f8f8;
  }

.sidebar-open #collapser
{ background-image: url(arrow_collapse.png);
  }

.sidebar-closed #collapser
{ background-image: url(arrow_expand.png);
  }

#sidebar .sidebarbox.iconlist ul,
#sidebar .sidebarbox.iconlist li,
#sidebar .sidebarbox.iconlist div,
#sidebar .sidebarbox.iconlist img
{ margin: 0px;
  padding-left: 0px;
  }

#sidebar .sidebarbox.iconlist li
{ float: left;
  text-decoration: none;
  }

#sidebar .sidebarbox.iconlist li
{ list-style-type: none;
  width: 80px;
  height: 80px;
  padding: 5px;
  float: left;
  text-align: center;
  font-size: 0.85em;
  }

.sidebarbox.workspace ul
{ margin: 0px;
  }


/* Inside #main you've got a #menubar, #content and #footer.  #menubar and
   #footer have a border on all sides, #content only left/right.  */
#menubar,
#footer
{ border: 1px solid #aaaaaa;
  }
#content
{ border-width: 1px 1px 0 1px;
  border-style: solid;
  border-color: #aaaaaa;
  }

/* The horizontal menubar needs a bit of padding top/bottom and a background.
   The desired height is 24px.  This is achieved with line-height.  */
#menubar
{ background-color: #eeeeee;
  background-image: url(bar_background.png);
  background-repeat: repeat-x;
  line-height: 2em;
  width: 100%;
  }

/* #content is the div that houses the main map or content.
   Overflow is hidden so that scrollbars do not appear.
   Use an inner #textual div to get some margin and a scrollbar.  */
#content
{ overflow: hidden;
  background-color: white;
  width: 100%;
  }
/* Footer content centered and with non-obtrusive links. */
#footer
{ text-align: center;
  background-image: url(small_bar_background.png);
  background-repeat: repeat-x;
  color: #666;
  width: 100%;
  }
#footer a
{ text-decoration: none;
  color: #666;
  }

/* Object actions (like "print") are floated right. */
#object-actions
{ text-align: right;
  float: right;
  padding-right: 1em;
  }
#object-actions a
{ text-decoration: none;
  }

#print-button
{ cursor: pointer;
  }

/* The object tabs and portal tabs are list items: show them nicely next to
   each other.  And inline so they don't take up extra space. */
#above-content ul,
#portal-tabs ul
{ margin: 0;
  padding-left: 0;
  display: inline;
  }
#above-content li,
#portal-tabs li
{ display: inline;
  padding-right: 0.5em;
  padding-left: 0.5em;
  }
#portal-tabs li
{ border-color: #aaaaaa;
  border-style: solid;
  border-width: 0px 0px 1px 1px;
  padding-top: 1px;
  padding-bottom: 0.46em;
  }
#portal-tabs li.last
{ border-right-width: 1px;
  }
#portal-tabs li.selected
{ background-image: none;
  background-color: #aaa;
  }

/* The map has the full height/width. */
#map
{ height: 100%;
  width: 100%;
  }

/* Breadcrums nest themselves next to the logo. */
#breadcrumbs
{ float: left;
  padding-left: 8em;  /* 25 sidebar - 17 logo */
  padding-top: 0.5em;
  color: #666;
  }

/* Give vertical items in #evenly-spaced-vertical a thick bottom border. */
#evenly-spaced-vertical .vertical-item
{ border-bottom: 1px solid #eeeeee;
  }
/* Prevent some weird padding/margin below pictures in firefox */
#evenly-spaced-vertical .vertical-item img
{ vertical-align: bottom;
  }

/* For giving regular body text some space to the left.
   And... a scrollbar when needed. */
#textual
{ 
  margin-top: 2em;
  margin-left: 8%;
  margin-right: 8%;
  padding-left: 1em;
  padding-right: 1em;
  overflow: auto;
  }

/* For the time being, float collapsible icon. */
.collapsible .ui-icon
{ float: left;
  }

/* Sidebar styling */
#sidebar .sidebarbox
{ padding-bottom: 1px;
  /* 1px bottom padding hack to prevent margin collapse which can wreak the
     layout when the bottommost item has a margin. */
  }

/* Give non-header items a bit of left/right room in the sidebar. */
#sidebar .sidebarbox > div,
#sidebar .sidebarbox > img,
#sidebar .sidebarbox > p,
#sidebar .sidebarbox > table,
#sidebar .sidebarbox > ul,
#sidebar .sidebarbox > ol,
#sidebar .sidebarbox > dl
{ margin-left: 0.5em;
  margin-right: 0.5em;
  /* Note: no ie6, so the '>' works fine. */
  }

/* ... but with an override for fews-unblobbed that should be moved there. */
#sidebar .sidebarbox > div#filter-parameter-accordeon
{ margin-left: 0em;
  margin-right: 0em;
  }

/* Nice background for h2/h3 headers in the sidebar. */
#sidebar .sidebarbox h2,
#sidebar .sidebarbox h3
{ background-image: url(bar_background.png);
  background-repeat: repeat-x;
  line-height: 2em;
  font-size: 1em;
  font-weight: bold;
  border-top: 1px solid #aaaaaa;
  border-bottom: 1px solid #aaaaaa;
  padding-left: 0.5em;
  margin-bottom: 0;
  }

#sidebar .sidebarbox h3
{ padding-left: 1em;
  color: #444;
  }

/* Topmost sidebarbox header should not have a border at the top. */
#sidebar div:first-child h2
{ border-top-width: 0;
  }

#sidebar .selected
{ background-color: #ffffe0;
  }

.sidebarbox-stretched
{ overflow: auto;
  }

/* Currently: only the trash. */
.sidebarbox-actions
{ background-color: #f9f9f9;
  text-align: center;
  }

/* Floating icons next to a h2/h3 header. */
/* TODO: they drop a line in IE: perhaps line height instead of margins? */
.sidebarbox-action-icon
{ float: right;
  display: block;
  cursor: pointer;
  font-weight: normal;
  margin-top: 3px;
  /* Right margin for a-href icons bug */
  margin-right: 2px;
  }

/* Feedback when hovering over droppable. */
.drophover
{ background-color: yellow ! important;
  }
.dropactive
{ background-color: lightblue;
  }

/* Empty space created when sorting: indicates current drop location. */
.ui-sortable-placeholder
{ border: 1px dotted black;
  height: 1.5em;
  }
/* Element being dragged around */
.ui-sortable-helper
{ border: 1px dotted black;
 }

/* UL *without* bullets and margin.  Mostly useful in sidebar lists. */
ul.without-bullets
{ padding-left: 0;
  }

/* height: 2em is necessary for icons (legend, plus, etc) not to form
a 'stairway'*/
ul.without-bullets li
{ list-style: none;
  }

/* 16px big icons: start them right at the bottom instead of
     at the baseline. */
.workspace_item img
{ vertical-align: bottom;
  width: 16px;
  height: 16px
  }

.workspace
{ min-height: 6em;
  }

.workspace-acceptable
{ cursor:pointer;
}

/* Snippet lists can be long. Limit is. Style below is not working correctly yet.
ul.snippet-list
{ height: 100px;
  overflow: auto;
  }
*/

/* Filetree tweaks */
.filetree span.folder,
.filetree span.file
{ padding-left: 20px;
  }
.filetree a
{ text-decoration: none;
  color: #222222;
  }

/* Title icons: icons next to title */
a.title
{ text-decoration: none;
  }

/* Nice "we're busy" animated gif: just add a div with class "loading". */
div.loading
{ background-position: center center;
  background-repeat: no-repeat;
  background-image: url('ajax-loader.gif');
  height: 4em;
  width: 100%;
  }

/* Change pointer so that it is clear that something isn't working yet. */
.notworking
{ cursor: not-allowed;
  }

/* For list items in summary screen */
/* No, no, no: no overly generic ul/ol overriding just for one screen!
   Use a more specific one (like "#summary ul").

ul, ol
{ padding-left: 1em;
  }

*/

/* Tables */
table.generic-table
{ border-collapse: collapse;
  }

table.generic-table,
table.generic-table th,
table.generic-table td
{ border: 1px solid lightgrey;
  }

table.generic-table thead th
{ background-color: #f5f4f5;
  }

table.generic-table .number
{ /* Number cells align right. */
  text-align: right;
  }

table.generic-table .button
{ /* Cells with some clickable image align in the center. */
  text-align: center;
  }

.button a.ss_sprite
{ /* No underline under the   that we need in an empty
     .button for IE7 */
  text-decoration: none;
  }

.popup-trigger
{ cursor: pointer;
  }

/* Generic overlays */
/* TODO: remove different variations on popups */

.date-popup .close,
.popup .close,
#not_found_popup .close,
#graph-popup .close
{ background-image:url(close.png);
  position: absolute;
  right: -15px;
  top: -15px;
  cursor: pointer;
  height: 35px;
  width: 35px;
  }

.popup,
#not_found_popup
{ display: none;
  z-index: 10000;
  width: 30em;
  min-height: 8em;
  padding: 1em;
  border: 1px solid black;
  background-color: white;
  /* CSS3 styling for latest browsers */
  -moz-box-shadow:0 0 40px 5px black;
  -webkit-box-shadow: 0 0 40px black;
  }


#login-form
{ text-align: left;
  }

#login-form label
{ width: 10em;
  margin: 0.5em 0;
  display: block;
  float: left;
  }

#login-form div
{ 
clear: both;
  }

/* extra for colorpicker */
.colorpicker
{ z-index: 10000;
  }

/* Examples of action icons are found above maps */
.action-icon
{ cursor: pointer;
  float: left;
  margin-top: 0.3em;
  margin-left: 1em;
  }

/* Negative margins compensate for icon size. */
.progress-animation
{ position: relative;
  top: 50%;
  left: 50%;
  margin-top: -16px;
  margin-left: -16px;
}

.auto-inserted
{ height: 100%;
}

tr.even td {
        background:#e5ecf9;
}

tr.odd td {
        background:#ffffff;
}

pre {
  font-family:"Courier New",Courier,monospace;
}