/* -----------------------------------
Site:       The Balloon Shop
CSS author: Russ Weakley
Updated:	Date here
Updated by: Date here
----------------------------------- */

@media screen
{
	/* -----------------------------------
	simple reset
	----------------------------------- */
	
	html, body, ul, ol, li, form, fieldset, legend
	{
		margin: 0;
		padding: 0;
	}
	
	fieldset, img { border: 0; }
	legend { color: #000; }
	
	input, textarea, select, button
	{
		font-size: 110%;
		line-height: 1.1;
		font-family: helvetica, arial, sans-serif;
	}
	
	button
	{
		width: auto;
		overflow: visible;
	}
	
	table
	{
		border-collapse: collapse;
		border-spacing: 0;
	}
	
	caption, th, td
	{
		text-align: left;
		vertical-align: top;
		font-weight: normal;
	}
	
	ul li { list-style: none; }
	
	abbr, acronym
	{
		border-bottom: .1em dotted;
		cursor: help;
	}
	
	sup { vertical-align: text-top; }
	sub { vertical-align: text-bottom; }
	
	pre, code
	{
		font-family: "Courier New", monospace, serif;
		font-size: 100%;
		line-height: 1.2;
	}
	
	/* -----------------------------------
	elements
	----------------------------------- */
	
	body
	{
		color: #000;
		background: #fff;
		font: 90%/1 "DejaVu Sans", "URW Gothic L", "Helvetica Neue", Helvetica, Arial, "Microsoft Sans Serif", sans-serif;
	}
	
	h1, h2, h3, h4, h5, h6
	{
		margin: 0 0 .5em;
		color: #207fb7;
	}
	
	h1 { font-size: 200%; }
	h2 { font-size: 180%; }
	h3 { font-size: 160%; }
	h4 { font-size: 140%; }
	h5 { font-size: 120%; }
	h6 { font-size: 100%; }
	
	p
	{
		margin: 0 0 1.5em;
		line-height: 1.4;
	}
	
	td { font-size: 90%; }
	
	a:link { color: #0f3163; }
	a:visited { color: #04214b; }
	
	a:focus
	{
		color: #000;
		outline: thin dotted;
	}
	
	a:hover { color: #000; }
	a:active { color: red; }
	
	.content ol
	{
		line-height: 1.4;
		padding: 0 0 1.5em 40px;
	}
	
	.content ul
	{
		line-height: 1.4;
		padding: 0 0 1.5em 20px;
	}
	
	.content li { margin: 0 0 .3em; }
	
	.content ul li
	{
		padding: 0 0 0 20px;
		background: url(../images/bullet.gif) no-repeat 0 .3em;
	}
	
	/* -----------------------------------
	layout
	----------------------------------- */
	
	.container
	{
		width: 980px;
		margin: 0 auto;
	}
	
	.content-container
	{
		clear: both;
		padding: 20px 0 0;
	}
	
	.section-nav
	{
		float: left;
		width: 200px;
	}
	
	.content
	{
		float: left;
		width: 540px;
	}
	
	.sidebar
	{
		float: left;
		width: 200px;
	}
	
	/* -----------------------------------
	header
	----------------------------------- */
	
	.header
	{
		float: left;
		width: 920px;
		position: relative;
		padding: 20px 30px 0;
		color: #fff;
		background-image: url(../images/header-tausta.gif);
	}
	
	h1
	{
		margin: 0;
		padding: 0 0 20px;
	}
	
	h1 img { display: block; }
	
	/* -----------------------------------
	search-form
	----------------------------------- */
	
	.search-form
	{
		position: absolute;
		right: 10px;
		top: 10px;
		padding: 0 0 0 145px;
		background: url(../images/search-label.gif) no-repeat;
	}
	
	.search
	{ 
		float: left;
		width: 130px;
		height: 22px;
		margin: 0;
		padding: 2px 5px;
		border: 0;
	}
	
	.search-button
	{
		float: left;
		margin: 0;
		padding: 0;
	}
	
	/* -----------------------------------
	primary-nav
	----------------------------------- */
	
	.primary-nav li { display: inline; }
	
	.primary-nav a
	{
		float: left;
		margin: 0 2px 0 0;
		background: #fff url(../images/corners.gif) no-repeat -2000px 0;
		text-decoration: none;
	}
	
	.primary-nav span
	{
		display: block;
		padding: 7px 15px;
		background: url(../images/corners.gif) no-repeat 100% 0;
	}
	
	.primary-nav a:hover
	{
		color: #fff;
		background-color: #a5b306;
	}
	
	/* -----------------------------------
	section-nav
	----------------------------------- */
	
	.section-nav li { display: inline; }
	
	.section-nav a
	{
		display: block;
		margin: 2px 0 0;
		color: #fff;
		background: #207fb7 url(../images/corners.gif) no-repeat -340px 0;
		text-decoration: none;
	}
	
	.section-nav span
	{
		display: block;
		padding: 7px 10px;
		background: url(../images/corners.gif) no-repeat -880px 100%;
	}
	
	.section-nav a:visited { color: #fff; }
	.section-nav a:hover { background-color: #a5b306; }
	.section-nav a:focus { outline: red thin dotted; }
	.section-nav ul ul a { background-color: #308fc7; }
	.section-nav ul ul span { padding: 5px 5px 5px 25px; }
	.current a { background-color: #555; }
	
	/* -----------------------------------
	footer
	----------------------------------- */
	
	.footer
	{
		position: relative;
		clear: both;
		margin: 0 0 20px;
		padding: 20px 30px;
		color: #fff;
		background: #207fb7;
		font-size: 90%;
	}
	
	.footer li
	{
		display: inline;
		margin: 0 15px 0 0;
	}
	
	.footer a:link, .footer a:visited { color: #fff; }
	
	.footer-decoration
	{
		position: absolute;
		right: 0;
		top: -21px;
		width: 82px;
		height: 61px;
		background: url(../images/footer.gif) no-repeat;
	}
	
	/* -----------------------------------
	box
	----------------------------------- */
	
	.box
	{
		float: left;
		width: 540px;
		margin: 0 0 15px;
		background: #aaa url(../images/corners.gif) no-repeat 0 0;
	}
	
	.inner
	{
		float: left;
		width: 510px;
		padding: 15px;
		background: url(../images/corners.gif) no-repeat -540px 100%;
	}
	
	.sidebar .box
	{
		width: 200px;
		background: #aaa url(../images/corners.gif) no-repeat -1080px 0;
	}
	
	.sidebar .inner
	{
		width: 170px;
		background: url(../images/corners.gif) no-repeat -1280px 100%;
	}
	
	.box-extend
	{
		width: 260px;
		background: #aaa url(../images/corners.gif) no-repeat -1480px 0;
	}
	
	.box-extend .inner
	{
		width: 230px;
		background: url(../images/corners.gif) no-repeat -1740px 100%;
	}
	
	.box h2, .box h3, .box h4, .box h5, .box h6 { margin: 0 0 .3em; }
	.box h2 { font-size: 145%; }
	.box h3 { font-size: 125%; }
	.box h4 { font-size: 115%; }
	.box h5 { font-size: 105%; }
	.box h6 { font-size: 100%; }
	
	.box p
	{
		margin: 0;
		line-height: 1.3;
	}
	
	/* -----------------------------------
	colors
	----------------------------------- */
	
	/* home */
	.home, .sidebar .home, .primary-nav .home { background-color: #FDCCD0; }
	.home a:link { color: #83000A; }
	.home a:visited { color: #650008; }
	.home a:focus { color: #000; }
	.home a:hover { color: #000; }
	.home a:active { color: red; }
	
	/* about */
	.about, .sidebar .about, .primary-nav .about { background-color: #FEFFA7; }
	.about a:link { color: #45470A; }
	.about a:visited { color: #383a05; }
	.about a:focus { color: #000; }
	.about a:hover { color: #000; }
	.about a:active { color: red; }
	
	/* news */
	.news, .sidebar .news, .primary-nav .news { background-color: #D3E1FE; }
	.news a:link { color: #0F3163; }
	.news a:visited { color: #04214b; }
	.news a:focus { color: #000; }
	.news a:hover { color: #000; }
	.news a:active { color: red; }
	
	/* buy */
	.buy, .sidebar .buy, .primary-nav .buy { background-color: #FEEBD1; }
	.buy a:link { color: #61470B; }
	.buy a:visited { color: #4b3604; }
	.buy a:focus { color: #000; }
	.buy a:hover { color: #000; }
	.buy a:active { color: red; }
	
	/* contact */
	.contact, .sidebar .contact, .primary-nav .contact { background-color: #D3EFD0; }
	.contact a:link { color: #125A09; }
	.contact a:visited { color: #093f02; }
	.contact a:focus { color: #000; }
	.contact a:hover { color: #000; }
	.contact a:active { color: red; }
	
	/* -----------------------------------
	classes
	----------------------------------- */
	
	.structural
	{
		position: absolute;
		left: -500em;
	}
	
	.align-left
	{
		float: left;
		margin: 0 15px 0 0;
	}
	
	.align-right
	{
		float: right;
		margin: 0 0 0 15px;
	}
	
	.align-left img, .align-right img { display: block; }
	.gutter { margin-left: 20px; }
	
	.intro p
	{
		font-weight: bold;
		line-height: 1.4;
	}
}

@media print
{
	body
	{
		color: #000;
		background: #fff;
		font: 100%/1 Georgia, times, serif;
	}
	
	h1, h2, h3, h4, h5, h6
	{
		margin: 0 0 .5em;
		color: #000;
	}
	
	h1 { font-size: 200%; }
	h2 { font-size: 180%; }
	h3 { font-size: 160%; }
	h4 { font-size: 140%; }
	h5 { font-size: 120%; }
	h6 { font-size: 100%; }
	
	p
	{
		margin: 0 0 1.5em;
		line-height: 1.4;
	}
	
	a:link { color: #000; }
	a:visited { color: #000; }
	
	/* -----------------------------------
	layout
	----------------------------------- */
	
	.section-nav { display: none; }
	.sidebar { display: none; }
	.search-form { display: none; }
	.primary-nav { display: none; }
	
	/* -----------------------------------
	footer
	----------------------------------- */
	
	.footer
	{
		clear: both;
		padding: 20px 0;
		font-size: 90%;
	}
	
	.footer li
	{
		display: inline;
		margin: 0 15px 0 0;
	}
	
	/* -----------------------------------
	box
	----------------------------------- */
	
	.box
	{
		float: left;
		width: 100%;
		margin: 0 0 15px;
		background: #eee;
	}
	
	.inner
	{
		padding: 15px;
	}
	
	
	/* -----------------------------------
	classes
	----------------------------------- */
	
	.structural
	{
		position: absolute;
		left: -500em;
	}
	
	.align-left
	{
		float: left;
		margin: 0 15px 0 0;
	}
	
	.align-right
	{
		float: right;
		margin: 0 0 0 15px;
	}
	
	.align-left img, .align-right img { display: block; }
	
	.intro p
	{
		font-weight: bold;
		line-height: 1.4;
	}

}