/* these rules format public display of articles */


div,td {
    font-family:helvetica; font-size:10pt; 
    /* for debugging CSS only */
    /* border:1px dashed red; */
 }

.ZineDebug {
    font-size:8pt;
    font-family:sans-serif;
    color:green;
    border:0px solid black;
    /* remove next line for debugging CSS */
    display:none;
}

/*** 
 ***  ARTICLES
 ***/

.Zine {
/*    width:640; */
}
.ZineArticle .ZineHeader {
/*    padding-top:10px;*/
    font-weight:bold;
    font-size:16pt;
}
.ZineArticle .ZineAbout {
    padding-top:5px;
    padding-bottom:10px;
    font-style:italic;
    text-align:right;
    /* font-size:12pt;*/
}
.ZineArticle .ZineAbout .ZineSummary {
    padding-left:50px;
    text-align:left;
}
.ZineArticle .ZineBody {

}
.ZineSummary {
    padding:15px;
    font-style:italic;
}
.ZineDate {
    font-style:italic;
}
.ZineAuthor {
    color:#333;
}
.ZineBody pre {
    padding:10px;
    border:1px dashed #99c;
    background-color:#ddf;
}
.ZineArticle div.ZineImage {
    float:right;
    padding:20px;
    margin-left:10px;
    background-color:#ffffff;
}
.ZineArticle .ZineFooter {
    padding-top:10px;
    padding-bottom:15px;
    color:#999;
    font-style:italic;
    font-size:9pt;
}
.ZineArticle .ZineFooter table.ZineTools {
    margin-top:5px;
}
.ZineArticle .ZineAttachment {
    padding:10px;
    margin-top:10px;
    font-size:9pt;
    background-color:#ffffff; 
}
.ZineArticle .ZineTitle h1,h2,h3,h4 {
    font-size:14pt;
    margin:0px;
}
.ZineBody h1,h2,h3,h4 {
    margin-top:10px;
    margin-bottom:5px;
}
table.ZineImage {
    margin-bottom:10pt;
}
div.ZineImage table.ZineImage {
    margin-bottom:0pt;
}
.ZineFooter a {
    font-weight:normal;
    font-size:9pt;
}
.ZineQuote {
    margin-left:5px;
    margin-right:50px;
    margin-top:5px;
    margin-bottom:5px;
    padding-left:45pt;
    font-size:10pt;
    font-style:italic;
    display:block;
    background:url(quote.gif);
    background-repeat:no-repeat;
}

/*** 
 ***  INDEXES
 ***/

.ZineIndex {
    margin-top:15px;
}
.ZineItem {
/*    padding:10px;*/
    margin-bottom:20px;
    background-color:white;
    border:1px solid #ccc;
}
.ZineItem .ZineAbstract {
    font-size:9pt;
    font-style:italic;
}
a.ZineLink {
    text-decoration:underline;
}

.ZineItem .ZineHeader,.ZineItem .ZineAboutBody,.ZineItem .ZineFooter { 
    padding-left:10px; 
    padding-right:10px; 
}
.ZineItem .ZineSummaryIndex { 
    padding-left:10px; 
    padding-right:10px; 
    padding-bottom:10px; 
}
.ZineArchive .ZineItem {
    padding:0px;
    margin-bottom:2px;
    background-color:#eee;
    border:0px solid white;
}
.ZineItem .ZineArticle .ZineHeader {
    background-image:url(titlebg.png);
    background-repeat:x-repeat;
    border-bottom:1px solid #ccc;
}
.ZineComments .ZineItem {
/*    padding:10px;*/
    margin-bottom:20px;
    background-color:#eee;;
    border:0px solid #fff;
}

ul.ZineThread {
    margin:0px;
}

/* creates a sequence of buttons for paged indexes */
.ZinePagedIndex a {
    padding-left:4px; 
    padding-right:4px; 
    padding-top:2px; 
    padding-bottom:2px; 
    border:1px solid #ccf;
    font-size:9pt;
    color:#99c;
    font-weight:normal;
    text-decoration:none;
}
.ZinePagedIndex a.ZinePagedIndexCurrent {
    background-color:#eef;
    border:1px solid #99c;
}
.ZinePagedIndex a:hover {
    background-color:#eef;
    border:1px solid #99c;
}

table.ZineIndex td.ZineThumb {
    /* typically used for photoblog galleries */
    background-color:#ffffff;
    padding:20px;
}

/* table indexes are used in semithreaded and table indexes */
table.ZineIndex { 
        border:2px #666677 solid; 
        border-collapse:collapse; 
	margin-bottom:10pt;
        width:100%;
}
table.ZineIndex td { 
        border-top:1px #666677 dotted; 
        border-bottom:1px #666677 dotted; 
        border-left:1px #666677 solid; 
        border-right:1px #666677 solid; 
        margin:0px; 
        padding:5px; 
}
table.ZineIndex th { 
        border:1px #666677 solid; 
        margin:0px; 
        padding:5px; 
        background-color:#ccccdd;
}

