/* Simon+Associates CSS Template */

/* Reset default positioning values */
@import "reset.css";

/* Hack to force vertical scroll bar (so the clients page doesn't "shift") */

html { 
  height: 100%; 
  margin-bottom: 1px; 
}

/*************** Layout */

#wrapper {
  position: relative;
  width: 800px;
  height: auto;
  margin-left: auto;
  margin-right: auto;
  font-family: helvetica, arial, sans-serif;
  font-size: 18px;
  line-height: 24px;
  color: #999999;
  font-weight: bold;
}

#header {
  float: left;
  display: inline;
  width: 800px;
  height: auto;
  margin: 30px 0px 0px 0px;
}

#logo {
  float: left;
  display: inline;
  width: 214px;
  height: 15px;
  margin: 0px 0px 0px 8px;
}

/*************** Nav */

#nav {
  float: left;
  display: inline;
  width: 800px;
  height: 12px;
  margin: 20px 0px 0px 0px;
}

#nav a {
  float: left;
  display: inline;
  height: 12px;
  margin: 0px 71px 0px 0px;
  background-position: top;
  backgrond-repeat: no-repeat;
}

a#navWho {
  width: 74px;
  background-image: url('../image/nav_who_we_are.gif');
}

a#navWhat {
  width: 76px;
  background-image: url('../image/nav_what_we_do.gif');
}

a#navWhy {
  width: 94px;
  background-image: url('../image/nav_why_choose_us.gif');
}

a#navWork {
  width: 60px;
  background-image: url('../image/nav_our_work.gif');
}

a#navClients {
  width: 68px;
  background-image: url('../image/nav_our_clients.gif');
}

a#navContact {
  margin: 0px;
  width: 69px;
  background-image: url('../image/nav_contact_us.gif');
}

#nav a:hover,
#nav a:active,
#nav a.here:link,
#nav a.here:visited,
#nav a.here:hover,
#nav a.here:active {
  background-position: bottom;
}

#nav a span {
  display: none;
}


/*************** Content */

#content {
  float: left;
  display: inline;
  width: 800px;
  height: auto;
  min-height: 600px;
  margin: 47px 0px 20px 0px;
}

#content p.text {
  width: 650px;
}

/*************** Clients  */

img.client {
  float: left;
  display: block;
  margin: 0px 50px 10px 0px;
}

img.client.last {
  margin-right: 0px;
}

/*************** Work  */

#work {
  float: left;
  display: inline;
  width: 304px;
  height: auto;
  margin: 0px;
  padding: 0px;
}

/*************** Work Nav */

#workNav {
  float: left;
  display: inline;
  width: 108px;
  height: auto;
  margin: 50px 0px 50px 0px;
  padding: 0px;
}

#workNav a:link,
#workNav a:visited {
  float: left;
  display: inline;
  width: 108px;
  height: 12px;
  margin: 0px 0px 7px 0px;
  background-position: right;
  background-repeat: no-repeat;
}

a#workLogos {
  background-image: url('../image/work_logos.gif');
}

a#workIdentity {
  background-image: url('../image/work_identity.gif');
}

a#workPrint {
  background-image: url('../image/work_print.gif');
}

a#workWeb {
  background-image: url('../image/work_web.gif');
}

a#workOutdoor {
  background-image: url('../image/work_outdoor.gif');
}

a#workPackage {
  background-image: url('../image/work_package_design.gif');
}

a#workViral {
  background-image: url('../image/work_viral.gif');
}

a#workEvents {
  background-image: url('../image/work_events.gif');
}

a#workBroadcast {
  background-image: url('../image/work_broadcast.gif');
}

a#workExtra {
  background-image: url('../image/work_something_extra.gif');
}

#workNav a:hover,
#workNav a:active,
#workNav a.here:link,
#workNav a.here:visited,
#workNav a.here:hover,
#workNav a.here:active {
  background-position: left;
}

#workNav a span {
  display: none;
}


/*************** Porftolio Thumbnails */

#workThumbs {
  float: right;
  width: 165px;
  height: auto;
  margin: 50px 0px 0px 0px;
  padding: 0px;
}

#workThumbs span {
  float: left;
  display: inline;
  width: 35px;
  height: 35px;
  background-position: left top;
  background-repeat: no-repeat;
  margin: 0px 20px 0px 0px;
  padding: 0px 0px 28px 0px;
  cursor: pointer;
}

#workThumbs span:hover,
#workThumbs span:active {
  background-position: right top;
}

#workThumbs span span {
  margin: 0px;
  padding: 0px;
  font-size: 11px;
  line-height: 11px;  
  display: none;
}

