/*


Get Groovey Web Designs at Groovess.com


*/
	body {
		margin: 0;
		font-family: Arial, Helvetica, sans-serif;
		font-size: 95%;
		line-height: 170%;
		color: #2e2e2e;
		}
	h1, h2, h3, h4, h5, h6 {
		font-family: Arial, Helvetica, sans-serif;
		text-align:left;
	}
	
	h1 {
		color: #000;
		font-size: 2.0em;
		margin: 1em 0 1.4em;
		letter-spacing: .05em;
		border-bottom: 6px solid #ededed;
		padding: 10px 0;
		text-align: center;
		line-height: 150%;
		}
		
	h2 {
		color: #000;
		font-size: 1.7em;
		margin: 1.0em 0 2em;
		letter-spacing: .05em;
		border-bottom: 6px solid #ededed;
		padding: 10px 0;
		text-align: center;
		}
		
	h3 {
		color: #000;
		font-size: 1.6em;
		margin: 1.0em 0;
		letter-spacing: .05em;
		border-bottom: 3px solid #ededed;
		padding-bottom: 5px;
		padding-top: 10px;
		}
		
	h4 {
		color: #000;
		font-size: 1.4em;
		margin: 1.0em 0;
		letter-spacing: .05em;
		border-bottom: 3px solid #ededed;
		padding-bottom: 3px;
		padding-top: 10px;
		}
		
	.page-nav {
		margin-top: 2.0em;
		border-top: 1px dashed #c0c0c0;
		border-bottom: 1px dashed #c0c0c0;
		padding: 20px 0;
	}
	
	.page-nav a {
	}
		
	a {
		color: #0033FF;
		}
		
	a:link {
		color: #0033FF;
		text-decoration: underline;
		}
	a:hover {
		color: #000;
		text-decoration: none;
		}
	acronym {
		border-bottom: 1px dotted #999;
		}
		
	div#main {
		margin: 0 auto;
		}
		
	div#wrap {
		width: 80%;
		background-color: #FFFFFF;
		margin: 0 auto;
		}
		
	div#header {
		width: 80%;
		background: Black;
		background: linear-gradient(Black, DarkSlateGray);
		margin: 0 auto;
		padding: 5px 0;
		color: rgba(255, 255, 255, 0.5);
		}
	div#header p {
		padding: 4px 4px 4px 20px;
		text-align: center;
		margin: 0;
		}
	div#header a {
		color: rgba(255, 255, 255, 0.5);
		text-decoration: none;
		}
	div#header a:hover {
		color: rgba(255, 255, 255, 0.75);
		}
	.header_ad {
		padding-bottom: 20px;
	}
	
	.an_ad_inside_a_container {
	padding: 10px;
	margin-bottom: 40px;
	}
		
	.footer_ad {
		text-align: center;
		margin: 10px 0 0;
		border-top: 1px dashed #C0C0C0;
		padding: 10px 0 0;
	}
	
	.footer {
		font-size: 80%;
		line-height: 190%;
		padding: 10px;
		color: rgba(255, 255, 255, 0.5);
		background: #000;
		background: linear-gradient(DarkSlateGray, Black);
	}
	
	.footer a {
		color: rgba(255, 255, 255, 0.5);
		text-decoration: none;
		}
	.footer a:hover {
		color: rgba(255, 255, 255, 0.75);
		}
		
	div#breadcrumb {
		color: #999;
		font-size: 85%;
		text-align: left;
		padding: 7px 10px;
		border: 0px solid #C0C0C0;
		background-color: #F5F5F5;
		}
	div#breadcrumb a {
		color: #333;
		text-decoration: none;
		border-bottom: 1px solid #d3d3d3;
		}
	div#breadcrumb a:hover {
		color: #0053F9;
		border-bottom: 1px solid #0033FF;
		}
		
	p {
		margin-bottom: 2em;
		}
		
	div.index {
		background-color: #F5F5F5;
		padding: .05em 1em;
		margin-bottom: 10px;
		border: 1px solid #E6E6FA;
		}
	div.index p {
		padding: 0 0 0 20px;
		margin: .5em 0 .7em;
		}
		
	div.index h3 {
		font-size: 16px;
		font-weight: bold;
		padding: 0;
		margin: .5em 0 0 0;
		}
	
	div#content-container {
		padding: 0 20px; 
		font-size: 90%; 
		line-height: 150%;
		margin: 0 auto;
		}
		
	div#content-container p {
		font-size: 120%;
		text-align: left;
		line-height: 150%;
		}
		
		
		/* MatchingColorTable */
		
