/* (C) COPYRIGHT 2008-2025   Al von Ruff, Ahasuerus and Dirk Stoecker
         ALL RIGHTS RESERVED

     The copyright notice above does not evidence any actual or
     intended publication of such source code.

     Version: $Revision: 1224 $
     Date: $Date: 2025-05-10 16:41:04 -0400 (Sat, 10 May 2025) $
*/
 
html,body { 
   font-size: 90%; 
   font-family: Arial, Helvetica, sans-serif;
   color: #000; 
   /*background: #FFF5C7; 
   */
   background: #eec; 
   margin: 0; 
   padding: 0; 
   text-align: center; 
}

div#wrap {
   width: 100%; 
   text-align: left;
}

div.divider {
   background: #004;
   color: #fff;
   margin-top: 10px;
   padding: 5px;
   font-weight:bold;
}

div.newtalk {
   background: #FFFF00;
   color: #000000;
   margin-top: 2px;
   margin-bottom: 2px;
   padding: 2px;
}

div.quicktag {
   margin-top: 2px;
}

div.translationmessage {
   margin-bottom: 2px;
}

div.generic_centered_div {
   text-align:center;
}

li#badISBN {
   color: #f00;
   font-weight:bold;
}

a.new {
	color:#ba0000;
}

abbr.template a:link, a:visited {
   text-decoration-line: underline;
   text-decoration-style: dotted;
}

abbr.template a:hover, a:active {
   text-decoration-line: underline;
   text-decoration-style: solid;
}

.inverted {
    font-size: 90%; 
    background: #00f;
    color:#fff;
    text-decoration: none;
    padding-left: 5px;
    padding-right: 5px;
    white-space:nowrap;
}

a.topbanner {
   display: block;
   height: 90px;
   color: #fff; 
   background: #005;
   background-repeat: no-repeat;
   background-position: center left;
   border: 1px solid black;
   margin-left: 10px; 
   margin-right: 10px; 
}

div#statusbar {
   background: #000;
   color: #fff;
   padding-top: 2px; 
   padding-bottom: 2px; 
   margin-bottom: 10px; 
   margin-left: 10px; 
   margin-right: 10px; 
   text-align: center; 
}

/* main navigation bar on left side */
div#nav {
   position: relative;
   float: left;
   width: 150px; 
   border: 1px solid black;
   color: #000; 
   /*background: #D9D0A9; 
   */
   background: #ccc; 
   margin-left: 10px;
   margin-bottom: 15px;
   padding-left: 10px;
   padding-right: 10px;
   padding-top: 15px;
   padding-bottom: 15px;
}
div#nav img {
   margin-left:  10px;
   margin-bottom: 10px;
}

div#main {
   background: #fff; 
   border: 1px solid black;
   margin-left: 200px; 
   margin-right: 10px; 
   margin-bottom: 15px;
   padding-top: 10px;
   padding-left: 10px;
   padding-right: 10px;
   padding-bottom: 10px;
}

div#search {
   color: #000; 
   text-align: center; 
   font-size: 100%; 
   font-weight: bold; 
   background: #fff;
   border: 1px solid black;
   margin-bottom: 2px; 
   padding: 2px;
   padding-bottom: 10px; 
}
div#search img {
   margin-left: 1px;
   margin-top:  7px;
}
div#search form {
   margin-top:  5px;
}

div#fsearch {
   color: #000; 
   text-align: center; 
   font-size: 100%; 
   font-weight: bold; 
   background: #fff;
   border: 1px solid black;
   margin-bottom: 5px; 
   padding-top: 5px;
   padding-bottom: 5px;
}
div#fsearch form {
   margin-top: 5px;
   margin-bottom: 5px;
}
div#cclicense {
   margin-top: 10px;
   text-align: center; 
}
div#cclicense img {
   margin-left: 5px;
   border: 0px;
}

div#bottom {
   clear: both; 
   color: #000; 
   background: #B3B3B3;
   text-align: center; 
   border: 1px solid black;
   margin-top: 10px;
   margin-bottom: 15px; 
   margin-left: 10px; 
   margin-right: 10px; 
   padding-top: 10px;
   padding-bottom: 10px;
}

pre {
   font-size: 150%; 
}

form#data {
   background: #C7DBFF;
}

