/*----------------------- document setup --------------------------------- */
body {
	margin: 0px;
	text-align: center;
	font-family: "Lucida Sans", "Helvetica", "Arial", sans-serif;
	font-size: 12px;
	line-height: 17px;
	color: #333333;
}


* {
	margin: 0px;
	padding: 0px;
}

p, h1, h2, h3 {
	margin-bottom: 10px;
	margin-top: 0px;
	font-weight: normal;
}

h1 {
	font-size: 42px;
	margin-bottom: 20px;
}

h3 {
	color: #8E8E8E;
}

h2 {
	height: 20px;
}

.spacer, .portfolio-items ul#thumbs li.spacer, .showcase-items ul#thumbs li.spacer {
	display: block;
	clear: both;
	float: none;
	margin: 0;
	padding: 0;
	border: 0;
	height: 0;
	width: 0;
}


a img {
	border: 0px;
}

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

a:hover {
	text-decoration: underline;
}

.label {
	font-size: 11px;
	font-weight: bold;
	vertical-align: top;
}

.code { background:#232323; border:1px #000 solid; color:#e6e0db; font-family:'Courier New', 'Terminal', monospace; font-size:12px; line-height:13px; margin:12px 0; overflow:auto; padding:6px 8px; }


/*------------------------- layout ------------------------------- */
#container {
	margin: 0px auto;
	width: 800px;
	text-align: left;
	position: relative;
}

#top-menu {
	width: 800px;
	height: 110px;
}

#flash-banner {
	width: 800px;
	height: 260px;
	padding: 0px 0px 10px;
}

#content {
	width: 800px;
}

#footer {
  background:url(/images/footer-bg.jpg) repeat-x;
  margin-top:50px;
}

#bottom-menu {
  padding: 0px 0px;
  margin:0px auto 10px;
  text-align:left;
  width: 800px;
}

#copy { 
  border-top: 1px solid #E5E5E5;
  color: #888888;
  font-size: 9px;
  height: 50px;
  padding: 6px 0px 50px;
  margin:0 auto;
  width:800px;
}


/*---------------- top menu -------------- */
#top-menu ul { list-style-type: none; padding-left: 81px;  }
#top-menu li { float: left; margin-right: 13px; padding-top: 22px; }
#top-menu li a img { margin-top: 45px; }
#top-menu li.logo { margin: 0px 50px 0px 37px;  }

/*-------------------- columns --------------------------------- */
.column {
	float: left;
	clear: none;
	margin-right: 20px;
}

.wide { width: 390px; }
.normal { width: 185px; }
.last { margin-right: 0px !important; } 
.main { width: 595px; }
.getintouch { padding-top:6px; width:190px; }
.digits { width:150px; }
.digits .line { float:right; }
.twitter { width:250px; }
.filled { background: #f2f2f2; font-size: 11px; height:310px; padding: 5px 20px; }
.filled h2 { background:url(/images/filled-line.jpg) no-repeat bottom; height:24px; }

.index-wide { margin-bottom:20px; width:510px; }
.index { margin:0 16px 20px 0; width:250px; }
.index .head, .index .foot { height:10px; overflow:hidden; width:250px; }
.index .foot { background: #f2f2f2; height:30px; }
.index .visit { padding:0 0 4px 20px; }
.index-wide, .index { font-size:12px; line-height:18px; }
.index p { padding:0; margin:0 0 6px; }
.index li { margin-left:-14px;}

/*-------------------------- index banner --------------- */

#banner {
  background:url(/images/banner-bg.jpg) no-repeat center top;
  height:380px;
  margin:0 auto 10px;
  width:800px;
  overflow: hidden;
  *height: 390px;
}

#examples-wrap {
  height:380px;
  margin:0 auto;
  width:780px;
  overflow:hidden;
  position: relative;
}

#content ul#examples {
  height:380px;
  margin:0 auto;
  padding: 0px;
  width:10000px;
  position: relative;
  *top: -10px;
}

li.example {
  color:#fff;
  float:left;
  height:370px;
  margin:0 0 2px 0;
  width:780px;
  list-style: none;
}

li.example img {
  margin: 0px;
  padding: 0px;
  *padding-top: 10px;
}

li.example .caption {
  color:#969696;
  display:block;
  font-size:11px;
  padding:16px 0 0 0;
  display: none;
}

#example-navigation {
  float:right;
  height:13px;
  position:relative;
  top: -40px;
  padding-top: 10px;
  width:146px; 	/* 6 slides = 126px; 5 slides = 106px; 4 slides = 86 px */
  z-index:1000;
  height: 20px; 
  background: white;
  
}

