/*
   default text styles - background and colors overriden by
   album 'bgcolor', 'background', and 'textcolor' properties.
*/
/*
  $Id: screen.css,v 1.1.2.4 2005/03/10 02:36:36 cryptographite Exp $

  Gallery - a web based photo album viewer and editor
  Copyright (C) 2000-2005 Bharat Mediratta

  This program 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.

  This program 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 this program;
    if not, write to the Free Software
  Foundation, Inc., 59 Temple Place - Suite 330, Boston, MA  02111-1307, USA.

*/

textarea:focus, input:focus, select:focus {
    background-color: #FFFFDA;
}

.sitedesc    {
    /* background-color: #FCFCF3; */
    margin-top:25px;
    padding:5px;
    border-style: solid;
    border-width: 1px ;
    border-color: #ffffff;
}

.inner        { padding: 5px;
    margin-top:20px;
    border-style: solid;
    border-color: #ffffff;
    border-width:1px;
}

.shortdesc    { background-color: #DCDCC0;
    padding:5px;
    font-weight: bold;
}

a:link, a:visited {
    color: yellow;
}

/*
   text styles
*/

/* This is the table enclosing the Album name at the top of the page */
.mod_toplight_bg {
    font-weight: bold;
    color: #f93;
    text-shadow: rgba(0, 0, 0, 0.4) 3px 3px 3px; /* h, v, blurriness */
}

/* albumdesc is the td that contains all the text describing an album
    in the top-level gallery view.  It's also (ab)used in other contexts,
    so restrict this style to the gallery view  */
.galleryTable .albumdesc
    {
    /* color:#ffffff; */
    /* background-color: black; */    
    background: #666;
    color: #333;
    border: 1px solid #f60;
    padding: 2px;
    }
.albumdesc td {
    /* padding: 2px; */
}
.galleryTable .albumdesc a
{
    color: white
}

/* The "View comments" view horribly abuses the albumdesc style.
    Luckily, the class is attached to a table instead of a td so we can
    discriminate this case. */
table.albumdesc {
    background: #50573f;
    border-width: 0;
    color: white;
    font-size: 12px;
}
table.albumdesc td {
    background: #50573f;
    border-width: 0;
    border-top-width: 0;
    color: white;
}
table.albumdesc .admin {
    background: #50573f;
    border-width: 0;
    color: white;
}

/* The "Stats view" also uses albumdesc in an annoying way. */
.statsTable .albumdesc {
    background: #996;
    border: 1px solid #f60;
}
.statsTable .albumdesc .fineprint {
    font-size: 14px;
    margin: 4px;
    padding: 0;
    padding-top: 0;
    display: block;
    width: auto;
    clear: both;
}
.statsTable .albumdesc .fineprint td {
    clear: none;
    display: inline;
}
.statsTable .commentbox {
    width: 90%;
    font-size: 12px;
    clear: both;
    margin-top: 10px;
}
.statsTable .albumdesc br {
    display: none;
}

/* table that contains the album title -- Text is controlled by .title */
.mod_title {
    /* border:1px solid #ffffff;
    border-right-width:0px;
    border-bottom-width:0px;
    border-left-width:0px; */
    /* background-color: black; */
    border: 0px;
    color: white;
    background: #f93;
    font-weight: bold;
    width: 100%;
    padding: 2px;
    text-shadow: rgba(0, 0, 0, 0.4) 3px 3px 3px; /* h, v, blurriness */
}
.mod_title a {
    color: white;
}

/* The td that has the actual title text in it. */
.title
    {
    font-size: 16px;
    /* background: #f93; */
    font-weight: bold;
    padding-left: 8px;
    }
/* You have to change the link color to affect the title color specifically */
.title a {
    color: white;
}

/* A bunch of stupid spacers */
.mod_title .leftspacer,
.mod_title .mod_title_left,
.mod_title .mod_title_right
{
    display: none;
}


/* This styles the text that you write to describe the album. */
.desc
{ 
    /* background-color: #FCFCF3 ; */
    background-color: white;
    padding: 8px;
    margin: 2px;
    margin-left: 0px;
    margin-right: 0px;
    font-size:14px;
    /* width:100%; */
    border-width:0px;
    display: block;
    }
