Hi everyone,
I've built a website for a friend of mine:
http://www.leightonpaull.co.uk
I know nothing about Javascript so I found a free carousel script online and hacked it around until it did what I wanted it to do.
I'm now trying to improve the site and yesterday I set out to increase the Google Page Speed score. I've done everything I can apart from 'serve scaled images'.
The carousel only requires one instance of each image in the HTML and then it re-sizes the image for the thumbnail and full-size version. This is where the Page Speed is being hammered but I don't understand the Javascript well enough to change it so that it references a thumbnail for the carousel and the full-size image separately.
Could anyone point me in the right direction? Thanks for any help you can give me.
Here's the HTML (using the HTML5 Boilerplate):
Here's the Javascript:
Here's the slider CSS:
Here's the main site CSS:
Thanks again!
I've built a website for a friend of mine:
http://www.leightonpaull.co.uk
I know nothing about Javascript so I found a free carousel script online and hacked it around until it did what I wanted it to do.
I'm now trying to improve the site and yesterday I set out to increase the Google Page Speed score. I've done everything I can apart from 'serve scaled images'.
The carousel only requires one instance of each image in the HTML and then it re-sizes the image for the thumbnail and full-size version. This is where the Page Speed is being hammered but I don't understand the Javascript well enough to change it so that it references a thumbnail for the carousel and the full-size image separately.
Could anyone point me in the right direction? Thanks for any help you can give me.
Here's the HTML (using the HTML5 Boilerplate):
Code:
<!doctype html>
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7" lang="en"> <![endif]-->
<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8" lang="en"> <![endif]-->
<!--[if IE 8]> <html class="no-js lt-ie9" lang="en"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js" lang="en"> <!--<![endif]-->
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Leighton Paull – Specialist in Traditional Cornish Hedging, Dry Stone Walling and Fencing</title>
<meta name="description" content="Leighton Paull — specialist in traditional Cornish hedging, dry stone walling and fencing.">
<meta name="viewport" content="width=device-width" />
<meta name="apple-mobile-web-app-capable" content="yes"/>
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="css/image-slider.css" type="text/css" />
<script src="js/libs/modernizr-1.7.min.js"></script>
</head>
<body>
<!--[if lt IE 7]><p class=chromeframe>Your browser is <em>ancient!</em> <a href="http://browsehappy.com/">Upgrade to a different browser</a> or <a href="http://www.google.com/chromeframe/?redirect=true">install Google Chrome Frame</a> to experience this site.</p><![endif]-->
<div id="container">
<div id="header_back">
<header>
<div class="left">
<h2>Leighton Paull</h2>
<h1>Traditional Cornish Hedging & Fencing</h1>
</div><!--! end of .left -->
<div class="right">
<h3>Call for a FREE estimate</h3>
<h4>01726 833123 | 07967 424525</h4>
</div><!--! end of .right -->
</header>
</div><!--! end of #header_back -->
<div id="main" role="main">
<div class="body_left">
<p><span style="font-size:48px">I</span> specialise in traditional Cornish hedging, dry stone walling and fencing.</p>
<p>I’m accredited by the Guild of Cornish Hedgers which means I only use locally sourced materials and traditional techniques. My work is professional, long lasting and quality is guaranteed.<sup>*</sup></p>
<p>I work on newbuilds, repairs and restorations. If groundwork is required I can do that too; including retaining walls, excavation and earth removal.</p>
<p>I also have facilities to erect agricultural and residential fencing.</p>
<p>See the image gallery below for some of my recent work. Give me a call or use my contact form to arrange a free estimate.</p>
<p><sub>*3 year warranty as standard on work and materials</sub></p>
</div><!--! end of .body_left -->
<div class="body_right">
<div id="form_back">
<span class="call">or let me call you:</span>
<form method="POST" action="mailer.php">
<div class="form"><input name="name" type="text" size="25" placeholder="Name" required></div>
<div class="form"><input name="telephone" type="text" maxlength="25" size="25" placeholder="Phone Number" required></div>
<div class="form"><textarea name="message" rows="5" cols="22" wrap="physical">Details about your enquiry</textarea></div>
<div class="form"><button id="submit" type="submit" value="Submit">Submit</button></div>
</form>
</div>
</div><!--! end of .body_right -->
<div id="slider">
<div>
<img alt="Traditional Cornish Hedge" src="img/traditional-cornish-hedge-01.jpg" />
</div>
<div>
<img alt="Traditional Cornish Hedge" src="img/traditional-cornish-hedge-02.jpg" />
</div>
<div>
<img alt="Traditional Cornish Hedge" src="img/traditional-cornish-hedge-03.jpg" />
</div>
<div>
<img alt="Traditional Cornish Hedge" src="img/traditional-cornish-hedge-04.jpg" />
</div>
<div>
<img alt="Traditional Cornish Hedge" src="img/traditional-cornish-hedge-05.jpg" />
</div>
<div>
<img alt="Traditional Cornish Hedge" src="img/traditional-cornish-hedge-06.jpg" />
</div>
<div>
<img alt="Traditional Cornish Hedge" src="img/traditional-cornish-hedge-07.jpg" />
</div>
<div>
<img alt="Traditional Cornish Hedge" src="img/traditional-cornish-hedge-08.jpg" />
</div>
<div>
<img alt="Traditional Cornish Hedge" src="img/traditional-cornish-hedge-09.jpg" />
</div>
<div>
<img alt="Traditional Cornish Hedge" src="img/traditional-cornish-hedge-10.jpg" />
</div>
<div>
<img alt="Traditional Cornish Hedge" src="img/traditional-cornish-hedge-11.jpg" />
</div>
<div>
<img alt="Traditional Cornish Hedge" src="img/traditional-cornish-hedge-12.jpg" />
</div>
<div>
<img alt="Traditional Cornish Hedge" src="img/traditional-cornish-hedge-13.jpg" />
</div>
<div>
<img alt="Traditional Cornish Hedge" src="img/traditional-cornish-hedge-14.jpg" />
</div>
<div>
<img alt="Traditional Cornish Hedge" src="img/traditional-cornish-hedge-15.jpg" />
</div>
<div>
<img alt="Traditional Cornish Hedge" src="img/traditional-cornish-hedge-16.jpg" />
</div>
<div>
<img alt="Traditional Cornish Hedge" src="img/traditional-cornish-hedge-17.jpg" />
</div>
<div>
<img alt="Traditional Cornish Hedge" src="img/traditional-cornish-hedge-18.jpg" />
</div>
<div>
<img alt="Traditional Cornish Hedge" src="img/traditional-cornish-hedge-19.jpg" />
</div>
<div>
<img alt="Traditional Cornish Hedge" src="img/traditional-cornish-hedge-20.jpg" />
</div>
<div>
<img alt="Traditional Cornish Hedge" src="img/traditional-cornish-hedge-21.jpg" />
</div>
<div>
<img alt="Traditional Cornish Hedge" src="img/traditional-cornish-hedge-22.jpg" />
</div>
<div>
<img alt="Traditional Cornish Hedge" src="img/traditional-cornish-hedge-23.jpg" />
</div>
<div>
<img alt="Traditional Cornish Hedge" src="img/traditional-cornish-hedge-24.jpg" />
</div>
<div>
<img alt="Traditional Cornish Hedge" src="img/traditional-cornish-hedge-25.jpg" />
</div>
<div>
<img alt="Traditional Cornish Hedge" src="img/traditional-cornish-hedge-26.jpg" />
</div>
<div>
<img alt="Traditional Cornish Hedge" src="img/traditional-cornish-hedge-27.jpg" />
</div>
<div>
<img alt="Traditional Cornish Hedge" src="img/traditional-cornish-hedge-28.jpg" />
</div>
<div>
<img alt="Traditional Cornish Hedge" src="img/traditional-cornish-hedge-29.jpg" />
</div>
</div><!--! end of #slider -->
</div><!--! end of #main -->
<footer>
<img id="guild" src="img/guild.png" alt="Guild of Cornish Hedgers" />
<h6>Leighton Paull, Coombe Farm, Fowey, Cornwall, PL23 1HW | 01726 833123 | 07967 424525</h6>
</footer>
<div id="sub">
<span class="legal">© 2011 Leighton Paull | site by <a href="http://www.mc2gd.com" style="color:#fff">Mc2gd</a></span>
</div>
</div> <!--! end of #container -->
<!-- JavaScript at the bottom for fast page loading -->
<!-- Grab Google CDN's jQuery, with a protocol relative URL; fall back to local if necessary -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.js"></script>
<script>window.jQuery || document.write("<script src='js/libs/jquery-1.5.1.min.js'>\x3C/script>")</script>
<!-- scripts concatenated and minified via ant build script-->
<script src="js/plugins.js"></script>
<script src="js/script.js"></script>
<script src="js/image-slider.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#slider').slider({ speed: 500 });
});
</script>
<!-- end scripts-->
<!--[if lt IE 7 ]>
<script src="js/libs/dd_belatedpng.js"></script>
<script>DD_belatedPNG.fix("img, .png_bg"); // Fix any <img> or .png_bg bg-images. Also, please read goo.gl/mZiyb </script>
<![endif]-->
<!-- mathiasbynens.be/notes/async-analytics-snippet Change UA-XXXXX-X to be your site's ID -->
<script>
var _gaq=[["_setAccount","UA-XXXXX-X"],["_trackPageview"]];
(function(d,t){var g=d.createElement(t),s=d.getElementsByTagName(t)[0];g.async=1;
g.src=("https:"==location.protocol?"//ssl":"//www")+".google-analytics.com/ga.js";
s.parentNode.insertBefore(g,s)}(document,"script"));
</script>
</body>
</html>
Here's the Javascript:
Code:
(function($) {
$.fn.extend({
slider: function(options) {
var settings = $.extend({
speed: 500
}, options);
return this.each(function() {
var slidercontents = $(this).addClass('image-slider-contents');
var slider = $('<div/>').addClass('image-slider').attr('id', slidercontents.attr('id'));
var backbutton = $('<div/>').addClass('image-slider-back');
var forwardbutton = $('<div/>').addClass('image-slider-forward');
slidercontents.removeAttr('id');
slidercontents.before(slider);
slider.append(backbutton);
slider.append(slidercontents);
slider.append(forwardbutton);
var total = $('> div', slidercontents).length;
var left = 0;
var w;
var width;
var maxScroll;
slider.append($('<div/>').css('display', 'none').addClass('preview').append($('<div/>').addClass('img-large')
.append($('<div/>').html(' ').click(function(e) {
e.stopPropagation();
e.stopImmediatePropagation();
//display previous image
var img = $(this).parent().find('img');
var index = parseInt(img.attr('class'));
img.removeAttr('class');
if (index > 1) {
index--;
var src = $('.' + index + ' div img').attr('src');
var txt = $('.' + index + ' div a').html();
$('.preview').find('.label').html(txt);
$('.preview').find('img').addClass('' + (index) + '').css('opacity', '0').attr('src', src).stop(false, true).animate({ opacity: 1 }, 1000);
}
else
$('.preview').find('img').addClass('' + (index) + '');
}).addClass('left').css('opacity', '0.5').hover(function() { $(this).css('opacity', '1') }, function() { $(this).css('opacity', '0.5') }))
.append($('<div/>').html(' ').click(function(e) {
e.stopPropagation();
e.stopImmediatePropagation();
//display next image
var img = $(this).parent().find('img');
var index = parseInt(img.attr('class'));
img.removeAttr('class');
if (index < total) {
index++;
var src = $('.' + index + ' div img').attr('src');
var txt = $('.' + index + ' div a').html();
$('.preview').find('.label').html(txt);
$('.preview').find('img').addClass('' + (index) + '').css('opacity', '0').attr('src', src).stop(false, true).animate({ opacity: 1 }, 1000);
}
else
$('.preview').find('img').addClass('' + (index) + '')
}).addClass('right').css('opacity', '0.5').hover(function() { $(this).css('opacity', '1') }, function() { $(this).css('opacity', '0.5') }))
.append($('<img/>'))).append($('<div/>').addClass('label').css('opacity', '0.8'))
.append($('<div/>').addClass('close').click(function(e) {
$(this).parent().fadeOut("slow");
})));
$(document).click(function(e) {
if ($('.preview').css('display') == 'block')
$('.preview').fadeOut("slow");
});
function initialize() {
var tempElements = $('> div', slidercontents);
var allElements = new Array();
tempElements.each(function(index, el) {
allElements.push($('<div/>').addClass('' + (index + 1) + '').addClass('outer').append(el));
});
allElements = $(allElements);
$('> div', slidercontents).remove();
var wrapper = $('<div/>').addClass('contents-wrapper');
allElements.each(function(index, el) {
wrapper.append($(el));
});
slidercontents.append(wrapper);
var w = $('.outer:eq(0)', slidercontents).outerWidth() + parseFloat($('.outer:eq(0)', slidercontents).css('margin-left')) + parseFloat($('.outer:eq(0)', slidercontents).css('margin-right'));
var width = (total+1) * w;
var maxScroll = width - $('.image-slider-contents').outerWidth();
wrapper.css({ width: width });
$('> div > div', slidercontents).css('display', '');
$('.outer', slidercontents).each(function(index) {
});
$('.outer a').click(function(e){
e.stopPropagation();
e.stopImmediatePropagation();
});
$('.outer').hover(function() { $(this).addClass('active'); }, function() { $(this).removeClass('active'); }).click(
function(e) {
e.stopPropagation();
e.stopImmediatePropagation();
var cls = $(this).attr('class').split(' ')[0];
var p = $(this).find('div');
var img = p.find('img').attr('src');
var preview = $('.preview');
var l = $('.image-slider').width()/2 - preview.outerWidth() / 2;
var t = (p.offset().top - preview.height());
t -= t / 2;
preview.css({ left: l, top: t });
var text = p.find('a').html();
preview.find('img').attr('src', img).addClass(cls);
preview.find('.label').html(text);
preview.fadeIn("slow");
});
forwardbutton.click(function() {
left -= w;
if (left + maxScroll >= 0) {
$('.contents-wrapper').stop(false, true).animate({ left: '-=' + w }, settings.speed);
}
else
left += w;
});
backbutton.click(function() {
if (left < 0) {
left += w;
$('.contents-wrapper').stop(false, true).animate({ left: '+=' + w }, settings.speed);
}
});
}
initialize();
function getDimensions(value) {
return value + 'px';
}
});
}
});
})(jQuery);
Here's the slider CSS:
Code:
#slider
{
margin: 0 auto;
padding:0 auto;
text-align:center;
clear:both;
position:relative;
top:25px;
}
#slider div a{
position: relative;
font-size: 12px;
color: white;
font-weight: bold;
float:left;
padding:10px;
text-decoration:none;
}
#slider div a:hover{color:#F1D5CA;}
.image-slider
{
z-index:1;
position: relative;
margin:0 auto;
padding:0 auto;
clear:both;
width: 888px;
height: 276px;
background: #483212; /* Old browsers */
background: -moz-linear-gradient(top, #483212 0%, #251a09 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#483212), color-stop(100%,#251a09)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #483212 0%,#251a09 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #483212 0%,#251a09 100%); /* Opera11.10+ */
background: -ms-linear-gradient(top, #483212 0%,#251a09 100%); /* IE10+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#483212', endColorstr='#251a09',GradientType=0 ); /* IE6-9 */
background: linear-gradient(top, #483212 0%,#251a09 100%); /* W3C */
border: solid 1px #251a09;
font-family:Helvetica, Arial, Tahoma, sans-serif;
}
.image-slider-back, .image-slider-forward
{
z-index:5;
position:relative;
width:37px;
height:45px;
cursor: pointer;
}
.image-slider-back
{
float: left;
background-image: url(../img/arrow-left.png);
background-repeat: no-repeat;
background-position: left;
left:5px;
top:100px;
}
.image-slider-forward
{
float: right;
background-image: url(../img/arrow-right.png);
background-repeat: no-repeat;
background-position: right;
right:5px;
top:-150px;
}
.image-slider-contents
{
z-index:2;
width: 850px;
height: 250px;
position: relative;
left:-20px;
overflow: hidden;
}
.image-slider-contents .contents-wrapper
{
position: relative;
padding-top: 25px;
}
.image-slider-contents .outer
{
float: left;
width: 376px;
height: 250px;
cursor:pointer;
margin-right:15px;
}
.image-slider-contents .outer > div img
{
position:relative;
left:-160px;
width: 376px;
height: 250px;
}
.image-slider-contents img
{
width: 376px;
height: 250px;
}
.hidden
{
display: none;
}
.visible
{
display: block;
}
.thumbnail-active
{
filter: alpha(opacity=100);
opacity: 1.0;
cursor: pointer;
}
.thumbnail-inactive
{
filter: alpha(opacity=20);
opacity: 0.2;
cursor: pointer;
}
.preview
{
position: absolute !important;
top:-166px !important;
left:75px !important;
z-index:6;
width: 740px;
height: 500px;
background-color: #fff;
}
.preview .img-large
{
position:relative;
top:-35px;
left:10px;
width:720px;
height:479px;
z-index: 60;
}
.preview .img-large .left
{
position:relative;
top:250px;
width:37px;
height:45px;
z-index: 5;
background: url(../img/arrow-left.png);
cursor:pointer;
}
.preview .img-large .right
{
position: relative;
top:250px;
z-index: 5;
width:37px;
height:45px;
background: url(../img/arrow-right.png);
cursor:pointer;
}
.preview .close
{
position: relative;
top:-490px;
left:10px;
width: 32px;
height: 34px;
background: url(../img/close.png);
float: right;
cursor: pointer;
z-index: 70;
}
.preview .img-large img
{
position:relative;
z-index:0;
width:720px;
height:479px;
}
/*.outer.active
{
border: solid 1px #B56161;
background-color: #F1D5CA;
}
.outer.active div span
{
color: #F1D5CA;
}*/
Here's the main site CSS:
Code:
vhtml, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure,
footer, header, hgroup, menu, nav, section, summary,
time, mark, audio, video{ margin:0; padding:0; border:0; font-size:100%; font:inherit; vertical-align:baseline}
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section{ display:block}
blockquote, q{quotes:none}
blockquote:before, blockquote:after,
q:before, q:after{content:""; content:none}
ins{background-color:#ff9; color:#000; text-decoration:none}
mark{background-color:#ff9; color:#000; font-style:italic; font-weight:bold}
del{text-decoration:line-through}
abbr[title], dfn[title]{border-bottom:1px dotted; cursor:help}
table{border-collapse:collapse; border-spacing:0}
hr{display:block; height:1px; border:0; border-top:1px solid #ccc; margin:1em 0; padding:0}
input, select{vertical-align:middle}
body{font:13px/1.231 sans-serif; *font-size:small}
select, input, textarea, button{font:99% sans-serif}
pre, code, kbd, samp{font-family:monospace,sans-serif}
html{overflow-y:scroll}
a:hover, a:active{outline:none}
ul, ol{margin-left:2em}
ol{list-style-type:decimal}
nav ul, nav li{margin:0; list-style:none; list-style-image:none}
small{font-size:85%}
strong, th{font-weight:bold}
td{vertical-align:top}
sub, sup{font-size:75%; line-height:0; position:relative}
sup{top:-0.5em}
sub{bottom:-0.25em}
pre{ white-space:pre; white-space:pre-wrap; word-wrap:break-word; padding:15px}
textarea{overflow:auto}
.ie6 legend, .ie7 legend{margin-left:-7px}
input[type="radio"]{vertical-align:text-bottom}
input[type="checkbox"]{vertical-align:bottom}
.ie7 input[type="checkbox"]{vertical-align:baseline}
.ie6 input{vertical-align:text-bottom}
label, input[type="button"], input[type="submit"], input[type="image"], button{cursor:pointer}
button, input, select, textarea{margin:0}
input:valid, textarea:valid{}
input:invalid, textarea:invalid{ border-radius:1px; -moz-box-shadow:0px 0px 5px red; -webkit-box-shadow:0px 0px 5px red; box-shadow:0px 0px 5px red}
.no-boxshadow input:invalid, .no-boxshadow textarea:invalid{background-color:#f0dddd}
::-moz-selection{background:#FF5E99; color:#fff; text-shadow:none}
::selection{background:#FF5E99; color:#fff; text-shadow:none}
a:link{-webkit-tap-highlight-color:orange}
button{ width:auto; overflow:visible}
.ie7 img{-ms-interpolation-mode:bicubic}
body, select, input, textarea{ color:#444}
h1, h2, h3, h4, h5, h6{font-weight:bold}
a, a:active, a:visited{color:#607890}
a:hover{color:#036}
body{background-color:#222; min-width:1100px}
#container{width:100%; height:1000px; background:#5d5c5c; background:-moz-linear-gradient(top,#5d5c5c 0%,#222 100%); background:-webkit-gradient(linear,left top,left bottom,color-stop(0%,#5d5c5c),color-stop(100%,#222)); background:-webkit-linear-gradient(top,#5d5c5c 0%,#222 100%); background:-o-linear-gradient(top,#5d5c5c 0%,#222 100%); background:-ms-linear-gradient(top,#5d5c5c 0%,#222 100%); filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#5d5c5c',endColorstr='#222',GradientType=0 ); background:linear-gradient(top,#5d5c5c 0%,#222 100%); /* W3C */}
#header_back{width:100%; height:150px; background:#5d5c5c; background-image:url('../img/slate.png'),-moz-linear-gradient(top,#5d5c5c 0%,#222 100%); background-image:url('../img/slate.png'),-webkit-gradient(linear,left top,left bottom,color-stop(0%,#5d5c5c),color-stop(100%,#222)); background-image:url('../img/slate.png'),-webkit-linear-gradient(top,#5d5c5c 0%,#222 100%); background-image:url('../img/slate.png'),-o-linear-gradient(top,#5d5c5c 0%,#222 100%); background-image:url('../img/slate.png'),-ms-linear-gradient(top,#5d5c5c 0%,#222 100%); filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#5d5c5c',endColorstr='#222',GradientType=0 ); background-image:url('../img/slate.png'),linear-gradient(top,#5d5c5c 0%,#222 100%); /* W3C */}
header, #main{margin:0 auto; padding:0 auto; width:960px}
footer{clear:both; margin:0 auto; padding:0 auto; width:890px; height:75px; position:relative; top:75px; background:#483212; background:-moz-linear-gradient(top,#483212 0%,#251a09 100%); background:-webkit-gradient(linear,left top,left bottom,color-stop(0%,#483212),color-stop(100%,#251a09)); background:-webkit-linear-gradient(top,#483212 0%,#251a09 100%); background:-o-linear-gradient(top,#483212 0%,#251a09 100%); background:-ms-linear-gradient(top,#483212 0%,#251a09 100%); filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#483212',endColorstr='#251a09',GradientType=0 ); background:linear-gradient(top,#483212 0%,#251a09 100%); /* W3C */-webkit-border-radius:15px; -moz-border-radius:15px; border-radius:15px}
h1, h2, h3, h4, h5, h6, p, .call {
font-family:Georgia, "Times New Roman", Times, serif;
font-weight:normal;
}
h1, h4, h5, h6, p, .call {
color:#fff;
}
h2, h3 {
color:#ff8b00;
text-shadow:0 -1px 1px #000,0px 1px 1px #999;
}
h1 {
font-style:italic;
font-size:24px;
padding-left:35px;
}
h2 {
font-size:58px;
font-weight:bold;
padding:15px 0 0 35px
}
h3 {
font-size:32px;
float:right;
padding:40px 35px 0 0;
}
h4 {
font-size:26px;
float:right;
padding:0 35px 0 0;
}
h5 {
padding:25px 25px 15px 25px;
font-size:20px;
}
h6 {
font-size:19px;
position:relative;
top:-45px;
left:90px;
}
p {
font-size:19px;
margin-left:35px;
margin-top:15px;
line-height:133%;
padding-bottom:15px;
}
.call {
font-size:27px;
position:relative;
left:20px;
}
.left, .right {
width:480px;
}
.left {
float:left
}
.right {
float:right
}
.body_left{padding-top:15px; width:600px; float:left}
.body_right{padding-top:45px; width:360px; float:right}
#form_back{z-index:1; position:relative; margin:0 auto; padding:10px 0 0 0; width:260px; height:280px; background:#483212; background:-moz-linear-gradient(top,#483212 0%,#251a09 100%); background:-webkit-gradient(linear,left top,left bottom,color-stop(0%,#483212),color-stop(100%,#251a09)); background:-webkit-linear-gradient(top,#483212 0%,#251a09 100%); background:-o-linear-gradient(top,#483212 0%,#251a09 100%); background:-ms-linear-gradient(top,#483212 0%,#251a09 100%); filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#483212',endColorstr='#251a09',GradientType=0 ); background:linear-gradient(top,#483212 0%,#251a09 100%); /* W3C */-webkit-border-radius:15px; -moz-border-radius:15px; border-radius:15px}
#thanks{z-index:0; margin:0 auto; padding:0 auto; position:relative; top:-10px; width:260px; height:90px; background:#f7941d; background:-moz-linear-gradient(top,#f7941d 0%,#d26129 100%); background:-webkit-gradient(linear,left top,left bottom,color-stop(0%,#f7941d),color-stop(100%,#d26129)); background:-webkit-linear-gradient(top,#f7941d 0%,#d26129 100%); background:-o-linear-gradient(top,#f7941d 0%,#d26129 100%); background:-ms-linear-gradient(top,#f7941d 0%,#d26129 100%); filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#f7941d',endColorstr='#d26129',GradientType=0 ); background:linear-gradient(top,#f7941d 0%,#d26129 100%); /* W3C */-moz-border-radius-topleft:px; -moz-border-radius-topright:px; -moz-border-radius-bottomright:15px; -moz-border-radius-bottomleft:15px; -webkit-border-radius:0px 0px 15px 15px; border-radius:px px 15px 15px}
.form{z-index:2; margin-left:20px; padding-bottom:10px; padding-top:10px;}
#submit{z-index:2; width:110px; height:30px; border:1px solid #d26129; background:#f7941d; background:-moz-linear-gradient(top,#f7941d 0%,#d26129 100%); background:-webkit-gradient(linear,left top,left bottom,color-stop(0%,#f7941d),color-stop(100%,#d26129)); background:-webkit-linear-gradient(top,#f7941d 0%,#d26129 100%); background:-o-linear-gradient(top,#f7941d 0%,#d26129 100%); background:-ms-linear-gradient(top,#f7941d 0%,#d26129 100%); filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#f7941d',endColorstr='#d26129',GradientType=0 ); background:linear-gradient(top,#f7941d 0%,#d26129 100%); /* W3C */font-family:'timesRoman'; font-size:18px; color:#fff}
#guild{margin:10px 10px 10px 15px; display:inline}
#sub{width:960px; height:175px; padding:0 auto; margin:0 auto}
.legal{position:relative; top:100px; left:380px; font-family:'timesRoman'; font-size:12px; color:#fff}
.ir{display:block; text-indent:-999em; overflow:hidden; background-repeat:no-repeat; text-align:left; direction:ltr}
.hidden{display:none; visibility:hidden}
.visuallyhidden{border:0; clip:rect(0 0 0 0); height:1px; margin:-1px; overflow:hidden; padding:0; position:absolute; width:1px}
.visuallyhidden.focusable:active,
.visuallyhidden.focusable:focus{clip:auto; height:auto; margin:0; overflow:visible; position:static; width:auto}
.invisible{visibility:hidden}
.clearfix:before, .clearfix:after{content:"\0020"; display:block; height:0; overflow:hidden}
.clearfix:after{clear:both}
.clearfix{zoom:1}
@media all and (orientation:portrait) {
}
@media all and (orientation:landscape) {
}
@media screen and (max-device-width: 481px) {
body {
width:480px;
min-width:480px;
background-color:#222
}
#container {
width:480px;
}
#header_back {
width:480px;
}
#main {
width:480px;
}
header {
width:480px;
}
footer {
width:460px;
top:100px;
}
.left {
width:400px;
padding:0;
margin: 0;
}
.right {
width:400px;
text-align:left;
float:left;
margin-left:35px;
}
.body_left {
width:460px;
clear:both;
}
.body_right {
width:480px;
float:right;
}
#form_back {
clear:both;
float:left;
margin-left:35px;
}
#slider {
display:none;
}
#sub {
width:480px;
clear:both;
position:relative;
right:225px;
top:30px;
}
#thanks {
position:relative;
top:275px;
right:75px;
}
h1 {
font-size:21px;
padding-top:10px;
}
h2 {
font-size:48px;
color:#ff8b00;
}
h3 {
color:#ff8b00;
text-shadow: none;
font-size:30px;
float:none;
}
h4 {
padding:0;
float:right;
font-size:27px;
float:none;
text-shadow:none;
}
h5{
position:relative;
top:-260px;
}
h6 {
font-size: 17px;
position:absolute;
top:13px;
left:33px;
padding-left:50px;
line-height:133%;
}
}
@media print{ *{background:transparent !important; color:black !important; text-shadow:none !important; filter:none !important; -ms-filter:none !important}
a, a:visited{color:#444 !important; text-decoration:underline}
a[href]:after{content:"("attr(href) ")"}
abbr[title]:after{content:"("attr(title) ")"}
.ir a:after, a[href^="javascript:"]:after, a[href^="#"]:after{content:""}
pre, blockquote{border:1px solid #999; page-break-inside:avoid}
thead{display:table-header-group}
tr, img{page-break-inside:avoid}
@page{margin:0.5cm}
p, h2, h3{orphans:3; widows:3}
h2, h3{page-break-after:avoid}
}
Thanks again!