Preview - HTML - CSS

body{
  margin: 0;
  padding: 0;
  background: #f4f4f4;
  border-top: #090909 17px solid;
  font-family: Arial, sans-serif;
}

#page{
  width: 960px;
  margin: 0 auto;
}
#header{
  width: 960px;
  height: 140px;
}
#header h1{
  position: absolute;
  background: url("assets/images/logo.png") no-repeat;
  text-indent: -9000px;
  width: 196px;
  height: 100px;
  margin: 20px 0;
}
#header div.info-email{
  position: absolute;
  width: 960px;
  text-align: right;
  margin-top: 10px;
}
#header div.info-email a{
  color: #999898;
  font-size: 13px;
  text-decoration: none;
}

#navigation{
 position: absolute;
 width: 960px;
 text-align: right;
 margin-top: -80px;
}
#navigation li{
  display: inline;
}
#navigation li a{
  font-weight: bold;
  font-size: 12px;
  text-transform: uppercase;
  color: #fe9b00;
  text-decoration: none;
  padding: 0 0 0 60px;
}
#navigation li.active a{
  color: #090909;
}

#spotlight{
  width: 960px;
  height: 380px;
  margin: 0 0 20px 0;
  border-top: #c0c0c0 1px solid;
  padding-top: 20px;
}
#spotlight img{
  width: 960px;
  height: 380px;
}
#spotlight div.description{
  position: absolute;
  overflow: hidden;
  width: 440px;
  height: 43px;
  background: #090909;
  margin: -95px 0 0 35px;
}
#spotlight div.description span{
  color: #999898;
  font-weight: bold;
  text-transform: uppercase;
  font-size: 15px;
  line-height: 43px;
  margin-left: 15px;
}
#spotlight div.description a{
  text-decoration: none;
  color: #fe9b00;
  font-weight: bold;
  text-transform: uppercase;
  font-size: 15px;
  line-height: 43px;
  float: right;
  margin-right: 15px;
}
#spotlight div.description a span{
  color: #fe9b00;
}

#page-content{
  width: 960px;
  overflow: hidden;
  border-top: #c0c0c0 1px solid;
  border-bottom: #c0c0c0 1px solid;
  padding: 20px 0;
  font-size: 12px;
  color: #5d5d5d;
  line-height: 20px;
}
#page-content h2{
  width: 570px;
  height: 26px;
  padding-top: 4px;
  border-bottom: #090909 6px solid;
  font-size: 18px;
  color: #090909;
  text-transform: uppercase;
}
#page-content h2 span{
  display: block;
  float: left;
  width: 30px;
}
#page-content ul{
  margin-top: 20px;
  margin-right: 40px;
}
#page-content p{
  margin-top: 20px;
}

#page-content .box{
  font-size: 12px;
  color: #5d5d5d;
  line-height: 14px;
  width: 280px;
  margin-right: 60px;
  float: left;
}
#page-content .box.last{
  margin-right: 0;
}
#page-content .box h2{
  width: 280px;
  height: 26px;
  padding-top: 4px;
  border-bottom: #090909 6px solid;
  font-size: 18px;
  color: #090909;
  text-transform: uppercase;
}
#page-content .box h2 span{
  display: block;
  float: left;
  width: 30px;
}
#page-content .box p{
  line-height: 20px;
  margin: 20px 0 8px 0;
  font-size: 12px;
  color: #5d5d5d;
}
#page-content .box li{
  margin-top: 20px;
  padding-left: 30px;
  background: url("assets/images/checked.png") 0px 3px no-repeat;
}
#page-content .box span.name{
  font-style: italic;
  color: #090909;
}
#page-content .box span.read{
  margin-left: 30px;
}
#page-content .box span.read a{
  color: #fe9b00;
  font-size: 12px;
  text-transform: uppercase;
  text-decoration: none;
}

