/**
 * fiveonfivemag.com main site style sheet.
 *
 * @package    fiveonfive
 * @subpackage UI
 * @copyright  Copyright 2009 Spenlen Media, Inc. (http://spenlen.com)
 * @version    $Id$
 */


/**** Global Rules ****/

/** Page Structure **/

HTML, BODY, H1, H2, H3, H4, H5, H6, HR, DIV, P, PRE, UL, OL, LI, BLOCKQUOTE, FORM, FIELDSET, LEGEND, TABLE, TR, TH, TD, DL, DT, DD {
  margin: 0;
  padding: 0;
}

HTML {
  background: #dcdbd8 url('../images/backgrounds/page.jpg') center top repeat-y;
  height: 100%;
}

BODY {
  padding: 8px 0;
  font: normal normal normal 0.8em/1.4em Helvetica, Arial, sans-serif;
  color: #333;
}

/** Headings **/

H1, H2, H3, H4, H5, H6 {
  margin: 0 0 0.7em 0;
  font-size: 1em;
  font-weight: normal;
  text-transform: lowercase;
}

H1 {
  margin-left: -10px;
}
H1, H2 {
  margin-right: 1em;
  font-size: 1.2em;
  letter-spacing: 0.05em;
  line-height: 1.2em;
  color: #000;
}
H1 SPAN, H2 SPAN {
  padding: 6px 1.5em 16px 15px;
  background-image: url('../images/backgrounds/title_orange.png');
  background-position: right bottom;
  background-repeat: no-repeat;
  color: #fff;
  display: inline-block;
  min-width: 8em;
}

H3, H4 {
  font-size: 1.2em;
  font-weight: bold;
  letter-spacing: 0.05em;
  line-height: 1.4em;
  color: #a2511c;
}
H4 {
  font-size: 1.1em;
}

/** Tables **/

TABLE {
  border-collapse: collapse;
  border-spacing: 0;
  background: none;
}

TH, TD {
  font-style: normal;
  font-weight: normal;
  text-align: left;
}

COL.sorted {
  background: #f0f0fa;
}

TR.odd, DIV.odd {
  background: #fff;
}
TR.even, DIV.even {
  background: #f6f6fa;
}

TABLE.collapsed, TBODY.collapsed {
  display: none;
}

/** Paragraphs and Other Block-Level Elements **/

P {
  margin-bottom: 1em;
  line-height: 1.5em;
}

OL, UL {
  margin: 1em 1em 1em 2em;
  list-style: none;
}

UL.bullets, .markdown UL {
  list-style-type: disc;
}

LI {
  margin-bottom: 1em;
}

DL {
  margin: 1em 0;
}

BLOCKQUOTE {
  margin: 1em 0;
  padding: 0 1em;
}

BR.clear {
  clear: both;
}

HR {
  margin: 1em 0 1em 0;
  border: none;
  border-top: 1px solid #ccc;
}

HR.sectionBreak {
  margin: 2em 0 2em 0;
}

HR.separator {
  border-right: none;
  border-bottom: none;
  border-left: none;
}

/** Anchors (Hyperlinks) **/

A, A:link, A:visited {
  font-weight: bold;
  color: #616161;
  text-decoration: underline;
}
A:active, A:hover {
  color: #49479d;
}

A.readMore {
  font-size: 0.85em;
}

/** Form Elements **/

INPUT, TEXTAREA, SELECT, BUTTON {
  font: normal normal normal 1em Helvetica, Arial, sans-serif;
  color: #333;
}
INPUT[type="text"], INPUT[type="password"], TEXTAREA {
  padding: 0.5em;
  background: #fff;
  border: 1px solid #a3d063;
}

INPUT.fullWidth, TEXTAREA.fullWidth {
  width: 100%;
  max-width: 50em;
}

P.formButtons {
  margin: 0.5em 0;
}

