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

	Hairylemon

--------------------------------------------- */
	
	@import "reset.css";
	@import "button.css";
	
	@media screen, projection {
		
		/* --- Structure ----------------------------- 

			- Selectors
			- Common Classes
			- Accessibility
			- Errors
			- Layout
			- Login/Logout
			- Pagination			
		*/
		
		/* --- Selectors ----------------------------- */
		
			body {
				background:#fff;
				color:#808080;
				font:87.5%/1.125em arial,helvetica,sans-serif; /* 16px x 0.875 = 14px base, 16px x 1.125 = 18px line height */
				margin:0;
				padding:0;
				background:url("../images/bg-gradient-top.png") repeat-x top left transparent;
			}
			#gradient-bottom {
				/*
				background:url("../images/bg-gradient-bottom.png") repeat-x bottom left transparent;
				padding-bottom: 65px;
				*/
			}			
			a, a:visited { color:#17678e; }
			a:hover { color:#000; text-decoration: none; }
			a img { border:none; }
			
			p { margin:0 0 1.5em; }
			button { margin:0; padding:0; background:none; border:none; cursor:pointer; }
			input { background:#fff; border:1px solid #999; padding:3px; color:#666; }
			hr { margin:11px 0; background:#eee; border:none; width:195px; height:2px; background:url("../images/bg-hr.png") repeat-x top left transparent; }
			hr.no-top {margin-top:0;}
			
			ol { margin:0 0 1em 2em; }
			ul { list-style: none; margin:0 0 1em 0.5em; }
			ul li {
				background:url("../images/list-arrow.png") no-repeat 0px 1px transparent;
				padding:0 0 0.5em 1.5em;
				margin:0 0 0 0;				
			}
			ol li { padding:0 0 0.5em 0; }
			h1, div.componentheading { color:#566f90; margin:0 0 0.5em; font-size:3em; font-weight:bold; }
			h2 { color:#566f90; margin:0 0 1em; font-size:1.6em; font-weight:bold; }
			h3 { color:#333333; margin:0 0 1em; font-size:1.4em; font-weight:bold; }
			h4 { color:#333333; margin:0 0 1em; font-size:1.3em; font-weight:bold; }
			h5 { color:#333333; margin:0 0 1em; font-size:1.2em; font-weight:bold; }
			h6 { color:#566f90; margin:0 0 1em; font-size:1.1em; font-weight:bold; }
			strong { color:#333; font-weight: bold; }
			
			#tinymce { background:#fff!important; font-size:12px; }
			#tinymce div { 
				border: solid #ececec 1px; 
				background:url("../images/bg-box.png") repeat-x bottom left #fefefe;
				padding:10px;
				margin-bottom:1.5em;
			}		
			
		
		/* --- Common Classes ------------------------ */
			
			.left { float:left; }
			.right { float:right; }
			.clear { clear:both; }
			.textright { text-align:right; }
			.textcenter { text-align:center; }
			.aligntop { vertical-align:top; }
			.bold { font-weight:bold; }
			.textright { text-align:right; }
			.textcenter { text-align:center; }
			.aligntop { vertical-align:top; }
		
		/* --- Accessibility ------------------------- */
		
			#accessibility {
				display:none;
			}
		
		/* --- Errors -------------------------------- */
		
			dl#system-message {
				margin:0 0 10px;
			}
			dt.error, dd.error, .shop_error {
				color:#f00;
				font-weight:bold;
				margin:0 0 14px;
			}
			
		/* --- Layout -------------------------------- */
		
			#wrapper {
				/* Liquid
				width:100%;*/
				/* Fixed */
				width:960px;
				margin:0 auto;
				position:relative;
			}
			
			.wrapper-footer {
				width:100%;
				height:210px;
				display:inline-block;
				background:url("../images/bg-footer.png") repeat-x top left #000;
				border-top:solid 3px #FFF;
			}

			#header {
				height:110px;
				margin-top: 36px;
			}
			#menu {
				background:#1374a5;
				border-top:1px solid #4394bd;
			}
			#menu ul {
				list-style:none;
				margin:0;
			}
			#menu li {
				float:left;
				/* To create a drop down menu you need the following styles */
				position:relative;
			}
			#menu ul ul {
				width:150px;
				display:none;
				position:absolute;
				background:#1374a5;
			}
			#menu ul li:hover ul, #menu ul li.hover ul {
				display:block;
			} 
			#menu ul li ul li a {
				border-right:none;
			}
			#menu a {
				color:#fff;
				font-weight:bold;
				display:block;
				text-decoration:none;
				padding:10px 20px;
				border-right:1px solid #4394bd;
			}
			#menu a:hover {
				text-decoration:underline;
			}
			ul.menu {
				display:none;
			}
			
			#banner, #banner div {
				line-height:0;
			}
			
			#content {
				width:690px;
				float:left;
				/* margin-top: 20px; */
				padding:1em 270px 2em 0;
				background:url("../images/bg-content.png") repeat-y top left transparent;
			}
			
			#content .article-content div {
				border: solid #ececec 1px; 
				background:url("../images/bg-box.png") repeat-x bottom left #fefefe;
				padding:10px;
				margin-bottom:1.5em;
				color:#687f9d;				
			}
			
			/* set aside margin if have a Right col */
			body.MainRight #content, body.LeftMainRight #content {
				/* margin-right:-200px; */
			}
			#submenu {
				width:200px;
				float:left;
				margin:10px 0px 0px 0px;
			}
			#submenu h3 {
				background:#006699;
				color:#fff;
				padding:5px 6px;
				font-size:1.2em;
			}
			#copy {
				float:left;
			}
			/* only have a right margin if there are right modules */
			body.RightMain #copyinner, body.LeftMainRight #copyinner {
				margin-right:250px;
			}
			/* only have a left margin if there are left modules */
			body.LeftMain #main, body.LeftMainRight #main {
				margin-left:220px;
			}
			#right {
				width:230px;
				margin:1em 0 0 0;
				padding:0 0 0 40px;
				position:absolute;
				top:300;
				right:0;
				color:#000;
			}
			#right h3 {
				background:#006699;
				color:#fff;
				padding:5px 6px;
				font-size:1.2em;
			}
			#footer {
				width:960px;
				height:210px;
				margin:auto;
				color:#565758;
				padding-top:30px;
				background:url("../images/bg-g.png") no-repeat top right transparent;
			}
			#footer ul {
				list-style:none;
				margin:0;
			}
			#footer li {
				display:inline;
			}
			#footer a {
				color:#565758;
			}
			#footer a:hover {
				color:#FFF;
			}
			#hllink {
				float:right;
			}
			
			#right .calltoaction {
				display:inline-block;
				clear:both;
				margin-bottom:10px;
			}
			
			#right #contact {
				background:url("../images/bg-contact.png") no-repeat top left transparent;
				padding:0.75em 1em 1em 1em;
				display: inline-block;
				width:208px; 
				height:227px;
			}
			
			button.button-submit {
				background:url("../images/btn-submit.png") no-repeat top left transparent;
				width: 80px;
				height: 30px;
				text-indent: -99999px;
			}
			
			
		/* --- Login/Logout ------------------------ */
			
			#com-form-login {
				width:400px;
				background:#f6f5f7;
				padding:20px;
				border-radius:5px;
				-moz-border-radius:5px;
				-webkit-border-radius:5px;
			}
			#com-form-login fieldset {
				width:50%;
				margin:0;
				padding:0 0 15px;
				float:left;
				border-right:1px solid #dedede;
			}
			#com-form-login input.inputbox {
				width:87%;
			}
			#com-form-login ul {
				width:168px;
				margin:15px 0 0 0;
				list-style:none;
				float:right;
			}
			#com-form-login ul li {
				margin:0 0 3px 0;
				background:none;
			}
			.button-login, .button-submit {
				background:#1374a5;
				color:#fff;
				font-weight:bold;
				padding:5px;
				-moz-border-radius:5px;
				-webkit-border-radius:5px;
				border-radius:5px;		
			}
			form.register {
				background:#f6f5f7;
				border-radius:5px;
				-moz-border-radius:5px;
				-webkit-border-radius:5px;
				padding:30px;
			}
			form.register ul {
				margin:0;
				list-style:none;
			}
			form.register li {
				border-bottom:1px solid #e3e3e3;
				padding:8px 0;
				background:none;
			}
			form.register label {
				width:140px;
				display:block;
				float:left;
				text-align:right;
				margin:0 10px 0 0;
				padding:2px;
			}
			form.register input {
				width:200px;
			}
			#right h2 {
				font-size:1.8em;
				margin:0;
			}
			#right a {
				color:#000;
			}
			#right #form-login {
				background:url("../images/bg-login.png") no-repeat top left transparent;
				padding:0.75em 1em 1em 1em;
				display: inline-block;
				width:203px; 
				height:168px;
			}
			#right #form-login fieldset {
				font-size: 0.75em;
			}
			#right #form-login fieldset .inputbox {
				float:right;
			}
			#right #form-login fieldset label {
				display:inline-block;
				padding-top:3px;
			}
			#right #form-login .button-themed {
				background:url("../images/btn-login.png") no-repeat top left transparent;
				height:30px;
				width:80px;
				border:0;
				text-indent: -99999px;
				cursor: pointer;
				float:right;
			}
			#right #form-login .logout {
				background:url("../images/btn-logout.png") no-repeat top left transparent;
			}
			#right #form-login-forgotpassword span {
				margin-top: 8px;
				position:absolute;
				cursor: pointer;
				text-decoration: underline;
			}
			#right #form-login-forgotpassword span:hover {
				text-decoration: none;
			}
			
		/* --- Pagination ------------------- */
			
			.pagination {
				clear:both;
				background:url("../images/breadcrumbs-bottom.png") no-repeat bottom left #f6f5f7;
				padding:7px 0;
				margin:0 0 5px;
			}
			.pagination li {
				display:inline;
				background:none;
				padding:0;
			}
	}
	@media print {		
		body {
			color:#000000;
			font:12px/18px arial, helvetica, sans-serif;
		}			
		p { margin:14px 0; }			
		a { color:#000; }
			
		h1 { font-size:20px; margin:14px 0; }
		h2 { font-size:18px; margin:14px 0; }
		h3 { font-size:16px; margin:14px 0; }
		h4 { font-size:14px; margin:14px 0; }
		h5 { font-size:12px; margin:14px 0; }
		h6 { font-size:11px; margin:14px 0; }
		
		/* --- Layout ------------------------------ */
		
		#accessibility, #menu, #submenu, #nav, #navigation, .hairylemon, #rokajaxsearch, #_submitbutton, div.button-themed, .screenonly {
			display:none;
		}
		#footer {
			border-top:1px solid #000;
			margin:15px 0 0 0;
		}
		.printonly {
			display:block;
		}
		#right, #banner {
			display:none;
		}
	}