#example-navigation a {
  background:url(/images/example-nav-grey.jpg) no-repeat;
  display:block;
  float:left;
  font-size:0px;
  height:13px;
  text-decoration:none;
  width:20px
}

#example-navigation .activeSlide {
  background:url(/images/example-nav-red.jpg) no-repeat;
}
/*---------------- comments ----------------- */
#comments{margin-top:25px;}
#new-comment{border-top:1px solid silver;padding-top:10px;}
#comment-message{float:left;width:58%;}
#comment-details{float:right;width:38%;}
#comment-details strong small{font-weight:normal;}
#comment-details input.textfield{width:100%;font-size:18px;}
#comment-details input.submit{font-size:14px;}
#comment-details p{margin-bottom:20px;}
#comment-message textarea{height:148px;width:100%; margin-bottom: 18px; }
#new-comment textarea,#new-comment input.textfield{background:#f6f6f6;border:1px solid #999;}
.avatar{width:60px;float:left;margin-right:10px;}
.avatar img{border:5px solid silver;}
.comment-text{float:right;width:520px;}
.comment{border-top:1px solid silver;padding:15px 0px;font-size:13px;}


/*-------------------------- portfolio and shifter --------------- */


#arrow-left {
	position: absolute; 
	left: -27px;
	top: 250px;
}

.portfolio-main { width: 530px; margin-right: 10px; }
.portfolio-items { width: 260px; padding: 0px; }
.portfolio-items ul#thumbs { list-style-type: none; margin: 0px; padding: 0px;}
.portfolio-items ul li { float: left; margin-right: 7px; margin-bottom: 10px; position: relative; height: 60px; }
#thumbs img { border: 1px solid #e7e7e7; }
.portfolio-items .active-line { position: absolute; bottom: -1px; left: 1px; width: 80px; height: 4px; background: #eb232b;}
.portfolio-items ul li.last { margin-right: 0px; }

#assets-holder { position: relative; margin-bottom: 10px; }

.asset { display: none; }

#asset-arrows { position: absolute; right: 15px; clear: both; z-index: 50; behavior: url(/javascripts/iepngfix.htc); display: none; }

#asset-arrows a { outline: none; }
  
.asset-info { 
	background: black;
	opacity:.75;
	filter: alpha(opacity=75);
	color: white; 
	font-size: 14px;
	padding: 10px;
	position: absolute; 
	bottom: 0px; 
	left: 0px;
	width: 510px; 
	z-index: 3;
}

.asset img { width: 530px;}


/*------------- portfolio tab menu ---------------- */
#portfolio-nav {
	background: url(/images/portfolio-tabs-bg.gif) no-repeat;
	width: 800px;
	height: 39px;
	margin-top: 35px;	
	margin-bottom: 20px;
}

#portfolio-nav ul { list-style-type: none; margin: 0px; position: relative; left: -15px; }

#portfolio-nav ul li { width: 88px; height: 20px; float: left; }

#portfolio-nav ul li a {
	display: block;
	background: url(/images/portfolio-tab.gif) no-repeat;
	width: 88px;
	height: 20px;
	padding-top: 19px;
	text-align: center;
	color: #595959;
	text-transform: uppercase;
	outline: none;
}

#portfolio-nav ul li a:hover, #portfolio-nav ul li a.active, #portfolio-nav ul li a:active { 
	background: url(/images/portfolio-tab-on.gif) no-repeat; 
	color: #E7161D;
	text-decoration: none;
}

/*-------------------- bottom menu ------- */

#info { 
  color:#373737;
  font-size:12px;
  height:90px;
  margin:0px auto 10px;
  padding:20px 0 0 0;
  text-align:left;
  text-shadow: #fff 1px 1px 0px;
  width:800px;
}

#bottom-menu ul {
	list-style: none;
}

#bottom-menu ul li {
	float: left;
	margin-right: 20px;
	font-size: 10px;
	font-weight: bold;
	text-transform: uppercase;
}

#bottom-menu ul li.last { margin-right: 0px; }

#bottom-menu ul li li {
	float: none;
	font-weight: normal;
  margin-right: 5px;
  padding: 2px 0px;
  text-transform: none;
	width: 90px;
}

#bottom-menu ul li li a {
	color: #888888;
}


/*--------------------- stylez ----------------------------- */

#content ul {
	padding: 0px 0px 0px 30px;
}

#content {
	line-height: 18px;
}

