/* Table of Contents */

/* SIZES: widths, margins
-------------------------------------------------------------- */

body {
  width: 100%;
}

#content,
#main,
#footer {
/***
  width: 1300px;
***/
  width: 1400px; /** needs to be larger now that we have a 'trending' list **/
  margin-left: auto;
  margin-right: auto;
}

#header .col-1,
#main .col-1 {
  width: 950px;
  margin-left: 0px;
  margin-right: 25px;
}

.item-info {
  width: 13%;
}

.item,
.col-1 .col-name {
  width: 100%;
}

.col-1 #header-middle,
.col-1 .col-name h3,
.col-1 .item-content {
  float: right;
  width: 85%;
}

.item-divider {
  float: right;
  width: 85%;
  letter-spacing: .13em;
  font-family: Helvetica, sans-serif;
  font-size: 18px;
  font-weight: bold;
  margin-top: 20px;
  margin-bottom: 20px;
}

#header .col-2,
#main .col-2 {
  float: left;
/***
  width: 300px;
***/
  width: 400px; /** needs to be larger now that we have a 'trending' list **/
}

#footer div {
  margin-left: 4%;
  margin-right: 4%;
}


/* POSITIONING: positions, floats, padding, borders, backgrounds 
-------------------------------------------------------------- */

#header,
#main,
#footer {
  float: left;
  clear: both;
}

/*** The template code will only generate a reference to the
     following item if the browser is Internet Exploder. ***/
#main #ie {
  position: relative;
  left:     30px;
}
/*** End of code for Internet Exploder ***/

#main,
#header {
  padding-bottom: 80px;
}

/*** The template code will only generate a reference to the
     following item if the browser is Internet Exploder. ***/
#header #ie {
  padding-bottom: 10px;
}
/*** End of code for Internet Exploder ***/

.col-1,
.col-2 {
  float: left;
}

.col-1 #header-middle {
  float: right;
}

#header .col-2 {
  float: left;
}

#logo,
.list,
#login {
  margin-top: 10px; /* space from top */
}

#tagline {
  margin-left: 41px;
}

#header h3 {
  margin: 0;
  padding: 0;
}

#main {
  position: absolute;
  top: 200px;
}

/* header > logo and tagline */

.item-content {
  margin: 0px;
  border: 0px;
}

.col-1 #header-middle {
  background-image: url('http://ofrecord.com/images/vertical-stripes.gif');
  background-repeat: no-repeat;
  background-position: left top;
}

#header #logo {
  float: left;
}

#logo h2 { /* of record logo */
  position: relative;
  left: -5px;
  padding-top: 5px;
  padding-bottom: 59px;
}

/* header > lists and login */

#header .col-1 .list {
  float: right;
  text-align: right;
}
 
#header .col-2 .list {
  float: left;
}

#header .col-2 .listtop {
  color: grey;
}

#header .col-2 .leftmargin {
  margin-left: 30px;
}

.list ul {
  list-style-type: none;
  margin: 0px;
  padding: 0px;
}

.list li {
  padding-top: 3px;
}

.list ul li, .list ul li a {
  font-weight: bold;
}

.all-link a:link {
  color: #8D0520;
  font-weight: bold;
}

/* column names */

.col-name {
  margin: 0px;
  padding: 0px;
}

.col-1 .col-name {
  float: left;
  clear: both;
}

.col-1 .col-name h3,
.item-content {
  float: right;
}

.col-name h3 {
  margin: 0px;
  padding-bottom: 10px;
}

.col-1 .col-name h3 {
  background-image: url('http://ofrecord.com/images/stripe-top.gif');
  background-repeat: repeat-x;
  background-position: bottom;
}

.col-2 .col-name h3 {
  background-image: url('http://ofrecord.com/images/stripe-top-col-featured.gif');
  background-repeat: repeat-x;
  background-position: bottom;
}

/* col-1 items */

.item-info {
  margin-left: 8px;
  margin-top: 25px;
  text-align: right;
  float: left;
}

.item-content {
  float: right;
}

#pages {
  text-align: right;
}

/* footer */

#main {
  margin-bottom: 20px;
}

#footer-border {
  float: left;
  clear: both;
  margin-top: 70px;
}

#footer div {
  float: left;
}

/* STYLES
---------------------- */

body {
  float: left;
  font-family: Gill Sans, Cambria, Helvetica Neue, Helvetica, sans-serif;
  font-size: 13px;
}

#header ul a,
#header ul a:link,
#header ul li {
  font-family: Helvetica Neue, Helvetica, sans-serif;
  color: #211E17;
  font-size: 12px;
  letter-spacing: .05em;
}

