/*----- Credits
COMPANY: www.clickstream.ie
DESIGN: Mark
CSS: Alan
HTML: Alan
PHP: Iain
-----*/


/*----- HTML5 display-role reset for older browsers -----*/
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
ol, ul {
	list-style: none;
	padding: 0;
	margin: 0;
}


/*----- Main Styles -----*/
html	{
	overflow-y: scroll;
}
body	{
	padding: 0;
	margin: 0;
	background-color: #2a232a;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 1em;
	color: #2C2C2C;
}
#wrapper	{
	width: 100%;
}
a	{
	text-decoration: none;
	color: #fff;
}
p	{
	font-size: 0.9375em;
	margin-top: 2px;
}
ul	{
	font-size: 0.9375em;
}


/*----- Header -----*/
header	{
	width: 960px;
	margin: 0 auto;
	/*border-top: 7px solid #319ed7;*/
	border-bottom: 2px solid #000;
	/*background: url(../img/bg/header-top-bg.png) repeat-x top left #353034;*/
	color: #fff;
}
#headerTop	{
	width: 100%;
	height: 128px;
	/*background-color: #319ed7;*/
	background: url(../img/bg/header-top-bg.jpg) no-repeat top left;
}
#headerTopContent	{
	width: 826px;
	height: 104px;
	margin: 0 auto;
	/*background-color: #319ed7;*/
}
#headerLogo	{
	width: 413px;
	float: left;
	margin-top: 30px;
}
#headerLogo h1	{
	color: #fff;
	font-size: 1.625em;
	margin: 0 0 0 23px;
	padding: 12px 0 12px 75px;
	text-align: left;
	text-transform: uppercase;
	line-height: 24px;
	float: left;
	background: url(../img/logos/nicro-metals-recycling-logo-shadow.png) no-repeat left center;
	font-family: "Times New Roman", Verdana, Arial;
	-moz-text-shadow: 2px 2px 3px #000;
	-webkit-text-shadow: 2px 2px 3px #000;
	text-shadow: 2px 2px 3px #000;
}
#headerLogo h1 #headingFont	{
	font-size: 0.925em;
}
#headerDetails	{
	width: 413px;
	float: right;
	margin-top: 35px;
}
#headerDetails ul	{
	float: right;
	font-weight: bold;
	margin-right: 15px;
}
#headerDetails ul li	{
	padding: 2px 0 2px 22px;
}
#headerDetails ul li#telOne	{
	/*background: url(../img/icons/telephone.png) no-repeat left center;*/
	font-size: 24px;
	margin: 0 0 2px 0;
	text-align: right;
}
#headerDetails ul li#telOne img	{
	margin: 0 5px -4px 0;
	padding: 0;
}
#headerDetails ul li#telTwo	{
	/*background: url(../img/icons/mobile.png) no-repeat 2px center;*/
	font-size: 13px;
	text-align: right;
}
#headerDetails ul li#telTwo a:hover	{
	text-decoration: underline;
}
/*#headerDetails ul li#email	{
	background: url(../img/icons/email.png) no-repeat left center;
	font-size: 0.9375em;
	padding-bottom: 5px;
}*/
/*#headerDetails ul li#email a:hover	{
	text-decoration: underline;
}*/
#headerDetails .blue	{
	color: #3eafea;
}


/*----- Nav -----*/
nav	{
	/*width: 826px;*/
	width: 100%;
	margin: 12px auto 10px auto;
	font-size: 0.9375em;
	font-weight: bold;
	text-align: center;
}
nav	 ul	li	{
	display: inline;
}
nav	 ul	li a	{
	padding: 5px 8px;
}
nav	 ul	li#menuLast a	{
	padding: 5px 6px;
}
nav	 ul	li a:hover	{
	background-color: #319ed7;
}
nav	 ul	li.on a	{
	background-color: #319ed7;
}
.clearfix:before,  
.clearfix:after {  
    content: " ";  
    display: table;  
}  
.clearfix:after {  
    clear: both;  
}  
.clearfix {  
    *zoom: 1;  
}  
nav a#pull {  
    display: none;  
}


