@import "common/reset.css";
@import "common/grid.css";
@import "common/type.css";

@import "type.css";
@import "widgets.css";
@import "forms.css";
@import "comments.css";
@import "inlines.css";


/*
 * Blues
 * ------------------------
 * Dark         :   #125a95
 * Regular      :   #4e9bda
 * Light        :   #97c9f2
 * Very light   :   #cbe4f8
 * 
 * Greys
 * ------------------------
 * Copy Black   :   #272d31
 * Grey2        :   #445057
 * Sub Grey     :   #697a85
 * Grey         :   #92a2ad
 * Rule Grey    :   #bac6cf
 * Grey6        :   #dae2e8
 * Off White    :   #ebeff2
 *
 * ------------------------
 * Red          :   #cb0000
 * Green        :   #68b000
 */
 

/* GRID (override)
-------------------------------------------------------------------------------- */
.block { width: 960px; }
 
  
/* LAYOUT
-------------------------------------------------------------------------------- */
body        { background-color: #92a2ad; }

#toolbar    { position: relative; background: #2a6a9f url(../images2/toolbar-bg.gif) repeat-x bottom left; z-index: 6; }
#header     { position: relative; background-color: #fff; z-index: 5; }
#primary    { position: relative; background-color: #fff; border-bottom: 20px solid #fff; z-index: 4; }
#secondary  { position: relative; background-color: #fff; z-index: 3; }
#footer     { position: relative; background-color: #92a2ad; z-index: 1; }

#toolbar .block, #header .block, #primary .block, #secondary .block, #tertiary .block, #footer .block { position: relative; margin-right: auto; margin-left: auto; }
#primary .block { background: url(../images2/rules/page-bg.gif) repeat-y; }
body.popup #primary .block { background: none; }

/* body.photos #primary .block { background-image: url(../images2/grid.gif); background-position: -10px 0; } */


/* TOOLBAR
-------------------------------------------------------------------------------- */
#toolbar { padding: 3px 0; }
#toolbar .block { position: relative; }
#toolbar_user { float: left; width: 200px; }
#toolbar_user p { float: left; margin: 0 10px 0 0; font-size: 11px; line-height: 23px; }
#toolbar_weather { position: absolute; top: -5px; left: 290px; padding-left: 100px; width: 50px; height: 55px; background: url(../images2/weather/sunny.png) no-repeat; }
#toolbar_search { float: right; }
#toolbar_search p { float: left; margin: 0 10px 0 0; }
#toolbar_search input { width: 130px; color: #697a85; }


/* HEADER
-------------------------------------------------------------------------------- */
#header .block { position: relative; padding-top: 38px; border-bottom: 1px solid #dae2e8; }
#header h1 { position: absolute; top: 14px; margin: 0; padding: 0; }
#header h1 a { display: block; padding-top: 50px; width: 270px; height: 0; background: url(../images2/headers/ljworld.com.gif) no-repeat; overflow: hidden; }

body.elections #header h1 a { background: url(../images2/headers/ljworld.elections.gif) no-repeat; }


/* NAVIGATION
-------------------------------------------------------------------------------- */
#nav { float: right; list-style: none; font-size: 13px; }
#nav li a { padding: 3px 10px 3px 10px; font-weight: bold; }
body.marketplace #nav li.marketplace a, body.coupons #nav li.coupons a { background: #fff; color: #697a85; }

#altnav { position: absolute; top: 17px; right: 0; list-style: none; font-size: 12px; }
#altnav li a { padding: 2px 10px; color: #4e9bda; }

/* Sub navigation */
body.news #nav li.news,
body.weather #nav li.news,
body.sports #nav li.sports,
body.business #nav li.business,
body.arts #nav li.arts,
body.opinion #nav li.opinion,
body.religion #nav li.faith,
body.photos #nav li.photos,
body.marketplace #nav li.marketplace {
  background: #dae2e8 url(../images2/nav/left_on.gif) top left no-repeat; 
}

body.news #nav li.news a,
body.weather #nav li.news a,
body.sports #nav li.sports a,
body.business #nav li.business a,
body.arts #nav li.arts a,
body.opinion #nav li.opinion a,
body.religion #nav li.faith a,
body.photos #nav li.photos a,
body.marketplace #nav li.marketplace a {
  color: #697a85;
  background: url(../images2/nav/right_on.gif) top right no-repeat; 
}

#sub_navigation { float: right; width: 950px; padding: 0 5px; background: url(../images2/nav-bg.jpg) repeat-y; border-top: 1px solid #dae2e8; }
#sub_navigation ul { float: right; list-style: none; font-size: 12px; }
#sub_navigation li a { padding: 3px 5px; }
#sub_navigation li a:hover { color: #cb0000; }
#sub_navigation:after { content:  "."; display: block; height: 0; clear: both; visibility: hidden; } /* Clear fix */
#sub_navigation { zoom: 1; } /* IE */


/* FOOTER
-------------------------------------------------------------------------------- */
#footer dl { margin: 20px 0; font-size: 12px; line-height: 22px; }
#footer dl dt { float: left; width: 100px; font-weight: bold; color: #445057; clear: left; }
#footer dl dd { color: #445057; }
#footer dl dd a { color: #445057; }