BUTTON {
  margin: 0 5px 0 0;
  padding: 0.35em 0.5em;
  background: #a3d063;
  border: none;
  font-weight: bold;
  text-transform: uppercase;
  color: #fff;
  cursor: pointer;
}
BUTTON:active {
  position: relative;
  top: 1px;
  left: 1px;
}

TABLE.form {
  margin: 1em 0;
}
TABLE.form.fullWidth {
  width: 92%;
}
TABLE.form TH {
  padding: 0.3em 0.5em 0.3em 0;
  text-align: right;
}
TABLE.form TD {
  padding: 0.3em 0;
}

LABEL {
  color: #333;
}
LABEL.requiredField {
  color: #81bc10;
}
.disabled LABEL.requiredField {
  color: #333;
}

.promptText, INPUT[type="text"].promptText, INPUT[type="password"].promptText, TEXTAREA.promptText {
  color: #b3b3b3;
}

.validationError {
  padding: 5px;
  border-left: 3px double #d40000;
}

.validationError INPUT, .validationError TEXTAREA {
  outline-color: #d45555;
}
.validationErrorText {
  font-size: 0.85em;
  font-weight: bold;
  color: #d40000;
}

.fieldPrompt {
  font-style: italic;
  font-size: 0.85em;
  color: #999;
}

DIV.documentation P, P.documentation {
  color: #999;
  font-size: 0.85em;
}

P.recaptchaDocs {
  margin: 1em 0 0.5em 0;
  font-size: 0.85em;
  font-style: italic;
}


/** Images and Other Inline Elements **/

IMG {
  border: none;
}

ACRONYM, ABBR {
  text-decoration: none;
}
EM {
  font-style: italic;
}
STRONG {
  font-size: 1.1em;
  font-weight: bold;
  letter-spacing: 0.05em;
  line-height: 1.4em;
  color: #a2511c;
}


/**** Site Layout ****/

/** Page Frame **/

#pageFrame {
  margin: 0 5%;
  padding: 10px;
  background: #fafafa;
/*  max-width: 1200px;*/
/*  min-width: 600px;*/
  position: relative;
}

#pageFrame .frameShadowTopLeft, #pageFrame .frameShadowTop, #pageFrame .frameShadowTopRight,
#pageFrame .frameShadowLeft, #pageFrame .frameShadowRight,
#pageFrame .frameShadowBottomLeft, #pageFrame .frameShadowBottom, #pageFrame .frameShadowBottomRight {
  display: block;
  position: absolute;
  z-index: 1;
}
#pageFrame .frameShadowTopLeft, #pageFrame .frameShadowTopRight,
#pageFrame .frameShadowBottomLeft, #pageFrame .frameShadowBottomRight {
  width: 10px;
  height: 10px;
  z-index: 2;
}
#pageFrame .frameShadowTop {
  background: url('../images/backgrounds/frame_top.jpg') left top repeat-x;
  height: 10px;
  top: 0;
  left: 0;
  right: 0;
}
#pageFrame .frameShadowTopLeft {
  background: url('../images/backgrounds/frame_top_left.jpg') left top no-repeat;
  top: 0;
  left: 0;
}
#pageFrame .frameShadowTopRight {
  background: url('../images/backgrounds/frame_top_right.jpg') right top no-repeat;
  top: 0;
  right: 0;
}
#pageFrame .frameShadowLeft, #pageFrame .frameShadowRight {
  width: 10px;
  top: 0;
  bottom: 0;
}
#pageFrame .frameShadowLeft {
  background: url('../images/backgrounds/frame_left.jpg') right top repeat-y;
  left: 0;
}
#pageFrame .frameShadowRight {
  background: url('../images/backgrounds/frame_right.jpg') left top repeat-y;
  right: 0;
}
#pageFrame .frameShadowBottom {
  background: url('../images/backgrounds/frame_bottom.jpg') left bottom repeat-x;
  height: 10px;
  left: 0;
  right: 0;
  bottom: 0;
}
#pageFrame .frameShadowBottomLeft {
  background: url('../images/backgrounds/frame_bottom_left.jpg') left bottom no-repeat;
  left: 0;
  bottom: 0;
}
#pageFrame .frameShadowBottomRight {
  background: url('../images/backgrounds/frame_bottom_right.jpg') right bottom no-repeat;
  right: 0;
  bottom: 0;
}