#projects{
  overflow: hidden;
  margin-top: 20px;
}
#left-content{
  width: 666px;
  float: left;
  border-right: #dddddd 1px solid;
  padding-right: 24px;
}
#left-content .active-projects h2{
  background: url("assets/images/active-projects.png") left center no-repeat;
  color: #9f2d1b;
  font-size: 17px;
  text-indent: 25px;
  margin: 0 0 25px 10px;
  font-weight: bold;
}
#left-content .active-projects-top{
  width: 665px;
  height: 7px;
  background: url("assets/images/active-projects-top.png") no-repeat;
}
#left-content .active-projects-bottom{
  width: 665px;
  height: 7px;
  background: url("assets/images/active-projects-bottom.png") no-repeat;
  margin-bottom: 50px;
}
#left-content .active-projects-content{
  width: 665px;
  height: 66px;
  background: url("assets/images/active-projects-content.png") repeat-y;
}
#left-content .active-projects-content table{
  position: absolute;
  margin-top: -7px;
  width: 665px;
}
#left-content .active-projects-content th{
  color: #666666;
  font-size: 13px;
  font-weight: bold;
  padding-left: 12px;
  text-align: left;
  padding-top: 14px;
  height: 24px;
  border-bottom: #dddddd 1px solid;
  border-right: #dddddd 1px solid;
}
#left-content .active-projects-content th.last{
  border-right: none;
}
#left-content .active-projects-content td{
  color: #666;
  font-size: 13px;
  padding: 14px 10px;
}
#left-content .active-projects-content td a{
  color: #666;
  font-size: 13px;
}
#left-content .latest-activity{
  overflow: hidden;
  padding-bottom: 60px;
  border-bottom: #ccc 1px dashed;
}
#left-content .latest-activity h2{
  width: 665px;
  color: #333;
  font-size: 17px;
  font-weight: bold;
  background: url("assets/images/latest-activity.png") left top no-repeat;
  text-indent: 25px;
  margin: 0 0 15px 0;
  border-bottom: #dcdcdc 3px solid;
  padding-bottom: 10px;
}
#left-content .latest-activity .comment-info{
  width: 150px;
  margin-right: 30px;
  float: left;
}
#left-content .latest-activity .comment-info h4{
  color: #333;
  font-size: 12px;
  font-weight: bold;
  margin-bottom: 10px;
}
#left-content .latest-activity .comment-info span{
  display: block;
  color: #333;
  font-size: 12px;
  line-height: 15px;
}
#left-content .latest-activity .comment{
  width: 485px;
  float: right;
}
#left-content .latest-activity .comment h4{
  color: #333;
  font-size: 12px;
  font-weight: bold;
  margin-bottom: 5px;
}
#left-content .latest-activity .comment p{
  color: #333;
  font-size: 12px;
  line-height: 15px;
}

#right-content{
  width: 245px;
  float: right;
  padding-left: 24px;
}
#right-content .questions h2{
  background: url("assets/images/questions.png") left top no-repeat;
  color: #666;
  font-size: 17px;
  text-indent: 45px;
  margin: 0 0 10px 0;
  font-weight: bold;
  height: 37px;
}
#right-content .questions .rounded{
  width: 226px;
  height: 39px;
  background: url("assets/images/questions-rounded.png") left center no-repeat;
  padding: 15px;
}
#right-content .questions .rounded span.call-us{
  background: url("assets/images/call-us.png") left center no-repeat;
  display: block;
  color: #666;
  font-size: 13px;
  text-indent: 20px;
  margin: 5px 0;
}
#right-content .questions .rounded span.live-chat{
  background: url("assets/images/live-chat.png") left center no-repeat;
  display: block;
  color: #666;
  font-size: 13px;
  text-indent: 20px;
  margin: 5px 0;
}
#right-content .hours-of-operation{
  margin-top: 30px;
  margin-bottom: 100px;
}
#right-content .hours-of-operation h2{
  color: #666;
  font-size: 17px;
  margin: 0 0 10px 0;
  font-weight: bold;
  height: 37px;
}
#right-content .hours-of-operation ul{
  border-bottom: #ddd 1px solid;
}
#right-content .hours-of-operation li{
  overflow: hidden;
  border-top: #ddd 1px solid;
  height: 40px;
  line-height: 40px;
  color: #333;
  font-size: 12px;
}
#right-content .hours-of-operation li div{
  float: right;
}
#right-content .hours-of-operation li div span{
  font-weight: bold;
}