/* MD 2010-09-22: This is needed to work around the Chrome bug w/large fonts in tables. */
table {
   font-size: 100%;
}

/* switching color tables, first table line background */
tr.table1 {
   background: #eee;
}

/* switching color tables, second table line background */
tr.table2 {
   background: #ccc;
}

/* moderator review tables keep elements */
td.keep {
   background: #d0ffd0;
   font-size: 100%; 
}

/* moderator review tables drop elements */
td.drop {
   background: #ffc0c0;
   font-size: 100%; 
}

/* moderator review tables warning */
td.warn {
   background: yellow;
}

/* blank warning cell */
td.blankwarning {
   background: #C7DBFF;
}

/* blank info cell */
td.info	{
   background: #C7DBFF;
}

th.verifiers_user {
   width: 15%;
}

th.publication_checkbox {
   width: 2%;
}

th.publication_series_number {
   width: 5%;
}

th.publication_title {
   width: 15%;
}

th.publication_title_short {
   width: 13%;
}

th.publication_date {
   width: 8%;
}

th.publication_author_editor {
   width: 10%;
}

th.publication_publisher {
   width: 10%;
}

th.publication_isbn_catalog {
   width: 12%;
}

th.publication_price {
   width: 5%;
}

th.publication_pages {
   width: 4%;
}

th.publication_format {
   width: 5%;
}

th.publication_type {
   width: 4%;
}

th.publication_cover_artist {
   width: 10%;
}

th.publication_verif {
   width: 3%;
}

th.publication_cover {
   width: 6%;
}

/* verifiers table design */
table.verifiers {
   table-layout:fixed;
   width: 100%;
   margin-left:5px;
   padding: 0;
}

/* user's primary verifications - table design */
table.userverifications {
   margin-left:1px;
   padding: 0;
}

/* publications table design */
table.publications {
   table-layout:fixed;
   width: 100%;
   margin-left:0px;
   padding: 0;
   background-color: white;
}

/* publications table - header design */
table.publications th {
   word-wrap:break-word;
   padding: 2px;
   text-align: left;
   font-weight: bold;
   border-top: 1px solid black;
   }

/* publications table - cell design */
table.publications td {
   word-wrap:break-word;
   }

/* author directory table design */
table.authordirectory {
   background-color: #ffffaa;
   width: 100%;
   padding: 0px;
   text-align: center;
   border-top: 1px solid grey;
   border-left: 1px solid grey;
   border-bottom: 1px solid black;
   border-right: 1px solid black;
}

/* author directory table design */
table.authordirectory td {
   border-top: 1px solid grey;
   border-left: 1px solid grey;
   border-bottom: 1px solid black;
   border-right: 1px solid black;
}

/* author directory cell - no link */
td.authordirectorynolink {
   background-color: #aaaaaa;
}


/* moderator review tables design */
table.review {
   border-top: 1px solid grey;
   border-left: 1px solid grey;
   border-bottom: 1px solid black;
   border-right: 1px solid black;
}

/* moderator review tables-cell design */
table.review td {
   border-top: 1px solid black;
   border-left: 1px solid black;
   border-bottom: 1px solid grey;
   border-right: 1px solid grey;
   padding: 2px;
}

/* moderator review tables label design */
td.label {
   background: #B3B3B3;
   font-size: 100%; 
}

/* new moderator review tables label design */
td.boldlabel, th.boldlabel {
   background: #B3B3B3;
   font-size: 100%;
   font-weight: bold;
}

th.dividerrow {
   background: #004;
   color: #fff;
   margin-top: 10px;
   padding: 5px;
   font-weight:bold;
}

div#main2 {
   color: #000; 
   background: #C7DBFF;
   border: 1px solid black;
   /*margin-left: 180px; 
   */
   margin-left: 200px; 
   margin-right: 10px; 
   margin-bottom: 15px;
   padding-top: 10px;
   padding-left: 10px;
   padding-right: 10px;
   padding-bottom: 10px;
}

div#Headline {
	font-family:Arial,Helvetica,sans-serif;
	font-weight:bold;
	font-size: 125%; 
	padding-top: 25px;
}

div#Intro {
	border: 1px solid black;
	/*background: #C7DBFF;
	*/
        background: #ccc; 
	font-family:Arial,Helvetica,sans-serif;
	font-size: 125%; 
	padding: 5px;
}