/* There's an annoying br right after the description */
.desc + br {
    display:none;
}
.albumdesc .admin
{
    background-color: white;
    font-size: 10px;
    display: inline;
}

/* Align the "last changed on..." fine print in the top-level view */
.galleryTable .albumdesc .fineprint {
    background-color: white;
    display: block;
    text-align: right;
    font-style: italic;
    padding-top: 2px;
}

/* The search results page uses "desc" to display album titles. grr... */
.searchTable .desc {
    background: none;
    padding: 0;
    padding-bottom: 0.5em;
}
.searchTable td.albumdesc {
    background: none;
    font-size: 14px;
    padding: 4px;
}
.searchTable .vasummary {
    color: #f93;
}

.caption                        /* photo captions on all pages */
    {
    font-size: 16px;
    color: #f93;
    }
.modcaption  /* modifies background for caption text to reside */
    {
    font-size: 10px;
    }

.error {
    background-color: #CC0000;
    color: #FFFFFF ;
    padding:3px;
    margin:5px;
}

a.error, a.error:link, a.error:visited, a.error:active {
    color: #FFFFFF;
}

.attention                          /* so far, just for voting instructions*/
    {
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-weight: normal;
    color: blue;
    font-size: 12px;
    }

/*
.warning        { font-weight:bold;
    background-color: #FFFF33;
    color: #ffffff ;
    width: 150px;
    padding:2px;
}
*/

.headbox {
    background-color: #E6E6DC;
    font-size: 1.5em;
    font-weight:bold;
    padding:10px;
    border-style: solid;
    border-width: 1px;
    border-color: #F0F0F0;
    }

.head                           /* page headers */
    {
    font-size: 16px;
    font-weight: bold;
    }

.bread                          /* used in breadcrumb bars */
    {
    font-size: 10px;
    }
.nav                            /* used in navigation bars */
    {
    font-size: 12px;
    }

/* This weird stuff is used because gallery builds pages with *stacked* tables
    instead of nested tables and puts one border in each cell instead of using
    border-collapse: collapse.  *sigh* */
.navtableborderbegin{
    border:1px solid white;
}

.navtableborderend {
    border:1px solid #ffffff;
    border-top-width:0px;

}
.bordertop
    {
    border:1px solid #ffffff;
    border-right-width:0px;
    border-bottom-width:0px;
    border-left-width:0px;
    }
.borderright
    {
    border:1px solid #ffffff;
    border-top-width:0px;
    border-bottom-width:0px;
    border-left-width:0px;
    }
.borderleft
    {
    border:1px solid #ffffff;
    border-top-width:0px;
    border-bottom-width:0px;
    border-right-width:0px;
    }

/* Used for fine print that appears below albums/images, such as:
    Changed: 06/29/2005
    Contains: 6 items.
   Also the "Powered by ..." line.
   For some reason the "Viewed: 6 times" line gets its own class.
   Also, strangely, this affects the text in the search field.
 */
.albumTable .fineprint, .albumTable .viewcounter
    {
    color: black;
    font-size: 10px;
    /* background: red; */
    }
.albumTable .fineprint {
    padding-top: 15px;
}

/* Don't make input box huge! */
/* input.fineprint {
    padding-top: 2px;
} */

.viewcounter
    {
    margin-top: 0px;
    }

input, select, option, textarea
    {
    background-color: #FCFCFF;
    padding-left:5px;
    }


.editlink                       /* Used for the [edit] tags */
    {
    font-size: 10px;
    }

.admin                          /* used in admin bars */
    {
    font-size: 10px;
    font-weight: bold;
}

.adminform {
    font-size: 10px;
    font-weight: bold;
}

.search                          /* used in search text */
    {
    font-size: 10px;
    font-weight: bold;
    }

.popupbody  /* controls the background of popup. */
    {
    margin: 25px;
    background-color: #808080;
    font-size: 12px;
 }

.popuphead
    {
    font-size: 16px;
    font-weight:bold;
    text-align: center;
    background-color: #FCFCF3;
    padding: 5px;
    margin: 10px;
    border-width: 1px;
    border-color: black;
    border-style:solid;
    }