#portfolio-grid{
  margin: -10px;
}
#portfolio-grid ul.navigation{
  margin: 40px 10px -4px 10px;
}
#portfolio-grid ul.navigation li{
  display: inline;
  height: 24px;
  line-height: 24px;
  font-size: 14px;
  color: #464646;
  padding: 0 15px;
  background: url('assets/images/portfolio-grid-nav-spacer.png') right center no-repeat;
}
#portfolio-grid ul.navigation li.first{
  padding-left: 0px;
}
#portfolio-grid ul.navigation li.last{
  padding-right: 0px;
  background: none;
}
#portfolio-grid ul.navigation li a{
  font-size: 14px;
  color: #464646;
  text-decoration: none
}
#portfolio-grid ul.navigation li.active a{
  color: #969697;
}

#portfolio-grid td{
  padding: 10px;
}
#portfolio-grid td h3{
  color: #464646;
  font-size: 15px;
  font-weight: bold;
  margin-top: 10px;
}
#portfolio-grid td ul{
  margin-top: 6px;
  background: url("assets/images/tag.png") left center no-repeat;
  padding-left: 20px;
  margin-bottom: 10px;
}
#portfolio-grid td li{
  height: 12px;
  line-height: 12px;
  font-size: 12px;
  color: #969697;
  display: inline;
  padding: 0 3px 0 0;
  border-right: #464646 1px solid;
}
#portfolio-grid td li.last{
  border: none;
}
#portfolio-grid .grid-slider{
  margin-left: 3px;
  margin-bottom: 20px;
}
#portfolio-grid .grid-slider span a{
  display: block;
  width: 23px;
  height: 5px;
  background: #bababa;
  text-decoration: none;
  float: left;
  margin-left: 7px;
}
#portfolio-grid .grid-slider span.active a{
  background: #dcdcdc;
}

#portfolio{
  overflow: hidden;
  border-bottom: #c0c0c0 1px solid;
  padding: 20px 0;
}
#portfolio h2{
  font-size: 18px;
  color: #090909;
  text-transform: uppercase;
}
#portfolio h2 span{
  display: block;
  float: left;
  width: 30px;
}
#portfolio ul{
  width: 960px;
  margin-top: 16px;
}
#portfolio li{
  display: inline;
  margin-right: 28px;
}
#portfolio li.last{
  margin-right: 0;
}
#portfolio li img{
  width: 215px;
  height: 135px;
}
#portfolio li span{
  position: absolute;
  width: 60px;
  height: 20px;
  background: #fe9b00;
  margin: 115px 0 0 -64px;
}
#portfolio li span a{
  font-size: 12px;
  color: #090909;
  text-transform: uppercase;
  text-decoration: none;
  padding-left: 10px;
  line-height: 22px;
}

#socials{
  overflow: hidden;
}

#blog-updates{
  width: 710px;
  margin-right: 29px;
  padding: 20px 0;
  float: left;
}
#blog-updates h3, #social-buttons h3{
  font-size: 12px;
  text-transform: uppercase;
}
#blog-updates h3 span, #social-buttons h3 span{
  display:block;
  float: left;
  width: 23px;
}
#blog-updates p{
  line-height: 20px;
  font-size: 12px;
  padding: 20px 0;
  color: #5d5d5d;
}

#social-buttons{
  width: 215px;
  padding: 20px 0;
  float: right;
}
#social-buttons a img{
  padding: 20px 15px 20px 0;
}

