/* CSS written on Sat, 01 Jun 2013 20:31:49 -0400 */

/* =================================== COLORS ============================== */

.pos0, body 
{
   color: #000000;
   background-color: #000000;
} 

.pos1, #gallery-title, #main-content, #footer
{
   color: #FFFF7E;
   border-color: #000000;
   background-color: #C0C0C0 ;
} 

.pos2, #navigation, 
#comments th, #main-content-config th, 
#main-content-config .highlight, 
a.button, a.button:visited
{
   color: #bbbbbb;
   border-color: #000000;
   background-color: #555555;
} 

.neg1, #comments td,
a.button:hover, a.button:active
{
   color: #000000; 
   border-color: #000000; 
   background-color: #bbbbbb;
} 
.neg2, #comments .highlight
{
   color: #000000;
   border-color: #000000;
   background-color: #999999;
}

#main-content-folder-list, #main-content-folder-list td, #main-content-folder-list th { border-color: #000000; }
#main-content-folder-list th, #main-content-folder-list td.last { background-color: #555555; }
#roll-thumbnail-preview { border-color: #000000; }

#comments, #comments td, #comments th { border-color: #000000; }

a         { color: #000000; }
a:visited { color: #000000; }
a:hover   { color: #ffff00; }
a:active  { color: #000000; }
img.thumbnail, div.thumbnail img, img.photo { border-color: #000000; }
/* div.new { background-color: #7bb8c7; border-color: #c4d1e0; } */
/* div.new { background-color: #e0ebf8; border-color: #000000; } */
.thumbnail .caption { border-color: #C0C0C0 ; }
.new .caption { background-color: #000000; border-color: #000000; }
/* .thumbnail img.new { border-color: #ffff00; } */
input, select
{
   color: #000000;
   background-color: C0C0C0;
}
td { color: #FFFF7E; }



/* ==================================== GLOBAL PRESENTATION ================================= */

/* === STYLING & APPEARANCE === */
body {
   margin: 10px;
   font-family: "Trebuchet MS", Verdana, "Lucida Sans", Arial, Geneva, Helvetica, Helv, "Myriad Web", Syntax, sans-serif;
   font-weight: normal;
   font-size: .9em;
}

a {
   font-weight : bold ;
   text-decoration : none ;
}

h1 {
   font-weight : normal;
   font-size : 1.2em;
   padding: 0;
   margin: 0;
} 

h2 {
   font-size : 1em;
   font-weight : bold; 
   text-align : center;
   padding: 0;
   margin: 0;
} 

input, select { border-width : 1px; }
.button { border-width : 2px; }


td.label {
   text-align: right;
   vertical-align: top;
}
td.input {
   text-align: left;
   vertical-align: top;
}
td.submit {
   text-align: center;
   vertical-align: top;
}


/* ----( Flash Notices/Errors )------------------------ */

.message {
   width: 30em;
   border: 2px solid #a00;
   padding: 1em;
   margin: 2em auto;
   background-color: #f0f0f0;
   font: bold smaller sans-serif;
}

.field_with_errors {
   padding: 2px;
   background-color: #a00;
   display: table;
}

.message h2 {
  text-align: left;
  font-weight: bold;
  padding: 5px 5px 5px 15px;
  font-size: 12px;
  margin: -7px;
  background-color: #c00;
  color: #fff;
}

.message p {
  color: #333;
  margin-bottom: 0;
  padding: 5px;
}

.message ul li {
  font-size: 12px;
  list-style: square;
}

.error    { color: #a00; border-color: #a00; }
.notice   { color: #393; border-color: #393; }
.warning  { color: #a93; border-color: #a93; }
.note     { color: #00b; border-color: #00b; }



/* === LAYOUT & POSITIONING === */
#gallery-title {
   border-width: 1px; 
   border-style: solid; 
   padding: 0 5px; 
}

/* navigation bar */
#navigation {
   border-width: 0 1px 1px 1px;
   border-style: solid; 
   padding: 0; 
   margin-bottom: 10px;
}
.crumbtrail {
   float: left;
   display: inline;
   text-align: left;
   width: 49%;
   padding: 2px 5px;
}
.search {
   float: right;
   display: inline;
   text-align: right;
   width: 49%;
}
.searchform {
   display: inline;
   margin: 0;
}

.thumbnails-by-roll dt {
   text-align: left;
   font-weight: bold;
}
.thumbnails-by-roll dd {
   margin-bottom: 2em;
}



#main-content {
   border-width: 1px; 
   border-style: solid; 
   padding: 5px 5px 2em; 
   text-align: center;
}
#main-content-head {
   margin-bottom: 10px;
}


/* for now this is a fixed color, but these colors could be moved into the template */
.admin-links {
   position: absolute;
   top: 0;
   right: 0;

   margin: 1em;
   padding: 0.5em;

   background-color: #777;
   border: 2px solid #ccf;
   border-left: 0;
   border-right: 0;

   text-align: right;
   font-size: 0.75em;
}

.admin-links ul {
   margin: 1em 0 0;
   padding: 0;
}

.admin-links li {
   margin: 0;
   padding: 0;
   list-style: none;
}

.admin-links li a {
   color: #333;
   text-decoration: none;
}

.admin-links li a:hover { color: #ccf; }

.admin-form label { padding-right: 2em; }



/* footer */
#footer {
   border-width: 1px;
   border-style: solid; 
   padding: 5px;
   text-align: center;
   margin-top: 10px;
}
#footer img { border: 0; }
#rss {
   float: left;
   display: inline;
   padding: 0;
   margin: 0;
   width: 30%;
   text-align: left;
}
#validation {
   float: right;
   display: inline;
   padding: 0;
   margin: 0;
   width: 30%;
   text-align: right;
}
#validation img {
   position: relative;
   top: 2px;
}


/* utility styles */
a.button {
   font-size: .7em;
   font-family: Verdana, Arial, sans-serif;
   border-width: 1px;
   border-style: solid; 
   padding: 2px 20px;
   position: relative;
}
a.button:active {
   position: relative;
   top: 1px;
   left: 1px
}

.blank {
   clear: both;
   line-height: 0;
   height: 0;
   margin: 0;
   padding: 0;
   visibility: hidden;
}

.raw-link,
.fullsize-link,
.minitext,
.copyright,
.tags {
   font-weight : normal; 
   font-size : 10px;
} 

.right {
   float: right;
   display: inline;
   clear: right;
} 



/* ======================== *FOLDER* SPECIFIC LAYOUT ====================== */
#main-content-folder-thumb {
   margin: 0 auto;
   padding: 0 3em;
}

#main-content-folder-list {
   margin: 1em auto 0;
   width: 65%;
   border-width: 1px;
   border-style: solid;
   border-collapse: collapse;
}

#main-content-folder-list,
#main-content-folder-list th, 
#main-content-folder-list td {
   border-width: 1px;
   border-style: solid;
}

.col1 { text-align: right; }
.col2, .col3 { text-align: left; }
.col4, .col5 { text-align: center; }

th { text-decoration: underline; }
th.col1 { text-decoration: none; }

.col1 { border-right: none ! important; }
.col2 { border-left: none ! important; border-right: none ! important;}
.col3 { border-left: none ! important; }

/*
th.col1 { border-width: 1px 0 1px 1px; }
th.col2, th.col3, th.col4 { border-width: 1px 0; }
th.col5 { border-width: 1px 1px 1px 0; }

td.col1 { border-width: 0 0 1px 1px; }
td.col2, th.col3, th.col4 { border-width: 0 0 1px; }
td.col5 { border-width: 0 1px 1px 0; }
*/




/* ======================== *ROLL* SPECIFIC LAYOUT ====================== */
#main-content-roll {
   margin: 0 auto;
   padding: 0 3em;
}

td.thumbnail {
   vertical-align: top;
   padding: 1em 0.5em;
}

div.thumbnail {
   width: 180px;
   margin: .5em;
   padding: .5em;
   float: left;
   text-align: center;
}
div.thumbnail a { font-weight: normal; }
div.thumbnail img {
   border-width: 1px;
   border-style: solid;
}
/* .thumbnail img.new { border-width: 2px; } */

.thumbnail-img {
   display: block;
   height: 135px;
   margin: 0 0 5px 0;
}
div.thumbnail img { position: relative; }
div.thumbnail .caption {
   display: block;
   height: 5ex;
   overflow: hidden;
   border-width: 1px;
   border-style: solid;
}

.new .caption {
   filter: alpha(opacity=50);
   -moz-opacity: 0.5;
   opacity: 0.5;
}
.new .caption a {
   position: relative;
   -moz-opacity: 1.00;
   opacity: 1.00;
}


#roll-thumbnail-preview-box {
   position: absolute;
   right: 12px;
   top: 13em;
}
#roll-thumbnail-preview {
   border-width: 1px;
   border-style: solid;
}


