/*   
	Theme Name: Harsh Deco
	Theme URI: http://www.sonictk.com/
	Description: A brand-new theme paying homage to Harsh in its colour scheme and centering around the theme of 'tradigital'. All sounds very nice and good doesn't it old chap?
	Author: Siew Yi Liang
	Author URI: http://www.sonictk.com/
	Version: 3.0
	.
	All art deco elements are hand-made with loving care and precision and as such I will be livid if I see them being used anywhere that doesn't make them look awesome.
.
*/

/* ------------------------------

Typography & Motifs

--------------------------------- */

	h1 {
		font-family:Arial, sans-serif;
		font-size:2.25em;
		font-weight:bold;
		text-transform:uppercase;
		color:#353535;
		letter-spacing:-0.0625em;
	}
	
	 h1:before {	
		content:url(images/headerMotif1.png);
		display:inline;
		position:relative;
		top:0.1875em;
	}
	
	h1:after {	
		content:url(images/headerMotif2.png);
		display:inline;
		position:relative;
		top:0.1875em;
		margin-left:0.125em;
	} 
	
	h2 {
		font-family:Arial, sans-serif;
		font-size:1em;
		font-weight:bold;
		text-align:left;
		color:#5d5d5d;
		margin:0;
	}
	
	h3 {
		font-family:Arial, sans-serif;
		font-size:2.25em;
		font-weight:bold;
		text-transform:uppercase;
		color:#353535;
		letter-spacing:-0.0625em;
		
		border:10px double #f5f5f5;
		
		padding:.5em;
	}
	
	p {
		font-family:Georgia, serif;
		font-size:0.75em;
		text-align:justify;
		line-height:2em;
	}
	
	#leftColumn ul {
		list-style:none;
		
		font-family:Georgia, serif;
		font-size:0.75em;
		text-align:left;
		line-height:2em;
	}
	
	/* Fixing text relative sizes for <p> elements that are nested in <ul> elements in the leftColumn */
	#leftColumn ul p {
		font-size:1em;
	}
	
	#leftColumn h1 a {
		border:0;
	}
	
	a:link, a:visited {
		font-weight:bold;
		color:#2f2f2f;
		text-decoration:none;
		border-bottom:1px dashed #000;
	}
	
	a:hover, a:active {
		color:#c4009a;
		border-bottom:1px dashed #c4009a;
	}
	
	#rightColumn p {
		font-size:0.6875em;
		text-align:left;
		margin-top:1em;
		line-height:2em;
	}
	
	#leftColumn div {
		margin-bottom:2.25em;
	}
	
	#leftColumn div:after {
		display:block;
		text-align:center; /* IE 8 fix to bring element to the center */
		content:url(images/objectMotif.png);
	}
	
	#rightColumn div {
		padding:0 1.125em 0 0.125em; /* Placed here as adding padding directly to the actual rightcolumn moves the entire column to the left. */
		margin-bottom:2em;
	}
	
	#rightColumn ul {
		list-style:square;
		margin:0;
		padding:0 0 0 1em;
	}
	
	#rightColumn ul li {
		font-size:0.6875em;
		text-align:left;
		line-height:2em;
	}
	
	#tagline {
		font-family:Impact, sans-serif;
		font-size:1em;
		text-transform:uppercase;
		text-align:center;
		color:#858585;
		line-height:1em;
		
		margin-bottom:3em;
	}
	
	.artsTagline a {
		border:0;
		font-weight:normal;
		color:#393939;
	}
	
	.artsTagline a:hover {
		color:#65a295;
	}
	
	.linkTagline a {
		border:0;
		font-weight:normal;
		color:#4f4f4f;
	}
	
	.linkTagline a:hover {
		color:#a26586;
	}
	
	.blogTagline a {
		border:0;
		font-weight:normal;
		color:#393939;
	}
	
	.blogTagline a:hover {
		color:#a26565;
	}
	
	#tagline:before {
		display:block;
		text-align:center; /* IE 8 fix to bring element to the center */
		content:url(images/flourishTop.png);	
		margin-bottom:0.25em;
	}
	
	#tagline:after {
		display:block;
		text-align:center; /* IE 8 fix to bring element to the center */
		content:url(images/flourishBottom.png);
		margin-top:0.5em;
	}
	
	.center {
		text-align:center;
	}
	