div#content {
   background: #D9D0A9; 
   border: 1px solid black;
   margin-left: 200px; 
   margin-right: 10px; 
   margin-bottom: 15px;
   padding-top: 10px;
   padding-left: 10px;
   padding-right: 10px;
}

div.ContentBox {
	background: #fff; 
	border: 1px solid black;
	margin-top: 5px;
	margin-bottom: 5px;
        padding-top: 10px;
	padding-bottom: 7px;
	padding-left: 20px;
	padding-right: 5px;
}

div.VerificationBox {
	background: #fff; 
	border: 1px solid black;
	padding-left: 25px;
	padding-bottom: 15px;
	margin-top: 10px;
	margin-bottom: 10px;
}
div#HelpBox {
	background: #8f8; 
	border: 1px solid black;
	padding-top: 15px;
	padding-left: 25px;
	padding-bottom: 5px;
	margin-top: 10px;
	margin-bottom: 25px;
}
div#WarningBox, div#RecentSubmissionWarning, div#PendingSubmissionWarning, div#DateMismatchWarning, div#PendingTitleRemovalWarning, div#PendingImportWarning, div#PendingVTs, div#PendingTitleMergesWarning, div#PendingTitleEditsWarning, div#PendingTitleEditsInPubEditsWarning {
	background: yellow; 
	border: 1px solid black;
	padding-top: 15px;
	padding-left: 25px;
	padding-bottom: 5px;
	margin-top: 10px;
	margin-bottom: 25px;
}
div#ErrorBox {
	background: red; 
	border: 1px solid black;
	padding-top: 15px;
	padding-left: 25px;
	padding-bottom: 5px;
	margin-top: 10px;
	margin-bottom: 25px;
}
a.approval {
	font-weight:bold;
	border: 1px solid black;
	padding: 5px;
	background: #4f4; 
}
a.hold {
	font-weight:bold;
	border: 1px solid black;
	padding: 5px;
	background: yellow; 
}
input#rejection {
	font-weight:bold;
	border: 1px solid black;
	padding: 5px;
	background: #f88; 
}

ul.navbar {
   margin-left: 15px;
   padding: 0;
}

div.divothersites {
   display: none;
   background: #ccc;
   color: #000; 
   font-weight: normal;
}

ul.listothersites {
   margin-left: 15px;
   padding: 0;
}

div.divider:hover div.divothersites,
div.divider:focus div.divothersites,
div.divider:active div.divothersites {
    display: block;
}

i.downarrow {
    border: solid white;
    border-width: 0 3px 3px 0;
    display: inline-block;
    color: white;
    padding: 3px;
    transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
}

ul.noindent {
   list-style-position: inside;
   padding-left: 0;
   padding-bottom: 0;
   margin-top: 0;
   margin-bottom: 0;
}

h3.contentheader {
   padding-top: 5px;
   padding-bottom: 1px;
   margin-top: 0px;
   margin-bottom: 0px;
}

h1.centered, h2.centered, h3.centered {
   text-align: center;
}

/* scan image display on publication page, outer table */
tr.scan {
   text-align: left;
}

/* scan image display on publication page */
img.scan {
   border: 2px solid black;
   float: left;
   height: 200px;
}

td.pubheader {
   vertical-align: top;
   width:100%;
}

td.variants {
   vertical-align: top;
   margin: 0px;
   padding: 0px;
   border-spacing: 0px;
   border-collapse: collapse;
}

table.variantscolumn {
   vertical-align: top;
   margin: 0px;
   padding: 0px;
   border-spacing: 1px 0px;
}

td.authorbiblios {
   border:1px solid black;
   background-color: #e4e4e4;
}

table.pub_metadata {
   border: none
}

table.checkboxheaders {
   border-spacing: 1px;
   border-collapse: separate;
}

td.checkboxseparator {
   padding: 5px;
}

td.hint {
   cursor:help;
}

span.hint {
   cursor:help;
}

img.help {
   height:14px;
   width:14px;
}

a img {
   border: 0;
   text-decoration: none;
}

/* moderator, layoutof sign to display between multiple elements (authors) */
span.mergesign {
   font-weight: bold;
   color: #3333ff;
   margin-left: 2px;
   margin-right: 2px;
}

/* for notes, preserve carriage returns */
div.notes {
   white-space: pre-wrap;
}

