/* common styles for Subbiah Design site  */


/* GENERAL */

html, body {
  margin: 0px;
}
body {
  background-color: #000000;
  background-image: url(/img/windowbkg.jpg);
  background-position: 50% 0%;
}

/* for div containing content that should never be seen by visual browsers */
.offscreen {
  position: absolute;
  left: 0px; top: -9999px;
  width: 1px; height: 1px;
  overflow: hidden;
}
/* for skip link and back to top anchor */
#divskiplink,
#divtopanchor {
  position: absolute;
  left: 0px;
  top: 0px;
  width: 1px;
  height: 1px;
  z-index: 1;
}

/* floating things */
.floatleft {
  float: left;
}
.floatright {
  float: right;
}
/* div or other to clear floating things */
.clear, .divclear {
  clear: both;
}
/* clear block */
.tinyclear {
  clear: both;
  font-size: 0px;
  height: 0px;
}
/* clear self *//* http://www.positioniseverything.net/easyclearing.html */
.clearself:after {
  content: ".";
  display: block;
  height: 0;
  clear: both;
  visibility: hidden;
 }

/* center */
.center {
  text-align: center;
}
/* don't allow to wrap */
.nowrap {
  white-space: nowrap;
}

/* elements for screen display or print display only */
.screenonly {
  display: block;
}
.printonly {
  display: none;
}
span.screenonly {
  display: inline;
}
span.printonly {
  display: none;
}

/* standard table styles */
table {
  border: none;
  border-collapse: collapse;
  border-spacing: 0px;
}
thead, tbody, tfoot {
  border: none;
}
/* table cells all aligned left and top */
td, th {
  text-align: left;
  vertical-align: top;
}
td.center,
th.center {
  text-align: center;
}
td.right,
th.right {
  text-align: right;
}

/* layout table */
/* note: cellspacing=0 must still be specified in table tag because of IE */
table.layouttable {
  border: none;
  border-spacing: 0px;
  margin: 0px;
  padding: 0px;
}
table.layouttable td {
  padding: 0px;
}

/* all lists use solid bullet */
ul {
  list-style-type: disc;
}

/* default font and links */
html, body {
  font-family: Verdana, Tahoma, Arial, Lucida, Helvetica, "Bitstream Vera Sans", sans-serif;
  font-size: 12px;
  line-height: 133%; /* relative to font size */
  color: #000000;
}
h1, h2, h3, h4, h5, h6, p, ul, ol, li {
  margin-top: 0px;
}
a,
a:link {
  color: #c92626;
  text-decoration: none;
}
a:visited {
  color: #c92626;
  text-decoration: none;
}
a:hover {
  color: #ff7726;
  text-decoration: none;
}

/* size corrections for nested tags */
li li {
  font-size: 100%;
}



/* PRE-PAGE */
/* hidden stuff and stuff outside of the normal page flow */

#divprepage {
  position: absolute;
  left: 0px;
  top: 0px;
  width: 1px;
  height: 1px;
}



/* OUTER SHELL */
/* container for all page content */

#divoutershell {
  width: 950px;
  margin: 0px auto;
}



/* PAGE AREA */
/* canvas for content */

#divpagearea {
  position: relative;
  background-color: #ffffff;
}



/* HEADER AREA */

#divheader {
  position: relative;
  z-index: 1;
  width: 950px;
  height: 234px;
  background-color: #d9d9d9;
  background-image: url(/img/headerbkg.jpg);
  border-bottom: 3px solid #a4a1a1;
}
/* site title */
#divsitetitle {
  position: absolute;
  left: 109px;
  top: 70px;
  z-index: 1;
  font-size: 16px;
  line-height: 100%;
  margin: 0px;
}
/* contact info */
#divcontact {
  position: absolute;
  left: 702px;
  top: 166px;
  width: 220px;
  height: 20px;
  z-index: 1;
  font-size: 10px;
  line-height: 100%;
  margin: 0px;
}
#divcontact span.email {
  display: block;
  float: left;
  width: 128px;
  height: 20px;
  overflow: hidden;
  text-indent: -9999px;
}
#divcontact span.email a {
  display: block;
  width: 128px;
  height: 20px;
  background-image: url(/img/email.png);
  background-position: 0px 0px;
}
#divcontact span.email a:hover {
  background-position: 0px 20px;
}
#divcontact span.phone {
  display: block;
  float: left;
  width: 81px;
  height: 20px;
  overflow: hidden;
  text-indent: -9999px;
  background-image: url(/img/phone.png);
  background-position: 0px 0px;
}



