/*

xaverianweekly.ca  design styles

This document contains the overall structural styles for xaverianweekly.ca 
but excludes general typography, type styles are found in text.css.

Copyright 2009 - Chris Dinn/HotInk.net

*/
.container_16 { margin-top: 20px; border: 1px solid #D4D4D4; border-width: 1px; border-bottom-width: 0px; }
#nameplate { background-color: white; margin:0; border-bottom: 1px solid #D4D4D4; }
#nameplate img { padding: 5px; }

#navbar { margin: 0; padding: 5px; padding-right: 15px; border-bottom: 1px solid #D4D4D4; }
ol#categories, ol#subcategories {  list-style: none; float: left;}
ol#categories { padding: 5px 0px 0px 5px; margin-bottom: 0; }
ol#subcategories { margin:0; border-bottom: 1px solid #D4D4D4; padding: 5px 10px 5px 10px;}
ol#categories li, ol#subcategories li { display: inline; margin: 0; padding: 0.25em 1.15em 0.25em 0em; }
#search { margin: 0; text-align: right; float: right; width: 350px;}
#search input[type="text"] { border: 1px solid #D4D4D4; width: 52%; padding: 6px 3px; margin: 0 0.25em; }
#search label { vertical-align: middle;}

.info {  margin-bottom: 5px; }
.info>.section, .info>.date, .info>.comments { z-index: 2; position: relative; }
.info>.section, .info>.date { float: left; }
.info>.date { padding-right: 5px; }
div.info>div.byline { margin: 5px 0; }
.info>.section { padding-right: 5px; margin-left: 0.15em; }
div.comments img { position: relative; top: 3px; margin-right: 3px; }

/* Tab window
-------------------------------*/

.tab { cursor: pointer; }
.tab_window {  }

/* Teasers
-------------------------------*/
div.teasers hr { margin-left: 5px; }

div#teasers>div+div { padding-top: 10px; border-top: 1px solid #515151; }

div.media img { border: 1px solid #515151;}

div.teaser_10_tall, div.teaser_10, div.teaser_10_wide, div.teaser_4, div.teaser_6 { margin-bottom: 10px; }

div.teaser_10_tall h1, div.teaser_10_tall h2, div.teaser_10_tall .byline { margin-bottom: 15px; }
div.teaser_10_tall p { margin-bottom: 10px; }
div.teaser_10_tall .media { float: right; margin:0; margin-right: 10px;}
div.teaser_10_tall .media img { border: 1px solid #515151; }
div.teaser_10_tall .media small {display: block; float: right; position: relative; top: -9px; height: 9px; }
div.teaser_10_tall .media p { margin-top: 9px}

div.teaser_10 h1, div.teaser_10 h2, div.teaser_10 .byline { margin-bottom: 15px; }
div.teaser_10 p { margin-bottom: 10px; }

div.teaser_10_wide h1, div.teaser_10_wide h2, div.teaser_10_wide .byline { margin-bottom: 15px; }
div.teaser_10_wide>.grid_4, div.teaser_10_wide>.media { margin-left: 0; }
div.teaser_10_wide p { margin-bottom: 10px; }
div.teaser_10_wide .media { float: right; margin-right: 10px; }
div.teaser_10_wide .media img { border: 1px solid #515151; }
div.teaser_10_wide .media small {display: block; float: right; position: relative; top: -9px; height: 9px; }
div.teaser_10_wide .media p { margin-top: 9px}

div#sections { margin-bottom: 10px; margin-left: 0; margin-right: 0; }
div#sections .section h3 { padding-left: 0; margin-bottom: 5px; width: 100%; }
div#sections .section ol { float: left; list-style: none; padding: 0; }
div#sections .section ol li { margin: 5px 0; padding-top: 0; }

.article_list h1, ol#most_popular .byline { margin: 0; margin-top: 0.5em; }
.article_list { padding-left: 5px; margin-bottom: 10px; }
.article_list li { padding-top: 5px;}
.article_list .byline, .article_list .date { display: inline-block; }
.article_list .date { padding-right: 0.5em; border-right: 1px solid #D4D4D4; margin-right: 0.5em; }


/*--------------------------------------*/
#teasers { border-right: 1px solid #D4D4D4; padding-top: 10px; padding-right: 15px; }
#content { border-right: 1px solid #D4D4D4; padding-top: 10px; padding-right: 15px; }
.article { margin: 10px; }
#rightcolumn { margin: 0 -10px; }
#rightcolumn { margin-top: 1em; }
.widget { margin-left: 0; margin-right: 0; padding: 0 12px; }
.widget+.widget{ border-top: 1px solid #D4D4D4; margin-top: 5px; padding-top: 10px; }
.label_bar>h3 { float: left; margin: 0; padding: 0px 10px;}

.controls button { background: none; border: none; cursor: pointer; }
.controls button:hover { color: blue; }
.indicators button { margin: 0 -5px; font-size: 15px; }
.indicators { margin-left: -4px; margin-right: -4px; cursor: default; display: inline; position: relative; top: 1px;}
.indicators span { cursor: pointer; }
.indicators .current { color: #ccc;}

#latest_issue div+div { text-align: right; }
#latest_issue div+div h2, #latest_issue div+div p { padding: 5px; }
#latest_issue img { margin: 5px; margin-bottom: 0; border: 1px solid #D4D4D4; }

#featured_articles { overflow: hidden; }
#featured_articles .controls { float:right; padding: 0 0.25em; text-align: right; padding-right: 10px;}
#featured_articles li { margin:0; margin-bottom: 10px; }
#featured_articles li hr { margin-bottom: 10px; }
#featured_articles li h1, #featured_articles li p { margin-bottom: 10px; }
#featured_articles li p { width: 70%; }
#featured_articles .feature { min-height: 150px; padding: 5px; margin: 5px; }
#featured_articles .feature .info { }
#featured_articles .feature .media.right { float: right; margin-left: 10px; margin-right: 0; }
#featured_articles .feature .media.left { float: left; height: 100%; margin-left: 0; margin-right: 5px; }
#featured_articles .feature .media.left+h1+p { margin-left: 110px; }

ol#most_popular h1, ol#most_popular .byline { margin: 0; margin-top: 0.25em; }
ol#most_popular { padding-top: 5px; padding-left: 5px; margin-bottom: 10px; }
ol#most_popular li { padding-top: 5px;}
ol#most_popular .byline, ol#most_popular .date { display: inline-block; }
ol#most_popular .byline { padding-right: 0.5em; border-right: 1px solid #D4D4D4; margin-right: 0.5em; }

div#sections { border-top: 1px solid #D4D4D4; padding-left: 20px; margin-bottom: 0px; }
div#sections .section { padding-top: 10px; }
div#sections .section+.section { border-left: 1px solid #D4D4D4; padding-left: 9px; margin-left: 0; }
/* Article */

.article .byline { padding-right: 10px; border-right: 1px solid #D4D4D4; margin-right: 5px; }
.article .dateline, .article .byline { display: inline-block; margin-bottom: 10px; }

/*Footer*/

ul.pages { text-align: right; list-style:none; margin-bottom: 0px; }
ul.pages li { display: inline; }

#footer { margin:0; padding: 0px 10px; border-top: 1px solid #D4D4D4; }
#footer p {float:right; margin-bottom: 0px;}
#footer ul.pages { float: left; cursor: pointer; width: 70%; text-align: left; }
#footer ul.pages li { margin-left: 0; margin-right: 10px; }
#footer ul.pages li:hover { text-decoration: underline; }