.popup /* controls the main text and message body */
 {
   padding: 5px;
 }

.popupform /* controls form textarea */
 {
 }

.commentIndication {
    color: red;
    font-weight: bold;
    font-size: 12px;
    vertical-align:top;
}

/***** Stuff for the single photo view *****/

.pview /* brackets both the image and all text in one frame */
{
    margin:7px;
    padding: 7px;
    /* border: 1px solid red; */
 }

p.pcaption /* brackets all text below photo. Includes caption and description. */
{
    margin-top:2px;
    /* margin-left: auto;
    margin-right: auto; */
    width: 75%;
    font-size: 16px;
    display: block;
    border: 1px solid #f60;
    color: white;
    background: #f93;
    font-weight: bold;
    text-shadow: rgba(0, 0, 0, 0.4) 3px 3px 3px; /* h, v, blurriness */
 }
table.pcaption  /* Everything except the title of the photo */
{
    margin-top: 2px;
    font-weight: normal;
    font-size: 14px;
    color: #333;
    background-color: white;
    width: 100%;
    border: solid #666;
    border-top-width: 1px;
    border-left-width: 0px;
    border-right-width: 0px;
    border-bottom-width: 0px;
    text-shadow: none;
}
/* This is to mash everything to the left in the table.  There's probably a
    better way to do this! */
table.pcaption td:first-child,
table.pcaption td:first-child + td {
    width: 1em;
}

/**** Comment area stuff ****/
/* Used for displaying comments, and also the comment entry form. */
.commentbox    {
    border-width:1px;
    border-style:solid;
    border-color: yellow;
    padding:0px;
    background-color: white;
    color: #333;
    font-size: 14px;
}

/* So the cells get padded but the table doesn't */
.commentbox td {
    padding: 4px;
}

/* This is used for the headers of comments, and also for the 
    "Add your comment" and "Commenter:" sections of the comment entry form. */
.commentboxhead    {
    color: white;
/*     border-bottom-width:1px;
    border-bottom-style: solid;
    border-color: #ffffff;
    */
    font-size:12px;
    font-weight: bold;
    background-color: #996;
    text-shadow: rgba(0, 0, 0, 0.4) 3px 3px 3px;
    
    /* h, v, blurriness */
}

/* This is for the "Message:" cell.  I don't know why it gets its own class. */
.commentlabel    {
    color: white;
    text-shadow: rgba(0, 0, 0, 0.4) 3px 3px 3px;
    font-weight: bold;
    font-size: 12px;
    background-color: #996
}

/* This is the only way to get to the cell with the text entry field.  This
    is a sibling selector.  */
.commentlabel + td {
    background-color: #996
}

.commentboxfooter {
    padding:2px;
    background-color: #996;
/*     border-top-width:1px;
    border-top-style: solid;
    border-color: #ffffff;
    */
    font-size: 12px;
}

.vatable /* width of the div set for all photo sets - view albums  */
 {
    width: 100%;
 }

.vathumbs /* full background bracket for images and text - veiw albums  */
 {
    margin:17px;
 }

.vafloat /* float for view album - text */
 {
    float: none;
 }

.vafloat2 /* float for view album - images */
 {
    float: none;
    padding-left: 8px;
    padding-right: 8px;
 }

p.vasummary /* controls the view of Album summary */
{
    font-weight: normal;
    font-size: 14px;
    padding:2px;
    margin-top:10px;
    width: 5in;
    
    display: block;
    background: #996;
    color: black;
    border: 1px solid #f93;
}

/* This is the top box, with the administrative icons */
#adminbox {
    color: #220;
    background-color: #996;
}

#adminbox td {
    font-size: 12px;
    padding-left:2px;
    padding-right:2px;
    padding-top:1px;
    padding-bottom:1px;
}

#adminbox a {
    color: black
}

#adminbox a:hover {
}

/* This is for the icon menus (admin, slideshow, etc) */
#menu {
}

#menu td{
}

#menu a {
    white-space: nowrap;
    padding: 2px;
}