#header h3,
#header h3 a,
#header h3 a:visited {
  font-family: Gill Sans, Cambria, Helvetica Neue, Helvetica, sans-serif;
  font-size: 12px;
  font-weight: normal;
  letter-spacing: .05em;
}

.to-cat-page a {
  color: black;
  padding-top: 30px;
  padding-bottom: 30px;
  margin-left: 143px;
  padding-top: 12px;
  padding-left: 3px;
  padding-right: 5px;
  padding-left: 5px;
  font-size: 130%;
  letter-spacing: .2em;
  text-transform: lowercase;
  line-height: 23px;
}

.col-name h3 {
  font-size: 240%;
  font-family: Gill Sans, Cambria, Helvetica Neue, Helvetica, sans-serif;
  font-weight: normal;
}

.col-name a.all-briefs {
  color: black;
}

.col-name h3.cat-section {
  font-size: 240%;
  padding-top: 40px;
  font-family: Gill Sans, Cambria, Helvetica Neue, Helvetica, sans-serif;
  font-weight: normal;
}

.col-name {
  font-weight: normal;
}

.col-1 .col-name {
  text-align: right;
}

.col-2 .col-name {
  color: #8D0520; /* makes featured column name rose colored */
}

/* COL-1 ITEM INFO */

.item {
  float: left;
}

.item-info { /* the voting, category, and source group */
  /* spacing */
  float: left; 
  /* makes items align on right */
  text-align: right;
  /* fonts */
  font-family: Helvetica, sans-serif;
}

.the { 
  text-transform: lowercase; /* makes any 'the' the before category name lowercase */
}

div.category, .more-link {
  text-transform: uppercase;
  letter-spacing: .13em;
  font-family: Gill Sans;
  font-size: 12px;
  color: white;
}

.source {
  font-size: 77%;
  color: grey; /* color of from */
}

.item-info .category {
  text-transform: uppercase;
  letter-spacing: .13em;
  font-family: Helvetica, sans-serif;
  font-size: 12px;
  font-weight: bold;
}

.vote img {
  padding-right: 3px;
}

.edit {
  font-size: 85%;
  color: grey;
}

.edit a, .edit a:hover, .edit a:visited {
  color: black;
}


/* COL BRIEFS > ITEMS: title, subtitle, recommended, and edit
------------------------------------------------------------------- */

.item {
  float: left;
}

.item-content {
  float: left;
}

.item h1,
.item h2,
.item h3 {
  /* fonts */
  font-weight: normal;
}

.title, .title a, .title a:visited {
  margin-bottom: 0px;
  padding-bottom: 0px;
  /* fonts */
  font-size: 26px;
  line-height: 28px;
  /* colors */
  color: black;
}

.subtitle,
.subtitle a, 
.subtitle a:visited {
  margin-top: 3px;
  margin-bottom: 3px;
  /* fonts */
  font-size: 22px;
  line-height: 20px;
  /* colors */
  color: #5B5746;
}

.recommended-by,
.recommended-by a {
  margin-top: 0px;
  /* fonts */
  font-size: 12px;
  line-height: 15px;
  /* colors */
  color: #BDB9A8;
}

.item-content img {
  /* spacing, positioning, and border */
  margin-top: 8px;
  float: right;
  margin-left: 5px;
  border: solid #C6C6C6 1px;
}

.item .more {
  clear: both;
  margin-top: 0px;
  padding-bottom: 0px;
  margin-bottom: 0px;
  /* for reasons I don't understand, this is needed to make briefing box align exactly */
  border-bottom: solid #BFBFBF 2px;
  /* background */
  background-image: url('http://ofrecord.com/images/stripe-bottom.gif');
  background-repeat: repeat-x;
  background-position: bottom;
}



/* COL FEATURED > ROWS
------------------------------------------------------------------- */

.col-2 .title {
  margin-top: 10px;
  margin-bottom: 3px;
  margin-left: 10px;
  margin-right: 10px;
}

.col-2 .title a,
.col-2 .subtitle a {
  font-size: 90%;
}

.col-2 .subtitle {
  margin-bottom: 10px;
  margin-left: 10px;
  margin-right: 10px;
}

.darker, .lighter {
  margin-bottom: 5px; /* white space before rows */
}

.darker {
  background-color: #DFDAD9; /* darker background color */
}

.lighter {
  background-color: #EEECEB; /* lighter background color */
}

.col-2 .more {
  border-bottom: solid #D3A0AB 2px; /* for reasons I don't understand, this border is needed to make briefing box align exactly */
  /* background */
  background-image: url('http://ofrecord.com/images/stripe-bottom-col-featured.gif');
  background-repeat: repeat-x;
  background-position: bottom;
}

