﻿/*

COLOR SCHEME (http://colorschemedesigner.com/#3B31Tw0w0w0w0)

Blacks
#4f545a Dark gray with blue hint - footer-stripe
#292e2e Dark black - header/footer BG
#080909 Very dark black - outer border
#000000 Pure black - Text

Blues
#edf4fb Very light blueish-white - page-heading
#d4e4f7 Light blueish-white - page-description
#99c1f0 Sky blue - header-stripe BG
#256fc3 Medium blue - banner BG; links (normal)
#295990 Medium-dark blue - links (visited)
#154377 Dark blue - result-table header BG

Greens
#339933 Medium green - view-resource-link BG (hover); links (hover)
#008000 Green - strong.important
#266226 Dark green - view-resource-link border (hover)

Reds
#ff0000 Bright red - .warning

Whites
#ffffff Pure white - main-content BG
#f9fafc Very light gray - user-comment-footer BG
#f2f4f6 Very light gray - info-box BG
#e0e0e0 Light gray - footer-about
#d4d9df Silver - page BG
#cdd0d4 Gray - info-box border
#b0b0b0 Gray - footer-copyright
#a0a0a0 Gray - h5; h6
#808080 Dark gray - h5

Yellows
#fff1c0 Tan - header/footer links (hover)
#ffd440 Light orange - header/footer links (normal)
#fff8c0 Yellow - vote-box BG
#c0a880 Brown - vote-box border
#5f4d2e Dark brown - tag-suggestions FG

jQuery ThemeRoller (http://jqueryui.com/themeroller)

Font Settings
- Family: Trebuchet MS, Arial, Helvetica, Verdana, Sans-Serif
- Weight: normal
- Size: small
Corner Radius
- Corners: 2px
Header/Toolbar
- BG: #256fc3
- Border: #154377
- Icon: #d4e4f7

*/

a {
	color: #256fc3;
	text-decoration: none;
}

a:visited {
	color: #295990;
}

a:hover {
	color: #339933;
}

body {
	background: #d4d9df url('Images/PageBG.png') repeat-x;
    color: #000000;
    font-family: Trebuchet MS, Arial, Helvetica, Verdana, Sans-Serif;
    font-size: 100%;
    margin: 0;
    padding: 0;
}

h1 {
	clear: both;
	font-size: x-large;
	font-weight: bold;
	margin: 0;
}

h2 {
	clear: both;
	font-size: large;
	font-weight: bold;
	margin: 0 0 0.7em 0;
}

h2.secondary {
	clear: both;
	font-size: large;
	font-weight: bold;
	margin: 2em 0 0.7em 0;
}

h3 {
	clear: both;
	font-size: medium;
	font-weight: bold;
	margin: 0 0 0.3em 0;
}

h5 {
	clear: both;
	color: #a0a0a0;
	font-size: 0.9em;
	margin: 0;
	text-transform: uppercase;
}

h6 {
	clear: both;
	color: #a0a0a0;
	font-size: 0.75em;
	margin: 0;
	text-transform: uppercase;
}

img {
	border: none;
}

input {
    font-family: Trebuchet MS, Arial, Helvetica, Verdana, Sans-Serif;
}

textarea {
    font-family: Trebuchet MS, Arial, Helvetica, Verdana, Sans-Serif;
}

/*** PAGE **/

#page {
	background: url('Images/PageShadowVertical.png') repeat-y;
	margin: 0 auto;
	overflow: hidden;
	padding: 0;
	width: 960px;
}

#page-end {
	background: url('Images/PageShadowHorizontal.png') no-repeat;
	height: 10px;
	margin: 0 auto;
	overflow: hidden;
	padding: 0;
	width: 960px;
}

/*** HEADER **/

#header {
	background: #292e2e url('Images/HeaderBG.png') repeat;
	border-color: #080909;
	border-style: solid;
	border-width: 0 1px;
	color: #ffffff;
	height: 100px;
	margin: 0 auto;
	overflow: hidden;
	padding: 0;
	width: 940px;
}

#site-title-logo {
	display: block;
    float: left;
	margin: 10px 11px 0 21px;
}