/* generic style, get some free room to previous elements */
.topspace {
   margin-top:10px;
}

/* moderator, submission by current user */
td.submissionown {
   background-color: #3333ff;
}

td.submissionown a {
   color: #ffffff;
}

/* moderator, submission by a moderator */
td.submissionmoderator {
   background-color: #FFFF00;
}

/* moderator, submission by a newbie */
td.submissionnewbie {
   background-color: #00FF33;
}

/* moderator, submission by a self-approver */
td.submissionselfapprover {
   background-color: #00FFFF;
}

/* seriesgrid.cgi table, primary verified entries */
table.seriesgrid td.verifiedprimary {
   /* no color change */
   text-align: center;
}

/* seriesgrid.cgi table, secondary verified entries */
table.seriesgrid td.verifiedsecondary {
   background-color: #D0D0FF;
   text-align: center;
}

/* seriesgrid.cgi table, unverified entries */
table.seriesgrid td.notverified {
   background-color: #FFD700;
   text-align: center;
}

/* seriesgrid.cgi table, table design */
table.seriesgrid {
   border-top: 1px solid grey;
   border-left: 1px solid grey;
   border-bottom: 1px solid black;
   border-right: 1px solid black;
   background-color: #FFFFFF;
}

/* seriesgrid.cgi table, table cell design */
table.seriesgrid td {
   border-top: 1px solid black;
   border-left: 1px solid black;
   border-bottom: 1px solid grey;
   border-right: 1px solid grey;
   padding: 2px;
}

/* seriesgrid.cgi table, table-cell header design */
table.seriesgrid th {
   border-top: 1px solid black;
   border-left: 1px solid black;
   border-bottom: 1px solid grey;
   border-right: 1px solid grey;
   text-align: center;
   font-weight: bold;
   padding: 2px;
}

/* seriesgrid.cgi table, table-cell header year column design  */
table.seriesgrid th.year {
   text-align: left;
}

/* seriesgrid.cgi inner tables, table-cell design with inner table */
table.seriesgrid td.seriesgridinner {
   padding: 0px;
}

/* seriesgrid.cgi inner tables, table design of inner table */
table.seriesgridinner {
   width: 100%;
}

/* seriesgrid.cgi inner tables, table row design of inner table */
tr.seriesgridinner {
}

/* seriesgrid.cgi inner tables, table-cell design of inner table */
table.seriesgridinner td {
   /*border: 1px solid grey;
   border-left: 1px solid grey;
   border-bottom: 1px solid black;
   border-right: 1px solid black;*/
   padding: 1px;
   width: 100%;
}

/* bibliolinks table, table design */
table.bibliolinks {
   /*border-top: 1px solid grey;
   border-left: 1px solid grey;
   border-bottom: 1px solid black;
   border-right: 1px solid black;
   background-color: #FFFFFF;*/
   margin-left: -3px;
   padding: 0px;
}

/* generic centered table, table design */
table.generic_centered_table {
   background-color: #FFFFFF;
   padding: 0px;
   margin-right: auto;
   margin-left: auto;
}

/* table row design of generic centered table */
tr.generic_centered_header {
   background-color: #d6d6d6;
   margin-right: auto;
   margin-left: auto;
}

/* generic table, table design */
table.generic_table {
   background-color: #FFFFFF;
   padding: 0px;
}

/* table row design of generic table */
tr.generic_table_header {
   background-color: #d6d6d6;
   text-align: left;
}

/* generic cell with a black background */
td.generic_black_cell {
   background-color: black;
}

/* votes table, table design */
table.vote_table {
   background-color: #FFFFFF;
   padding: 3px;
}

/* votes table, cell design */
table.vote_table td, table.vote_table th {
   padding: 3px;
}

/* publication comparison table, table design */
table.pub_comparison_table {
   padding: 3px;
}

/* publication comparison table, cell design */
table.pub_comparison_table td,
table.pub_comparison_table th {
   padding: 3px;
   border-top: 1px solid black;
   border-left: 1px solid black;
   border-bottom: 1px solid grey;
   border-right: 1px solid grey;
   background: #d0ffd0;
   font-size: 100%; 
}

/* publication comparison title not found, cell design */
table.pub_comparison_table td.pub_comparison_title_not_found,
table.pub_comparison_table th.pub_comparison_title_not_found {
   padding: 3px;
   background: #ffc0c0;
   font-size: 100%; 
}