#footer{
  height: 75px;
  margin-top: 20px;
  background: #e2e2e2;
  color: #5d5d5d;
  font-size: 12px;
  padding-top: 25px;
  line-height: 20px;
}
#footer ul{
  width: 960px;
  margin: 0 auto;
}
#footer li{
  display: inline;
  padding: 0 5px;
  border-right: #5d5d5d 1px solid;
}
#footer li.first{
  padding-left: 0;
}
#footer li.last{
  padding-right: 0;
  border: none;
}
#footer li a{
  font-size: 12px;
  text-decoration: none;
  color: #5d5d5d;
}
#footer span.copyright{
  display: block;
  width: 960px;
  margin: 0 auto;
}
#footer div.logo{
  width: 960px;
  text-align: right;
  margin: -50px auto;
}

.float-left{
  float: left;
}
.clear{
  clear: both;
}
.test { font-family:'WebfontBold'; }

#view {
	font-family:'WebfontBold';
	background:#ececec;
	padding:10px;
	height:30px;
	width:256px;
	margin-top:-20px;
	font-size:16px;
	line-height:30px;
}

#view a {
	float:right;
	color:#c2432c;
	text-decoration:none;
}

#subjects #head {
	background:#dadada;
	height:40px;
	line-height:40px;


	

}

#subjects .border {
	border-top:1px solid #dadada;
	border-bottom:1px solid #dadada;
	height:46px;
	padding-top:5px;
	margin-top:20px;
	color:#1b3958;
	font-family:WebfontBold;
}

.row1, .row2, .row3 { float:left; height:40px; line-height:40px;padding-left:15px;}
.row1 {
	width:500px;
}
.row2 {
	width:300px;
}

.row {
	border-top:1px solid #e7c783;
	border-bottom:1px solid #e7c783;
	height:40px;
	background:#f1e1bf;
	margin-top:15px;
	color:#c2432c;
	font-family:Georgia, Arial;
}

.create_order {
	background:url(assets/images/order-btn.png) no-repeat;
	height:36px;
	width:123px;
	float:right;
	margin-top:15px;
	margin-bottom:15px;
}

.order-summary {
	padding-bottom:20px;
	border-bottom:1px solid #dedede;
	margin-bottom:20px;
}

.row .row2, .row .row3 {
	border-left:1px solid #e7c783;
}

.ticket-left { float:left; width:500px;}
.ticket-right { float:right; width:380px; margin-top:30px;}

.ticket-left h1 { font-size:24px; color:#1a3856; font-weight:bold; margin-bottom:20px;}
.ticket-left textarea { margin-bottom:10px; width:480px; height:184px; background:url(assets/images/textareabg.png) no-repeat; border:0; resize:none; padding:10px; }
.ticket-right .big { font-size:18px; font-weight:bold; color:#1a3856; display:block; margin-bottom:3px; }
.ticket-left .file {
	padding-left:10px;
	color:#1a3856;
	font-family:Georgia, Arial;
}

.ticket-left input[type="submit"] {
	width:123px;
	height:35px;
	border:0;
	float:right;
	background:url(assets/images/create-ticket.png) no-repeat;
	margin-top:-15px;
}

.trouble {
	font-size:10px;
	padding-top:0px;
	display:block;
	clear:both;
	width:252px;
}

.trouble a {
	color:#c2432c;
	text-decoration:none;
}

.or-link {
	float:right;
	color:#1a3856;
	margin-top:-50px;
}

.or-link input {
	background:url(assets/images/inputbg.png) no-repeat;
	border:0;
	height:31px;
	width:173px;
	margin-left:10px;
	padding-left:10px;
	padding-right:10px;
	color:#1a3856;
	font-family:Georgia, Arial;
}

#smileys {
float:right;
margin-top:-29px;
}

.ticket-right .block {
	border-bottom:1px solid #e0e0e0;
	padding-bottom:20px;
	margin-bottom:10px;
}

.block .italic {
	font-style:italic;
	font-family:Georgia, Arial;
	font-size:11px;
}

.block .italic a {
	font-style:normal;
	font-size:11px;
	color:#C2432C;
	text-decoration:none;
}
.block table {
	margin-top:10px;
}
.block td {
	color:#235c8c;
	font-family:Georgia, arial;
}	

.block td.title {
	width:130px;
	color:#5D5D5D;
}

#overlay {
	width:100%;
	height:100%;
	position:absolute;
	background:url(assets/images/overlay.png);
	z-index:5;
	display:none;
}

