/* This is the style sheet for Suzanne Sole's suzannesole.com website */


/* =========================================================================== */

/* First, the Uberstyles for the whole site */

html, body {
  height: 100%;
  margin: 0px;
  padding: 0px;
  border: none;
  background-color: #000000;
  background-image: none;
  color: #ffffff;
  font-family: Zurich, Zurich BT, Eras Demi, Univers, Arial, Helvetica, sans-serif;
  font-weight: regular;
  font-style: normal;
  text-decoration: none;
  text-transform: none;
  font-variant: normal;
  font-size: 100%;
  line-height: 125%;
}


/* =========================================================================== */

/* Ensure that tables/TDs don't muck up the styles */

table, table td {
  background-color: transparent;
  color: #ffffff;
  font-family: Zurich, Zurich BT, Eras Demi, Univers, Arial, Helvetica, sans-serif;
  font-weight: regular;
  font-style: normal;
  text-decoration: none;
  text-transform: none;
  font-variant: normal;
  font-size: 100%;
  line-height: 125%;
}

p {
  background-color: transparent;
  color: inherit;
  font-family: inherit;
  font-weight: inherit;
  font-style: inherit;
  text-decoration: inherit;
  text-transform: inherit;
  font-variant: inherit;
  font-size: inherit;
  line-height: inherit;
}

/* =========================================================================== */

/* General styling */

/* Anchor links are not underlined, and are alternate colored */
/* Hovering over them alters color */
a {
  text-decoration: none;
  color: #cda367;
  /* old color #cd794b */
  font-weight: bold;
}

a:hover {
  color: #6e3b1f;
}

/* Images do not have borders or extra spacing */
img {
  margin: 0px;
  padding: 0px;
  border: none;
}

h1 {
  color: #cda367;
  font-size: 2.35em;
  font-weight: bold;
}

em {
  color: #6e3b1f;
  font-style: normal;
}

strong {
  color: #eb2533;
  font-size: 1.15em;
  font-weight: normal;
}

h3 {
  font-size: 1.20em;
  font-weight: bold;
  text-decoration: underline;
}

h4 {
  font-size: 1.10em;
  font-weight: bold;
  line-height: 50%;
}

h5 {
  padding: 0px;
  font-size: 1.05em;
  font-weight: bold;
  color: #cda367;
  line-height: 5%;
}

h6 {
  margin: 0px;
  padding: 0px;
  font-size: 1.20em;
  font-weight: bold;
  line-height: 100%;
}

.prQuote {
/* no styling necessary yet */
}

.prQuoteBox {
  margin: 5%;
  border: 1px #6e3b1f solid;
  padding: 16px;
}

.prAttrib {
  margin-right: 5%;
  text-align: right;
}

.prAttrib_home {
  text-align: right;
}

/* =========================================================================== */

/* General layout celements for every page */

#allWrap {
  font-size: 0.90em;
}

.contentGeneral {
  width: 95%;
  width: expression(document.body.clientWidth > 1052? "1000px" : "95%");
  max-width: 1000px;
}

#celementHeader {
  padding: 5px 0px 12px 0px;
  text-align: center;
}

.soleHeaderLeftSpacer {
  width: 7%;
}

.soleHeaderRightSpacer {
  width: 11%;
}

#soleHeaderLeft {
  float: left;
  width: 60%;
  text-align: left;
}

#soleHeaderRight {
  float: right;
  width: 40%;
  text-align: right;
}

#celementSidebar {
  width: 200px;
  border: 3px #cda367 solid;
  border-right: none;
  background-color: #6e3b1f;
}

#soleCornerShot {
  padding-bottom: 25px;
}

#celementSidebarMenu {
  padding: 8px 16px 16px 16px;
  background-color: #000000;
  border-right: 3px #6e3b1f solid;
  font-size: 1.25em;
  line-height: 150%;
}

#celementSidebarMenu a {
  color: #ffffff;
}

#celementSidebarMenu a:hover {
  color: #cda367;
}

#celementPageBody {
  border: 3px #cda367 solid;
  border-left: none;
  padding: 16px 24px;
}

#celementFooter {
  padding: 32px 0px 5px 0px;
  font-size: 0.75em;
  color: #808087;
}

#celementFooter a {
  color: #6e3b1f;
}

#celementFooter a:hover {
  color: #40404a;
}


/* =========================================================================== */

/* Home page SPECIFIC celements */

.contentHome {
  width: 95%;
  width: expression(document.body.clientWidth > 1052? "1000px" : "95%");
  max-width: 1000px;
  height: 350px;
}

#homeCelementPic {
  width: 250px;
  height: 350px;
  border: 3px #cda367 solid;
  border-right: none;
  background-color: #000000; /* #6e3b1f; */
/*  background-image: url(../img/img_sole-homevids-bkg_400x400.png);
  background-repeat: repeat;
  background-attachment: scroll;
  background-position: top right; */
}

#homeCelementVid {
  height: 350px;
  border-top: 3px #cda367 solid;
  border-bottom: 3px #cda367 solid;
  background-color: #000000;
  background-image: url(../img/img_sole-homevids-bkg_400x400.png);
  background-repeat: repeat;
  background-attachment: scroll;
  background-position: top left;
}

#homeCelementText {
  height: 350px;
  border: 3px #cda367 solid;
  border-left: none;
  padding: 10px;
}

#homeCelementMenu {
  padding: 8px 0px;
  font-size: 1.25em;
}

.homeMenuItem {
  float: left;
  width: 12%;
}

.homeMenuItem a {
  color: #ffffff;
}

.homeMenuItem a:hover {
  color: #cda367;
}


/* =========================================================================== */

/* Pics page SPECIFIC celements */

#headshotDisplayCouch {
  padding: 8px;
}

#headshotDisplay {
  border: 3px #cda367 solid;
}

.headshotSelect {
  float: right;
  padding: 17% 0px 0px 20px;
}

.headshotSelectChoiceImage {
  margin-bottom: 37%;
  border: 2px #000000 solid;
  border: expression("2px #cda367 solid");
}

.headshotSelectChoiceImage:hover {
  border: 2px #cda367 solid;
}


/* =========================================================================== */

/* Resume page SPECIFIC celements */

#soleRez {
  font-size: 0.80em;
}

.soleRezEntry {
  padding: 4px 12px;
  text-align: left;
}

.soleRezEntryToRight {
  padding: 4px 12px;
  text-align: right;
}

.soleRezHeadline {
  padding: 4px 0px 8px 0px;
  border-top: 1px #ffffff solid;
  font-weight: bold;
}


/* =========================================================================== */

/* Music page SPECIFIC celements */

.soleMusicSamples {
  padding: 0px 24px 24px 0px;
  font-size: 1.00em;
}


/* =========================================================================== */

/* Contact page SPECIFIC celements */

.contentAgentAddress {
  margin: 4px;
  border: none;
  padding: 16px;
  text-align: left;
}


/* =========================================================================== */