/** Page Header **/

#pageHeader {
  margin: 0 0 15px 0;
  overflow: hidden;
}

P.homeLink {
  margin: 0;
}
P.homeLink A {
  margin: 0 15px 0 0;
  background: url('../images/logo_large.jpg') center center no-repeat;
  text-indent: -1000em;
  display: block;
  width: 242px;
  height: 6em;
  float: left;
}

P.tagline {
  margin: 0 85px 0.3em 260px;
  font-size: 0.9em;
  text-transform: uppercase;
  color: #49479d;
}

#mainNav {
  margin-left: 257px;
}
#mainNav TABLE {
  width: 100%;
}
#mainNav TD {
  border-left: 2px solid #fafafa;
}
#mainNav A {
  padding: 1.8em 0.3em 0.7em 0.3em;
  background: #a3d063;
  font-size: 1.2em;
  text-align: center;
  text-transform: lowercase;
  text-decoration: none;
  color: #fff;
  display: block;
}
#mainNav A:hover, #mainNav A.current {
  background: #49479d;
}

#socialNetLinks {
  margin: 0;
  position: absolute;
  top: 7px;
  right: 15px;
  z-index: 10;
}
#socialNetLinks LI {
  margin: 0;
  padding: 0 0 0 5px;
  float: left;
}
#socialNetLinks A {
  background-position: left top;
  background-repeat: no-repeat;
  text-indent: -1000em;
  text-decoration: none;
  display: block;
  width: 20px;
  height: 20px;
}
#socialNetLinks A.facebook {
  background-image: url('../images/icons/social_net_facebook.gif');
}
#socialNetLinks A.twitter {
  background-image: url('../images/icons/social_net_twitter.gif');
}
#socialNetLinks A.rss {
  background-image: url('../images/icons/social_net_rss.gif');
}


/** Page Content Area **/

#pageContentFrame {
  overflow: hidden;
}

#pageContent, #pageSidebar {
  z-index: 10;
}
#pageContent, BODY.dashboard.preview #pageContent {
  padding: 0 10px;
  background: url('../images/backgrounds/content_orange.jpg') right top no-repeat;
  width: 62%;
  min-height: 300px;
  float: left;
}
#pageSidebar {
  padding-bottom: 50px;
  width: 33.5%;
  float: right;
}

DIV.siteSearch {
  margin: 0 0 20px 0;
  padding: 15px;
  background: url('../images/backgrounds/content_purple.jpg') right top no-repeat;
  border: 1px solid #e8e6e3;
}
DIV.siteSearch INPUT[type="text"], DIV.siteSearch INPUT[type="password"], DIV.siteSearch TEXTAREA {
  border-color: #ebcbf0;
}
DIV.siteSearch BUTTON {
  background: #b055cd;
}

DIV.sidebarNews {
  margin: 0 0 20px 0;
  overflow: hidden;
}
DIV.sidebarNews H2 A {
  font-weight: normal;
}
DIV.sidebarNews H2 SPAN {
  background-image: url('../images/backgrounds/title_blue.png');
}
DIV.sidebarNews UL {
  margin: 0;
}
DIV.sidebarNews LI {
  margin: 1em 0;
  clear: left;
}
DIV.sidebarNews A.newsLink {
  margin: 0 0 1em 0;
  background-position: left top;
  background-repeat: no-repeat;
  text-indent: -1000em;
  display: block;
  width: 66px;
  height: 66px;
  float: left;
}
DIV.sidebarNews DIV.newsContent {
  margin-left: 74px;
}
DIV.sidebarNews H3, DIV.sidebarNews P {
  display: inline;
}
DIV.sidebarNews H3 {
  margin-right: 0.3em;
  font-size: 1em;
}
DIV.sidebarNews H3 A {
  color: #0f90ac;
  text-decoration: none;
}
DIV.sidebarNews H3 A:hover {
  color: #333;
  text-decoration: underline;
}
DIV.sidebarNews P.moreLink {
  margin: 0 10px 0 0;
  font-size: 0.85em;
  text-align: right;
  display: block;
}