#login {
	width:586px;
	height:306px;
	top:50%;
	margin-top:-168px;
	left:50%;
	margin-left:-308px;
	position:absolute;
	background:url(assets/images/login-bg.png);
	z-index:6;
	padding-top:30px;
	padding-left:30px;
	display:none;
}

#close-login {
	position:absolute;
	right:20px;
	top:20px;
	background:url(assets/images/close.png) no-repeat;
	width:22px;
	height:22px;
}

#login h1 {
	text-transform:uppercase;
	font-size:24px;
	color:#bf331a;
	font-family: Myriaf Pro, arial;
}

#login p {
	width:540px;
	font-size:13px;
	line-height:16px;
	margin-top:30px;
	margin-bottom:30px;
}
#login table {
	font-size:13px;
	margin-left:40px;
	text-align:right;
}
#login input[type="text"], #login input[type="password"] {
	border: 1px solid #d5d5d3;
	height:27px;
	padding:5px;
	width:360px;
	margin-top:5px;
	margin-left:10px;
}
#login input[type="submit"] {
	width:105px;
	height:39px;
	background:url(assets/images/login-btn.png) no-repeat;
	border:0;
	margin-top:5px;
	margin-right:267px;
	cursor:pointer;
}

#contact {
	width:555px;
	height:356px;
	top:50%;
	margin-top:-168px;
	left:50%;
	margin-left:-277px;
	position:absolute;
	background:url(assets/images/contact-us-bg.png) no-repeat;
	z-index:6;
	padding-top:30px;
	padding-left:30px;
	display:none;
}

#contact .close {
	width:30px;
	height:31px;
	display:block;
	background:url(assets/images/contact-close.png) no-repeat;	
	float:right;
	margin-right:67px;
	margin-top:3px;
}
#contact form {
	margin-top:50px;
	margin-left:35px;

}
#name-field {
	width:177px;
	height:35px;
	background:url(assets/images/input-name.png) 0px 4px no-repeat;
	border:0;
	padding-left:30px;
		color:#aeaeae;
	font-size:13px;
	line-height:28px;
	margin-right:5px;
}

#email-field {
	width:177px;
	height:35px;
	background:url(assets/images/input-email.png) 0px 4px no-repeat;
	border:0;
	padding-left:30px;
		color:#aeaeae;
	font-size:13px;
	line-height:28px;
}

#phone-field {
	width:177px;
	height:35px;
	background:url(assets/images/input-phone.png) 0px 4px no-repeat;
	border:0;
	padding-left:30px;
		color:#aeaeae;
	font-size:13px;
	line-height:28px;
}

#contact textarea {
	width:392px;
	height:86px;
	background:url(assets/images/message-bg.png) no-repeat;
	padding-left:30px;
	color:#aeaeae;
	font-size:13px;
	border:0;
	resize:none;
	margin-top:3px;
	font-family:arial;
	padding-top:5px;
}

#contact input[type="submit"] {
	width:62px;
	height:39px;
	background:url(assets/images/send-button.png) no-repeat;
	cursor:pointer;
	border:none;
	display:block;
	margin-top:6px;
}

@font-face {
    font-family: 'WebfontBold';
    src: url('fonts/nevis-webfont.eot');
    src: url('fonts/nevis-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/nevis-webfont.woff') format('woff'),
         url('fonts/nevis-webfont.ttf') format('truetype'),
         url('fonts/nevis-webfont.svg#WebfontBold') format('svg');
    font-weight: normal;
    font-style: normal;

}

.clear { clear:both; }