/* PRIMARY NAVIGATION */

#divprimarynav {
  position: absolute;
  left: 35px;
  top: 166px;
  width: 480px;
  height: 23px;
  z-index: 2;
}
#divprimarynav ul {
  margin: 0px;
  padding: 0px;
  list-style: none;
  width: 480px;
}
#divprimarynav ul li {
  float: left;
  font-size: 10px;
  line-height: 100%;
  margin: 0px;
}
#divprimarynav ul li a {
  display: block;
  width: 100px;
  height: 23px;
  text-indent: -9999px;
  overflow: hidden;
  background-image: url(/img/primarynav.png);
}
#divprimarynav ul li.branding a {
  width: 67px;
  background-position: 0px 0px;
}
body.branding #divprimarynav ul li.branding a,
#divprimarynav ul li.branding a:hover {
  background-position: 0px -23px;
}
#divprimarynav ul li.magazine a {
  width: 77px;
  background-position: -67px 0px;
}
body.magazine #divprimarynav ul li.magazine a,
#divprimarynav ul li.magazine a:hover {
  background-position: -67px -23px;
}
#divprimarynav ul li.brochures a {
  width: 77px;
  background-position: -144px 0px;
}
body.brochures #divprimarynav ul li.brochures a,
#divprimarynav ul li.brochures a:hover {
  background-position: -144px -23px;
}
#divprimarynav ul li.events a {
  width: 57px;
  background-position: -221px 0px;
}
body.events #divprimarynav ul li.events a,
#divprimarynav ul li.events a:hover {
  background-position: -221px -23px;
}
#divprimarynav ul li.logos a {
  width: 49px;
  background-position: -278px 0px;
}
body.logos #divprimarynav ul li.logos a,
#divprimarynav ul li.logos a:hover {
  background-position: -278px -23px;
}
#divprimarynav ul li.web a {
  width: 42px;
  background-position: -327px 0px;
}
body.web #divprimarynav ul li.web a,
#divprimarynav ul li.web a:hover {
  background-position: -327px -23px;
}
#divprimarynav ul li.photos a {
  width: 59px;
  background-position: -369px 0px;
}
body.photos #divprimarynav ul li.photos a,
#divprimarynav ul li.photos a:hover {
  background-position: -369px -23px;
}
#divprimarynav ul li.art a {
  width: 37px;
  background-position: -428px 0px;
}
body.art #divprimarynav ul li.art a,
#divprimarynav ul li.art a:hover {
  background-position: -428px -23px;
}



/* SECONDARY NAV */

#divsecondarynav {
  position: absolute;
  left: 0px;
  top: 197px;
  width: 700px;
  height: 18px;
  z-index: 3;
  display: none; /* shown when 2 or more projects */
}
#divsecondarynav a {
  display: block;
  float: left;
  width: 47px;
  height: 18px;
  background-image: url(/img/subnavdots.png);
  background-position: 0px 0px;
  outline: none;
}
#divsecondarynav a.active,
#divsecondarynav a:hover {
  background-position: -47px 0px;
}
/* position varies by page */
body.branding #divsecondarynav {
  left: 21px;
  width: 879px;
}
body.magazine #divsecondarynav {
  left: 94px;
  width: 806px;
}
body.brochures #divsecondarynav {
  left: 171px;
  width: 729px;
}
body.events #divsecondarynav {
  left: 248px;
  width: 652px;
}
body.logos #divsecondarynav {
  left: 305px;
  width: 595px;
}
body.web #divsecondarynav {
  left: 353px;
  width: 547px;
}
body.photos #divsecondarynav {
  left: 396px;
  width: 504px;
}
body.art #divsecondarynav {
  left: 455px;
  width: 445px;
}



