/*****************************************************************************
* Name:    styles.css
* Version: $Id: styles.css,v 1.16 2007/02/09 20:56:52 nat Exp $
* Purpose: Main page - display the bookmarks
* Author:  Nat Blundell
******************************************************************************

* Bookmarks. Web based "web browser bookmark" organisation.
*
* Copyright (C) 2006 Nat Blundell (nat@tepic.co.uk)
*
* This file is part of "Bookmarks".
*
* Bookmarks is free software; you can redistribute it and*or modify it under
* the terms of the GNU General Public License as published by the Free
* Software Foundation; either version 2 of the License, or (at your option)
* any later version.
*
* Bookmarks is distributed in the hope that it will be useful, but WITHOUT
* ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or
* FITNESS FOR A PARTICULAR PURPOSE.  See the GNU General Public License for
* more details.
*
* You should have received a copy of the GNU General Public License along
* with Bookmarks; if not, write to the Free Software Foundation, Inc., 51
* Franklin St, Fifth Floor, Boston, MA 02110-1301 USA
*/



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

a:hover {
  color:               #3333bb;
}

a img {
  border:              0px;
}

body {
  color:               #666666;
  background-color:    #ffffff;
  font-family:         Verdana, Arial, sans-serif;
  font-size:           10pt;
  border:              0px;
  margin:              0px;
}

input {
  border:              solid #000000 1px;
  background-color:    #ddddff;
  font-family:         Verdana, Arial, sans-serif;
  font-size:           8pt;
  padding:             2px;
}

form {
  display:             inline;
}

td {
  color:               #666666;
  font-family:         Verdana, Arial, sans-serif;
  font-size:           10pt;
}

tr { 
  vertical-align:      top;
}

select {
  border:              solid #000000 1px;
  background-color:    #ddddff;
  font-family:         Verdana, Arial, sans-serif;
  font-size:           8pt;
  padding:             2px;
}



/**
* Styles for slightly flash buttons, degrades nicely
*/
.button {
  background-image:    url(images/button0.gif);
  background-position: top left;
  background-repeat:   repeat-x;
  margin:              0px 2px 2px 2px;
  padding:             0px 2px 0px 2px;
  text-decoration:     none;
  color:               #0000bb;
  text-align:          center;
}

.button:hover {
  background-image:    url(images/button1.gif);
  color:               #000033;
}



/**
* Edit icons
*/
.edit {
  background-color:    #ffffff;
}

.edit:hover {
  background-color:    #ffff00;
}



/**
* This style positions the main page just under the tabs
*/
div#pagecontent {
  position:            absolute;
  left:                0px;
  top:                 67px;
  padding:             8px 0px 0px 0px;
  margin:              2px 0px 5px 0px;
  border-top:          solid #00aaee 1px;
  min-width:           800px;
  width:               100%;
}

div#pagecontent p {
  margin:              4px 20px 0px 20px;
}



/**
* This style controls the options display
*/
div#options {
  position:            relative;
  top:                 8px;
  border-top:          solid #00aaee 1px;
}



/**
* All titles appear in the same place, above the tab bar, regardless of
* whether we render them within a pagecontent or not
*/

div#pagecontent div#title {
  position:            absolute;
  left:                0px;
  top:                 -60px;
  width:               50%;
  text-align:          center;
  background-color:    #eeeeff;
  border:              dashed #4444ee 1px;
  color:               #4444ee;
  font-weight:         bold;
  padding:             2px;
  margin:              0px 25% 0px 25%;
}


/**
* The top right displays very small login /logout information
*/
div#topright {
  position:            relative;
  float:               right;
  margin:              0px;
  padding:             4px 2px 2px 4px;
  border-left:         solid #00aaee 2px;
  border-bottom:       solid #00aaee 2px;
  text-align:          right;
  z-index:             2;
}



/**
* Footer sits at the bottom right, displaying our version number
*/
div#footer {
  position:            relative;
  background-color:    #eeeeee;
  float:               right;
  padding:             4px 2px 2px 4px;
  margin-bottom:       2ex;
}

div#footer a {
  text-decoration:     none;
  color:               #666666;
}

div#footer a:hover {
  color:               #3333bb;
}


div#footer th {
  text-align:          right;
  color:               #666666;
  font-family:         Verdana, Arial, sans-serif;
  font-size:           8pt;
  font-weight:         normal;
}

div#footer td {
  text-align:          right;
  color:               #666666;
  font-family:         Verdana, Arial, sans-serif;
  font-size:           6pt;
}



/**
* These styles control our tabs
*/

ul#tabsheader {
  position:            absolute;
  left:                0px;
  top:                 0px;
  margin:              0px;
  padding:             40px 0px 0px 20px;
  z-index:             1;
}

ul#tabsheader li {
  list-style:          none;
  float:               left;
  margin:              0px 2px 0px 0px; /* 2px gap between tabs */
  position:            relative;
  white-space:         nowrap;
  border:              solid 1px #ffffff;
}