.col-2 .more-link {
  background-color: #A94358;
}

/* PAGATION: more pages
------------------------------------------------------------------- */

#pages img {
  border: none;
  float: none;
}

#pages {
  padding-top: 20px;
  padding-bottom: 80px; /* spacing before header */
  text-align: right;
}

#home {
  padding-left: 30px;
  padding-right: 30px;
}

/* FOOTER
------------------------------------------------------------------- */

.subscribers p {
  margin: 25px;
  color: grey;
  font-family: Georgia, sans-serif;
}

.subscribers {
  /* needed for space before footer if col-featured is the longest */
  margin-bottom: 30px;
}

div#footer-border {
  border-top: solid #C3C3C3 2px;
  padding-top: 3px;
  clear: both;
}

div#footer {
  border-top: solid #C3C3C3 1px;
}

#footer div {
  /* positions sections on one line */
  float: left;
}

#footer h4, #footer h4 a, #footer h4 a:visited {  /* section headers */
  font-weight: normal;
  font-size: 140%;
  padding-bottom: 0px;
  margin-bottom: 12px; /* space before lists of links */
  color: #4C4B4B;
}

#footer ul {
  list-style-type: none;
  margin: 0px;
  padding-top: 0px;
  padding-left: 0px;
  padding-right: 0px;
  /* space before bottom of browser */
  padding-bottom: 50px;
}

#footer ul li {
  font-size: 105%;
}

#footer li a {
  color: #5B5746;
}

/* SHARED: shared items between columns
------------------------------------------------------------------- */

.more-link {
  padding-left: 5px;
  padding-right: 3px;
  padding-top: 2px;
  padding-bottom: 2px;
}

/* CATEGORY COLORS
------------------------------------------------------------------- */

.articletext a, .articletext a:visited {
  text-decoration: none;
  border-bottom: 1px dotted;
}

.more a, .more a:visited, .more a:hover { /* makes briefing links white */
  color: white;
}

/* default - if there's no valid category class */

.col-1 .category, .col-1 .category a, .col-1 .category a:visited, .category a:hover {
  color: black;
}

.col-1 .more-link {
  background-color: black;
}

/* business */

.Business .articletext a, .Business .articletext a:visited,
.Business .section, .Business .section a, .Business .section a:visited,
.Business .category a, .Business .category a:visited, .Business .category, .Business .category-link a {
  color: #622F30;
}

.Business .firstitem {
  color:       #622F30;
  font-weight: bold;
}

.Business .more-link {
  background-color: #622F30;
}

/* politics */

.Politics .articletext a, .Politics .articletext a:visited,
.Politics .section, .Politics .category a, .Politics .category a:visited, .Politics .category, .Politics .category-link a {
  color: #5B6487;
}

.Politics .firstitem {
  color:       #5B6487;
  font-weight: bold;
}

.Politics .more-link {
  background-color: #5B6487;
}

/* technology */

.Technology .articletext a, .Technology .articletext a:visited,
.Technology .section, .Technology .category a, .Technology .category a:visited, .Technology .category, .Technology .category-link a {
  color: #56BBC5;
}

.Technology .firstitem {
  color:       #56BBC5;
  font-weight: bold;
}

.Technology .more-link {
  background-color: #56BBC5;
}

/* research */

.Research .articletext a, .Research .articletext a:visited,
.Research .section, .Research .category a, .Research .category a:visited, .Research .category, .Research .category-link a {
  color: #622F30;
}

.Research .firstitem {
  color:       #622F30;
  font-weight: bold;
}

.Research .more-link {
  background-color: #622F30;
}

/* culture  */

.Culture .articletext a, .Culture .articletext a:visited,
.Culture .section, .Culture .category a, .Culture .category a:visited, .Culture .category, .Culture .category-link a {
  color: #913152;
}

.Culture .firstitem {
  color:       #913152;
  font-weight: bold;
}

.Culture .more-link {
  background-color: #913152;
}

/* living  */

.Living .articletext a, .Living .articletext a:visited,
.Living .section, .Living .category a, .Living .category a:visited, .Living .category, .Living .category-link a {
  color: #CB9A81;
}

.Living .firstitem {
  color:       #CB9A81;
  font-weight: bold;
}

.Living .more-link {
  background-color: #CB9A81;
}

/* green */

.Green .articletext a, .Green .articletext a:visited,
.Green .section, .Green .category a, .Green .category a:visited, .Green .category, .Green .category-link a {
  color: #A4B437;
}

.Green .firstitem {
  color:       #A4B437;
  font-weight: bold;
}

.Green .more-link {
  background-color: #A4B437;
}