#site-title {
	display: block;
    float: left;
	margin: 23px 22px 0 0;
}

#header a.header-link {
	color: #ffd440;
	display: block;
	float: right;
	font-size: small;
	margin: 11px 11px 0 0;
	line-height: 1em;
	text-align: center;
	text-decoration: none;
	text-transform: uppercase;
	width: 75px;
}

#header a.header-link:hover {
	color: #fff1c0;
}

/*** FOOTER **/

#footer {
	background: #292e2e url('Images/HeaderBG.png') repeat;
	border-color: #080909;
	border-style: solid;
	border-width: 0 1px 1px 1px;
	color: #ffffff;
	margin: 0 auto;
	overflow: hidden;
	padding: 0;
	width: 940px;
}

#footer-stripe {
	background-color: #4f545a;
	clear: both;
	height: 7px;
}

#footer div#footer-link-block {
	float: left;
	margin: 1px;  /* IE7 - margin/padding combination ensures bottom margin is rendered */
	padding: 1em 21px;
	width: 120px;
}

#footer div.link-heading {
	font-weight: bold;
	margin: 0 0 0.5em 0;
}

#footer ul.link-list {
	font-size: small;
	list-style-type: none;
	margin: 0;
	padding: 0;
	text-transform: uppercase;
}

#footer ul.link-list li {
	background: none;
	margin: 0;
	padding: 0;
}

#footer div#footer-content-block {
	float: left;
	margin: 1px;  /* IE7 - margin/padding combination ensures bottom margin is rendered */
	padding: 1em 21px;
	width: 690px;
}

#footer a {
	color: #ffd440;
	text-decoration: none;
}

#footer a:visited {
	color: #ffd440;
}

#footer a:hover {
	color: #fff1c0;
}

#footer-about {
	color: #e0e0e0 ;
	font-size: small;
}

#footer-copyright {
	color: #b0b0b0;
	font-size: small;
	margin: 0.7em 0 0 0;
}

/*** PAGE CONTENT (General) **/

#main {
	background: #ffffff url('Images/BannerBG.png') no-repeat;
	border-color: #080909;
	border-style: solid;
	border-width: 0 1px;
	width: 940px;
	margin: 0 auto;
	overflow: hidden;
	padding: 0;
}

#banner-block {
	height: 107px;
	margin: 22px 22px 0 0;
}

h1#page-heading {
	color: #edf4fb;
	clear: none;
}

#page-user-info {
	background: #419dec;
	border: solid 1px #154377;
	color: #bbd7f7;
	float: right;
	font-size: small;
	margin: 22px 29px 0 7px;
	padding: 3px 7px 0 7px;
	text-align: left;
	width: 284px;
}

#page-user-info a {
	color: #deecfc;
}

#page-user-info a:visited {
	color: #deecfc;
}

#page-user-info a:hover {
	color: #f5faff;
}

#page-user-info .gravatar {
	background: #ffffff;
	border: solid 1px #ffffff;
}

#page-description {
	color: #d4e4f7;
	line-height: 1.1em;
	margin: 0 44px;
}

#single-column {
	margin: 22px;
}

#single-column .hr {
	clear: both;
	height: 1px;
	margin: 0;
	padding: 0.3em 0 1.3em 0;
}

#single-column .hr img {
	display: block;  /* Images are inline and default to baseline alignment, thereby adding some space underneath them... this removes the space */
}

#two-column-primary {
	float: left;
	margin: 0 0 22px 22px;
	width: 574px;
}

#two-column-primary .hr {
	clear: both;
	height: 1px;
	margin: 0;
	padding: 0.3em 0 1.3em 0;
}

#two-column-primary .hr img {
	display: block;  /* Images are inline and default to baseline alignment, thereby adding some space underneath them... this removes the space */
}

#two-column-secondary {
	border: solid 7px #ffffff;
	float: right;
	margin: 22px 15px 22px 0;
	width: 300px;
}

/*** CONTENT (General) **/

.advertisement-block {
	padding: 0;
	margin-bottom: 22px;
}

.advertisement-block img {
	display: block;  /* Images are inline and default to baseline alignment, thereby adding some space underneath them... this removes the space */
}

