﻿/* ------------------------------------------------------------
	New Css Layout gasketexpress.com
	Author: William Åström
	Homepage: www.williamastrom.se
	Content
		#1	Init
		#2	Common Classes
		#3	Layout Structure
	
	Colour Scheme
	===============================
	Background: 		#f2f2f2
	Header Green		#61a656
	Text Grey		#535353
	Headline Dark Grey	#545454
---------------------------------------------------------------	*/

/*****CSS RESET*******/

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, b, u, i, center,
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-size: 100%; vertical-align: baseline; background: transparent; }
body { line-height: 1; }
ol, ul { list-style: none; }
blockquote, q { quotes: none; }
blockquote:before, blockquote:after,
q:before, q:after { content: ''; content: none; }
:focus { outline: 0; }
ins { text-decoration: none; }
del { text-decoration: line-through; }
table { border-collapse: collapse; border-spacing: 0; }
@font-face {
	font-family: 'DroidSansRegular';
	src: url('DroidSans-webfont.eot');
	src: local('☺'), url('DroidSans-webfont.woff') format('woff'), url('DroidSans-webfont.ttf') format('truetype'), url('DroidSans-webfont.svg#webfontKYIQSBQk') format('svg');
	font-weight: normal;
	font-style: normal;
}

@font-face {
	font-family: 'DroidSansBold';
	src: url('DroidSans-Bold-webfont.eot');
	src: local('☺'), url('DroidSans-Bold-webfont.woff') format('woff'), url('DroidSans-Bold-webfont.ttf') format('truetype'), url('DroidSans-Bold-webfont.svg#webfontljpTCDjw') format('svg');
	font-weight: normal;
	font-style: normal;
}


@font-face {
	font-family: 'LeagueGothicRegular';
	src: url('League_Gothic-webfont.eot');
	src: local('☺'), url('League_Gothic-webfont.woff') format('woff'), url('League_Gothic-webfont.ttf') format('truetype'), url('League_Gothic-webfont.svg#webfontOTINA1xY') format('svg');
	font-weight: normal;
	font-style: normal;
}
/**************************************************************
---------------------------------------------------------------
	#1	PageSetup
---------------------------------------------------------------	
**************************************************************/