/*----- Main Content -----*/
#main	{
	width: 960px;
	margin: 0 auto;
	background-color: #fff;
	border-bottom: 39px solid #319ed7;
}
#homePage #leftCol	{
	width: 826px;
	margin: 0 auto;
	padding-bottom: 50px;
}
#homePage #leftCol h2	{
	text-transform: uppercase;
	font-size: 1.0625em;
	color: #353034;
}
.servicesOne, .servicesTwo	{
	width: 257px;
	height: 341px;
	float: left;
	text-align: center;
	margin-right: 27px;
}
.servicesThree	{
	width: 257px;
	height: 341px;
	float: left;
	text-align: center;
	margin-right: 0;
	background: url(../img/services-03.jpg) no-repeat center center;
}
.servicesOne	{
	background: url(../img/services-01.jpg) no-repeat center center;
}
.servicesTwo	{
	background: url(../img/services-02.jpg) no-repeat center center;
}
a.readMore	{
	width: 84px;
	height: 52px;
	display: block;
	color: #fff;
	padding-top: 32px;
	text-transform: uppercase;
	font-size: 1.0625em;
	margin: 220px auto 0 auto;
	background: url(../img/bg/more-link-01.png) no-repeat center 0;
}
a.readMore:hover	{
	background: url(../img/bg/more-link-01.png) no-repeat center -84px;
}
#homePage #rightCol	{
	width: 826px;
	margin: 0 auto;
	padding-bottom: 50px;
}
#homePage #rightCol h2	{
	text-transform: uppercase;
	font-size: 1.0625em;
}
.welcome	{
	width: 236px;
	height: 450px;
	margin-right: 59px;
	float: left;
}
.welcome p	{
	color: #2C2C2C;
}
.welcome img	{
	border: 1px solid #353034;
}
.welcomeLast	{
	width: 236px;
	height: 450px;
	margin-right: 0;
	float: left;
}
.welcomeLast p	{
	color: #2C2C2C;
}
.welcomeLast img	{
	border: 1px solid #353034;
}
a.welcomeMore	{
	display: block;
	width: 74px;
	height: 30px;
	background-color: #353034;
	text-transform: uppercase;
	padding-top: 11px;
	text-align: center;
	color: #fff;
}
a.welcomeMore:hover	{
	background-color: #319ed7;
}
.welcomeMoreLinks	{
	float: right;
}


/*----- Slider -----*/
#sliderMain	{
	width: 826px;
	margin: 0 auto;
	padding: 13px 0 33px 0;
}
#sliderMain h2	{
	font-size: 1.25em;
	margin: 5px 0 0 0;
	padding: 0;
}
#sliderMain p	{
	font-size: 0.9375em;
	margin: 0;
	padding: 0;
}


/*----- Footer -----*/
footer	{
	width: 960px;
	margin: 0 auto;
	background-color: #353034;
	border-top: 2px solid #000;
	border-bottom: 2px solid #000;
	color: #fff;
	font-size: 0.875em;
}
footer h3	{
	font-size: 1.2142em;
}
footer a	{
	color: #fff;
}
footer a:hover	{
	text-decoration: underline;
}
#footerContent	{
	width: 826px;
	margin: 0 auto;
}
#footerContact, #footerSiteMap, #footerCredits	{
	width: 275px;
	float: left;
}
#footerSiteMap	{
	width: 255px;
	padding-left: 20px;
}
#footerSiteMap ul li a	{
	margin-left: 5px;
}


