@import "reset.css";
@import "colorbox.css";

html{
  margin:0;
  padding:0;
  border:0;
  text-align:center;
  background: #f8f8f8;
}

body{
  position:relative;
  margin:0 auto 0 auto;
  padding:0;
  border:0;
  background: #fff;
  text-align: left;
  font: 13px Georgia, Serif;
}

input, select, button, textarea{
  font: 12px Arial, sans-serif;
}

a{
  color: #0a89c2;
  text-decoration: none;
}

a:hover{
  text-decoration: underline;
}


h1{
  font: normal 28px Georgia, Serif;
  color: #c51533;
}

h2{
  font: 14px Georgia, Serif;
  color: #404040;
  margin: 0;
}

h2 a{
  color: #404040;
}

h3{
  font: 13px Georgia, Serif;
  color: #404040;
  margin: 0; 
  padding: 0;
}

p{
  font: 13px Georgia, Serif;
  color: #404040;
  margin: 0; 
  line-height: 17px;
}

pre{
  display: block;
  background: #fff;
  margin: 0 5px 10px 5px;
  padding: 10px;
  font-size: 11px;
}

dl{
  font: 13px Georgia, Serif;
  line-height: 13px;
  color: #404040;
}


ul li{
  font: 13px Georgia, Serif;
  color: #404040;
}

textarea{
  width: 400px;
}

blockquote{
  margin: 0; 
  padding: 0 20px 10px 20px;  
}

.inlinePic{
  float: right;
}

input.emphasis{
  background: #c52944 url('../images/emphasis-bg.jpg') repeat-x top left;
  border: 1px solid #ccc;
  color: #fff;
  font: bold 13px Georgia, Serif;
  padding: 5px;
  margin: 0;
  -moz-border-radius: 4px;
  -webkit-border-radius: 4px;
  width: 0;
  overflow:visible;
}

input.emphasis:hover{
  background: #c52944 url('../images/emphasis-bg-hover.jpg') repeat-x top left;
}

input.emphasis[class] { /*ie ignores [class]*/
    width: auto;
}

a.emphasis{
  display: inline-block;
  background: #c52944 url('../images/emphasis-bg.jpg') repeat-x top left;
  border: 2px solid #ccc;
  color: #fff;
  font: bold 13px Georgia, Serif;
  padding: 8px 8px;
  margin: 0;
  text-decoration: none;
  -moz-border-radius: 4px;
  -webkit-border-radius: 4px;
}

a.emphasis:hover{
  background: #c52944 url('../images/emphasis-hover-bg.jpg') repeat-x top left;
}

/* begin header */
div#header{
  position: relative;
  top: 0;
  left: 0;
  width: 100%;
  height: 110px;
  z-index: 10;
  margin: 0;
  padding: 0 0 6px 0;
}

div#header div{
  position: relative;
  width: 939px;
  height: 110px;
  text-align: left;
  margin: 0 auto 0 auto;
  padding: 0;
}

div#header img#logo{
  position: absolute;
  left: 0;
  bottom: 0;
}

div#header dl#menu{
  position: absolute;
  right: 0;
  bottom: 8px;
  margin: 0;
  padding: 0 0 10px 0;
}

div#header dl#menu dd{
  float: left;
  height: 25px;
  margin: 0 0 0 20px;
  padding: 49px 5px 10px 5px !important;
}
/* end header */

/* begin callout */
div#callout{
  position: relative;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 10;
  margin: 0;
  padding: 0;
  background: #383838 url('../images/callout-bg-dark.jpg') repeat-x bottom left;
  border-top: 3px solid #878787;
  border-bottom: 3px solid #878787;
}

div#callout div{
  position: relative;
  width: 939px;
  text-align: left;
  margin: 0 auto;
  padding: 0 10px 25px 10px;
  color: #808080;
  background: url('../images/callout-skyline.jpg') no-repeat bottom right;
}

div#callout h1{
  margin: 20px 0 10px 0;
  padding: 0;
  color: #fff;
  background: url('../images/creative-reliable-local.png') no-repeat top left;
  text-indent: -5000px;
}

div#callout div#slider{
  width: 939px;
  height: 275px;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background: none !important;
}

div#callout div#slider ul{
  list-style: none;
  margin: 10px 0 0 0;
}

div#callout div#slider li{
  position: relative;
  width: 939px;
  height: 275px;
  margin: 0;
  padding: 0;
  float: left;
}

div#callout div#slider li a.featured{
  display: block;
}

div#callout div#slider li a.featured img{
  position: absolute;
  top: 0;
  left: 0;
  border: 3px solid #878787;
}

div#callout div#slider li h2{
  font-size: 16px;
  font-weight: bold;
  color: #fff;
  padding: 10px 0 0 320px;
  margin: 0 0 20px 0;
}

div#callout div#slider li p{
  color: #fff;
  line-height: 20px;
  padding: 0 20px 20px 320px;
}

div#callout dl#selector{
  position: absolute;
  right: 375px;
  bottom: 10px;
}

div#callout dl#selector dt, div#callout dl#selector dd{
  display: inline;
  color: #fff;
}

div#callout dl#selector dt{
  font-weight: bold;
  margin-right: 4px;
}

div#callout dl#selector dd{
  margin: 0 2px;
}

div#callout dl#selector dd a{
  display: inline-block;
  padding: 4px 6px 6px 6px;
  color: #fff;
}

