/*
Theme Name: Simply
Theme URI: http://eksith.wordpress.com/2011/12/20/simply-the-html5-version/
Description: A variable width, multi-column theme for simple content display
Version: 0.5
Author: Eksith Rodrigo
Author URI: http://eksith.wordpress.com
Tags: fluid, multi column, widgets, readable
*/



/* Common */
body
{
	font-family: "Segoe UI" , Tahoma, Sans-Serif;
	font-weight: normal;
	font-size: medium;
	background: #fff;
	color: #000;
}


/* Screen */
@media screen
{
	/* Reset */
	body, div, header, article, section, aside, footer, p, h1, h2, h3, h4, h5, h6, 
	form, fieldset, legend, input, select, ul, li, blockquote, table, td, th, hr
	{
		margin: 0;
		padding: 0;
		border: 0;
	}
	
	body
	{
		font: normal 90% Sans-serif,tahoma,verdana;
		text-align: center;
		padding: 0 0 20px 0;
		background:#f5f5f5 url(img/bg.png);
		color:#000;
	}

	/* Core elements */
	div.page
	{
		text-align:left;
		width: 90%;
		max-width:1200px;
		min-width:1000px;
		margin: 10px auto 0 auto;
	}

	div.header header
	{
		min-height:100px;
	}

	header.title
	{
		float:left;
		width:55%;
		margin: 0 0 1em 0;
	}
	
	article
	{
		margin:1em 0 0 0;
	}

	article section
	{
		color:#575757;
		background:#fff;
		margin:0 0 1em 0;
		padding: .4em .7em 2em .7em;
		border-radius: 5px;
		box-shadow:3px 3px 3px #ddd;
	}

	section section, section.column
	{
		background:transparent;
		box-shadow:none;
	}

	div.feedback .post
	{
		border-color:#ddd;
		border-bottom:1px solid #f5f5f5;
		border-radius: 5px;
	}

	div.feedback .post:nth-child(odd)
	{
		background-color:#f8f8ff;
	}

	div.feedback .post:nth-child(even)
	{
		background-color:#eee;
	}

	footer
	{
		text-align:center;
		font-size:80%;
	}
	
	.feedback .post
	{
		margin:.4em 0;
	}


	/* Menu bar */
	.menu
	{
		min-height: 2.5em;
		padding: 0 .8em;
		margin: .2em 0;
		clear:both;
	}

	.menu ul
	{
		list-style:none;
	}

	.menu ul li
	{
		float: left;
		position: relative;
	}

	.menu ul li a, .menu ul li span
	{
		padding: 6px 10px;
		display: block;
		font-size: 120%;
		text-decoration: none;
		color:#575757;
		border-radius: 5px;
		box-shadow:2px 2px 2px #ddd;
	}

	.menu ul li ul
	{
		display: none;
	}

	.menu ul li:hover ul, .menu ul li ul:hover
	{
		display: block;
		width: 200px;
		position: absolute;
		top: 28px;
		left: 0;
		z-index:200;
	}

	.menu ul li:hover ul li ul, .menu ul li ul:hover li ul
	{
		display: block;
		top: 5px;
		left: 190px;
	}

	.menu ul li ul li
	{
		float: none;
		display: block;
		position: relative;
	}
	
	.menu ul li ul li a
	{
		border-radius: 0;
		box-shadow:none;
	}
	
	.menu ul li ul li a, .menu ul li.active ul li a
	{
		display: block;
		padding: 6px 10px;
		position: relative;
		font-size:100%;
	}

	.menu ul li ul li a:hover, .menu ul li.active ul li a:hover
	{
		background:#a33 !important;
		color:#fff !important;
	}

	.menu ul li a:hover, .menu ul li ul li a, ul li.active a
	{
		background:#575757 !important;
		color: #fff !important;
	}

	.menu form a
	{
		text-decoration:none;
		font-size:120%;
		font-weight:bold;
	}



	/* Columns */
	.column
	{
		float:left;
		margin: 0 2% 0 0;
		padding: .2em 0;
	}
	
	.half
	{
		width:47.4%;
	}
	
	.two-thirds
	{
		width:64.7%;
	}

	.one-third
	{
		width:31.3%;
	}

	.one-fourth
	{
		width:23%;
	}

	.one-fifth
	{
		width:18%;
	}


	/* Text elements */
	h1, h2, h3
	{
		font-weight:normal;
		color:#a33;
	}
	h1
	{
		padding: .5em .5em .2em .7em;
		font-size: 200%;
	}
	
	h2, h3, h4
	{
		padding: .7em .5em;
	}

	h2
	{
		font-size: 150%;
	}
	
	.post h2, .post h4
	{
		padding: .5em .5em .2em .5em;
	}
	
	h3
	{
		font-size: 115%;
		border-bottom: 1px solid #ddd;
	}

	h4, h5, h6, .column h4, .column h5, .column h6
	{
		padding: .5em .8em;
	}
	
	h4
	{
		font-size: 110%;
	}
	
	h5
	{
		font-size:100%;
	}
	
	h5.pages
	{
		word-spacing: 5px;
		padding: 20px 10px;
	}
	
	h6
	{
		font-size:100%;
	}
	
	div.post h6
	{
		background:#eee;
		border-radius: 5px 5px 0 0;
	}
	
	div.feedback div.post:nth-child(even) h6
	{
		background:#dedede;
	}
	
	
	/* Links */
	a
	{
		text-decoration:underline;
		color: #369;
	}

	a:hover, ul li.active a
	{
		color: #fff;
		background: #369;
		text-decoration: none;
	}
	
	div.post a:visited, div.palt a:visited
	{
		color:#000;
		background:#eee;
		text-decoration:underline;
	}
	
	h1 a {
		color:#a33;
		text-decoration:none;
	}

	h1 a:hover {
		color:#575757 !important;
		background:transparent !important;
	}

	h5.pages a
	{
		word-spacing: normal;
		text-decoration: none;
	}

	a.tag
	{
		padding: 5px 3px;
		text-decoration: none;
	}
	a.x1
	{
		font-size: 11px;
	}
	a.x2
	{
		font-size: 12px;
	}
	a.x3
	{
		font-size: 13px;
	}
	a.x4
	{
		font-size: 14px;
	}
	a.x5
	{
		font-size: 15px;
	}
	a.x6
	{
		font-size: 16px;
	}
	a.x7
	{
		font-size: 17px;
	}
	a.x7
	{
		font-size: 18px;
	}
	a.x8
	{
		font-size: 18px;
	}
	a.x9
	{
		font-size: 19px;
	}
	a.x10
	{
		font-size: 20px;
	}
	a.x11
	{
		font-size: 21px;
	}
	a.x12
	{
		font-size: 22px;
	}
	a.x13
	{
		font-size: 23px;
	}
	a.x14
	{
		font-size: 24px;
	}
	a.x15
	{
		font-size: 25px;
	}
	
	p.meta a, p.date a
	{
		text-decoration:none;
	}
	
	h1 a, h2 a, h3 a
	{
		text-decoration:none;
	}

	h1 a:hover, h2 a:hover, h3 a:hover, p.meta a:hover, p.date a:hover
	{
		text-decoration:underline;
	}

	.column h3 a, .column h3 span
	{
		display:block !important;
		position:absolute;
		bottom:0;
		padding:3px;
		background:#575757;
		color:#fff;
	}
	
	div.column h3 a:hover
	{
		text-decoration:none;
	}
	
	ul.list li a
	{
		padding: 5px 10px;
		display: block;
		text-decoration: none;
	}

	p.breadcrumb a:hover, p.info a:hover
	{
		background:#575757 !important;
		color: #fff !important;
	}

	/* Paragraphs */
	p
	{
		padding: .3em .8em;
		line-height:180%
	}

	p.tags
	{
		line-height: 230%;
	}
	
	form p
	{
		padding: .4em 0;
	}
	
	section form p
	{
		padding: .4em;
	}
	
	p.date, p.meta, p.breadcrumb, div.post p.info
	{
		font-size: 80%;
	}
	
	div.post p.meta
	{
		clear:both;
		margin: 2em 0 0 0;
	}
	
	div.post p.info
	{
		padding:0 .8em 1em 1em;
		font-style:italic;
	}
	
	p.meta span
	{
		float:right;
		clear:right;
		max-width:50%;
	}
	
	header p.meta
	{
		padding: 0.3em 1em 1em 1.4em !important;
		font-size:98%;
		line-height:normal;
	}
	
	.column p
	{
		padding: .4em .8em .8em .8em;
	}
	
	blockquote
	{
		font-style:italic;
		margin:.8em;
		font-size:110%;
		background:#eee;
		border:1px solid #eee;
		box-shadow: 3px 3px 3px #ddd;
		border-radius: 5px;
	}
	
	blockquote p
	{
		padding: .4em 0;
	}

	ul.list, ol.list
	{
		list-style:none;
		margin:0;
		padding:0;
	}
	
	ul.list li, ol.list li
	{
		display:block;
		margin:.2em 0;
	}
	
	hr
	{
		clear:both;
		height:1px;
		color:#fff;
		background:#fff;
		border: 1px solid #ccc;
		border-width:1px 0 0 0;
	}
	
	section hr
	{
		border:0 !important;
		margin:0 !important;
	}


	/* Images and icons */
	img
	{
		vertical-align:midde;
	}
	
	a img
	{
		border:0;
	}	

	img.icon
	{
		float:left;
		margin: .7em;
		box-shadow:5px 5px 5px #ddd;
	}
	
	div.alt img.icon
	{
		box-shadow:5px 5px 5px #ccc;
	}
	
	.left
	{
		float:left !important;
	}
	
	.right
	{
		float:right !important;
	}


	/* Form elements */
	form
	{
		display: block;
	}
	
	.header form
	{
		float:right;
		margin: 1em .8em 0 0;
	}
	
	.menu form, header #searchform
	{
		float: right;
		display: inline;
	}
	
	.menu form
	{
		margin:0;
		padding:0;
	}

	fieldset
	{
		padding: 5px;
		margin: 10px;
		border: 5px solid #eee;
		display: block;
	}

	.column legend
	{
		background: #eee;
	}
	
	.menu form fieldset
	{
		border: 0;
		margin:0;
		padding: 0;
		display: inline;
	}
	
	.header fieldset
	{
		margin:0;
		padding:0;
	}
	

	legend
	{
		font-size: 130%;
		padding: 5px;
	}
	
	.column legend
	{
		margin: 0 7px;
		border-radius: 5px;
	}
	
	.header legend
	{
		font-size:100% !important;
	}
	
	input, select, textarea
	{
		color: #444;
		font: normal 100% Sans-serif,tahoma,verdana;
		border-radius: 4px;
	}

	input[type^='text'], input[type^='password'], select, textarea
	{
		border:1px solid #ddd;
		padding: 3px;
	}

	input[type^='text']:focus, input[type^='password']:focus, textarea:focus
	{
		box-shadow:3px 3px 3px #ddd;
	}

	article input[type^='text'], article input[type^='password'], article textarea
	{
		display:block;
	}
	
	
	article textarea
	{
		width:100%;
	}
	
	select
	{
		padding: .1em;
		margin: 0 .3em;
		border: 1px solid #777;
	}

	input[type^='button'], input[type^='submit'], input[type^='reset']
	{
		padding: 3px 5px;
		cursor: pointer;
		font-size: 120%;
		color: #369;
		background: transparent;
	}
	
	.menu input[type^='button'], .menu input[type^='submit'], .menu input[type^='reset']
	{
		padding: 6px 10px !important;
		font-size:120%;
		color:#575757;
		box-shadow:2px 2px 2px #ddd;
	}

	input[type^='button']:hover, input[type^='submit']:hover, input[type^='reset']:hover
	{
		background:#575757;
		color:#fff !important;
	}

	#searchform input[type^='submit']
	{
		padding:0 8px;
		border-radius: 0 5px 5px 0;
		box-shadow:2px 2px 2px #ddd;
	}
	
	#searchform input[type^='image']
	{
		vertical-align:middle;
	}

	article input[type^='button']:hover, article input[type^='submit']:hover, 
	article input[type^='reset']:hover, #searchform input[type^='submit']:hover, 
	#searchform input[type^='image']:hover
	{
		box-shadow: 3px 3px 3px #ddd;
	}

	input[type^='button']:hover, input[type^='submit']:hover, input[type^='reset']:hover
	{
		cursor:pointer;
	}
	
	label span
	{
		font:bold 75% sans-serif;
		color:#a33;
	}
	
	label.error
	{
		padding: 2px;
		color: #fff;
		background: #f33;
	}
}