DIV.sidebarMailingList {
  padding: 5px;
  background: url('../images/backgrounds/content_green.jpg') right top no-repeat;  
}
DIV.sidebarMailingList H2 {
  margin-left: -5px;
}
DIV.sidebarMailingList H2 SPAN {
  background-image: url('../images/backgrounds/title_green.png');
}

BODY.recipes DIV.blogAbstract DIV.markdown P:first-child IMG {
  margin-top: -4em;
}
BODY.recipes.blogpost #pageContent DIV.markdown H3 {
  margin-top: 2em;
}
P.recipeContact {
  margin-top: 3em;
  font-size: 0.9em;
  color: #666;
}


/* Contributors Pages */

UL.contributorLinks {
  margin: 1em 0;
  overflow: hidden;
}
UL.contributorLinks LI {
  margin: 0;
  float: left;
}
UL.contributorLinks LI A {
  margin-right: 2px;
  background-position: center center;
  background-repeat: no-repeat;
  text-indent: -1000em;
  display: block;
  width: 42px;
  height: 28px;
  float: left;
}
UL.contributorLinks LI A:hover {
  opacity: 0.7;
}

DIV.contributorContent {
  margin: 1.5em 0 0 0;
  padding: 5px 10px 0 240px;
  background-position: left top;
  background-repeat: no-repeat;
  min-height: 300px;
}

DIV.contributorContent H1 {
  margin-left: 0;
  margin-right: 0;
  font-weight: bold;
  line-height: 1.4em;
}
DIV.contributorContent H1 SPAN {
  padding: 0;
  background: none;
  color: #a2511c;
  display: inline;
  min-width: auto;
}

DIV.contributorFooter {
  margin-top: 5em;
  font-size: 0.9em;
}


/* Issue Details */

DIV.issueBlock {
  margin: 0.5em 1em 0.5em 0;
  overflow: hidden;
}
A.issueCover {
  background-position: left top;
  background-repeat: no-repeat;
  text-indent: -1000em;
  display: block;
  width: 210px;
  height: 273px;
  float: left;
}
DIV.issueDetails {
  margin-left: 225px;
}


/* Feature Blocks */

DIV.featureBlock {
  margin: 2em -10px 0 -10px;
  padding: 10px 320px 10px 20px;
  background-color: #edeae5;
  background-position: right top;
  background-repeat: no-repeat;
  height: 318px;
  position: relative;
}
DIV.featureBlock SPAN.texture {
  background: url('../images/backgrounds/feature_overlay.png') left top no-repeat;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}
DIV.featureContent {
  height: 290px;
  overflow: hidden;
  z-index: 10;
}
DIV.featureContent H3 {
  font-size: 1.4em;
  text-transform: lowercase;
  color: #a034c3;
}
DIV.featureContent P.readMore {
  margin: 0;
  position: absolute;
  left: 20px;
  bottom: 10px;
}
DIV.featureContent P.readMore A {
  color: #a034c3;
  text-decoration: none;
}
DIV.featureContent P.readMore A:hover {
  color: #333;
  text-decoration: underline;
}


/* Blog Pages */

UL.blogPageLinks {
  margin: 2em 2em 2em 0;
  font-size: 0.8em;
  color: #999;
}
UL.blogPageLinks LI {
  margin: 0.2em;
  display: inline;
}
UL.blogPageLinks A {
  color: #999;
}
UL.blogPageLinks A.current {
  color: #616161;
}
UL.blogPageLinks A:hover {
  color: #49479d;
}