/* PRIMARY / SECONDARY
-------------------------------------------------------------------------------- */
#primary .content, #secondary .content { float: left; width: 650px; }
#primary .rail, #secondary .rail { float: left; padding-top: 5px; padding-left: 10px; width: 280px; }
#primary .rail { min-height: 700px; background: url(../images2/rail-bg.jpg) no-repeat; }
#primary .rail .ad, #secondary .rail .ad { margin-left: -5px; }


/* SECTIONS
-------------------------------------------------------------------------------- */
#section-heading { padding-top: 10px; background: #fff; text-align: center; }
#section-body { padding-top: 10px; }
#section-body .rail { float: right; margin: 0 0 20px 20px; padding: 9px 10px 10px 10px; width: 220px; min-height: 0; background: url(../images2/rules/vertical.gif) repeat-y; }


/* MISC
-------------------------------------------------------------------------------- */
.content { margin: 0 0 20px 0; }
.hidden { display: none; }
.top-rule { padding-top: 10px; border-top: 1px solid #bac6cf; }
.bottom-rule { padding-bottom: 10px; border-bottom: 1px solid #bac6cf; }

#page-header { position: relative; padding-bottom: 10px; margin-bottom: 10px; border-bottom: 1px solid #bac6cf; }
#page-header #story-lead { margin: 10px 0; }

#story-body { position: relative; }


/* LEAD STORIES
   Defines lead story layout for homepage.
-------------------------------------------------------------------------------- */
#lead-story .header { margin: 0; font-size: 22px; line-height: 24px; }
#lead-story .tease { margin: 5px 0; font-size: 14px; }
#lead-story .tease a { color: #272d31; }
#lead-story .tease a:hover { text-decoration: none; }

body.home .lead-list { clear: both; }
body.home .lead-list .story { float: left; margin: 10px 10px 0 0; width: 150px; }
body.home .lead-list .story .tease-photo { display: block; width: 150px; height: 90px; background: #272d31; }
body.home .lead-list .story .section { margin: 5px 0 0 0; font-size: 12px; }
body.home .lead-list .story .section a { color: #cb0000; }
body.home .lead-list .story .header { margin: 0; font-size: 13px; line-height: 16px; }
body.home .lead-list .story .header a { color: #125a95; }


/* PHOTO GALLERIES
   Defines gallery list and slide show teases.
-------------------------------------------------------------------------------- */
.slideshow-banner { margin: 0 20px 18px 0; padding: 9px 0; background: #272d31 url(../images2/icons/play-dark.gif) no-repeat 10px 50%; }
.slideshow-banner .play { padding: 0 0 3px 50px; }
.slideshow-banner .play a { color: #fff; }
.slideshow-banner p { margin: 0; padding-left: 50px; font-size: 12px; line-height: 16px; color: #92a2ad; }


/* PHOTO DETAIL
   Defines previous / next and captions.
-------------------------------------------------------------------------------- */
#prev-next { margin: 10px 0; }
#prev-next p { float: left; margin: 0 10px 0 0; width: 75px; height: 90px; font-size: 12px; line-height: 16px; text-align: center; color: #697a85; }

#caption { padding: 7px 0 0 0; }
#caption .title { font-size: 14px; line-height: 18px; }
#caption .caption { font-size: 12px; line-height: 16px; }


/* PREVIOUS NEXT
   Navigation element used for stepping through a photo gallery.
-------------------------------------------------------------------------------- */
div.previous-next { margin-bottom: 20px; }
div.previous-next div.previous, div.previous-next div.next { float: left; }
div.previous-next p { font-size: 11px; line-height: 15px; color: #697a85; clear: both; }
div.previous-next div.previous p { text-align: left; }
div.previous-next div.next p { text-align: right; }

div.previous-next div.previous a, div.previous-next div.next a { display: block; float: left; }
div.previous-next div.previous a img, div.previous-next div.next a img { float: left; display: block; padding: 5px; background: #fff; border: 1px solid #bac6cf; }
div.previous-next div.previous a:hover img,
div.previous-next div.next a:hover img { background: #dae2e8; }
div.previous-next div p.empty { margin: 0; padding: 30px 10px 0 10px; width: 85px; height: 75px; background: #dae2e8; border: 1px solid #bac6cf; text-align: center; }
div.previous-next div.previous { margin-right: 10px; }

div.previous-next:after { content:  "."; display: block; height: 0; clear: both; visibility: hidden; } /* Clear fix */
div.previous-next { zoom: 1; } /* IE fix */


/* AUDIO PLAYER
-------------------------------------------------------------------------------- */
.audioplayer { margin-bottom: 10px; padding-top: 10px; padding-left: 10px; width: 210px; background: #dae2e8 url(../images2/audioplayer-top.gif) no-repeat; }
.audioplayer p { margin-right: 10px; margin-bottom: 0; font-size: 11px; line-height: 15px; }
.audioplayer .foot { margin-left: -10px; width: 220px; height: 10px; background: #dae2e8 url(../images2/audioplayer-bottom.gif) bottom left no-repeat; }
.audioplayer-feed { margin-top: -5px; margin-right: 0 !important; padding-left: 18px; padding-bottom: 3px; background: url(../images2/icons/feed.gif) no-repeat 0 3px; border-bottom: 1px solid #dae2e8; font-size: 11px !important; }
.audioplayer-feed a { color: #445057; }