#content h1 {
	line-height: 42px;
	height: 45px;
	margin-bottom: 10px;
	/*text-transform: capitalize;*/ /* Doesn't work with apostrophes ("You'Re All Done") */
	font-family: DIN-MediumAlternate;
}

#content h2 {
	font-family: DIN-MediumAlternate;
}

#tools-table td {
	vertical-align: top;
	padding: 10px 0px 10px 2px;
	font-size: 9px;
	line-height: 14px;
}

.blog-post {
	margin: 0px 0px 25px;
}

.blog-post big {
	color: black;
	font-size: 24px;
	line-height: 28px;
	display: block;
}

.post-info {
	width: 585px;
	border-top: 1px solid #E5E5E5;
	font-size: 9px;
	padding-top: 2px;
margin-top:14px;
}

#logo-bottom {
  behavior: url(/javascripts/iepngfix.htc);
  position: absolute;
  top: 110px;
  margin-left: 0px !important;
  /*width: 300px;
  height: 110px;*/
  width:800px;
  z-index: 480;
  *margin-left: -7px;
}

#logo-bottom img{
  display:block;
  margin:0 auto;
}

table.form {
	border-collapse: collapse;
	width: 100%;
}

table.form td {
	border-top: 1px solid #E5E5E5;
	padding: 10px 5px;
}

div.forge-inserted-thumbnail {
	line-height: 10px;
	font-size: 9px;
	text-align: center;
}

div.forge-inserted-thumbnail img {
	border: 1px solid #E5E5E5;
	height: 70px;
}

pre {
  display: block;
  padding: 10px 16px;
  background-color:#f8f8ff;
	border:1px solid #dedede;
	color:#444;
  
  overflow: auto;
  margin: 15px 0px;
}

pre code {
	padding: 0px;
	font-family: Monaco, monospaced;
  font-size: 12px;
  line-height: 16px;
	margin: 0px;
}

ol {
  padding: 10px 30px;
}

ol li {
  margin-bottom: 10px;
}

.rss img {
  position:relative;
  top:3px;
  left:4px;
}

blockquote { padding-left: 30px; }

#png-logo {
  *display: none;
}
/*---------------- errors etc ------------------ */
.flash-msg, .errorExplanation {
	padding: 5px 10px 5px 30px;
	margin-top: 10px;
	margin-bottom: 15px;
	font-weight: bold;
}
#flash-notice {
	color: #577700;
	border: 1px solid #658900;
	background: url(/images/forge/miniicons/icon_accept.gif) #E9F1D5 no-repeat 8px 6px;
}
.errorExplanation, #flash-warning {
	color: red;
	border: 1px solid red;
	background: url(/images/forge/miniicons/action_stop.gif) #FFC9C9 no-repeat 8px 6px;
}

.errorExplanation h3, #flash-warning {
	color: red;
}
.fieldWithErrors { display: inline; margin: 0px; }
.fieldWithErrors input, .fieldWithErrors textarea { border: 1px solid red;}

/*---------------- rank requests --------------------*/

#rank_request_form h2 {
	margin-top: 20px;
}

.hidden {
	display: none;
}

#rank_request_form div.left {
	width: 50%;
	float: left;
}

#rank_request_form div.right {
	width: 50%;
	float: right;
}

#rank_request_form div.fieldWithErrors {
	display: inline;
}

#rank_request_form div.row {
	padding-bottom: 10px;
	clear: both;
}

#rank_request_form div.row p {
	width: 90%;
	text-align: justify;
}

#rank_request_form .row input[type=text], #rank_request_form .row textarea {
	width: 70%;
}

#rank_request_form .row label {
	width: 20%;
	float: left;
}

#rank_request_form table {
	position: relative;
	left: -10px;
}

#rank_request_form table input[type=text] {
	width: 240px;
}

.rr_70 {
	width: 70%;
}

/* ---------------------------- questionnaires -------------- */

#questionnaire_form .left {float:left}
#questionnaire_form .right {float:right}

#questionnaire_form .questionnaire_header {margin-bottom: 20px; border-bottom:2px solid #c7c7c7;}
#questionnaire_form .questionnaire_header h2 {font-size:19px; width:300px; float:left}
#questionnaire_form .questionnaire_header .right {font-size:19px; padding-top:5px; width:30px; height:33px; text-align:center; position:relative; top:-7px;}
#questionnaire_form .questionnaire_header .right.current {background:url(/images/page-indicator.png)}
#questionnaire_form .save_button {margin-left:110px; margin-bottom:30px; height:35px;}
#questionnaire_form .save_button > .right {width:600px;}