/* ------------------------------

Site styles

--------------------------------- */

	body {
		background:#b2b2b2 url('images/background.png');
		margin:0;
		padding:0;
		
		min-width:800px;
		
		font-family:Georgia, serif;
		font-size:1em;
		color:#323232;
		
		line-height:1.5em;
		text-align:center;
	}
	
	/* Note: :before and :after psuedo-selectors are not supported by IE 6 */
	#header:before {
		float:left;
		content:url(images/headerGradient1.png);
	}
	
	#header {
		background:#121212 url('images/headerGradient2.png') top right no-repeat; 
		width:100%;
		height:129px;
	}
	
	#headerLogo {
		display:block;
		margin:0 auto 0 auto;
		background:url('images/logo.png') top left no-repeat;
		width:442px;
		height:126px;
		border:0;
	}
	
	#headerLogo:hover {
		background-position:0 -126px;
	}
	
	#headerSpacer {
		background:#3d3d3d url('images/headerSpacerGradient.png') top left no-repeat;
		width:100%;
		height:9px;
	}
	
	#headerShadow {
		background:transparent url('images/headerShadow.png') repeat-x;
		width:auto;
		height:14px;
		
		/* Remember: z-index only works on positioned elements. */
		position:relative;
		z-index:1;
		
		margin:0;
		padding:0;
	}
	
	#navBox {
		z-index:2;
		position:relative;
	}

	#navBox ul {
		position:absolute;
		left:31em;
		
		list-style:none;
		
		margin:0;
		padding:0;
		
		overflow:hidden; /* Fixes extra width caused by absolute positioning being rendered in IE6. */
	}
	
	#navBox li {
		float:left;
	}

	#navAbout {
		display:block;
		background:transparent url('images/navAbout.png') top left no-repeat;
		width:117px;
		height:138px;
		border:0;
	}
	
	#navAbout:hover {
		background-position:0 -138px;
	}
	
	#navAbout:active {
		background-position:0 -276px;
	}
	
	#navArts {
		display:block;
		background:transparent url('images/navArts.png') top left no-repeat;
		
		margin-left:-20px; /* re-position image */
		
		width:117px;
		height:154px;
		border:0;
	}
	
	#navArts:hover {
		background-position:0 -154px;
	}
	
	#navArts:active {
		background-position:0 -308px;
	}
	
	#navBlog {
		display:block;
		background:transparent url('images/navBlog.png') top left no-repeat;
		
		margin-left:-50px; /* re-position image */
		
		width:114px;
		height:121px;
		border:0;
	}
	
	#navBlog:hover {
		background-position:0 -121px;
	}
	
	#navBlog:active {
		background-position:0 -242px;
	}
	
	#contentShadow {
		float:left;
		
		width:50em;
		height:auto;
		min-height:43em;
		
		background:transparent url('images/contentShadow1.png') repeat-y;
	}
	
	#contentShadow2 {
		float:left;
		
		width:50em;
		height:auto;
		min-height:43em;
		
		background:transparent url('images/contentShadow2.png') repeat-y 49.3125em 0em;
	}
	
	#contentContainer {
		display:inline-block;
	
		margin:-14px auto 0 auto;
		padding:0;
		background:#e1e1e1;
		
		width:50em;
		height:auto;
		min-height:43em;
	}
	
	#leftColumn {
		float:left;
		
		margin-top:1em;
		padding:0 1.6em 0 1.6em;
		
		width:28.9375em;
		height:auto;
	}
	
	#rightColumn {
		float:right;
		
		margin-top:10em;
		padding-right:0.75em;
		
		width:13.5em;
		height:auto;
	}
	
	#contentDivider {
		float:left;
		
		margin:0;
		
		width:50em;
		height:auto;
		min-height:43em;
		
		background:transparent url('images/divider.png') repeat-y 31.6em 0em;
	}
	
	#footerSpacer {
		background:#3d3d3d url('images/footerSpacerGradient.png') top right no-repeat;
		width:100%;
		height:9px;
		
		margin:0;
		padding:0;
	}
	
	#footer:before {
		float:left;
		content:url(images/footerGradient1.png);
	}
	
	#footer {
		background:#121212 url('images/footerGradient2.png') bottom right no-repeat;
		width:100%;
		height:100px;
	}
	
	#footerMotif {
		margin:0 auto 0 auto;
		background:url('images/footer.png') bottom no-repeat;
		width:284px;
		height:72px;
	}
	
	#search {
		margin:.75em 5px 1.25em 0;
		padding:0 10px 0 10px;
		
		display:block;
		float:left;
		postition:relative;
		
		width:120px;
		height:25px;
		
		border:5px double #e1e1e1;
		background:#b2b2b2 url('images/background.png') center top;

		font:bold .75em Trebuchet MS, sans-serif;
		color:#fff;
	}
	
	#search:hover {
		background:#ff9d00;
		border:5px solid #f5f5f5;
	}
	
	#submit {
		margin:0;
		padding:0;
		
		display:block;
		float:left;
		position:relative;
		top:16px;
		
		width:20px;
		height:20px;
		
		background:transparent url('images/search0.png') top;
		
		border:0;
	}
	
	#submit:hover {
		background:transparent url('images/search0.png') bottom;
	}
	
/* ------------------------------

Wordpress-specific styles

--------------------------------- */
	
	.aligncenter,
	div.aligncenter {
		display: block;
		margin-left: auto;
		margin-right: auto;
	}
	
	.alignleft {
		float: left;
	}
	
	.alignright {
		float: right;
	}
	
	.wp-caption {
		border: 1px solid #ddd;
		text-align: center;
		background-color: #f3f3f3;
		padding-top: 4px;
		margin: 10px;
	}
	
	.wp-caption img {
		margin: 0;
		padding: 0;
		border: 0 none;
	}
	
	.wp-caption p.wp-caption-text {
		font-family:Trebuchet MS, sans-serif;
		font-size: 11px;
		line-height: 17px;
		padding: 0 4px 5px;
		margin: 0;
	}