/* edit dialogs headlines */
.editheadline {
   margin-top:10px;
}

/* table to display/edit publication metadata */
table#metadata {
   border: 0px;
}

/* input element of table to display/edit publication metadata */
.metainput {
   width: 600px;
}

input.metainput {
   /* border: 2px lightgrey inset;
   border-radius: 4px; */
}
textarea.metainput {
   /* border: 2px lightgrey inset;
   border-radius: 4px; */
}

/* input element of table to display/edit content field of publication */
.contentinput {
   width: 335px;
   /* border: 2px lightgrey inset;
   border-radius: 4px; */
}

/* input element of table to display/edit content page field of publication */
/* width: 110px; */
.contentpageinput {
   width: 50px;
   /* border: 2px lightgrey inset;
   border-radius: 4px; */
}

/* input element of table to display/edit content year field of publication */
.contentyearinput {
   width: 75px;
   /* border: 2px lightgrey inset;
   border-radius: 4px; */
}

/* input element of table to display/edit content type field of publication */
.contenttypeinput {
   width: 120px;
}
input.contenttypeinput {
   /* border: 2px lightgrey inset;
   border-radius: 4px; */
}

/* input element of table to display/edit content len field of publication */
.contentleninput {
   width: 100px;
}

input.contentleninput {
   /* border: 2px lightgrey inset;
   border-radius: 4px; */
}

/* the outer table for the title edit dialogs */
table.titleedit {
   border: 0px;
}

/* display of container titles, yellow input fields */
input.titlecontainer, select.titlecontainer {
   background-color: yellow;
   border-left: 2px #72716f solid;
   border-top: 2px #72716f solid;
   border-right: 2px white solid;
   border-bottom: 2px white solid;
   border-radius: 0px;
}

/* black spacer line in title edit dialog */
tr.titleeditspacer {
   /* add some space on top and below? */
}

/* cell of black spacer line in title edit dialog */
tr.titleeditspacer td {
   background-color: black;
}

/* the outer table for the review edit dialogs */
table.reviewedit {
   border: 0px;
}

/* the outer table for the interview edit dialogs */
table.interviewedit {
   border: 0px;
}

/* title display of multipe used titles, grey readonly input fields */
.titlemultiple {
   background-color: #E4E4E4;
   /* background-color: #D4D4D4; */
}

/* display of readonly input fields */
.displayonly {
   background-color: #E4E4E4;
}

/* request to create an account */
span.newuser {
   color: #FFD700;
}

/* indent a single paragraph */
p.textindent {
   text-indent:40px;
}

/* high priority moderator notes warning */
p.highprioritymodnotes {
   color:red;
}


/* horizontal divider */
hr.divider {
   height:4px;
   border-width:0;
   color:black;
   background-color:black;
}

/* type of title entry for title page edit */
input.titletype {
   width: 120px;
}

/* authors table on main page */
table.mainauthors {
   width: 100%;
}

/* authors table on main page - align list on top */
table.mainauthors td{
   vertical-align: top;
   text-align: left;
}

/* year block on publisher page */
table.yearblock {
   background-color: white;
}

/* lines of year block on publisher page */
table.yearblock tr {
   background: #ccc;
}

/* elements of year block on publisher page */
table.yearblock td {
   padding: 2px;
   text-align: center;
}

/* publication display container title line */
span.containertitle {
   font-size: 1.4em;
   font-weight: bold;
}

/* publication display listing type switch */
a.listingtext {
   font-size: 65%;
}

/* moderator review span warning */
span.warn {
   background: yellow;
}

/* scan images displayed on other pages */
img.scans {
   height: 200px;
}

/* scan images displayed on submission pages */
img.tallscan {
   height: 250px;
}

/* checkmark display for verification status */
td.checkmark {
   text-align: center;
}

/* checkbox display for title flags */
td.titleflags {
   text-align: center;
}

/* a cover image exists */
.coverexists {
   font-size: 90%; 
   background: Moccasin;
   color: Blue;
   text-decoration: none;
   padding-left: 5px;
   padding-right: 5px;
}

/* a cover image exists at ISFDB */
.coverisfdb {
   font-size: 90%; 
   background: Lightgreen;
   color: Blue;
   text-decoration: none;
   padding-left: 5px;
   padding-right: 5px;
}