/*************** Work Feature */

#workFeature {
  float: right;
  display: inline;
  width: 490px;
  height: 533px;
  background: #ffffff;
}

/*************** Work Description */

#workDescription {
  float: left;
  display: inline;
  width: 304px;
  height: auto;
  margin: 0px 0px 0px 0px;
}

#workDescription h2,
#workDescription p {
  width: 276px;
  margin-left: 8px;
}

/*************** Footer */

a#contact:link,
a#contact:visited {
  position: relative;
  top: 659px;
  left: 8px;  
  z-index: 500;
  float: left;
  display: inline;
  width: 27px;
  height: 12px;
  border: solid 1px #ffffff;
  background: url('../image/icon_envelope.gif') no-repeat;
}

a#contact.clients:link,
a#contact.clients:visited {
  top: 1020px;
}

a#contact:hover,
a#contact:active {
  border-color: #ffcccc;
}

a#contact span {
  display: none;
}


/*************** Splash Page */

#splash {
  float: left;
  display: inline;
  width: 214px;
  padding: 0px;
  margin: 150px 0px 0px 293px;
  text-align: center;
}

#splash a:link {
  float: left;
  display: inline;
  margin-left: 35px;
  width: 116px;
  height: 188px;
  background: url('../image/cuckoo.gif') left no-repeat;
}

#splash a:visited,
#splash a:hover,
#splash a:active {
  float: left;
  display: inline;
  margin-left: 35px;
  width: 116px;
  height: 188px;
  background: url('../image/cuckoo.gif') right no-repeat;
}

#splash a span {
  display: none;
}

#splash img {
  float: left;
  display: block;
  margin: 100px 0px 0px 0px;
}


/*************** Tags */

h1 {
  float: left;
  display: inline;
  width: 800px;
  height: auto;
  font-weight: bold;
  color: #e51837;
  font-size: 14px;
  line-height: 14px;
  font-family: helvetica, arial, sans-serif;
  margin: 50px 0px 10px 8px;
}

h2 {
  float: left;
  display: inline;
  width: 800px;
  height: auto;
  font-weight: bold;
  color: #666666;
  font-size: 11px;
  line-height: 12px;
  font-family: helvetica, arial, sans-serif;
  margin: 0px 0px 4px 8px;
}

h3 {
  float: left;
  display: inline;
  clear: left;
  width: 800px;
  height: auto;
  font-size: 11px;
  line-height: 12px;
  font-weight: normal;
  color: #e51837;
  font-family: helvetica, arial, sans-serif;
  margin: 0px 0px 8px 0px;
}

h4 {
  float: left;
  display: inline;
  clear: left;
  width: 800px;
  height: auto;
  font-size: 10px;
  line-height: 12px;
  font-weight: bold;
  color: #999999;
  font-family: helvetica, arial, sans-serif;
  margin: 0px 0px 4px 0px;
}

p {
  float: left;
  clear: left;
  display: inline;
  width: 772px;
  height: auto;
  font-family: helvetica, arial, sans-serif;
  font-size: 11px;
  line-height: 15px;
  font-weight: normal;
  color: #666666;
  margin: 0px 0px 8px 8px;
}

a, a:link, a:visited {
  color: #666666;
}

a:hover, a:active {
  color: #e51837;
}

blockquote {
  float: left;
  display: inline;
  width: 780px;
  height: auto;
  padding: 10px;
  margin: 0px 0px 10px 0px;
  color: #999999;
  font-size: 11px;
  line-height: 16px;
  background: #eeeeee;
}

strong {
  font-weight: bold;
  color: #ed1c24;
}

em {
  font-style: italic;
}

/*************** Lists */

div.list {
  float: left;
  display: inline;
  width: 800px;
  height: auto;
  margin: 0px 0px 12px 0px;
}

ul, ol {
  margin: 0px;
}

ul {
  list-style: disc;
  padding: 0px 0px 0px 18px;
}

ol {
  list-style: decimal;
  padding: 0px 0px 0px 28px;
}

ul li, ol li {
  font-size: 12px;
  line-height: 16px;
  padding: 0px;
  margin: 0px;
}

ul li ul {
  margin: 4px 0px;
  padding: 0px 0px 0px 18px;
}

ol li ol {
  list-style: lower-alpha;
  margin: 4px 0px;
  padding: 0px 0px 0px 18px;
}

ul li ul li, ol li ol li {
  font-size: 11px;
  line-height: 16px;
  padding: 0px;
  margin: 0px;
}


/*************** Tables */

table {
  float: left;
  clear: left;
  display: inline;
  width: 718px;
  height: auto;
  margin: 0px 0px 12px 0px;
}