/* ======================== *PHOTO* SPECIFIC LAYOUT ====================== */
img.photo {
   border-width: 1px;
   border-style: solid;
}
#main-content-photo { text-align: center; }
#main-content-photo table { margin: 1em auto 0; }

#main-content-photo #raw-photo-links,
#main-content-photo #photo-metadata
{ margin: 0 auto; }

#main-content-photo #raw-photo-links .raw-link,
#main-content-photo #photo-metadata .copyright
{ text-align: left; }

#main-content-photo #raw-photo-links .fullsize-link,
#main-content-photo #photo-metadata .tags
{ text-align: right; }

#main-content-photo #raw-photo-links .no-fullsize .raw-link,
#main-content-photo #photo-metadata .no-tags .copyright
{ text-align: center; }

#updatephoto {
   margin: 0 auto;
   width: 500px;
}
#updatephoto td {
   width: 380px;
   text-align: left;
} 
#updatephoto td.form-label { text-align: right; }
#updatephoto td.form-submit-row { text-align: center; }
#updatephoto label.required { font-weight: bold; }
/* .form-element input { width: 350px; } */


#comments {
   border-width: 1px;
   border-style: solid;
   border-collapse: collapse;
}

#comments,
#comments th,
#comments td {
   border-width: 1px;
   border-style: solid;
}