ul#tabsheader li:hover {
  background-color:    #ffffff;
  white-space:         nowrap;
}

/* hover selectors for main header tabs */
ul#tabsheader li.hoverOn {
  background-color:    #cde8fb;
  white-space:         nowrap;
  border-top:          solid 1px #00a7e7;
  border-right:        solid 1px #00a7e7;
  border-bottom:       solid 1px #cde8fb;
  border-left:         solid 1px #00a7e7;
}

ul#tabsheader li.hoverOff {
  background-color:    #ffffff;
  white-space:         nowrap;
}

ul#tabsheader a {
  display:             block;
  float:               left;
  text-decoration:     none;
  font:                11px Verdana, Arial, Helvetica, Sans-Serif, sans-serif;
  color:               #6f9eb9;
  line-height:         20px;
  padding:             5px 10px 1px 10px;
  /* width:               100px; */ /* For fixed width tabs */
  white-space:         nowrap;
}

ul#tabsheader a:hover {
  color:               #000000;
  line-height:         20px;
  white-space:         nowrap;
}

ul#tabsheader #current {
  margin-bottom:       -3px;
  padding-top:         3px;
  border-top:          solid 1px #00a7e7;
  border-right:        solid 1px #00a7e7;
  border-bottom:       solid 1px #ffffff;
  border-left:         solid 1px #00a7e7;
  line-height:         20px;
  white-space:         nowrap;
}

ul#tabsheader #current a, #current a:hover {
  font:                11px Verdana, Arial, Helvetica, Sans-Serif, sans-serif;
  color:               #000000;
  line-height:         20px;
  margin-top:          -3px;
  padding-bottom:      3px;
  line-height:         20px;
  white-space:         nowrap;
}

ul#tabsheader #current a:hover {
  text-decoration:     none;
}



/**
* These styles control how the individual sets display
*/
.page {
  border-collapse:     collapse;
  margin:              8px 4px 0px 4px;
}

.setouter {
  padding:             2px 4px 2px 4px;
  border:              dashed #4444ee 1px;
  margin:              0px;
}

.setouter_dnd {
  padding:             2px 4px 2px 4px;
  border:              dashed #ccffcc 1px;
  background-color:    #ccffcc;
  margin:              0px;
}

.private {
  color:               #ee4444;
  font-weight:         bold;
  width:               233px;
  height:              110px;
  padding:             30px 0px 30px 0px;
  text-align:          center;
}

.setinner, .setinnerprivate {
  width:               100%;
  margin:              0px;
  padding:             0px;
  border:              0px;
}

.setinnerprivate {
  background-image:    url(images/classified.gif);
  background-repeat:   repeat-y;
}

.setinner th, .setinnerprivate th {
  color:               #0022bb;
  font-family:         Verdana, Arial, sans-serif;
  font-size:           10pt;
  font-weight:         bold;
  margin:              0px;
  padding:             4px 0px 10px 0px;
  text-align:          left;
  white-space:         nowrap;
}

.setinner td, .setinnerprivate td {
  margin:              0px;
  padding:             0px;
  border:              0px;
  border:              0px;
  white-space:         nowrap;
}

.quicklink {
  background-color:    #ddddff;
  border:              solid #000000 1px;
  font-family:         Verdana, Arial, sans-serif;
  font-size:           8pt;
  width:               180;
  padding:             2px;
}

.link_dnd { 
  width:               100%;
  text-decoration:     none;
  background-color:    #ccffcc;
}

.link {
  width:               100%;
  text-decoration:     none;
  color:               #000000;
}

.link:hover {
  color:               #3333bb;
}

.link img, .link_dnd img {
  margin-right:        8px;
}

.link input, .link_dnd input {
  width:               200px;
}

.hilite { 
  background:          #ddddff;
}


/**
* Styles for laying out form controls
 */
.form {
  border-collapse:     collapse;
  border:              0px;
}

.form tr {
  vertical-align:      top;
}

.form th {
  color:               #666666;
  font-family:         Verdana, Arial, sans-serif;
  font-size:           10pt;
  text-align:          right;
  font-weight:         normal;
  padding-right:       8px;
  padding-bottom:      4px;
  white-space:         nowrap;
}

.form td {
  color:               #000000;
  font-family:         Verdana, Arial, sans-serif;
  font-size:           10pt;
  font-weight:         normal;
}

.inpcheck {
  border:              0;
  background-color:    transparent;
  padding:             0px;
}

.inpbutton {
  border:              solid #000000 1px;
  background-color:    #ddddff;
  font-family:         Verdana, Arial, sans-serif;
  font-size:           7pt;
  padding:             0px;
}



/**
* For displaying error messages
*/
.error {
  background-color:    #ffeeee;
  border:              dashed #ee4444 1px;
  color:               #ee4444;
  font-weight:         bold;
  padding:             2px;
  margin:              4px 8px 4px 8px;
}



/**
* For displaying notice messages
*/
.notice {
  background-color:    #cccccc;
  border:              dashed #666666 1px;
  color:               #666666;
  font-weight:         normal;
  padding:             2px;
  margin:              4px 8px 4px 8px;
}