table tr th {
  width: 218px;
  height: auto;
  font-weight: normal;
  padding: 8px 5px 5px 0px;
  vertical-align: top;
  line-height: 16px;
}

table tr td {
  width: 500px;
  height: auto;
  padding: 5px 5px 5px 0px;
  vertical-align: top;
  line-height: 16px;
}

/*************** Forms */

input {
  font-family: tahoma, geneva, sans-serif;
  font-size: 12px;
  line-height: 16px;
  color: #333333;
  border: solid 4px #eeeeee;
  background: #eeeeee;
}

input.file {
  width: 308px;
  height: auto;
}

input.text {
  width: 300px;
  height: auto;
}

input.city {
  width: 184px;
  height: auto;
}

input.zip {
  width: 50px;
  height: auto;
}

span.check {
  float: left;
  clear: left;
  display: inline;
  font-size: 12px;
  line-height: 16px;
}

span.check input {
  float: left;
  display: inline;
  width: auto;
  height: auto;
  border: 0px;
  background: none;
  margin: 0px 8px 0px 0px;
  padding: 0px;
  font-size: 12px;
  line-height: 16px;
}

select {
  width: 308px;
  height: auto;
  font-family: tahoma, geneva, sans-serif;
  font-size: 12px;
  line-height: 16px;
  color: #333333;
  border: solid 4px #eeeeee;
  background: #eeeeee;
}

select.multiple {
  width: 308px;
  height: auto;
}

select.state {
  width: 50px;
  height: auto;
}

select.month {
  width: 80px;
  height: auto;
}

select.day {
  width: 50px;
  height: auto;
}

select.year {
  width: 80px;
  height: auto;
}

textarea {
  width: 300px;
  height: 150px;
  font-family: tahoma, geneva, sans-serif;
  font-size: 12px;
  line-height: 16px;
  color: #333333;
  border: solid 4px #eeeeee;
  background: #eeeeee;
}

input.submit {
  width: auto;
  height: auto;
  margin: 0px 8px 0px 0px;
  padding: 3px 8px;
  font-family: tahoma, geneva, sans-serif;
  font-size: 12px;
  line-height: 16px;
  color: #4a8933;
  font-weight: bold;
  text-align: center;
  background: #88bbdd;
  border: solid 1px #3388bb;
}

input.submit:hover {
  background: #99ccee;
  cursor: pointer;
}

a.button, a.button:link, a.button:visited {
  width: auto;
  height: auto;
  margin: 0px 8px 0px 0px;
  padding: 4px 8px;
  font-family: tahoma, geneva, sans-serif;
  font-size: 12px;
  line-height: 20px;
  color: #226699;
  font-weight: bold;
  text-align: center;
  background: #88bbdd;
  border: solid 1px #3388bb;
  text-decoration: none;
}

a.button:hover, a.button:active {
  background: #99ccee;
  text-decoration: none;
}

.error {
  float: left;
  display: inline;
  width: 756px;
  height: auto;
  font-size: 14px;
  font-weight: bold;
  color: #990000;
  background: #ee9999;
  border: 1px solid #aa2222;
  padding: 5px;
  margin: 0px 0px 12px 0px;
}

/*************** Generic Classes */

.floatLeft 			{ float: left; display: inline; }
.floatRight 		{ float: right; display: inline; }
img.floatLeft		{ float: left; display: inline; margin: 0px 8px 8px 0px; }
img.floatRight	{ float: right; display: inline; margin: 0px 0px 8px 8px; }
.centered 			{ text-align: center; }
.alignRight 		{ text-align: right; }

.tiny 					{ font-size: 10px; line-height: 16px; }
.small 					{ font-size: 11px; line-height: 16px; }
.normal 				{ font-size: 12px; line-height: 18px; }
.medium 				{ font-size: 14px; line-height: 20px; }
.big 						{ font-size: 16px; line-height: 22px; }
.huge						{ font-size: 18px; line-height: 24px; }

.italic 				{ font-style: italic; }
.bold 					{ font-weight: bold; }
.nobold 				{ font-weight: normal; }

.red						{ color: #e51837; }
.orange					{ color: #f0b310; }
.blue						{ color: #0397d6; }
.pink						{ color: #f2a3c8; }
.purple					{ color: #9d3293; }
.brown					{ color: #7c3520; }
.green					{ color: #b4c12f; }
.grey						{ color: #aaaaaa; }

.half 					{	width: 376px; padding-right: 10px; }
.twoThirds      { width: 504px; padding-right: 10px; }
.threeQuarters  { width: 589px; padding-right: 10px; }

.marginTop      { margin-top: 20px; }