/* small cover display in link previews */
img.coversmall {
   width: 90px;
}

/* cover display on the front page */
img.covermainpage {
   width: 90px;
}

/* links to detailed forcoming books on the main page */
p.bottomlinks {
   margin-bottom: 0px;
}

/* publication link on main page for forthcoming books */
a.forthcoming {
   font-style: italic;
   font-weight: bold;
}

/* search block in navigation bar - search field */
input.search {
  width: 125px;
}

/* button to add another input line in an edit form */
input.addbutton {
  font-size: 80%;
  height: 2em;
  width: 2em;
  padding: 1px 1px;
}

/* search block in navigation bar - search type field */
select.search {
  width: 130px;
}

/* Mouseover question mark next to the text */
sup.mouseover {
  font-size: 60%;
}

/* Mouseover question mark 2 pixels to the right of the text */
sup.mouseover2pix {
  font-size: 60%;
  padding-left: 2px;
}

/* Do not display hidden selects */
select.nodisplay {
  display:none;
}

/* Do not display hidden inputs */
input.nodisplay {
  display:none;
}

span.recordID {
  float:right;
}

span.approval {
  float:right;
}

.svg1 {
  stroke:gray;
  stroke-width:1;
}

.svgred {
  stroke:red;
  stroke-width:2;
}

.svgblue {
  stroke:blue;
  stroke-width:2;
}

.svgorange {
  stroke:orange;
  stroke-width:2;
}

.svgyellow {
  stroke:yellow;
  stroke-width:2;
}

.svgpink {
  stroke:pink;
  stroke-width:2;
}

.svggreen {
  stroke:green;
  stroke-width:2;
}

.svgblack {
  stroke:black;
  stroke-width:2;
}

td.authorimage {
  width: 100%;
  vertical-align: top;
}

td.submissionbreakdowns {
  vertical-align: top;
}

div.nongenre {
  text-align: center;
}

/* Tooltip container divs */
div.tooltip {
    position: relative;
    display: inline;
}

div.tooltipleft {
    position: relative;
    display: inline;
}

/* Tooltip text */
div.tooltip span.tooltiptext {
    /* Position the tooltip text */
    position: absolute;
    pointer-events: none;
    background: transparent;
    visibility: hidden;
    background-color: white;
    color: black;
    text-align: left;
    padding: 5px 0;
    padding-left: 3px;
    border-radius: 6px;
    border: 1px solid black;
    z-index: 1;
}

div.tooltipleft span.tooltipleft {
    right: 105%;
}

div.tooltipright span.tooltipright {
    left: 105%;
}

span.tooltipnarrow {
    width: 150px;
}

span.tooltipwide {
    width: 300px;
}

/* Show the tooltip text when you mouse over the tooltip container */
div.tooltip:hover span.tooltiptext {
    visibility: visible;
}

div.tooltipleft:hover span.tooltiptextleft {
    visibility: visible;
}

.button-container form,
.button-container form div {
    display: inline;
}

.button-container input {
    display: inline;
    vertical-align: middle;
}

/* numeric_external_id_ranges.cgi table, table design */
table.externalidranges {
   border-top: 1px solid grey;
   border-left: 1px solid grey;
   border-bottom: 1px solid black;
   border-right: 1px solid black;
   background-color: #FFFFFF;
}

/* numeric_external_id_ranges.cgi table, table cell design */
table.externalidranges td {
   border-top: 1px solid black;
   border-left: 1px solid black;
   border-bottom: 1px solid grey;
   border-right: 1px solid grey;
   padding: 2px;
}

table.calendar_row {
   width: 100%;
   border-top: 1px solid black;
   border-left: 1px solid black;
   border-bottom: 1px solid grey;
   border-right: 1px solid grey;
}

th.calendar {
   text-align: center; 
}

a.bold, div.bold {
   font-weight: bold;
}

a.italic {
   font-style: italic;
}

a.button {
   display: inline-block;
   border-radius: 4px;
   text-decoration: none;
   background-color: #EEEEEE;
   color: #333333;
   padding: 2px 6px 2px 6px;
   border-top: 1px solid #333333;
   border-right: 1px solid #333333;
   border-bottom: 1px solid #333333;
   border-left: 1px solid #333333;
   margin: 1px 1px 1px 1px;
}