#questionnaire_form .nav_buttons {padding-top:20px; padding-left:110px; border-top:1px solid #c7c7c7; height:40px;}
#questionnaire_form .nav_buttons button, #questionnaire_form .save_button button{background:transparent; border-width:0px;}

#questionnaire_form > form > div.left {width: 60%;}
#questionnaire_form > form > div.right {width: 40%;}

#questionnaire_form div.fieldWithErrors {
	display: inline;
	color: red;
}

#questionnaire_form div.row {
	padding-bottom: 10px;
	clear: both;
}

#questionnaire_form div.row p {
	width: 90%;
	text-align: left;
}

#questionnaire_form .row input[type=text], #questionnaire_form .row textarea {
	width: 70%;
}

#questionnaire_form .row label {
	width: 20%;
	float: left;
  text-align:right;
  font-weight:bold;
  padding-right:15px;
}

#questionnaire_form .choice {text-align:right; float:left; margin-left:7px; width:105px;}

.variable_spacer {
	visibility: hidden;
}


/*------------ directions ------------- */
#content ul.directions { padding: 0px; list-style: none; }
ul.directions li { margin-bottom: 7px; }













/*-------------------------- showcaseand shifter --------------- */


#arrow-left {
	position: absolute; 
	left: -27px;
	top: 250px;
}

#showcase-page {margin-left:-80px; width:960px;}
#showcase-page h1 {font-size:26px; line-height:20px; margin:0px; height:30px}
#showcase-page h2 {font-size:20px; line-height:30px; height:auto;}
#showcase-page h3 {font-size:12px; text-transform:uppercase; color:#eb222a;}
.showcase-main { position:relative; width: 680px; min-width:680px; min-height:100px; margin-right: 30px; }
.showcase-info {width:250px}
.showcase-links {width:300px; margin-bottom:30px; margin-right:30px;}
.hr {margin:30px 0px; width:100%; height:1px; border-top: 1px dotted #b2b2b2;}
.showcase-description, .showcase-quote {margin:15px 0px; border-top-style: dotted; border-top-color:#b2b2b2; border-top-width:1px; padding-top: 15px;}
.showcase-quote .quote {font-family:Georgia, "Times New Roman", serif; font-size:14px; line-height:20px; font-style:italic;}
.showcase-quote .quote-author {text-align:right}
.showcase-items { width: 260px; padding: 0px; }
.showcase-items ul#thumbs { list-style-type: none; margin: 0px; padding: 0px;}
.showcase-items ul li { float: left; margin-right: 7px; margin-bottom: 10px; position: relative; height: 60px; }
#thumbs img { border: 1px solid #e7e7e7; }
.showcase-items .active-line { position: absolute; bottom: -1px; left: 1px; width: 80px; height: 4px; background: #eb232b;}
.showcase-items ul li.last { margin-right: 0px; }

#showcase-assets-holder { position: relative; margin-bottom: 10px; }

#showcase-asset-arrows { position: absolute; right: 15px; clear: both; z-index: 50; behavior: url(/javascripts/iepngfix.htc); display: none; }

#showcase-asset-arrows a { outline: none; }
  
.showcase-asset-info { 
	background: black;
	opacity:.75;
	filter: alpha(opacity=75);
	color: white; 
	font-size: 14px;
	padding: 10px;
	position: absolute; 
	bottom: 0px; 
	left: 0px;
	width: 510px; 
	z-index: 3;
}

.showcase-asset .showcase-img { width: 680px;}


/*------------- showcase tab menu ---------------- */
#showcase-nav {
	background: url(/images/portfolio-tabs-bg.gif) no-repeat center;
	width: 960px;
	height: 39px;
	margin-top: 35px;	
	margin-bottom: 20px;
}

#showcase-nav ul { list-style-type: none; margin: 0px auto; position: relative; left: -15px; }

#showcase-nav ul li { width: 88px; height: 20px; float: left; }

#showcase-nav ul li a {
	display: block;
	background: url(/images/portfolio-tab.gif) no-repeat;
	width: 88px;
	height: 20px;
	padding-top: 19px;
	text-align: center;
	color: #595959;
	text-transform: uppercase;
	outline: none;
}

#showcase-nav ul li a:hover, #showcase-nav ul li a.active, #showcase-nav ul li a:active { 
	background: url(/images/portfolio-tab-on.gif) no-repeat; 
	color: #E7161D;
	text-decoration: none;
}

.video_container {width:680px; height:383px;}
.loading_img {margin-left:86px; width:508px; height:380px;}

ul.super-bold {list-style:none; font-size:20px; line-height:28px; color:#dc1a22;}
ul.super-bold li {height:28px;}