div#callout dl#selector dd.selected a{
  background: #c52944;
  font-weight: bold;
  -moz-border-radius: 2px;
  -webkit-border-radius: 2px;
}
/* end callout */

/* begin pricing */
div#pricing{
  position: relative;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 10;
}

div#pricing h1{
  margin: 30px 0 20px 0;
  padding: 0;
  color: #808080;
  background: url('../images/fair-easy-pricing.png') no-repeat top left;
  text-indent: -5000px;
}

div#pricing div{
  position: relative;
  width: 939px;
  height: 530px;
  text-align: left;
  margin: 0 auto;
  padding: 0 0 20px 0;
  color: #808080;
  border: 1px solid #fff;
}

div#pricing div.product{
  width: 240px;
  height: 395px;
  border: 3px solid #f2f2f2;
  background: #e4e4e4;
  margin: 0 40px 0 0;
  padding: 20px 20px 20px 20px;
  float: left;
  -moz-border-radius: 4px;
  -webkit-border-radius: 4px;
}

div#pricing div.last{
  margin-right: 0;
}

div#pricing div.product:hover{
  background-color: #f8f8f8;
}

div#pricing div.product h2{
  font-weight: bold;
  font-size: 16px;
}

div#pricing div.product p.price{
  margin-bottom: 20px;
}

div#pricing div.product dt{
  font-weight: bold;
}

div#pricing div.product dt, dd{
  margin: 0 0 8px 0;
  padding: 0;
}

div#pricing div.product dd{
  padding-left: 12px;
  background: url('../images/bullet.png') no-repeat top left;
}

div#pricing div.product:hover dd em{
  color: #c52944;
}

div#pricing div.product p.recommendation{
  position: absolute;
  font-weight: bold;
  bottom: 20px;
  height: 90px;
  margin: 0;
  padding: 0 20px 0 60px;
  background: url('../images/asterisk.png') no-repeat top left;
}

div#pricing div.product:hover p.recommendation{
  background-image: url('../images/asterisk-highlight.png');
}
/* end pricing */

/* begin contact */
div#contact{
  position: relative;
  top: 0;
  left: 0;
  width: 100%;
  height: 346px;
  z-index: 10;
  margin: 0;
  padding: 0;
}

div#contact div{
  position: relative;
  width: 894px;
  text-align: left;
  margin: 0 auto 0 auto;
  padding: 20px;
  color: #404040;
  background: #f0f0f0;
  border: 3px solid #e3e3e3;
  -moz-border-radius: 4px;
  -webkit-border-radius: 4px;
}

div#contact h1{
  margin: 0 auto 20px auto;
  padding: 0;
  color: #808080;
  width: 937px;
  background: url('../images/contact-us-today.png') no-repeat top left;
  text-indent: -5000px;
}

div#contact label{
  display: block;
  margin-bottom: 2px;
}

div#contact input{
  width: 300px;
  margin-bottom: 20px;
  border: 1px solid #c8c8c8;
  font-size: 15px;
  padding: 4px;
  -moz-border-radius: 2px;
  -webkit-border-radius: 2px;
}

div#contact span.addtl{
  position: absolute;
  top: 20px;
  left: 400px;
}

div#contact textarea{
  width: 500px;
  height: 146px;
  margin-bottom: 20px;
  border: 1px solid #c8c8c8;
  font-size: 15px;
  padding: 4px;
  -moz-border-radius: 2px;
  -webkit-border-radius: 2px;
}

div#contact p.actions input{
  width: auto;
}

p.error{
	position: absolute;
	bottom: 19px;
	left: 145px;
	display: none;
	background: #f3d9de;
	border: 2px solid #c34258;
	padding: 8px;
  	-moz-border-radius: 2px;
  	-webkit-border-radius: 2px;
}

p.error img{
	position: absolute;
	top: 7px;
	left: -14px;
	z-index: 3;
}

p.success{
	position: absolute;
	bottom: 19px;
	left: 145px;
	display: none;
	background: #d6f5d6;
	border: 2px solid #7bde7b;
	padding: 8px;
  	-moz-border-radius: 2px;
  	-webkit-border-radius: 2px;
}

p.success img{
	position: absolute;
	top: 7px;
	left: -14px;
	z-index: 3;
}
/* end callout */

/* begin contact */
div#footer{
  position: relative;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 10;
  border-top: 3px solid #e3e3e3;
  background: #f8f8f8;
  margin: 50px 0 0 0;
  padding: 0;
}

div#footer h1{
  margin: 20px auto 20px auto;
  padding: 0;
  color: #808080;
  width: 937px;
  background: url('../images/about-us.png') no-repeat top left;
  text-indent: -5000px;
}

div#footer div{
  position: relative;
  width: 983px;
  text-align: left;
  margin: 0 auto 50px auto;
  padding: 5px 10px;
  color: #808080;
}

div#footer div p{
  margin: 20px;
}
/* end footer */

/* begin dialog styles */
div.dialog{
	display: none;
	position: absolute;
	z-index: 10;
	background: #f0f0f0;
	padding: 0 0 20px 0;
	border: 4px solid #f0f0f0;
}

div.dialog span.closelink{
	position: absolute;
	bottom: 0;
	left: 0;
	display: block;
	width: 100%;
	text-align: center;
}

div.dialog span.closelink a{
	text-decoration: underline;
}

div.dialog img{
	border: none;
}