DIV.blogAbstract {
  padding: 0.7em 0 0.35em 0;
  border-bottom: 1px solid #ebebeb;
  overflow: hidden;
}

DIV.blogAbstract H2 A {
  color: #a2511c;
  text-decoration: none;
}
DIV.blogAbstract H2 A:hover {
  color: #616161;
  text-decoration: underline;
}

P.blogByLine {
  margin: -0.7em 0 1.5em 0;
  font-size: 0.9em;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #666;
}

DIV.blogNavigation {
  margin: 2em 0 0 0;
}
DIV.blogNavigation P.postLink {
  margin-bottom: 0.2em;
  font-size: 0.85em;
  color: #999;
}
DIV.blogNavigation P.postLink A {
  color: #999;
}
DIV.blogNavigation P.postLink A:hover {
  color: #49479d;
}

P.blogFeedLink {
  margin: 2em 0 2em 2em;
  font-size: 0.85em;
  color: #999;
  float: right;
}
DIV.blogNavigation P.blogFeedLink {
  margin: 0 0 0 2em;
}
P.blogFeedLink A {
  padding: 4px 0 4px 20px;
  background: url('../images/icons/content_feed.gif') left 45% no-repeat;
  color: #999;
}
P.blogFeedLink A:hover {
  color: #49479d;
}


/* Dashboard */

BODY.dashboard #pageContent {
  padding: 0 1em 1em 1em;
  background: none;
  width: auto;
  float: none;
}

UL.dashboardNavigation {
  margin: 0 0 1em 0;
  text-align: right;
}
UL.dashboardNavigation LI {
  margin: 0 1em 0 1em;
  display: inline;
}
UL.dashboardNavigation A, UL.dashboardNavigation A:link, UL.dashboardNavigation A:visited {
  color: #999;
}
UL.dashboardNavigation A.current {
  color: #000;
}


/* Markdown */

.markdown UL.noBullets {
  list-style: none;
}

.markdown OL {
  list-style: decimal;
}

.markdown IMG.left {
  padding-right: 1em;
  padding-bottom: 1em;
  float: left;
  clear: left;
}
.markdown IMG.center {
  margin-left: auto;
  margin-right: auto;
  display: block;
  clear: both;
}
.markdown IMG.right {
  padding-left: 1em;
  padding-bottom: 1em;
  float: right;
  clear: right;
}




TABLE.recordDetail {
  margin: 1em 0;
}
TABLE.recordDetail TH {
  padding: 0.5em 1em 0.5em 0;
  font-size: 0.9em;
  color: #999;
  text-align: right;
  vertical-align: baseline;
  width: 20%;
}
TABLE.recordDetail TD {
  padding: 0.5em 0;
  vertical-align: baseline;
}


/* General Classes */

.alignLeft {
  text-align: left;
}

.alignCenter {
  text-align: center;
}

.alignRight {
  text-align: right;
}

.floatLeft {
  padding-right: 1em;
  padding-bottom: 1em;
  float: left;
}

.floatRight {
  padding-left: 1em;
  padding-bottom: 1em;
  float: right;
}

.noWrap {
  white-space: nowrap;
}

.hidden {
  visibility: hidden;
}
.removed {
  display: none;
}


.accessoryText {
  font-size: 0.85em;
}

.captionText {
  font-size: 0.8em;
  font-family: "Times New Roman", serif;
  font-style: italic;
  color: #999;
  text-align: right;
}


P.previewLink, P.removeLink {
  margin: 2em 0 1em 0;
  font-size: 0.8em;
}
P.previewLink A {
  color: #666;
  text-decoration: underline;
}
P.previewLink A:hover {
  color: #ccc;
}


#flashMessageContainer {
  margin-left: -0.7em;
  max-width: 30em;
  overflow: hidden;
}