/**
* For drawing attention to an item
*/
.important {
  background-color:    #eeeeff;
  border:              dashed #4444ee 1px;
  color:               #4444ee;
  font-weight:         bold;
  padding:             2px;
  margin:              4px 8px 4px 8px;
}



/**
* Styles just for the set editor
*/
.editset {
}

.editset tr {
  border-bottom:       solid #0022bb 1px;
}

.editset th {
  font-family:         Verdana, Arial, sans-serif;
  font-size:           10pt;
  font-weight:         normal;
  text-align:          left;
  padding:             2px 12px 0px 0px;
  white-space:         nowrap;
}

.editset td {
  padding:             0px 6px 0px 0px;
}



/**
* Horizontal and vertical divider lines
*/
.hdiv {
  border-top:          solid #00aaee 1px;
  height:              3px;
  margin:              2px 0px 5px 0px;
}

.vdiv {
  display:             inline;
  border-left:         solid #00aaee 1px;
  margin:              0px 8px 0px 8px;
}



/**
* Just used for a pretty login page
*/

table#login {
  text-align:          center; /* IE bug!! */
  margin:              50px 0px 0px 0px;
  margin-left:         auto;
  margin-right:        auto;
}

table#login fieldset {
  border-color:        #667788;
  width:               300px;
}

table#login fieldset table {
  padding:             0px;
  margin:              20px;
  margin-left:         auto;
  margin-right:        auto;
}

input#idusername, input#idpassword {
  width:               140px;
}

table#login .error {
  padding:             10px 0px 0px 0px;
  text-align:          center;
  background-color:    #ffffff;
  border:              0px;
  color:               #ee4444;
  font-weight:         bold;
}

.hide {
  border:              0px;
  padding:             0px;
}



/**
* Just for the admin pages
*/

table#admintab {
  border-collapse:     collapse;
  border:              solid #000000 1px;
}

table#admintab td {
  padding:             4px 8px 4px 8px;
  border-bottom:       solid #000000 1px;
  background-color:    #eeeeff;
}

table#admintab th {
  padding:             4px 8px 4px 8px;
  border-bottom:       solid #000000 1px;
  background-color:    #eeeeff;
  font-weight:         bold;
  text-align:          left;
  font-size:           9pt;
  font-family:         Verdana, Arial, sans-serif;
}

table#admintab .alt td {
  background-color:    #eeffff;
}



table#adminusertab {
  border-collapse:     collapse;
}

table#adminusertab select {
  margin:              0px 2ex 0px 0px;
}


table#cfgwiz {
  border-collapse:     collapse;
  width:               600;
  border:              0px;
}

table#cfgwiz td {
  border:              0px;
  margin:              0px;
  padding:             0px;
}

table#cfgwiz h1 {
  font-family:         Verdana, Arial, sans-serif;
  font-weight:         bold;
  font-size:           10pt;
  color:               #3333bb;
  margin:              4px 20px 0px 20px;
}


table#cfgwizleft {
  width:               160px;
  border-collapse:     collapse;
  border:              solid #000000 1px;
  border-right:        0px;
}

table#cfgwizleft td {
  margin:              0px;
  padding:             4px 4px 4px 16px;
  border-top:          0px;
  border-right:        0px;
  border-bottom:       solid #000000 1px;
  border-left:         0px;
  white-space:         nowrap;
  color:               #000000;
}

table#cfgwizleft .done td {
  background-color:    #aaffaa;
  background-image:    url(images/cfgwiz_done.gif);
  background-repeat:   repeat-y;
  background-position: top left;
}

table#cfgwizleft .current td {
  background-color:    #ffffaa;
  background-image:    url(images/cfgwiz_current.gif);
  background-repeat:   repeat-y;
  background-position: top left;
}

table#cfgwizleft .todo td {
  background-color:    #ffaaaa;
  background-image:    url(images/cfgwiz_todo.gif);
  background-repeat:   repeat-y;
  background-position: top left;
}

table#cfgwizleft .pad td {
  background-color:    #aaaaaa;
  height:              100%;
}


#cfgwizmain {
  border:              solid #000000 1px;
  width:               460;
  height:              300;
}


#cfgwizbuttons {
  vertical-align:      bottom;
}


#cfgwizcancel {
  vertical-align:      top;
  text-align:          right;
}



/**
* Specific beautifications
*/

#selectuser {
  text-align:          center;
  padding:             2ex 0px 2ex 0px;
}

#userselect {
  width:               200px;
}


#addsets {
  border-collapse:     collapse;
}

#addsets td {
  border:              0px;
  padding:             0px 5px 0px 5px;
}

#addsets select {
  width:               200px;
}

#grayout { 
  position:            absolute;
  visibility:          hidden;
  width:               0px;
  height:              0px;
  background-color:    transparent;
  z-index:             99999;
  text-align:          center;
}

.nobullets {
  list-style-type:     none;
  padding-left:        0px;
  margin-left:         0px;
}