#menu a:hover {
   white-space: nowrap;
   text-decoration: none;
   border-bottom: 1px solid #66A;
   border-right: 1px solid #66A;
   border-top: 1px solid #224;
   border-left: 1px solid #224;
   padding: 1px;
}

/* For menu elements that aren't links */
.noLink {
    font-size: 10px;
    padding: 3px;
}

/* Dimension links for photos.  E.g. [800x600] */
.dim {
    font-size: 10px;
}

/* The line containing the "Powered by ..." and "RSS" stuff */
.modfooter {
    margin-top: 4px;
}

.modfooter .fineprint {
    color: white;
}

/* ******************************************************************** */
/* Stuff I added begins here                                            */
/* ******************************************************************** */

/* For help understanding this stuff see:
    http://www.w3.org/TR/2004/CR-CSS21-20040225/cover.html#minitoc

#f30    reddish (bird)
#f60    orange  (bedspread)
#f93    light orange (bird beak)

#630    brown   (wood streaks)
#c60    light brown (wood)
#cc0    yellowish   (egg yolk)

#036    dark blue   (streaks on wall)
#369    light blue  (picture frame)

#666    gray    (wall)
#ccc    light gray  (shaded white)

#996    Yellowish olive green.
#50573f Classic n8gray NEdit green.

*/

/* Generic styles */
body {
    background: black;
    background-image: url('/images/stripes.gif');
    color: white;
}
a {
    color: inherit
}

a:link:hover, a:visited:hover {
    color: #f30
}

.outerTable {
    background: none;
    margin: 30px
}

/* Style for gradient row at top */
.gradrow img {
    display: block;
}

.contentTable {
    background: #996;
}


/* The left column (with the button bar) */
.leftcol {
    min-height: 400px;
    /* padding: 18px; */
    padding:3px;
    padding-right:0px;
    
}
.leftcolimg {
    background-image: url("/images/sidebar-flower.jpg");
    width: 206px;  /* 170 + 36 */
    height: 200px;
    -moz-border-radius: 9px;
    -webkit-border-radius: 9px;
    -moz-border-radius-bottomright: 0px;
    -moz-border-radius-topright: 0px;
    -webkit-border-bottom-right-radius: 0px;
    -webkit-border-top-right-radius: 0px;
}
.leftcol > #buttonList {
    margin: 18px;
}

/* The right column (with the content) */
.rightcol {
    font-family: Verdana, Arial, Helvetica, sans-serif;
    background-color: #50573f;
    padding: 18px;
    padding-top: 15px;
    border: 3px solid #996;
    border-left-width: 0;
    /* padding-top: 13px;
    margin-top: 5px; */
    
}
.rightcol h3 {
    color: #f93;
}

/* ************************************************************************* */
/* This is the magic CSS rollover code!                                      */
/* ************************************************************************* */

#buttonList {
    /* This style makes a list look nothing like a list.  :-) */
    list-style-type: none;
    border: 0;
    padding: 0;
    /* margin: 0; */
    /* padding-top: 24px; */
}

#buttonList > li {  /* The > selects immediate children */
    /* Pad between the buttons */
    padding-bottom: 2px;
}

#buttonList a {
    /* Make the entire button clickable by turning links into blocks */
    display: block;
    height: 36px;
    width: 150px;
    line-height: 36px;
    /* This causes the text to be vertically centered */
    font-family: Helvetica,Arial,Sans-serif,Verdana;
    font-size: 15px;
    font-weight: bold;
    text-align: center;
    text-decoration: none;
    /* Disable underline */
    background-image: url(/images/blankBoth.gif);
    background-repeat: no-repeat;
}

#buttonList .current_page_item > a,
#buttonList .current_page_ancestor > a,
#buttonList a:hover,
#buttonList a#here {
    /* Highlight on hover, or by default for current page's button */
    color: yellow;
    background-position: top left;
}

#buttonList .current_page_item > a:active,
#buttonList .current_page_ancestor > a:active,
#buttonList a,
#buttonList a:active,
#buttonList a#here:active {
    /* Unhighlight unselected buttons, and while clicking */
    color: #220;
    background-position: bottom left;
}