/*  
Theme Name: Citizen Journalism.sg Theme
Theme URI: http://citizen.journalism.sg/
Description: Theme for citizen.journalism.sg portal site.
Version: 1.0
Author: Lin Junjie
Author URI: http://citizen.journalism.sg/
*/

/* journalism.sg */


<!-- 
	html, body, div, span, applet, object, iframe,
	h1, h2, h3, h4, h5, h6, p, blockquote, pre,
	a, abbr, acronym, address, big, cite, code,
	del, dfn, em, font, img, ins, kbd, q, s, samp,
	small, strike, strong, sub, sup, tt, var,
	dl, dt, dd, ol, ul, li,
	fieldset, form, label, legend,
	table, caption, tbody, tfoot, thead, tr, th, td {
		margin: 0;
		padding: 0;
		border: 0;
		outline: 0;
		font-weight: inherit;
		font-style: inherit;
		font-size: 100%;
		font-family: inherit;
		vertical-align: baseline;
	}
	/* remember to define focus styles! */
	:focus {
		outline: 0;
	}
	body {
		line-height: 1;
		color: black;
		background: white;
	}
	ol, ul {
		list-style: none;
	}
	/* tables still need 'cellspacing="0"' in the markup */
	table {
		border-collapse: separate;
		border-spacing: 0;
	}
	caption, th, td {
		text-align: left;
		font-weight: normal;
	}
	blockquote:before, blockquote:after,
	q:before, q:after {
		content: "";
	}
	blockquote, q {
		quotes: "" "";
	}
	html {
		/* http://www.hicksdesign.co.uk/journal/forcing-scrollbars-now-even-better */
		height: 100%;
		margin-bottom: 1px;
	}
	
	body { background: #eee url('images/Background.png') no-repeat; }


	html, body {
		font-family: Georgia, "Times New Roman", Times, serif;
		font-size: 0.95em;
		line-height: 1.6em;
	}

	a, a:visited, a:hover {
		text-decoration: none;
		border-bottom: 1px dotted #ccc;
		color: #00487b;
	}
	
	a:hover {
		border-bottom: 1px solid #00487b;
		color: #d60101;
	}

	div#wrapper{
		width:800px;
		margin:40px 114px;
		background: #fff;
		/*min-height:100%;*/
	}

	div#masthead {
		width: 800px;
		background: transparent;
		border:none;
		margin: 0;
	}
	
	div#masthead a { border: none; }

	#navigation {
	 width: 800px;
	 height: 55px;
	 background: url(images/Navigation.png);
	 margin: 0;
	 position: relative;
	}
		
	#navigation li {margin: 0; padding: 0; list-style: none; position: absolute; top: 0; }
	#navigation li, #navigation a {height: 55px; display: block; border:none; }
	#navigation li a:hover { border:none; }
	
	#navNothing {left: 0; width: 159px;}
	#navHome, #navHomeSel {left: 160px; width: 84px;}
	#navAbout, #navAboutSel {left: 245px; width: 90px;}
	#navResources, #navResourcesSel {left: 336px; width: 130px;}
	#navReform, #navReformSel {left: 467px; width: 101px;}
	#navDirectory, #navDirectorySel {left: 569px; width: 231px;}

	#navHomeSel, #navHome a:hover {background: transparent url(images/Navigation.png) -160px -55px no-repeat;}
	#navAboutSel, #navAbout a:hover {background: transparent url(images/Navigation.png) -245px -55px no-repeat;}
	#navResourcesSel, #navResources a:hover {background: transparent url(images/Navigation.png) -336px -55px no-repeat;}
	#navReformSel, #navReform a:hover {background: transparent url(images/Navigation.png) -467px -55px no-repeat;}	
	#navDirectorySel, #navDirectory a:hover {background: transparent url(images/Navigation.png) -569px -55px no-repeat;}

	div#content, div#searchbox{
		width:700px;
		margin:40px auto 3em auto;
		text-align: justify;
	}
	
	div.post, div#searchbox { width: 700px; clear:both; }
	
	.leftSide {
		float:left;
		width:140px;
		margin-bottom: 3em;
		padding-left: 30px;
	}
	.rightSide {
		float:right;
		width:450px;
		margin-bottom: 3em;
		border-left: 1px solid #ccc;
		padding-left: 30px;
		padding-right: 30px;
	}
	
	#searchbox .rightSide {
		margin-top: 0.4em;
	}
	
	.noBorder { border-left: 0; }
	
	div#footer {
		clear:both;
		width:700px;
		margin:40px auto;
		height:35px;
		border-top: 1px solid #ccc;
		padding-top: 0.8em;
		padding-bottom: 0.8em;
	}
	
	div#footer img { padding-right: 0.5em; /*vertical-align: text-top;*/ }
	div#leftBox, div#rightBox { width: 50%; }
	div#leftBox { float:left; text-align: left; }
	div#rightBox { float:right; text-align: right; }

	h3, h4 { font-family: Optima, Arial, sans-serif; text-align: left; line-height: 1.3em; }
	h3.pageTitle, h3#comments, h3#respond { font-size: 1.8em; font-weight: bold; color: #555; }

	h4.time { font-weight: normal; }
	h4.shoulder { font-weight: bold; }
	h4.shoulder a { text-decoration: none; border: none; color: #000; }
	
	h4.viewMoreLink { font-weight: bold; margin-top: 0.5em; }
	
	h3.storytitle {	font-size: 1.8em; font-weight: bold; line-height: 1.4em; }
	h3.storytitle a { text-decoration: none; border: none; }
	h3.storytitle a:hover { border: none; }
	
	h3.author { display:inline; font-weight: bold; }
	
	.byline { font-style: italic; }
	
	.storycontent { margin-top: 2em; }	
	.storycontent p { margin-bottom: 1em; /*text-indent: 2em;*/ }
	
	.storycontent h1, h2, h3, h4 { font-family: Optima, Arial, sans-serif; line-height: 1.3em; font-weight: bold; margin-bottom: 1em; }
	.storycontent h1 { font-size: 1.6em; }
	.storycontent h2 { font-size: 1.4em; }
	.storycontent h3 { font-size: 1.2em; }
	
	em { font-style: italic; }
	strong { font-weight: bold; }
	
	.pagecontent { margin-top: 0; }
	
	.commentBody { margin-top: 2em; margin-bottom: 2em; }
	.commentBody p { margin-bottom: 1em; }
	
	ol.commentlist li { padding: 20px; }
	ol.commentlist li.alt { background: #eee; padding: 20px; }

	.storycontent ul, .storycontent ol {
		margin: 1em 0 1em 3em;
	}

	.storycontent ul,
	.storycontent ul ul,
	.storycontent ul ul ul {
		list-style: square;
	}

	.storycontent ol li { list-style: lower-alpha outside; }
	.storycontent ol li li { list-style: decimal; }
	.storycontent ol li li li { list-style: lower-roman; }

	.storycontent ol li,
	.storycontent ul li, 
	.storycontent ol li li,
	.storycontent ul li li,
	.storycontent ol li li li,
	.storycontent ul li li li {
		margin-bottom: 0;
	}

	.storycontent dl {
	  margin: 1.5em auto 1.5em 1.3em;
	}
	
	.storycontent dt {
		margin: 0 0 .7em 0;
	}
	
	.storycontent dt a {	
		font-weight: bold;
	}
		
	.storycontent dd {
		margin: 1em auto 1em 1.5em;
		padding-left: 1em;
		border-left: 5px solid #ddd8c2;
	}
	
	dd p { margin: 0 0 1em 0; }

	ul.linksList { margin-left: 1em; }
	ul.linksList a { font-family: Optima, Arial, sans-serif; font-weight: bold; }
	ul.linksList, ul.linksList ul { list-style: none; }
	ul.linksList ul { margin-left: 2em; margin-bottom: 2em; }

	hr {
		background: #555;
		height: 1px;
	}
	/* CSS tool tips, see http://lixlpixel.org/css_tooltip/ */
	a.tip {
		position: relative;
	}
	
	a.tip span {
		display: none;
		position: absolute;
		top: 50px;
		left: -50px;
		width: 200px;
		padding: 5px;
		z-index: 100;
		background: #000;
		color: #fff;
		-moz-border-radius: 5px; /* this works only in camino/firefox */
		-webkit-border-radius: 5px; /* this is just for Safari */
		opacity: 0.8; /* css3 and modern browsers only */
	}
	
	a:hover.tip span {
		display: block;
	}
	/* CSS tool tips, see http://lixlpixel.org/css_tooltip/	*/
	
	
	/* Begin Images */
	p img {
	padding: 0;
	max-width: 100%;
	}

	/*	Using 'class="alignright"' on an image will (who would've
		thought?!) align the image to the right. And using 'class="centered',
		will of course center the image. This is much better than using
		align="center", being much more futureproof (and valid) */
	
	img.centered, img.aligncenter {
		display: block;
		margin-left: auto;
		margin-right: auto;
		padding: 1em;
		}
	
	img.alignright {
		padding: 1em;
		margin: 0 0 2px 7px;
		display: inline;
		}
	
	img.alignleft {
		padding: 1em;
		margin: 0 7px 2px 0;
		display: inline;
		}
	
	.alignright {
		float: right;
		}
	
	.alignleft {
		float: left
		}
	/* End Images */
	
	input#s { width: 26em; }
	
	img#wpstats{width:0px;height:0px;padding:0px;border:none;overflow:hidden} /* hide automattic's silly face */