Okay this is the index page with the form:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Simon Paul Creative | Home</title>
<link href="css/styles.css" rel="stylesheet" type="text/css" />
<!--[if lt IE 8]>
<style>
/* For IE < 8 (trigger hasLayout) */
.clearfix { zoom:1; }
</style>
<![endif]-->
</head>
<body class="clearfix" id="index">
<div id="shadowWrapper" class="clearfix">
<div id="mainWrapper" class="clearfix">
<!-- HEADER -->
<div id="header">
<img id="mainLogo" src="images/mainLogo.png" width="441" height="86" alt="Simon Paul logo" />
<!-- NAV -->
<ul id="nav">
<li><a class="off" href="contact.html"><span>Contact</span></a></li>
<li><a class="off" href="tutorials.html">Tutorials</a></li>
<li><a class="off" href="blog.html">Blog</a></li>
<li><a class="off" href="portfolio.html">Portfolio</a></li>
<li><a class="off" href="services.html">Services</a></li>
<li><a class="on" href="#">Home</a></li><!--ON-->
</ul>
</div>
<!-- BANNER -->
<div id="banner">
<div class="ctaWrapper">
<a class="ctaButton" href="mailto:simondegay@gmail.com"><span>Let's Talk</span></a>
</div>
</div>
<!-- INTRO TEXT -->
<div id="intro">
<div class="introCol_1_2GradBg">
<div id="introCol_1">
<h2>Who?</h2>
<img id="introLogoSimon" src="images/introLogoSimon.png" width="72" height="72" alt="Portrait of proprietor" />
<p class="left"> Hi, I’m an independent web designer specialising in one-stop websites.
So, whether you're a brand <a href="../www.google.co.uk">new business</a>, wanting to create an initial web
presence, or an established company looking for a full online business solution, I’m confident I’ve got everything to
take you to the next level.
</p>
</div>
</div>
<div id="introCol_2">
<h2>Why?</h2>
<div id="introLogoShadow"></div>
<p class="mid">I understand that to truly influence your business, your website must attract customers in order to
drive sales. Not only is it important to show your brand's personality, but your website must differentiate you
from your competitors and establish your authority within your industry.
</p>
</div>
<div class="introCol_1_2GradBg">
<div id="introCol_3">
<h2>What?</h2>
<img id="introLogoDot" src="images/introLogoDot.png" width="72" height="72" alt="Logo" />
<p class="right">A website is much like a shop, tucked away down a quiet side street - Not only must it look
attractive, it must also have good content, and people must be aware that it exists. To this end, I can help
provide all those <a href="../www.google.co.uk">extra elements</a> that will make your website a knockout success. </p>
</div>
</div>
</div>
<!-- RECENT WORK -->
<div id="recentWork">
<div id="recentWorkTitle">
<h2>Recent Work</h2>
</div>
<div id="thumbWrapper">
<div id="thumbCol_1">
<a id="thumb_1" href="feedback_form.html">
<span class="linkText"><span class="linkHead">Avenue 27 Boutique</span> Everything from handbags to shoes ...</span>
</a>
</div>
<div id="thumbCol_2">
<a id="thumb_2" href="recent_2.html">
<span class="linkText"><span class="linkHead">Juzi</span> offers unique, high-quality handmade jewellery ...</span>
</a>
</div>
<div id="thumbCol_3">
<a id="thumb_3" href="recent_4.html">
<span class="linkText"><span class="linkHead">Sarah Rumsey</span> Freelance make-up and hair stylist ...</span>
</a>
</div>
<div id="thumbCol_4">
<a id="thumb_4" href="recent_3.html">
<span class="linkText"><span class="linkHead">BlueJay</span> is a refreshing new breed of marketing agency ...</span>
</a>
</div>
</div> <!--thumbWrapper end-->
</div> <!--recentWork end-->
<!-- SELLING POINTS -->
<div id="sellingPoints">
<div id="col_1">
<a class="icon_1" href="#"></a>
<h2><a href="#">Mobile Web</a></h2>
<p class="text">
With increasing numbers of people accessing the Web via smartphones, tablets and other mobile devices, can you really
afford to have a nonadaptive website?
</p>
<p class="learnMore">
<a href="#">Learn more</a>
</p>
</div>
<div id="col_2">
<a class="icon_1" href="#"></a>
<h2><a href="#">Getting Noticed</a></h2>
<p class="text">
When a prospect enters your business or service type into Google, do you want your site listed on the first few pages?
<a href="#"><strong>S</strong>earch <strong>E</strong>ngine <strong>O</strong>ptimisation</a> doesn't just happen.
</p>
<p class="learnMore">
<a href="#">Learn more</a>
</p>
</div>
<div id="col_3">
<a class="icon_1" href="#"></a>
<h2><a href="#">Accessibility</a></h2>
<p class="text">
Making your site accessible to users with disabilities isn't just good business sense (not to mention ethically sound),
in many situations it's also a legal requirement.
</p>
<p class="learnMore">
<a href="#">Learn more</a>
</p>
</div>
<div id="col_4">
<a class="icon_1" href="#"></a>
<h2><a href="#">Then There's:</a></h2>
<ul>
<li><span class="bullet"><a href="#">Website Hosting</a></span></li>
<li><span class="bullet"></span><a href="#">Domain Name Registration</a></li>
<li><span class="bullet"></span><a href="#">Email Marketing</a></li>
<li><span class="bullet"></span><a href="#">Blog Management</a></li>
<li><span class="bullet"></span><a href="#">Social Media Marketing</a></li>
<li><span class="bullet"></span><a href="#">Web Analytics</a></li>
</ul>
<p class="learnMore">
<a href="#">Learn more</a>
</p>
</div>
</div>
<!-- FOOTER -->
<div id="footer">
<div id="footCol_1">
<ul id="footNav">
<li><a href="contact.html">Contact</a></li>
<li><a href="tutorials.html">Tutorials</a></li>
<li><a href="blog.html">Blog</a></li>
<li><a href="portfolio.html">Portfolio</a></li>
<li><a href="services.html">Services</a></li>
<li><a href="#">Home</a></li>
</ul>
</div>
<div class="footDivider"></div>
<div id="footCol_2">
<p>poo</p>
</div>
<div class="footDivider"></div>
<div id="footCol_3">
<form action="send_mail.php" method="post">
<fieldset>
<legend>Message Me</legend>
<div>
<label for="name"> Name :</label>
<input type="text" name="name" value="" id="name" />
</div>
<div>
<label for="mail"> E-mail :</label>
<input type="text" name="mail" value="" id="mail" />
</div>
<div>
<label for="comments"> Message :</label>
<textarea rows=“15” cols=“40” name="comments"></textarea> <br/>
</div>
<div class="clearfix">
<button type="submit" class="subButton"><span>Send Message</span></button>
</div>
</fieldset>
</form>
</div>
</div> <!--footer end -->
</div> <!--MainWrapper end-->
</div> <!--shadowWrapper end-->
</body>
</html>
This is the PHP:
<?php
/*
This first bit sets the email address that you want the form to be submitted to.
You will need to change this value to a valid email address that you can access.
*/
$webmaster_email = "simondegay@googlemail.com";
/*
This bit sets the URLs of the supporting pages.
If you change the names of any of the pages, you will need to change the values here.
*/
$feedback_page = "index.html";
$error_page = "form_error_message.html";
$thankyou_page = "form_thank_you.html";
/*
This next bit loads the form field data into variables.
If you add a form field, you will need to add it here.
*/
$name = $_REQUEST['name'] ;
$mail = $_REQUEST['mail'] ;
$comments = $_REQUEST['comments'] ;
/*
The following function checks for email injection.
Specifically, it checks for carriage returns - typically used by spammers to inject a CC list.
*/
function isInjected($str) {
$injections = array('(\
+)',
'(\\r+)',
'(\ +)',
'(%0A+)',
'(%0D+)',
'(%08+)',
'(%09+)'
);
$inject = join('|', $injections);
$inject = "/$inject/i";
if(preg_match($inject,$str)) {
return true;
}
else {
return false;
}
}
// If the user tries to access this script directly, redirect them to the feedback form,
if (!isset($_REQUEST['email_address'])) {
header( "Location: $feedback_page" );
}
// If the form fields are empty, redirect to the error page.
elseif (empty($email_address) || empty($comments)) {
header( "Location: $error_page" );
}
// If email injection is detected, redirect to the error page.
elseif ( isInjected($email_address) ) {
header( "Location: $error_page" );
}
// If we passed all previous tests, send the email then redirect to the thank you page.
else {
mail( "$webmaster_email", "Feedback Form Results",
$comments, "From: $email_address" );
header( "Location: $thankyou_page" );
}
?>
And this is the CSS:
@charset "UTF-8";
/* General 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, 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,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
/* Form Reset */
form * {
background: none;
}
input[type=text], input[type=password], input[type=submit],textarea, button, .subButton {
-webkit-appearance: none;
-moz-appearance: none;
border: 1px solid #666;
background: none;
-webkit-border-radius: 0;
-moz-border-radius: 0;
border-radius: 0;
padding: 0;
margin: 0;
}
/* Cronos Regular (sp heads, sp learn more) */
@font-face {
font-family: 'cronos_pro_captionregular';
src: url('../fonts/cronospro-capt-webfont.eot');
src: url('../fonts/cronospro-capt-webfont.eot?#iefix') format('embedded-opentype'),
url('../fonts/cronospro-capt-webfont.woff') format('woff'),
url('../fonts/cronospro-capt-webfont.ttf') format('truetype'),
url('../fonts/cronospro-capt-webfont.svg#cronos_pro_captionregular') format('svg');
font-weight: normal;
font-style: normal;
}
/* Cronos Bold (intro heads, cta button) */
@font-face {
font-family: 'cronos_pro_light_displaybold';
src: url('../fonts/cronospro-semibolddisp-webfont.eot');
src: url('../fonts/cronospro-semibolddisp-webfont.eot?#iefix') format('embedded-opentype'),
url('../fonts/cronospro-semibolddisp-webfont.woff') format('woff'),
url('../fonts/cronospro-semibolddisp-webfont.ttf') format('truetype'),
url('../fonts/cronospro-semibolddisp-webfont.svg#cronos_pro_light_displaybold') format('svg');
font-weight: normal;
font-style: normal;
}
/* Cronos Light (nav, rw head) */
@font-face {
font-family: 'cronos_pro_light_displayRg';
src: url('../fonts/cronospro-ltdisp-webfont.eot');
src: url('../fonts/cronospro-ltdisp-webfont.eot?#iefix') format('embedded-opentype'),
url('../fonts/cronospro-ltdisp-webfont.woff') format('woff'),
url('../fonts/cronospro-ltdisp-webfont.ttf') format('truetype'),
url('../fonts/cronospro-ltdisp-webfont.svg#cronos_pro_light_displayRg') format('svg');
font-weight: normal;
font-style: normal;
}
/* CLEARFIX */
.clearfix:before, .clearfix:after {
content:"";
display:table;
}
.clearfix:after {
clear:both;
}
/* CLEARFIX END */
html {
background: #D9D9D9;
background-image: url(../images/backgroundTile2.jpg);
background-position: left top;
background-repeat: repeat-x;
font-size: 62.5%;
}
body {
width: 992px;
margin: 0 auto;
font-size: 14px;
font-size: 1.4rem;
font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
line-height: 1.45;
color: #757580;
}
p a {
color: #275AAB;
text-decoration: none;
font-size: 14px;
font-size: 1.4rem;
}
p a:hover {
color: #FCB715;
}
#shadowWrapper {
float: left;
background: url(../images/pageShadowTop.png) repeat-y top left;
width: 962px;
padding: 0 14px;
margin-bottom: 20px;
}
#mainWrapper {
width: 960px;
float: left;
background-color: white;
border: 1px solid #666;
border-bottom: white;
border-top: 0;
}
/* HEADER */
#header {
float: left;
width: 960px;
height: 100px;
background-color: black;
background-image: url(../images/headerBg.png);
background-repeat: no-repeat;
background-position: top left;
}
#mainLogo {
float: left;
margin: 14px 0 0 19px;
padding: 0;
}
/* BANNER */
#banner {
float: left;
width: 960px;
height: 300px;
background: #9EA8B1 url(../images/girlFace.jpg) top left;
}
/* SEARCH BOX */
/* CTA BUTTON */
div.ctaWrapper {
margin: 245px 14px 0 0px;
line-height: 40px;
float: right;
}
a.ctaButton span {
background: transparent url(../images/CTA_Button_Left_Sprite.png) no-repeat 0 0;
display: block;
padding: 0 3px 0 20px;
color: #333;
}
a.ctaButton {
background: transparent url(../images/CTA_Button_Right_Sprite.png) no-repeat top right;
display: block;
height: 40px;
margin-right: 0px;
padding-right: 16px;
text-decoration: none;
font-size:20px;
font-size:2rem;
font-family: 'cronos_pro_light_displaybold', Arial, "Helvetica Neue", Helvetica, sans-serif;
text-shadow: 0.1px 1px 1.5px #FFD76D, -0.5px -0.5px 1.5px #A96900;
}
a.ctaButton:hover span {
background-position: 0 -41px; color: #333;
}
a.ctaButton:hover {
background-position: right -41px
}
/* NAV */
ul#nav {
list-style: none;
margin: 8px 10px 0 0;
}
ul#nav li {
display: inline-block;
float: right;
}
ul#nav li a {
font-family: 'cronos_pro_light_displayRg', Arial, "Helvetica Neue", Helvetica, sans-serif;
text-decoration: none;
color: #C0C0C0;
font-size: 15px;
letter-spacing: 1px;
display: inline-block;
margin-left: 17px;
}
ul#nav a {
display: block;
background: url(../images/navButtonSprite.png) 0px 0px no-repeat;
width: 60px;
height: 54px;
text-align: center;
line-height: 1.7;
text-shadow: -0.5px -1px 0.5px black;
}
ul#nav a:hover {
background: url(../images/navButtonSprite.png) -62px 0px no-repeat;
color: #D6D6D6;
}
ul#nav a.on {
background: url(../images/navButton_ON.png);
color: #C0C0C0;
cursor: default;
}
/* INTRO */
#intro {
float: left;
background: url(../images/introBg.png) repeat-y top left;
}
.introCol_1_2GradBg {
float: left;
background-image: url(../images/gradientUp.jpg);
background-repeat: repeat-x;
background-position: top left;
}
#introCol_1, #introCol_3 {
width: 280px;
height: 100%;
float: left;
padding: 0 20px 17px 20px;
}
#intro img[id^="introLogo"] {
float: left;
margin-right: 8px;
margin-top: 5px;
}
div#introLogoShadow {
float: left;
margin-right: 8px;
margin-top: 5px;
height: 72px;
width: 72px;
background: url(../images/introLogoSprite3.png) -74px 0px no-repeat;
display: block;
}
div#introLogoShadow:hover {
float: left;
margin-right: 8px;
margin-top: 5px;
height: 72px;
width: 72px;
background: url(../images/introLogoSprite3.png) 0px 0px no-repeat;
display: block;
}
#introCol_2 {
width: 280px;
float: left;
padding: 0 20px 17px 20px;
background-image: url(../images/gradientDown.jpg);
background-repeat: repeat-x;
background-position: top left;
}
#intro h2 {
font-family: 'cronos_pro_light_displaybold', Arial, "Helvetica Neue", Helvetica, sans-serif;
font-size: 24px;
font-size: 2.4rem;
letter-spacing: 1px;
letter-spacing: 0.1rem;
text-align: center;
color: #275AAB;
margin-top: 10px;
}
#introCol_2 h2 {
color: white;
}
/* RECENT WORK */
#recentWorkTitle {
float: left;
height: 57px;
width: 960px;
background: black url(../images/RecentWorkTitleBg.png);
position: relative;
}
#recentWorkTitle h2 {
font-family: 'cronos_pro_light_displayRg', Arial, "Helvetica Neue", Helvetica, sans-serif;
letter-spacing: 2px;
letter-spacing: 0.2rem;
color: #A9A9A9;
line-height: 2.9;
font-size: 20px;
font-size: 2rem;
padding: 0;
margin: 0;
text-align: center;
text-shadow: 0px 0.5px 1px #C0C0C0, -1px -2px 1px black, -1px -1px 1px black;
}
/*-----------------------------*/
#recentWork #thumbWrapper {
float: left;
background: #9EA8B1 url(../images/thumbsBgTile.jpg) repeat top left;
width: 960px;
padding-top: 17px;
}
#recentWork div[id^="thumbCol"] {
float: left;
border-left: 2px solid #78838B;
border-right: 2px solid #B7C4CC;
}
#recentWork #thumbCol_1 {
border-left: none;
}
#recentWork #thumbCol_2 {
}
#recentWork #thumbCol_3 {
}
#recentWork #thumbCol_4 {
border-right: none;
}
#recentWork #thumbCol_1, #thumbCol_2, #thumbCol_3, #thumbCol_4, { /* IE6 float fix*/
display: inline;
}
#recentWork #thumbWrapper a {
float: left;
text-decoration: none;
}
#recentWork a#thumb_1 {
float: left;
background: url(../images/recentThumbSprite.png) 0px -241px no-repeat;
margin:0px 18px 0px 20px;
width: 200px;
height: 240px;
}
#recentWork a#thumb_2 {
float: left;
background: url(../images/recentThumbSprite.png) -202px -241px no-repeat;
margin:0px 18px 0px 18px;
width: 200px;
height: 240px;
}
#recentWork a#thumb_3 {
float: left;
background: url(../images/recentThumbSprite.png) -404px -241px no-repeat;
margin:0px 18px 0px 18px;
width: 200px;
height: 240px;
}
#recentWork a#thumb_4 {
float: left;
background: url(../images/recentThumbSprite.png) -606px -241px no-repeat;
margin:0px 20px 0px 18px;
width: 200px;
height: 240px;
}
/*-----------------------------*/
#recentWork a span.linkText {
display: block;
margin-top: 200px;
padding: 5px 10px 7px 10px;
font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
letter-spacing: 0px;
font-size: 12px;
line-height: 1.2;
color: #D6D6D6;
}
#recentWork span.linkHead {
color: #FCB715;
}
/*-----------------------------*/
#recentWork a#thumb_1:hover {
float: left;
background: url(../images/recentThumbSprite.png) 0px 0px no-repeat;
margin:0px 18px 0px 20px;
width: 200px;
}
#recentWork a#thumb_2:hover {
float: left;
background: url(../images/recentThumbSprite.png) -202px 0px no-repeat;
margin:0px 18px 0px 18px;
width: 200px;
}
#recentWork a#thumb_3:hover {
float: left;
background: url(../images/recentThumbSprite.png) -404px 0px no-repeat;
margin:0px 18px 0px 18px;
width: 200px;
}
#recentWork a#thumb_4:hover {
float: left;
background: url(../images/recentThumbSprite.png) -606px 0px no-repeat;
margin:0px 20px 0px 18px;
width: 200px;
}
#recentWork a:hover span.linkText {
margin-top: 200px;
padding: 5px 10px 7px 10px;
font-size: 12px;
font-family: Arial, Helvetica Neue, Helvetica, sans-serif;
color: white;
}
#recentWork a:hover span.linkHead {
color: black;
}
/* SELLING POINTS */
#sellingPoints {
background: white url(../images/sellTopShad.jpg) repeat-x;
float: left;
width: 960px;
}
#sellingPoints div[id^="col"] {
width: 198px;
float: left;
border-left: 1px solid #D5D8DD;
border-right: 1px solid #D5D8DD;
margin-top: 44px;
margin-bottom: 13px;
padding: 0 20px 0 20px;
}
#sellingPoints #col_1 {
border-left: none;
width: 199px;
}
#sellingPoints #col_2 {
}
#sellingPoints #col_3 {
}
#sellingPoints #col_4 {
border-right: none;
width: 199px;
}
#sellingPoints a[class^="icon"] {
background: url(../images/TEMP_IconSprite.png) 0px 0px no-repeat;
float: left;
padding: 43px;
margin-left: 56px;
margin-right: 56px;
margin-bottom: 7px;
}
#sellingPoints a:hover[class^="icon"] {
background: url(../images/TEMP_IconSprite.png) -88px 0px no-repeat;
}
#sellingPoints h2 a {
font-family: 'cronos_pro_captionregular', Arial, "Helvetica Neue", Helvetica, sans-serif;
font-size: 23px;
font-size: 2.3rem;
letter-spacing: 1px;
letter-spacing: 0.1rem;
color: #275AAB;
text-decoration: none;
line-height: 1.35;
}
#sellingPoints h2 {
text-align: center;
}
strong {
font-weight: bold;
}
#sellingPoints p.text {
border-bottom: 1px solid #D6D6D6;
padding-bottom:10px;
padding-top: 4px;
}
#sellingPoints ul {
border-bottom: 1px solid #D6D6D6;
padding-bottom: 10px;
padding-top: 4px;
}
#sellingPoints .learnMore {
float: left;
padding-right: 14px;
display: block;
color: #275AAB;
margin-top: 15px;
margin-left: 45px;
line-height: 13px;
}
#sellingPoints .learnMore a {
font-family: 'cronos_pro_captionregular', Arial, "Helvetica Neue", Helvetica, sans-serif;
font-size: 19px;
letter-spacing: 1px;
letter-spacing: 0.1rem;
background: url(../images/linkArrowsSprite2.png) no-repeat top right;
padding-right: 17px;
}
#sellingPoints .learnMore a:hover {
background: url(../images/linkArrowsSprite2.png) no-repeat bottom right;
margin-top: 4px;
}
/*-----------------------------*/
#sellingPoints ul {
list-style-type: none;
}
#sellingPoints ul a {
text-decoration: none;
color: #757580;
background: url(../images/bulletSprite_5.png) no-repeat;
background-position: 0px 2px;
padding-left: 13px;
}
#sellingPoints ul a:hover {
color: #FCB715;
background-position: 0px -10px;
}
/*----------FOOTER----------------------------------------------------------------------*/
#footer {
float: left;
background: #232124 url(../images/footerBg.png) no-repeat top left;
width: 960px;
height: 242px;
}
#footer .footDivider {
width: 2px;
height: 242px;
background: url(../images/footerDivider.png) no-repeat top left;
float: left;
}
#footCol_1 {
width: 279px;
height: 100%;
margin-top: 6px;
float: left;
padding: 0 20px 17px 20px;
}
ul#footNav {
list-style: none;
}
#footNav li a {
color: #C0C0C0;
text-decoration: none;
font-size: 12px;
font-size: 1.2rem;
}
#footNav li {
padding-bottom: 8px;
}
#footCol_2 {
width: 278px;
height: 100%;
margin-top: 6px;
float: left;
padding: 0 20px 17px 20px;
}
/*-------FOOTER FORM----------------------*/
#footCol_3 {
width: 279px;
margin-top: 6px;
float: left;
padding: 0px 20px 10px 20px;
margin: 16px 0 0 0;
}
#footCol_3 label {
float: left;
text-align: left;
background: none;
clear: left;
font-size: 11px;
font-size: 1.1rem;
line-height: 2rem;
font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
font-weight: normal;
color: #C0C0C0;
letter-spacing: 1px;
padding: 0 0 0 0px;
width: 65px;
}
#footCol_3 input[type=text], textarea {
border: 0px solid #777;
background: #D6D6D6 url(../images/formTextBg.png) repeat-x top left;
width: 200px;
margin: 0 0 0 0;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
}
.subButton {
margin: 0px;
background: #FCB715;
}
#footCol_3 textarea {
height: 5rem;
}
#footCol_3 input[type=text] {
height: 2rem;
}
#footCol_3 form legend {
font-family: 'cronos_pro_captionregular', Arial, "Helvetica Neue", Helvetica, sans-serif;
letter-spacing: 1px;
letter-spacing: 0.1rem;
color: #C0C0C0;
font-size: 17px;
font-size: 1.7rem;
padding: 0 0 0px 0;
}
#footCol_3 form div {
border: 1px solid #595959;
padding: 5px 5px 5px 5px;
margin: 0 0 5px 0;
}
/*-----------------------------*/
#footCol_3 .subButton {
float: right;
border: none;
background: transparent url(../images/submitButton_Right_Sprite.png) no-repeat top right;
display: block;
height: 29px;
margin-right: -2px;
margin-bottom: 3px;
padding-right: 14px;
line-height: 14px;
text-decoration: none;
font-size:15px;
font-size:1.5rem;
font-family: 'cronos_pro_light_displaybold', Arial, "Helvetica Neue", Helvetica, sans-serif;
text-shadow: 0.1px 1px 1.5px #FFD76D, -0.5px -0.5px 1.5px #A96900;
}
#footCol_3 .subButton span {
background: transparent url(../images/submitButton_Left_Sprite.png) no-repeat 0 0;
display: block;
padding: 8px 3px 0 20px;
height: 40px;
color: #333;
}
#footCol_3 .subButton:hover {
background-position: right -30px
}
#footCol_3 .subButton:hover span {
background-position: 0 -30px; color: #333;
}
/*----------TEMPORARY PAGES----------------------------------------------------------------------*/
#tempPage {
background: #D9D9D9;
height: 180px;
font-family: Arial, Helvetica Neue, Helvetica, sans-serif;
font-size: 30px;
font-size: 3.0rem;
text-align: center;
padding-top: 220px;
}
body#recent_1 #tempPage {
background:url(../images/TEMP_1.jpg) no-repeat bottom right;
}
body#recent_2 #tempPage {
background:url(../images/TEMP_2.jpg) no-repeat bottom right;
}
body#recent_3 #tempPage {
background:url(../images/TEMP_3.jpg) no-repeat bottom right;
}
body#recent_4 #tempPage {
background:url(../images/TEMP_4.jpg) no-repeat bottom right;
}
/*----------TEMPORARY PAGES END------------------------------------------------------------------*/