/*----- Inside Pages -----*/
#contentWrap	{
	width: 826px;
	margin: 0 auto 18px auto;
	padding-top: 18px;
	line-height: 1.375em;
}
#contentWrap #leftCol	{
	width: 550px;
	float: left;
	padding-right: 40px
}
#contentWrap #leftColContact	{
	width: 826px;
	float: left;
}
#contentWrap #leftCol h1, #leftColContact h1	{
	text-transform: uppercase;
	font-size: 1.25em;
	color: #353034;
	margin: 0 0 20px 0;
}
#contentWrap #leftCol h2	{
	font-size: 1.3125em;
	border-bottom: 1px solid #353034;
	padding-bottom: 5px;
}
#leftColContact h2	{
	font-size: 1.25em;
	color: #353034;
	margin: 0 0 10px 0;
}
#contentWrap #leftCol h3	{
	font-size: 1.125em;
}
#contentWrap #leftCol h3 a	{
	text-decoration: none;
}
#contentWrap #leftCol h4	{
	font-size: 0.9375em;
	margin: 8px 0 4px 0;
}
#contentWrap #leftCol img.mainTop	{
	display: block;
	border: 1px solid #000;
}
#contentWrap a	{
	color: #585858;
	text-decoration: underline;
}
#contentWrap a:hover	{
	color: #319ed7;
	text-decoration: none;
}
#thirdCol	{
	width: 236px;
	float: right;
}
#thirdCol h2	{
	text-transform: uppercase;
	margin: 0 0 20px 0;
	font-size: 1.3125em;
	color: #353034;
}
#thirdCol img	{
	margin: 0 0 10px 0;
}
ul#faq	{
	margin-top: 30px;
}
li.question	{
	color: #319ed7;
}
li.answer	{
	margin-bottom: 15px;
}
ul.contactOne/*, ul.contactTwo*/	{
	width: 300px;
}
ul.contactOne	{
	padding: 0 0 15px 0;
	border-bottom: 1px dotted #333;
}
/*ul.contactTwo	{
	margin: 15px 0 0 0;
}
ul.contactTwo a	{
	color: #585858;
}
ul.contactTwo a:hover	{
	text-decoration: underline;
}*/
ul.blueArrow	{
	padding: 0 0 0 20px;
}
ul.blueArrow li	{
	background: url(../img/icons/list-arrow-02.png) no-repeat 0px 6px;
	padding: 0 0 0 16px;
}
span.bold	{
	font-weight: bold;
}


/*----- Google Map -----*/
#map_canvas	{
	width: 806px;
	height: 600px;
	border: 10px solid #319ed7;
	margin: 50px 0;
	font-family: Geneva, Arial, Helvetica, sans-serif;
}
#map_canvas a	{
	color: #2C2C2C;
}
#map_canvas a:hover	{
	text-decoration: underline;
}
#infowindow	{
	width: 190px;
	height: 180px;
}


/*----- Misc -----*/
.clear	{
	clear: both;
}


/*----- Fonts -----*/