ul.ZinePhotodirectory {
    list-style-type:none;
    margin:0px;
    padding:0px;
}
ul.ZinePhotodirectory li {
    float:left;
    width:300px;
    padding:0px 20px 20px 0px;
}
ul.ZinePhotodirectory li img {
    width:150px;
    margin:0px 20px 20px 0px;
}

/************ Photo Directory ************/

.ctrlpanel ul.ZinePhotodirectory img {
    max-width: 300px;
    width: 100%;
    float: none;
    margin: 0;
    display: block;
}
.ctrlpanel ul.ZinePhotodirectory h3 {
    font-size: 16px;
    font-weight: bold;
    display: inline-block;
    clear: both;
    background: none;
    padding: 0;
    margin: 10px 0 0;
}
.ctrlpanel ul.ZinePhotodirectory p {
    margin: 0;
    padding: 5px 0 10px;
}

.ctrlpanel ul.ZinePhotodirectory {
    list-style: none;
    padding: 0;
    margin: 0;
    display: -webkit-flex; /* Safari */
    -webkit-flex-wrap: wrap; /* Safari 6.1+ */
    flex-wrap: wrap;
    display: -webkit-box;      /* OLD - iOS 6-, Safari 3.1-6 */
    display: -moz-box;         /* OLD - Firefox 19- (buggy but mostly works) */
    display: -ms-flexbox;      /* TWEENER - IE 10 */
    display: -webkit-flex;     /* NEW - Chrome */
    display: flex;             /* NEW, Spec - Opera 12.1, Firefox 20+ */
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    font-size: 0;
    max-width: 1170px;
}
.ctrlpanel ul.ZinePhotodirectory::after {
  content: "";
  flex: auto;
}
.ctrlpanel ul.ZinePhotodirectory li {
    width: 33.333%;
    box-sizing: border-box;
    display: inline-block; /* Fallback */
    vertical-align: top;
    margin: 0;
    padding: 10px;
    font-size: 13px;
}

/*** 
 ***  COMMENTS
 ***/

.ZineComment {
    margin-bottom:5px;
}
.ZineComment .ZineHeader {
    padding:4px;
    background-color:#9999AA; 
    border:1px solid #666688; 
    font-weight:bold;
    font-size:11pt;
    display:block;
}
.ZineComment .ZineAboutBody {
    /* The background is used to simulate a 2-column table-like layout.
       A more elegant way to do this is to set display:table-cell for 
       .ZineAbout and .ZineBody, but that only works in recent Gecko
       browsers.  This alternative is more of a hack, but works in most
       recent browsers. It also gives an acceptable appearance if the
       background image fails to load.  */ 
    background: url(commentbg.gif) repeat-y 0% 0%;
    border-left:1px solid #668;
    border-right:1px solid #668;
}
.ZineComment .ZineAbout {
    padding:10px;
    float:left;
    width:80px;
    font-size:9pt;
    color:#666;
}
.ZineComment .ZineBody {
    padding:10px;
    margin-left:100px;
}
.ZineComment .ZineFooter {
    padding:4px;
    background-color:#ccd;
    border:1px solid #668; 
    font-size:9pt;
    display:block;
}
.ZineComment .ZineAttachment {
    padding:10px;
    margin-top:10px;
    font-size:9pt;
    display:block;
    background-color:#eeeeff; 
}

/*** 
 ***  TOOLBARS
 ***/

/* show tools in a small, grey font so they don't steal too much attention */
table.ZineTools td {
    text-align:center;
    width:30px;
}
table.ZineTools td a {
    font-size:9pt;
    font-weight:normal;
    color:#666;
    text-decoration:none;
}
table.ZineTools td a:hover {
    text-decoration:underline;
}
.ZineArticle table.ZineTools {
    border:1px dotted #aaa;
    background-color:#ddd;
    padding:4px;
}

/* kludge because table.ZineIndex td adds cell borders */
table.Report table.ZineTools td { border:0px solid white; }
table.ZineIndex table.ZineTools td { border:0px solid white; }


/*** 
 ***  ATTACHMENTS
 ***/

table.ZineAttachmentForm {
    /* put attachment upload fields in a box */
    background-color:#eee;
    border:1px solid #999;
    padding:10px;
    margin-top:5px;
    margin-bottom:5px;
}

div.ZineAttachment {
    height:125px;
}
.ZineAttachment table {
    /* lines up attachments left-to-right */
    float:left;
    padding-right:10px;
}
.ZineCaption {
    color:#666;
    font-style:italic;
    padding-bottom:10px;
}

/*** 
 ***  STATUS, MODERATION
 ***/

.ZineStatusIcon {
    float:right;
}
.ZineWarning {
    padding:15pt;
    border:1px dashed red;
    background-color:#faa;
    color:brown;
    font-weight:bold;
}