#comments th {
   text-align: left;
   text-decoration: underline;
   padding-left: 0.5em;
}
#comments .col1 {
   text-align: left;
   padding-left: 0.5em;
}
#comments .col2 {
   text-align: right;
   padding-left: 3em;
   padding-right: 0.5em;
}

#comments .col1 { border-right: none ! important; }
#comments .col2 { border-left: none ! important; }

#exif {
   border-width: 1px;
   border-style: solid;
   border-collapse: collapse;
}
#exif td {
   font-size: 0.7em;
   text-align: left;
   padding: 0.25em;
   margin: 0;
}


/* ======================== *CONFIG* SPECIFIC LAYOUT ====================== */
#main-content-config { text-align: center; }

#main-content-config table {
   width: 800px;
   margin: 0 auto 1em;
   border-collapse: collapse;
}

#main-content-config th {
   border-width: 1px;
   border-style: solid;
   text-align: left;
   padding-left: 0.5em;
   text-decoration: none;
   width: 50%;
}

#main-content-config td { width: 50%; }
#main-content-config h1 { margin-bottom: 1em; }

#main-content-config .highlight {
   border-width: 1px;
   border-style: solid;
   text-align: center;
}

#main-content-config h2 {
   text-align: left;
   font-weight: bold;
   margin-top: 1em;
   margin-bottom: 0;
}


/* ---( tags )---------------------------------------------------------------- */
ul#tcgpg-tags {
   list-style: none;
   padding: 0;
   width: 50%;
   margin: 0 auto;
   text-align: center;
}
ul#tcgpg-tags li {
   display: inline;
   padding: 0 0.5em;
}


/* ----( view_photo_upload_results )------------------------------------------ */
.error { border: 1px solid #c00; }
div.error h3 {
  color: #fff;
  background-color: #c00;
}

.pending { border: 1px solid #00c; }
div.pending h3 {
  color: #fff;
  background-color: #00c;
}

.success { border: 1px solid #0a0; }
div.success h3 {
  color: #fff;
  background-color: #0a0;
}

div.error,
div.pending,
div.success {
  color: #000;
  background-color: #ddd;
  width: 75%;
  margin: 1em auto;
  text-align: left;
}

div.error   h3,
div.pending h3,
div.success h3 { margin: 0 0 0.5em; }

div.error   p,
div.pending p,
div.success p,
div.error   dl,
div.pending dl,
div.success dl { margin: 1em; }

div.error   dt,
div.pending dt,
div.success dt { font-weight: bold; }

div.error   dd,
div.pending dd,
div.success dd { margin-bottom: 1em; }

div.error   ul,
div.pending ul,
div.success ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

div.error   li,
div.pending li,
div.success li {
  margin: 0;
  padding: 0;
}


/* ====( login )======================================================== */

#login h1 { margin: 0 0 1em; }
#login table.login-form { margin: 0 auto; }
#login table.login-form td { padding: 0.5em; }
#login table.login-form td.submit { padding-top: 1em; }


/* ============================== BROWSER HACKS ======================== */
/* for IE 'peek-a-boo' bug */
#main-content, #footer, #rss, #validation,
.right, div.thumbnail
{ position: relative; }