/*----- Media Queries ----*/
@media screen and (max-width: 960px) {
	header, #main, footer, #contentWrap #leftColContact	{
		width: 100%;
	}
	nav, #headerTopContent, #homePage #leftCol, #homePage #rightCol, #sliderMain, #footerContent, #contentWrap	{
		width: 86.04166%;
	}
	#homePage #rightCol	{
		padding-bottom: 0;
	}
	#headerLogo, #headerDetails	{
		width: 50%;
	}
	#contentWrap #leftCol	{
		width: 66.58595%;
		padding-right: 4.84261%;
	}
	#contentWrap #leftCol img	{
		width: 99.17273%;
		height: auto;
	}
	#contentWrap #thirdCol	{
		width: 28.57142%;
	}
	.servicesOne, .servicesTwo, .servicesThree	{
		width: 50%;
		margin-right: 0;
	}
	.welcome, .welcomeLast	{
		width: 35%;
		margin: 0 0 20px 0;
		padding: 0 7%;
	}
	#footerContact, #footerSiteMap, #footerCredits	{
		width: 33.29297%;
	}
	#footerSiteMap	{
		width: 30.87167%;
		padding-left: 2.42130%;
	}
	#map_canvas	{
		width: 96.57869%;
		height: 500px;
	}
}
@media screen and (max-width: 880px) {
	nav {   
        height: auto;
    }
    nav ul {  
        width: 100%;  
        display: block;
        height: auto;
    }
    nav li {  
        width: 33.3%;  
        float: left;  
        position: relative;
		height: 32px;
    }
    nav ul li a {
		padding: 8px 0 0 0;
		height: 24px;
    }
	nav	ul li#menuLast a	{
		padding: 5px 0 0 0;
		height: 27px;
	}
    nav a {  
        text-align: left;  
        width: 100%;
        text-indent: 25px;
		display: inline-block; 
    }
}
@media screen and (max-width: 760px) {
	#headerTop	{
		height: 160px;
		background: url(../img/bg/header-top-bg-760.jpg) no-repeat top left;
	}
	#headerTopContent	{
		height: auto;
	}
	.welcome, .welcomeLast	{
		height: 480px;
	}
}
@media screen and (max-width: 660px) {
	#headerTopContent	{
		height: auto;
	}
	#headerLogo	{
		width: 60%;
		float: left;
		clear: both;
		margin: 10px 0 10px 20%;
	}
	#headerDetails	{
		width: 100%;
		float: left;
		clear: both;
		margin: 0;
	}
	#headerDetails ul	{
		float: none;
	}
	#headerDetails ul li#telOne	{
		text-align: center;
		float: none;
	}
	#headerDetails ul li#telTwo	{
		text-align: center;
	}
	.servicesOne, .servicesTwo, .servicesThree	{
		width: 100%;
	}
	.welcome, .welcomeLast	{
		height: auto;
		width: 70%;
		margin: 0 0 30px 15%;
		padding: 0;
		clear: both;
		text-align: center;
	} 
	nav	{
		margin-top: 0;
		border-top: 1px solid #333;
	} 
    nav ul {  
        display: none;  
        height: auto;  
    }
	nav li {  
        width: 50%;  
        float: left;  
        position: relative;
		height: 32px;
    }  
    nav a#pull {  
        display: block;  
        background-color: #666;  
        width: 100%;
		height: 30px;
        position: relative;
		padding-top: 10px;
    }  
    nav a#pull:after {  
        content:"";  
        background: url(../img/icons/nav-icon.png) no-repeat 0 0;
		width: 30px;  
        height: 30px;  
        display: inline-block;  
        position: absolute;  
        right: 15px;  
        top: 10px;  
    }
	#contentWrap #leftCol	{
		width: 100%;
		padding: 0;
	}
	#contentWrap #thirdCol	{
		display: none;
	}
	#map_canvas	{
		width: 95.86804%;
		height: 400px;
	}
	#infowindow	p	{
		display: none;
	}
}
@media screen and (max-width: 630px) {
	#headerLogo	{
		width: 70%;
		margin: 10px 0 10px 15%;
	}
}
@media screen and (max-width: 600px) {
	#headerLogo	{
		width: 80%;
		margin: 10px 0 10px 15%;
	}
}
@media screen and (max-width: 560px) {
	#map_canvas	{
		width: 94.56804%;
		height: 300px;
	}
}
@media screen and (max-width: 520px) {
	#headerLogo	{
		width: 80%;
		margin: 10px 0 10px 15%;
	}
}
@media screen and (max-width: 480px) {
	#headerTop	{
		height: 180px;
		background: url(../img/bg/header-top-bg-480.jpg) no-repeat top left;
	}
	#headerLogo	{
		width: 90%;
		margin: 10px 0 10px 10%;
	}
	.welcome, .welcomeLast	{
		width: 100%;
		margin: 0 auto 30px auto;
	}
	#footerContact, #footerSiteMap, #footerCredits	{
		width: 100%;
		clear: both;
	}
	nav li {  
        display: block;  
        float: none;  
        width: 100%;  
    }
	#sliderMain	{
		display: none;
	}
}
@media screen and (max-width: 420px) {
	#headerLogo	{
		width: 100%;
		margin: 10px 0;
	}
}
@media screen and (max-width: 370px) {
	#headerTop	{
		height: 220px;
		background: url(../img/bg/header-top-bg-370.jpg) no-repeat top left;
	}
}
@media screen and (max-width: 340px) {
	#headerTop	{
		height: 240px;
		background: url(../img/bg/header-top-bg-320.jpg) no-repeat top left;
	}
	#headerLogo	{
		width: 100%;
		margin: 10px 0 0 0;
	}
	#headerDetails	{
		width: 100%;
		margin: 0;
	}
	#headerDetails ul	{
		width: 100%;
		margin: 0;
	}
	#headerDetails ul li	{
		width: 100%;
		margin: 0;
		padding: 0;
	}
	#headerLogo h1	{
		margin: 0 0 0 15px;
	}
	#sliderMain	{
		display: none;
	}
	#map_canvas	{
		width: 93.16804%;
	}
}