a.comment-count {
	background: #256fc3;
	color: #ffffff;
	display: block;
	float: left;
	font-size: 12px;
	font-weight: normal;
	margin: 0 11px 0 0;
	padding: 0 7px;
	position: relative;
	text-align: center;
	
	/* CSS3 */
	-moz-border-radius: 3px;
	-webkit-border-radius: 3px;
	border-radius: 3px;
}

a.comment-count.zero {
	background: #cdd0d4;
}

a.comment-count:hover {
	background: #339933;
}

/* Callout triangle */
a.comment-count:after {
	border-color: #256fc3 transparent transparent; 
	border-style: solid;
	border-width: 5px 5px 5px 0px; /* vary these values to change the angle of the vertex */
	bottom: -10px; /* value = - border-top-width - border-bottom-width */
	content: "\00a0";
	display: block;
	height: 0;
	left: 5px;
	position: absolute;
	width: 0;
}

a.comment-count.zero:after {
	border-color: #cdd0d4 transparent transparent; 
}

a.comment-count:hover:after {
	border-color: #339933 transparent transparent; 
}

.description {
	color: #606060;
}

.dim {
	color: #808080;
}

.gravatar {
	margin-bottom: .25em;  /* Simulates absmiddle */
	vertical-align: middle;
}

fieldset .gravatar {
	background: #ffffff;
	border: solid 1px #cdd0d4;
	padding: 1px;
}

.icon {
	margin-bottom: .25em;  /* Simulates absmiddle */
	vertical-align: middle;
}

.important {
	font-weight: bold;
}

strong.important {
	color: #008000;
}

.indent {
	margin-left: 1em;
}

.indent-dual {
	margin-left: 1em;
	margin-right: 1em;
}

.info-box {
	background: #f2f4f6 url('Images/InfoBoxBG.png') repeat-x;
	border: solid 1px #cdd0d4;
	font-size: small;
	padding: 11px;
	margin-bottom: 22px;
}

.info-box.floating-right {
	float: right;
	margin: 0 7px 22px 0;
	width: 276px;
}

.info-box h3 {
	color: #292e2e;
}

.info-box ul+h3 {
	margin-top: 0.7em;
}
 
.instruction {
	color: #4f545a;
	font-style: italic;
	font-weight: normal;
}

ul.link-list {
	list-style-type: none;
	margin: 0 0 1em 1em;
	padding: 0;
}

ul.link-list li {
	background: url('Images/BulletLink.png') no-repeat left center;
	padding-left: 16px;
}

.nobr {
	white-space: nowrap;
}

table.result-table {
	border-collapse: collapse;
	font-size: small;
	margin: 0 0 1em 0;
}

table.result-table tr th {
	background: #256fc3 url('Images/ResultTableHeaderBG.png') repeat-x;
	border: solid 1px #154377;
	color: #ffffff;
	font-weight: bold;
	margin: 0;
	padding: 3px 1em 3px 5px;
	text-align: left;
	vertical-align: text-bottom;
}

table.result-table tr th.numeric-data {
	text-align: right;
}

table.result-table tr.navigation-row th {
	background: #f2f4f6;
	border-width: 0 0 1px 0;
	border-color: #e0e0e0;
	color: #000000;
	font-weight: normal;
	margin: 0;
	padding: 3px 1em 3px 5px;
	text-align: center;
	vertical-align: baseline;
}

table.result-table tr.navigation-row th a {
	background: #ffffff;
	border: solid 1px #cdd0d4;
	margin: 1px 2px;
	padding: 0 3px;
}

table.result-table tr.navigation-row th a:hover {
	border: solid 1px #339933;
}

table.result-table tr td {
	border-bottom: solid 1px #e0e0e0;
	border-collapse: collapse;
	margin: 0;
	padding: 3px 1em 3px 5px;
	text-align: left;
	vertical-align: text-top;
}	

table.result-table tr.alternate td {
	background: #fafafa;
}

table.result-table tr.deleted td {
	background: #faf0f0;
}

table.result-table tr.alternate-deleted td {
	background: #faf0f0;
}