body,html { background-color:#f2f2f2;}

/*body { background-image:url(../images/bakg.gif);}*/
#container { width: 960px; margin:0 auto; overflow: auto;background-color:#f2f2f2;}
#wrap { margin-bottom:20px;}

#container, #header, #content, #wrap,#aside,#navbar { overflow:hidden; position:relative;}



/**************************************************************
---------------------------------------------------------------
	#2	Common Elements
---------------------------------------------------------------
**************************************************************/
p,h1-h6,ul,li,html,body { font-family: DroidSansRegular,"trebuchet ms",arial,sans-serif; font-size: 14px; font-weight: 400; line-height: 1.5; }
p { color: #535353;  padding: 0; }
p+p { padding: 10px 0 0; }
h1 { color: #545454; font: 48px/1 LeagueGothicRegular; padding: 0 0 20px; text-transform: uppercase; }
h2 { color: #545454; font: 24px/1.5 DroidSansBold; padding: 30px 0 10px; text-transform: uppercase; }
h3 { color: #545454; font: 17px/1.5 DroidSansBold; padding: 20px 0 10px;   }
h4 { color: #000; font: 16px/1.5 DroidSansBold; padding: 20px 0 0; }
a { -moz-transition: color 0.25s ease-in; -o-transition: color 0.25s ease-in; -webkit-transition: color 0.25s ease-in; transition: color 0.25s ease-in; }
a:link,a:visited { color: #61a656; text-decoration: none; }
a:hover { color: #545454; }
span { color: #61a656; }
#header,#navbar { margin: 0 10px; width: 940px; }
ul { margin: 0 0 0 5px; }
li { color: #545454; padding-top: 5px; }
.floatLeft { float: left; }
.clearfix { clear: both; }
.text-intro {color: #54544; font-size: 16px; letter-spacing: 2px; padding-top: 0; font-family: DroidSansRegular;}  

/**************************************************************
---------------------------------------------------------------
	#3	Layout
---------------------------------------------------------------	
**************************************************************/
#header { background-image: url(../images/header.png); background-repeat: no-repeat; height: 180px; margin-bottom: 5px; }
#content,#aside { display: block; }
#container { position: relative; }
.round { -moz-border-radius: 5px; -webkit-border-radius: 5px; background-color: #fff; behavior: url(http://www.gasketexpress.com/PIE.htc); border-radius: 5px; }
.button { background-color: #61a656; color: #fff; display: inline; float: right; margin-top: 0; padding: 5px 10px; text-align: center; }
a.button { -moz-transition: background-color 0.3s ease-in; -o-transition: background-color 0.3s ease-in; -webkit-transition: background-color 0.3s ease-in; position: relative; transition: background-color 0.3s ease-in; }
a.button:link,a.button:visited { color: #fff; text-decoration: none; }
a.button:hover { background-color: #545454; color: #fff; text-decoration: none; }

/*	Navbar												
///////////////////////////////////////////////////////////////	*/
#navbar { -moz-border-radius: 5px; -webkit-border-radius: 5px; background-color: #fff; behavior: url(http://www.gasketexpress.com/PIE.htc); border-radius: 5px; overflow: auto; padding: 12px 0 10px; }
#navbar ul { float: left; margin: 0; position: relative; width: 900px; }
#navbar li { display: inline; margin-left: 20px; }
#navbar a { text-decoration: none; }
#navbar a:link,#navbar a:visited { font-size: 16px; text-transform: uppercase; }
#navbar a:hover { color: #545454; }
#navbar li.active { -moz-border-radius: 5px; -webkit-border-radius: 5px; background: #545454; behavior: url(http://www.gasketexpress.com/PIE.htc); border-radius: 5px; color: #fff; margin-top: 0; padding: 10px 10px 8px; position: relative; }
#navbar li.active a:link,#navbar li.active a:visited { color: #fff; padding: 0 7px 2px; }


/*	Footer												
///////////////////////////////////////////////////////////////	*/
#footer { margin:0 auto;clear:both; width:940px; min-height: 120px; background-color: #545454; position:relative; padding:0px 0 20px 0px;overflow:auto;margin-bottom:20px; }
#footer .column { float: left; margin: 0px 0px 0; overflow: auto; position: relative; width: 220px; }
#footer h3 { font-size: 36px; padding: 10px 0px 5px; color:#f2f2f2; font-family: LeagueGothicRegular; text-transform: uppercase; }
#footer h4 { font-family: DroidSansBold; font-size: 14px; padding: 10px 0px 5px; color:#fff; line-height:1; text-transform:uppercase;}
#footer p {padding: 0px; font-size:14px; color: #f2f2f2;}
#footer .firstf { clear:both;padding-left: 20px;  }
#footer .second { padding-left: 20px;  }
#footer .third { padding-left: 20px; width:200px; }
#footer-intro { width:900px; padding: 0px 20px; }
#footer a:hover { color: #fff; }
/**************************************************************
---------------------------------------------------------------
	#3	Page Specifics
---------------------------------------------------------------	
**************************************************************/


/*	Home					
///////////////////////////////////////////////////////////////	*/
#home #content { margin: 0 0 0px; position:relative; }
#intro { background-color: #fff; clear: both; margin: 20px 10px 0; overflow: hidden; padding: 20px; width: 900px; background-image: url(../images/introBakg.gif)}

.blur { -moz-box-shadow: 0 0 15px #ebebeb; -webkit-box-shadow: 0 0 15px #ebebeb; box-shadow: 0 0 15px #ebebeb; }

.intro-img { background-image: url(../images/gasket.gif); background-repeat: no-repeat; float: left; height: 170px; padding-right: 10px; width: 200px; }
.intro-text { float: left; margin: 0 10px; overflow: auto; width: 900px; }
.intro-text h1 { padding: 0 0 10px; text-transform:uppercase;}
.intro-text p { font-size: 17px; line-height: 1.5; }

.product-box { background-color: #fff; float: left; margin: 20px 10px 0; overflow: auto; position: relative; width: 300px; }
.product-box h2 { font-family: DroidSansBold; font-size: 14px; line-height: 1; padding-bottom: 5px; padding-top:20px; }
.product-box p { line-height: 1.5; }
.product-box-img { height: 120px; padding: 20px 20px 0; width: 260px; }
.product-box-inner { overflow: auto; padding: 0 20px 20px; }
.product-box-intro { height: 80px; overflow: hidden; }


/*	Our Products					
///////////////////////////////////////////////////////////////	*/
#ourProducts #aside h2,#productsheet #aside h2 { font-family: LeagueGothicRegular; font-size: 48px; padding: 0 0 0px; text-align: left; text-transform: uppercase; }
#ourProducts #aside p { padding: 0 20px; }
#ourProducts #aside,#productsheet #aside { background-color: #fff; float: left; margin: 20px 10px 0; width: 300px; }
#ourProducts #content { float: left; margin: 0 0 20px; width: 640px; }
#ourProducts .aside-inner,#productsheet .aside-inner { padding: 20px; }

#productsheet #content { background-color: #fff; float: left; margin: 20px 10px 0; padding: 0 20px; width: 580px; }
#productsheet #content .productsheet-img { float: left; height: 120px; padding: 20px; width: 260px; }
#productsheet #content h1 { color: #545454; line-height: 1.5; padding: 20px 0 20px; text-transform: uppercase; }
#productsheet #content h3{ color: #545454; font-size: 17px; }
#productsheet #content ul { padding: 0; }
#productsheet #content,#productsheet #aside { background-image: url(../images/content-backg.png); background-repeat: repeat-x; padding-bottom: 20px; }


/*	About Us					
///////////////////////////////////////////////////////////////	*/



/*	Contact Us					
///////////////////////////////////////////////////////////////	*/

#map { margin: 20px 0; }
.form { margin-top: 20px; }
.form label { display: inline-block; padding: 20px 0 0 2px; width: 100px; }
.form input,.form textarea { border: 1px solid #e3e3e3; color: #666; padding: 5px 9px; }
.form input:focus,.form textarea:focus { background-color: #f3f3f3; border: 1px solid #c3c3c3; color: #333; }
.formInput { width: 250px; }
.message { padding-right: 4px; }
.form .button { border: 0; color: #fff; float: none; padding: 8px 15px; position:relative;}
.form .button:hover { -moz-transition: background-color 0.3s ease-in; -o-transition: background-color 0.3s ease-in; -webkit-transition: background-color 0.3s ease-in; background-color: #545454; transition: background-color 0.3s ease-in; }

#author { width:200px;margin:0 auto; margin-bottom:20px; }
#author a{color:#444;font-size:12px;text-decoration:underline;}