.MatchingColorTable {
	display: table;
	width: 99%;
	margin: 30px auto;
	padding: 2px;
}

.trMatchingColorTable {
	display: table-row;
}
.tdColor12 {
	border: 0px solid #000;
	display: table-cell;
	padding: 0;
	height: 100px;
}
.tdColor {
	display: table-cell;
	padding: 0;
	height: 175px;
}
.tdColorHex12 {
	display: table-cell;
	font-family: Courier, 'Courier New', Monospace;
	padding: 6px 2px;
	text-align: center;
	font-size: 110%;
}

.tdColorHex {
	display: table-cell;
	font-family: Courier, 'Courier New', Monospace;
	padding: 6px 2px;
	text-align: center;
	font-size: 110%;
}

.MatchingColorTableBody {
	display: table-row-group;
}
		/* end MatchingColorTable */
		
		/* ColorGroupTable */
		
	.ColorGroupTable {
		display: table;
		margin: 10px auto;
		padding: 2px;
}

	.trColorGroupTable {
		display: table-row;
}
		
	.tdColorGroup {
		display: table-cell;
		padding: 0;
		height: 95px;
		width: 130px;
		border-right: 2px solid #fff;
		border-left: 2px solid #fff;
		border-radius: 0;
		box-shadow: 0 8px 6px -6px #999;
}
	.tdColorGroupHex {
		display: table-cell;
		padding: 6px 0;
		text-align: center;
		font-size: 90%;
		width: 120px;
}

	.ColorGroupTableBody {
		display: table-row-group;
}
		/* End ColorGroupTable */
		
	.color-table {
		border: 10px outset #f2f2f2;
		margin-bottom: 40px;
		width: 700px;
		text-align:center;
		}
		
	.color-table td {
		height: 60px;
		}
		
	.color-label {
		width: 200px; 
		background-color: #332424;
		color: #b0b0b0;
		font-size: 100%;
		}
	.color-data {
		font-size: 150%;
		font-family: Courier, 'Courier New', Monospace;
		}
		
		/* index pages */
		
	table.home {
		width: 100%;
		margin: 40px auto 30px;
		border: 0px solid #e8e8e8;
		}
	table.home thead {
		background: #e8e8e8;
		}
	table.home td {
		height: 60px;
		text-align: center;
		border: 1px solid #f9f9f9;
		}
	.cell_3 {
		font-family: Courier, Monospace;
	}
	tr.row_2 {
		background: #f3f3f3;
		}
	td.cell_1 {
		width: 50%;
		border: 0px solid #fff;
		}
		/* /index pages */
		
		/* old */
		
	table.color_chart {
		background-color: #fff;
		margin-bottom: 20px;
	}
		
	.color-name-width {
		text-align: center;
		line-height: 140%;
		font-size: 80%;
		font-weight: bold;
		width: 175px;
		}
	.color-name-height {
		height: 90px;
		}
		
	.color-values {
		font-weight: bold;
		width: 300px; 
		height: 50px;
		text-align: center;
		background-color: #F5F5F5;
		}
	.color-values, .matching-color-width {
		color: #fff !important;
		font-family: Courier New, Courier, Monospace;
		letter-spacing: 0.1em;
		text-shadow: 1px 1px 0 #000;
		}
		
	.matching-surround {
		padding: 50px; 
		border: 1px solid #D2D2D2;
		}
		
	.matching-color-height-name {
		color: #000;
		height: 70px;
		font-family: Courier New, Courier, Monospace;
		letter-spacing: 0.1em;
		font-weight: bold;
		font-size: 105%;
		text-align: center;
		line-height: 170%;
		text-shadow: 1px 1px #fff;
		}
	.matching-color-height {
		height: 90px;
		}
	.matching-color-width {
		width: 155px;
		text-align: center;
		font-weight: bold;
		}
		
	.base-color-name-width {
		width: 175px;
		text-align: center;
		line-height: 140%;
		font-size: 75%;
		font-weight: bold;
		}
		/* / old */
		
	.light {
		color: white;
		}
	.social_container {
		margin: 10px 0;
		padding: 15px 0 0;
		border-top: 1px dashed #C0C0C0;
	}
		
	div#related {
		font-size: 90%;
		margin: 10px 0;
		padding: 10px 0 0;
		text-align: center;
		border-top: 1px dashed #C0C0C0;
		}
	div.color-groups {
		font-size: 95%;
		margin: 10px 0;
		padding: 10px 0 0;
		text-align: center;
		border-top: 1px dashed #C0C0C0;
		}
		
	div.addthis_toolbox td {
	text-align: center;
	padding: 0 5px;
	vertical-align: top;
	}
	
	div#bottom-nav {
		font-size: 75%;
		text-align: center;
		padding: 10px 10px 12px;
		border-top: 1px dashed #C0C0C0;
		border-bottom: 1px dashed #C0C0C0;
		background-color: #FFFFFF;
		margin: 10px 20px;
		}
		
	textarea.code {
		width: 100%;
		color: #8B0000;
		border: 0px solid #FEBFBF;
		background-color: #F5F5FE;
		}
		
	.code-box {
		color: #8B0000;
		background-color: #F5F5FE;
		border: 1px solid #E6E6FA;
		padding: 10px;
		font-family: 'courier new';
		letter-spacing: .1em
		}
		
	.code-indent {
		margin: 0 0 0 2em;
		}

	.code-color {
		color: #8B0000;
		font-weight: bold;
		letter-spacing: .1em
		}
		
		/* articles */
		
		
	div.article-index {
		border-left: 5px solid DeepSkyBlue;
		background: #f8f8f8;
		padding: 5px;
		margin: 20px; auto;
	}
	div.article-index h2 {
		text-align: left;
		border: 0;
		margin: 10px;
	}
	div.article-index p {
		margin: 10px;
	}
	div.article-body h2 {
		text-align: left;
		margin: 20px 0;
	}
	div.article-body h3 {
		color: SteelBlue;
		margin: 20px 0 0 20px;
		font-size: 18px;
	}
	p.codebox {
		border-left: 5px solid Gainsboro;
		background: #f8f8f8;
		padding: 10px 20px;
		margin-left: 20px;
		font-family: 'courier new';
		letter-spacing: .1em;
		color: Navy;
	}
	.code {
		background: #f8f8f8;
		padding: 0 2px 0 5px;
		color: Navy;
		font-family: courier;
		letter-spacing: .1em;
		font-size: 100%;
	}
	
	.element {
		color: Brown;
		}
	.attribute {
		color: Red;
		}
	.property {
		color: Blue;
		}
	
		/* end articles */
		
		
	.warning {
		color: red;
		background: #fffc19;
	}
		
	.fuchsia  {
		color: #FF00FF
		}
		
	.aqua {
		color: #00FFFF
		}
	.black {
		color: #000000
		}
	.blue {
		color: #0000FF
		}
	.fuchsia  {
		color: #FF00FF
		}
	.gray {
		color: #808080
		}
	.green {
		color: #008000
		}
	.lime {
		color: #00FF00
		}
	.maroon {
		color: #800000
		}
	.navy {
		color: #000080
		}
	.olive {
		color: #808000
		}
	.purple {
		color: #800080
		}
	.red {
		color: #FF0000
		}
	.silver {
		color: #C0C0C0
		}
	.teal {
		color: #008080
		}
	.white {
		color: #FFFFFF
		}
	.yellow {
		color: #FFFF00
		}
		
		/* testing */
	div.palette-outer {
	width:100%;
	}
	div.palette-outer p {
	height: 150px;
	}