table.result-table tr td.numeric-data {
	text-align: right;
}

table.result-table tr td.vote-data {
	vertical-align: top;
}

table.result-table tr td .vote-box-container {
	float: none;
	margin: 1px 0;
	width: auto;
}

table.result-table tr td .vote-box-container .vote-box {
	padding: 3px 0;
}

.search-control {
	font-size: large;
}

p.secondary {
	font-size: small;
	margin: 0 0 1em 0;
}

p.secondary-blurb {
	font-size: small;
	font-style: italic;
	margin: 0 0 1em 0;
}

span#sharethis_0 a.stbutton {  /* ShareThis */
	padding: 0 0 0 20px;
}

.success {
	color: #008000;
}

.tag1 {
	font-size: small;
}

.tag2 {
	font-size: medium;
}

.tag3 {
	font-size: large;
}

ul.tag-list {
	list-style-type: none;
	margin: 0 0 0.5em 1em;
	padding: 0;
}

ul.tag-list li {
	display: inline;
}

ul.tag-list-detailed {
	line-height: 1.5em;
	list-style-type: none;
	margin: 0;
	padding: 0;
}

ul.task-list {
	line-height: 1.5em;
	list-style-type: none;
	margin: 0;
	padding: 0;
}

.textbox-watermark {
	color: #cccccc;
}

.unimportant {
	color: #a0a0a0;
	font-size: 90%;
	font-weight: normal;
}

.warning {
	color: #ff0000;
}

/*** RESOURCE ITEM PAGE **/

#user-comments {
	margin-bottom: 1em;
}

.user-comment-block {
	clear: both;
}

.user-comment-block.reply {
	clear: both;
	margin-left: 30px;
}

.user-comment-block .gravatar {
	float: left; 
}

.user-comment {
	background: #ffffff;
	border: 1px solid #cdd0d4;
	color: #292e2e;
	font-size: small;
	margin: 0 0 7px 61px;
	position: relative;
	
	/* CSS3 */
	-moz-border-radius: 6px;
	-webkit-border-radius: 6px;
	border-radius: 6px;
}

.user-comment-block.positive .user-comment {
	border-color: #339933;
	font-weight: normal;
}

.user-comment-block.negative .user-comment {
	border-color: #e0e0e0;
	color: #cdd0d4;
}

.user-comment-block.reply .user-comment {
	margin-left: 52px;
}

/* Callout triangle */
.user-comment:before {
	border-color: transparent #cdd0d4 transparent transparent;
	border-style: solid;
	border-width: 0 22px 15px 22px;
	content: "\00a0";
	display: block;
	height: 0;
	left: -44px;
	position:absolute;
	top: 10px;
	width: 0;
}

.user-comment-block.positive .user-comment:before {
	border-color: transparent #339933 transparent transparent;
}

.user-comment-block.negative .user-comment:before {
	border-color: transparent #e0e0e0 transparent transparent;
}

/* Fill triangle */
.user-comment:after {
	border-color: transparent #fff transparent transparent;
	border-style: solid;
	border-width: 0 19px 13px 19px;
	content: "\00a0";
	display: block;
	height: 0;
	left: -38px;
	position: absolute;
	top: 11px;
	width: 0;
}

.user-comment-footer {
	background-color: #f9fafc;
	border-top: solid 1px #cdd0d4;
	color: #808080;
	font-size: smaller;
	padding: 3px 8px;
	
	/* CSS3 */
	-moz-border-radius: 0 0 4px 4px;
	-webkit-border-radius: 0 0 6px 6px;
	border-radius: 0 0 6px 6px;
}

.user-comment-block.positive .user-comment-footer {
	background-color: #f9fcf9;
	border-color: #339933;
}

.user-comment-block.negative .user-comment-footer {
	border-color: #e0e0e0;
}

.user-comment-footer a {
	font-weight: bold;
}

.user-comment-footer a.button-link {
	background: #ffffff;
	border: solid 1px #cdd0d4;
	font-size: 10px;
	font-weight: normal;
	float: right;
	height: 13px;
	line-height: 13px;
	margin: 0 5px 0 0;
	text-align: center;
	width: 50px; 
}