#flashMessage {
  padding: 0.7em;
  margin-bottom: 1.5em;
  background-color: #ffffda;
  border-top: 1px solid #f2f2f2;
  border-right: 1px solid #d9d9d9;
  border-bottom: 1px solid #d9d9d9;
  border-left: 1px solid #f2f2f2;
  cursor: pointer;
}

/* Ajax Autocompleter */

DIV.searchResults {
  border-right: 1px solid #1a1a1a;
  border-bottom: 1px solid #1a1a1a;
  background: #0d0d0d;
  position: absolute;
  z-index: 1000;
}
DIV.searchResults UL {
  margin: 0;
}
DIV.searchResults LI {
  margin: 0;
  padding: 0.3em 0.5em;
  color: #ccc;
  display: block;
  cursor: pointer;
}
DIV.searchResults LI.selected {
  background: #7a4b5f;
}
DIV.searchResults LI.message {
  margin-top: 0.5em;
}
DIV.searchResults LI SPAN.informal {
  color: #999;
  font-style: italic;
}


/* Record Set Table */

DIV.recordSet {
  margin: 0 0 1.5em -0.7em;
  overflow: auto;
}

DIV.recordSet TABLE {
  margin-left: -0.026em; /* To prevent unnecessary horizontal scroll bars in Firefox. */
  width: 100%;
}

DIV.recordSet TH {
  padding: 0.5em 0.7em;
  background: #a3d063;
  font-size: 0.9em;
  color: #fff;
}

DIV.recordSet TH .sortLabel {
  margin-right: -0.7em;
  padding-right: 18px;
  background-position: right center;
  background-repeat: no-repeat;
  min-height: 16px;
  display: block;
}
DIV.recordSet TH.alignCenter .sortLabel {
  margin-left: -0.7em;
  padding-left: 9px;
  padding-right: 9px;
}
DIV.recordSet TH.sortable {
  cursor: pointer;
}
DIV.recordSet TH.sortable .sortLabel {
  background-image: url('../images/table_sortable.png');
}
DIV.recordSet TH.sortable.forwardSort.sorted .sortLabel {
  background-image: url('../images/table_sort_ascending.png');
}
DIV.recordSet TH.sortable.reverseSort.sorted .sortLabel {
  background-image: url('../images/table_sort_descending.png');
}

DIV.recordSet TBODY {
  vertical-align: baseline;
}

DIV.recordSet TD {
  padding: 0.4em 0.7em;
  border-left: 1px solid #d8d8d8;
}
DIV.recordSet TD:first-child {
  border-left: none;
}

DIV.recordSet TD.urlColumn DIV {
  max-width: 22em;
  white-space: nowrap;
  overflow: hidden;
}
DIV.recordSet TD.urlColumn.wide DIV {
  max-width: 40em;
}

DIV.recordSet .supplemental {
  font-size: 0.8em;
  color: #999;
}

DIV.recordSet TFOOT TR {
  background: #999;
}
DIV.recordSet TFOOT TD {
  border-left: none;
}


/** Ads **/

#bannerAd {
  margin: 10px auto;
  width: 728px;
}
#bannerAd A {
  background-position: left top;
  background-repeat: no-repeat;
  text-indent: -1000em;
  text-decoration: none;
  display: block;
  width: 728px;
  height: 90px;
}


/** Page Footer **/

P.footerTagline {
  margin: -50px 0 0 0;
  padding: 130px 120px 7px 0;
  background: url('../images/wftda_logo.jpg') right bottom no-repeat;
  text-align: right;
  z-index: 5;
}

#pageFooter {
  margin: 0 7%;
  padding: 8px 0;
  font-family: "Times New Roman", serif;
  text-transform: lowercase;
  color: #857375;
}

#footerLinks {
  margin: 0;
  float: right;
}
#footerLinks LI {
  margin: 0 0 0 1em;
  display: inline;
}

#pageFooter A {
  color: #5d5448;
  text-decoration: none;
}
#pageFooter A.credit {
  font-weight: normal;
}
#pageFooter A:hover {
  text-decoration: underline;
}