/* BODY AREA */

#divbody {
  position: relative;
  z-index: 2;
  width: 950px;
  background-color: #ffffff;
}



/* FOOTER AREA */

#divfooter {
  position: relative;
  z-index: 1;
  width: 950px;
  background-color: #a4a1a1;
}
#divfooter p {
  font-size: 0.92em;
  font-weight: normal;
  line-height: 100%;
  color: #ffffff;
  text-transform: lowercase;
  text-align: right;
  margin: 0px;
  padding: 13px 37px 13px 37px;
}



/*** HOME PAGE ***/

/* text area */
body.home #divtext {
  position: absolute;
  left: 40px;
  top: 122px;
  width: 290px;
  font-size: 1.00em;
  line-height: 200%;
  color: #000000;
  margin: 0px;
}
/* slideshow */
body.home #divslideshow {
  position: static;
  padding: 20px 0px 20px 331px;
}
body.home #divslideshow div.slide {
}



/*** PORTFOLIO PAGES ***/

/* slideshow */
body.home #divslideshow {
  position: static;
}
/* one slide = one project */
body.portfolio #divslideshow div.slide {
  position: relative;
  width: 950px;
  height: 445px;
}
/* project title/text */
body.portfolio #divslideshow div.slide h2.title {
  position: absolute;
  left: 40px;
  top: 122px;
  width: 290px;
  font-size: 0.92em;
  font-weight: normal;
  line-height: 200%;
  color: #000000;
  margin: 0px;
}
/* other text *//* positions vary, so set in code */
body.portfolio #divslideshow div.slide .text {
  position: absolute;
  font-size: 0.92em;
  font-weight: normal;
  line-height: 200%;
  color: #000000;
  margin: 0px;
}
/* project link *//* positions vary, so set in code */
body.portfolio #divslideshow div.slide a {
  display: block;
  position: absolute;
  outline: none;
}
/* links in text */
body.portfolio #divslideshow div.slide h2.title a,
body.portfolio #divslideshow div.slide .text a {
  position: static;
  display: inline;
}
/* invisible images link to slideshow slides, but have no visible thumbnail */
body.portfolio #divslideshow div.slide a.invisible {
  display: none;
}
/* project image *//* positions vary, so set in code */
body.portfolio #divslideshow div.slide img {
  display: block;
  position: absolute;
  outline: none;
}
/* buttons to move to previous/next project */
body.portfolio #divbuttons {
  position: absolute;
  left: 0px;
  top: 0px;
  z-index: 10;
  display: none;
}
body.portfolio #divbuttons a {
  display: block;
  position: absolute;
  top: 5px;
  width: 20px;
  height: 20px;
  background-image: url(/scripts/jquery/colorbox/controls.png);
  text-indent: -9999px;
  outline: none;
}
body.portfolio #divbuttons a.previous {
  left: 5px;
  background-position: 0px 0px;
}
body.portfolio #divbuttons a.next {
  left: 925px;
  background-position: -25px 0px;
}
body.portfolio #divbuttons a.previous:hover {
  background-position: 0px -25px;
}
body.portfolio #divbuttons a.next:hover {
  background-position: -25px -25px;
}



/*** PHOTOS PAGE ***/

/* project title/text */
body.photos #divslideshow p.copyright {
  position: absolute;
  left: 38px;
  top: 390px;
  width: 800px;
  font-size: 0.92em;
  font-weight: normal;
  line-height: 100%;
  color: #000000;
  margin: 0px;
}


/*** ART PAGE ***/

/* project title/text */
body.art #divtext {
  position: absolute;
  left: 40px;
  top: 122px;
  width: 290px;
  font-size: 0.92em;
  line-height: 200%;
  color: #000000;
  margin: 0px;
}




/*** ERROR PAGE ***/

/* text area */
body.error #divtext {
  position: absolute;
  left: 40px;
  top: 122px;
  width: 290px;
  font-size: 0.92em;
  line-height: 200%;
  color: #000000;
  margin: 0px;
}