.user-comment-footer a.button-link:hover {
	background: #339933;
	border-color: #266226;
	color: #ffffff;
}

.user-comment-block .score {
	background: #fff8c0;
	border: solid 1px #c0a880;
	color: #292e2e;
	font-size: 10px;
	font-weight: bold;
	float: right;
	height: 13px;
	line-height: 13px;
	margin: 0 2px 0 0;
	text-align: center;
	width: 25px; 
}

.user-comment-block .score.positive {
	background: #b4e4b4;
	border-color: #c0a880;
}

.user-comment-block .score.negative {
	background: #eeefe6;
	border-color: #c0a880;
}

.user-comment-footer .vote-down-button {
	float: right;
	margin: 0;
}

.user-comment-footer .vote-up-button {
	float: right;
	margin: 0 2px 0 0;
}

.user-comment-footer .vote-warning-button {
	float: right;
	margin: 0 2px 0 0;
}

.user-comment-text {
	margin: 7px;
}

.user-comment-text.none {
	color: #cdd0d4;
	font-style: italic;
}

blockquote.user-comment-text {
	overflow: auto;
}

.user-comment-text blockquote {
	border-left: solid 3px #99c1f0;
	color: #808080;
	font-style: italic;
	margin: 3px;
	padding-left: 7px
}

.user-comment-textbox {
	width: 490px;
}

#resource-abstract {
	display: block;
	font-size: small;
	font-style: italic;
	margin: 0 0 1em 0;
	padding: 0;
}

#resource-profile-block {
	margin: 0 0 1em 0;
}

#resource-profile-block h6 {
	clear: none;
}

#resource-summary {
	display: block;
	margin: 0 0 1em 0;
	padding: 0;
}

UL.resource-marker-list {
	font-size: small;
	line-height: 1.5em;
	list-style-type: none;
	margin: 0;
	padding: 0;
}

#view-resource-link {
	background: #f2f4f6;
	border: solid 1px #cdd0d4;
	display: block;
	float: left; 
	font-size: 1.5em; 
	line-height: 1.5em;
	margin: 0 22px 22px 0;
	padding: 0;
	text-align: center;
	width: 202px;
}

#view-resource-link:hover {
	background: #339933;
	border: solid 1px #266226;
	color: #ffffff;
}

#view-resource-link img {
	display: block;  /* Images are inline and default to baseline alignment, thereby adding some space underneath them... this removes the space */
}

#view-resource-site-thumbnail {
	background-color: #ffffff;
	background-image: url('Images/SiteThumbnailPlaceholder.png');
	display: block;
	height: 152px;
	width: 202px;
}

.vote-box-container {
	float: left; 
	margin: 3px 11px 3px 0; 
	width: 50px; 
}

.vote-box {
	background: #fff8c0;
	border: solid 1px #c0a880;
	font-size: 20px; 
	line-height: 1em;
	padding: 7px 0;
	text-align: center;
	width: 50px; 
}

.vote-box.positive {
	background: #b4e4b4;
	border: solid 1px #c0a880;
	font-size: 20px; 
	line-height: 1em;
	padding: 7px 0;
	text-align: center;
	width: 50px; 
}

.vote-box.negative {
	background: #eeefe6;
	border: solid 1px #c0a880;
	font-size: 20px; 
	line-height: 1em;
	padding: 7px 0;
	text-align: center;
	width: 50px; 
}

.vote-button-container {
	display: block;
	margin: 2px 0 0 0; 
	text-align: center;
	width: 52px; 
}

.vote-up-button {
	background-image: url('Images/VoteUp.png');
	background-repeat: no-repeat;
	display: block;
	float: left;
	height: 15px;
	margin: 0px;
	width: 25px;
	padding: 0px;
}

.vote-up-button:hover {
	background-image: url('Images/VoteUpHot.png');
}

.vote-up-button.disabled {
	background-image: url('Images/VoteUpDisabled.png');
}

.vote-up-button-large {
	background-image: url('Images/VoteUpLarge.png');
	background-repeat: no-repeat;
	display: block;
	height: 15px;
	margin: 0px;
	width: 52px;
	padding: 0px;
}

.vote-up-button-large:hover {
	background-image: url('Images/VoteUpHotLarge.png');
}

.vote-down-button {
	background-image: url('Images/VoteDown.png');
	background-repeat: no-repeat;
	display: block;
	float: right;
	height: 15px;
	margin: 0px;
	width: 25px;
	padding: 0px;
}

.vote-down-button:hover {
	background-image: url('Images/VoteDownHot.png');
}

.vote-down-button.disabled {
	background-image: url('Images/VoteDownDisabled.png');
}

.vote-down-button-large {
	background-image: url('Images/VoteDownLarge.png');
	background-repeat: no-repeat;
	display: block;
	height: 15px;
	margin: 0px;
	width: 52px;
	padding: 0px;
}

.vote-down-button-large:hover {
	background-image: url('Images/VoteDownHotLarge.png');
}

.vote-warning-button {
	background-image: url('Images/VoteWarning.png');
	background-repeat: no-repeat;
	display: block;
	float: right;
	height: 15px;
	margin: 0px;
	width: 25px;
	padding: 0px;
}

.vote-warning-button:hover {
	background-image: url('Images/VoteWarningHot.png');
}

.vote-box-label {
	font-size: 8pt; 
	display: block; 
	line-height: 1em;
}

/*** FIELDSETS (General) **/

fieldset {
	background: #f2f4f6 url('Images/InfoBoxBG.png') repeat-x;
	border: solid 1px #cdd0d4;
	font-size: small;
	margin: 0 0 22px 0;
	padding: 15px 22px 22px 22px;
}

fieldset div label.chars-remaining {
	color: #808080;
	clear: left;
	font-size: 0.9em;
	font-style: italic;
}

fieldset div.button-input {
	clear: left;
	margin: 7px 0 0 137px;
}

fieldset div.checkbox-input {
	clear: left;
	margin: 7px 0 0 0;
}

fieldset div.datepicker-input {
	clear: left;
	margin: 7px 0 0 0;
}

fieldset div.display-text {
	clear: left;
	font-weight: bold;
	margin: 7px 0 0 0;
}

fieldset div.display-text.huge {
	font-size: xx-large;
}

fieldset div.dropdownlist-input {
	clear: left;
	margin: 7px 0 0 0;
}

fieldset div.textbox-input {
	clear: left;
	margin: 7px 0 0 0;
}

fieldset div label {
	display: block;
	float: left;
	margin: 0 7px 0 0;
	text-align: right;
	width: 130px;
}

fieldset div.datepicker-input label {
	margin-top: 3px;
}

fieldset div.display-text label {
	font-weight: normal;
}

fieldset div.display-text.huge label {
	font-size: small;
}

fieldset div.display-text div.display-value {
	margin-left: 137px;
}

fieldset div.display-text div.display-value p.secondary {
	font-weight: normal;
	margin: 0.2em 0 0 0;
}

fieldset div.display-text div.instruction {
	margin-left: 137px;
}

fieldset div.dropdownlist-input label {
	margin-top: 1px;
}

fieldset div.textbox-input label {
	margin-top: 3px;
}

fieldset div.textbox-input .tag-suggestions {
	margin: 3px 0 0 137px;
}

fieldset div.textbox-input .tag-suggestions span {
	background: #fff8c0;
	border: solid 1px #c0a880;
	color: #5f4d2e;
	cursor: pointer;
	margin: 3px 3px 0 0;
	padding: 0 7px;
}

fieldset .width-medium {
	width: 350px;
}

fieldset .width-small {
	width: 150px;
}

fieldset .width-tiny {
	width: 60px;
}

fieldset .width-wide {
	width: 640px;
}

.field-validation-error {
	color: #ff0000;
}

.input-validation-error {}

.validation-summary-errors {
	color: #ff0000;
	font-size: small;
}

.validation-summary-errors UL {
	margin-top: 0;
}

/*** jQuery (General) **/

button.ui-datepicker-trigger {
	padding: 0;
	width: 24px;
	vertical-align: top;
}
