Hey everyone,
So I've built a website for my portfolio and I want to make it responsive to all browser sizes. However I don't think I've got the basics of it down yet. I've got it to where my menu re-adjusts and but the main content doesn't seem to alter nor does the width height seem to change. No matter if I resize the browser, the width of the content seems to change. What am I doing wrong? Can anyone please help me figure this out? Thanks!
index.php
<!DOCTYPE html>
<!--[if IE 7 ]> <html class="ie7 oldie"> <![endif]-->
<!--[if IE 8 ]> <html class="ie8 oldie"> <![endif]-->
<!--[if IE 9 ]> <html class="ie9"> <![endif]-->
<!--[if (gt IE 9)|!(IE)]><!--> <html> <!--<![endif]-->
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
<meta charset="utf-8"/>
<meta name="description" content="" />
<meta name="keywords" content="" />
<meta name="author" content=""
<meta name="robots" content="index, follow" />
<title>Home</title>
<link name="viewpoint" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="css/style.css" type="text/css" media="screen" />
<link rel="stylesheet" href="css/nivo-slider.css" type="text/css" />
<link rel="stylesheet" href="css/jquery.fancybox-1.3.4.css" type="text/css" />
<script type="text/javascript" src="//code.jquery.com/jquery-1.10.2.min.js"></script>
<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.11.1/jquery.validate.min.js"></script>
<script type="text/javascript">
jQuery(document).ready(function($){
$("#contactform").validate({
rules: {
name: {
required: true,
minlength: 2
},
email: {
required: true,
email: true
},
message: {
required: true,
minlength: 50
}
},
messages: {
name: {
required: "Please enter your name",
minlength: "Your name seems to be a bit short doesn't it?"
},
email: {
required: "Please enter your email address",
email: "Please enter a valid email address"
},
message: {
required: "Please enter your message",
minlength: "Your message seems a bit short doesn't it? Please enter at least 50 characters"
}
}
});
});
</script>
<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="js/jquery-1.6.1.min.js"><\/script>')</script>
<script src="js/jquery.smoothscroll.js"></script>
<script src="js/jquery.nivo.slider.pack.js"></script>
<script src="js/jquery.easing-1.3.pack.js"></script>
<script src="js/jquery.fancybox-1.3.4.pack.js"></script>
<script src="js/init.js"></script>
<link href='./images/favicon.ico' rel='icon' type='image/x-icon'/>
</head>
<body>
<!-- header-wrap -->
<div id="header-wrap">
<header>
<hgroup>
<h1><a href="index.php">Some Name</a></h1>
<h3>Some Title</h3>
</hgroup>
<nav>
<ul>
<li><a href="#main">Home</a></li>
<li><a href="#services">Services</a></li>
<li><a href="#portfolio">My Work</a></li>
<li><a href="#about-us">About Me</a></li>
<li><a href="#contact">Contact Me</a></li>
</ul>
</nav>
</header>
</div>
<!-- content-wrap -->
<div class="content-wrap">
<!-- main -->
<section id="main">
<div class="intro-box">
<h1>Welcome!</h1>
<p class="intro">Some text goes here. Some text goes here. Some text goes here. Some text goes here. Some text goes here. Some text goes here. Some text goes here.</p>
<p class="intro">Some more text goes here. Some more text goes here. Some more text goes here. Some more text goes here. Some more text goes here.</p>
</div>
<div class="slider-wrapper">
<div id="slider" class="nivoSlider">
<a class="lightbox" href="image/path" title=""><img src="img/path" width="383" height="190" alt="" title="" /></a>
<a class="lightbox" href="image/path" target="_blank" title="" ><img src="img/path" width="383" height="190" alt="" title="" /></a>
<a class="lightbox" href="image/path" title="" ><img src="img/path" width="383" height="190" alt="" title="" /></a>
</div>
</div>
<div class="row no-bottom-margin">
<section class="col">
<h2>Title</h2>
<p>Some text goes here. Some text goes here. Some text goes here. Some text goes here. Some text goes here. Some text goes here. Some text goes here.
Some text goes here. Some text goes here. Some text goes here. Some text goes here. </p>
</section>
<section class="col mid">
<h2>Title</h2>
<p>Some text goes here. Some text goes here. Some text goes here. Some text goes here. Some text goes here. Some text goes here. Some text goes here.
Some text goes here. Some text goes here. Some text goes here. Some text goes here.</p>
</section>
<section class="col">
<h2>title</h2>
<p>Some text goes here. Some text goes here. Some text goes here. Some text goes here. Some text goes here. Some text goes here. Some text goes here.
Some text goes here. Some text goes here. Some text goes here. Some text goes here.</p>
</section>
</div>
<a class="back-to-top" href="#main">Back to Top</a>
</section>
<!-- services -->
<section id="services" >
<h1>Another Title.</h1>
<div class="row no-bottom-margin">
<section class="col">
<h2>Title</h2>
<p><img class="align-left" alt="" src="images/path" />Some text goes here. Some text goes here. Some text goes here. Some text goes here. Some text goes here. Some text goes here. Some text goes here.
Some text goes here. Some text goes here. Some text goes here. Some text goes here. Some text goes here.</p>
</section>
<section class="col mid">
<h2>Title</h2>
<p><img class="align-left" alt="" src="images/path" />Some text goes here. Some text goes here. Some text goes here. Some text goes here. Some text goes here. Some text goes here. Some text goes here.
Some text goes here. Some text goes here. Some text goes here. Some text goes here. Some text goes here.</p>
</section>
<section class="col">
<h2>Title</h2>
<p><img class="align-left" alt="" src="images/path" />Some text goes here. Some text goes here. Some text goes here. Some text goes here. Some text goes here. Some text goes here. Some text goes here.
Some text goes here. Some text goes here. Some text goes here. Some text goes here. Some text goes here.</p>
</section>
</div>
<div class="row">
<section class="col">
<h2>Title</h2>
<p><img class="align-left" alt="" src="images/path" />Some text goes here. Some text goes here. Some text goes here. Some text goes here. Some text goes here. Some text goes here. Some text goes here.
Some text goes here. Some text goes here. Some text goes here. Some text goes here. Some text goes here.</p>
</section>
<section class="col mid">
<h2>Title</h2>
<p><img class="align-left" alt="" src="images/path" />Some text goes here. Some text goes here. Some text goes here. Some text goes here. Some text goes here. Some text goes here. Some text goes here.
Some text goes here. Some text goes here. Some text goes here. Some text goes here. Some text goes here.</p>
</section>
<section class="col">
<h2>Title</h2>
<p><img class="align-left" alt="" src="images/path" />Some text goes here. Some text goes here. Some text goes here. Some text goes here. Some text goes here. Some text goes here. Some text goes here.
Some text goes here. Some text goes here. Some text goes here. Some text goes here. Some text goes here.</p>
</section>
</div>
<a class="back-to-top" href="#main">Back to Top</a>
</section>
<!-- portfolio -->
<section id="portfolio">
<h1>Title</h1>
<ul class="folio-list clearfix">
<li class="folio-thumb">
<div class="thumb">
<a class="lightbox" href="images/path" target="_blank" title="" ><img src="images/path" alt="" /> </a>
</div>
<h3 class="entry-title">Some Title</h3>
</li>
<li class="folio-thumb last">
<div class="thumb">
<a href="" target="_blank" title=""><img src="images/path" alt="" /> </a>
</div>
<h3 class="entry-title">Some Title.</h3>
</li>
<li class="folio-thumb">
<div class="thumb">
<a class="lightbox" href="images/path" title="" ><img src="images/path" alt="" /></a>
</div>
<h3 class="entry-title">Some Title</h3>
</li>
<!--
<li class="folio-thumb">
<div class="thumb">
<a href="#" title="" ><img src="images/path" alt="" /> </a>
</div>
<h3 class="entry-title">Some Title</h3>
</li>
-->
<li class="folio-thumb">
<div class="thumb">
<a class="lightbox" href="images/path" title=""><img src="images/path" alt="" /> </a>
</div>
<h3 class="entry-title">Some Title</h3>
</li>
<!--
<li class="folio-thumb last">
<div class="thumb">
<a class="lightbox" href="images/path" title=""><img src="images/path" alt="" /> </a>
</div>
<h3 class="entry-title">Some Title</h3>
</li>
<li class="folio-thumb">
<div class="thumb">
<a class="lightbox" href="images/path" title=""><img src="images/path" alt="" /> </a>
</div>
<h3 class="entry-title">Some Title</h3>
</li>
<li class="folio-thumb">
<div class="thumb">
<a class="lightbox" href="images/path" title=""><img src="images/path" alt="" /> </a>
</div>
<h3 class="entry-title">Some Title</h3>
</li>
<li class="folio-thumb last">
<div class="thumb">
<a class="lightbox" href="images/path" title="path"><img src="images/path" alt="" /> </a>
</div>
<h3 class="entry-title">Some Title</h3>
</li>
-->
</ul>
<a class="back-to-top" href="#main">Back to Top</a>
</section>
<!-- about me -->
<section id="about-us" class="clearfix">
<h1>Some Title</h1>
<div class="primary">
<img style="margin-right: 8px; border: 1px solid #000;" align="left" width="213px" height="213px" src="images/path"/><p style="margin-top: -5px;" class="intro">Some text here. Some text here.
Some text here. Some text here. Some text here. Some text here. Some text here. Some text here. Some text here. Some text here. Some text here. Some text here. Some text here. Some text here.
Some text here. Some text here. Some text here. Some text here. Some text here. Some text here. Some text here. Some text here. Some text here. Some text here. Some text here. Some text here.
</p>
<h2>Another Title...</h2>
<h3>Another Tile Goes Here</h3>
<br />
<p>Some text here. Some text here.
Some text here. Some text here. Some text here. Some text here. Some text here. Some text here. Some text here. Some text here. Some text here. Some text here. Some text here. Some text here.
Some text here. Some text here. Some text here. Some text here. Some text here. Some text here. Some text here. Some text here. Some text here. Some text here. Some text here. Some text here. </p>
<h3>Another Title Goes Here</h3>
<br />
<p>Some text here. Some text here.
Some text here. Some text here. Some text here. Some text here. Some text here. Some text here. Some text here. Some text here. Some text here. Some text here. Some text here. Some text here.
Some text here. Some text here. Some text here. Some text here. Some text here. Some text here. Some text here. Some text here. Some text here. Some text here. Some text here. Some text here. </p>
<h3>Another Title Goes Here</h3>
<br />
<p>Some text here. Some text here.
Some text here. Some text here. Some text here. Some text here. Some text here. Some text here. Some text here. Some text here. Some text here. Some text here. Some text here. Some text here.
Some text here. Some text here. Some text here. Some text here. Some text here. Some text here. Some text here. Some text here. Some text here. Some text here. Some text here. Some text here. </p>
<h3>Another Title Goes Here</h3>
<br />
<p>Some text here. Some text here.
Some text here. Some text here. Some text here. Some text here. Some text here. Some text here. Some text here. Some text here. Some text here. Some text here. Some text here. Some text here.
Some text here. Some text here. Some text here. Some text here. Some text here. Some text here. Some text here. Some text here. Some text here. Some text here. Some text here. Some text here. </p>
<h3>Another Title Goes Here</h3>
<br />
<p>Some text here. Some text here.
Some text here. Some text here. Some text here. Some text here. Some text here. Some text here. Some text here. Some text here. Some text here. Some text here. Some text here. Some text here.
Some text here. Some text here. Some text here. Some text here. Some text here. Some text here. Some text here. Some text here. Some text here. Some text here. Some text here. Some text here. </p>
<h3>Another Title Goes Here</h3>
<br />
<p>Some text here. Some text here.
Some text here. Some text here. Some text here. Some text here. Some text here. Some text here. Some text here. Some text here. Some text here. Some text here. Some text here. Some text here.
Some text here. Some text here. Some text here. Some text here. Some text here. Some text here. Some text here. Some text here. Some text here. Some text here. Some text here. Some text here. </p>
<div class="row no-bottom-margin">
</div>
</div>
<aside>
<h2>More Titles</h2>
<p>Some text goes here. Some text goes here. Some text goes here. Some text goes here.</p>
<h2>Titles</h2>
<div class="testimonials">
<blockquote>
<p>Some text goes here. Some text goes here. Some text goes here. Some text goes here. Some text goes here. Some text goes here. Some text goes here.
Some text goes here. Some text goes here. Some text goes here. Some text goes here. Some text goes here. Some text goes here. Some text goes here.</p>
<cite>Some Person, <a href="" target="_blank">Some Title</a></cite>
</blockquote>
<!--<blockquote>
<p>Aenean lacinia bibendum nulla sed consectetur. Cras mattis
consectetur purus sit amet fermentum.</p>
<cite>— Jane Roe, ABC Corp</cite>
</blockquote>-->
</div>
</aside>
<a class="back-to-top" href="#main">Back to Top</a>
</section>
</section>
<!-- contact -->
<section id="contact" class="clearfix">
<h1>Title Here</h1>
<div class="primary">
<p class="intro">
Some text here. Some text here. Some text here. Some text here. Some text here. Some text here. Some text here. Some text here. Some text here. Some text here. Some text here. Some text here.
Some text here. Some text here. Some text here. Some text here. Some text here. Some text here. Some text here. Some text here. Some text here. Some text here. Some text here. Some text here.
</p>
<form method="post" action="<?php echo $_SERVER['PHP_SELF']; ?>" id="contactform" novalidate>
<div>
<p><span class="required">*</span> Please fill all the required fields</p>
<?php
if($sent === true){
echo "<h2 class='success'>Thanks! Your message has been sent successfully!</h2>";
}elseif($hasError === true){
echo '<ul class="errorlist">';
foreach($errorArray as $key => $val){
echo "<li>" . ucfirst($key) . " field error - $val</li>";
}
echo '</ul>';
}
?>
</div>
<div>
<label>Name <span class="required">*</span></label>
<input name="name" type="text" id="name" value="<?php echo (isset($name) ? $name : ""); ?>" />
</div>
<div>
<label>Email <span class="required">*</span></label>
<input name="email" type="text" id="email" value="<?php echo (isset($email) ? $email : ""); ?>" />
</div>
<div>
<label>Message <span class="required">*</span></label>
<textarea name="message" rows="20" cols="50" id="message" ><?php echo (isset($message) ? $message : ""); ?></textarea><br /><br />
</div>
<div>
<input type="submit" value="Submit" class="button">
<input type="reset" value="Reset" class="button">
</div>
</form>
</div>
<aside>
<h2>More Titles</h2>
<p style="font-size:15px;">
Some text here. Some text here. Some text here. Some text here. Some text here. Some text here. Some text here. Some text here. Some text here. Some text here. Some text here. Some text here.
Some text here. Some text here. Some text here. Some text here. Some text here. Some text here. Some text here. Some text here. Some text here. Some text here. Some text here. Some text here.
</p>
<p style="font-size:15px;">Some text goes here<br />
Some text goes here..
</p>
<h2>Some text</h2>
<ul class="link-list social">
<li class="facebook" style="font-size:15px;"><a href="" target="_blank">Some text</a></li>
<li class="googleplus" style="font-size:15px;"><a href="" target="_blank">Some text</a></li>
<li class="twitter" style="font-size:15px;"><a href="Some text" target="_blank">Some text</a></li>
<li class="linkedin" style="font-size:15px;"><a href="" target="_blank">Some text</a></li>
</ul>
</aside>
<a class="back-to-top" href="#main">Back to Top</a>
</section>
</div>
<!-- footer -->
<footer>
<div class="footer-content">
<ul class="footer-menu">
<li><a href="#main">Home</a></li>
<li><a href="#services">Services</a></li>
<li><a href="#portfolio">Portfolio</a></li>
<li><a href="#about-us">About Me</a></li>
<li><a href="#contact">Contact Me</a></li>
</ul>
<p class="footer-text">Footer content</p>
</div>
</footer>
</body>
</html>
My CSS
/* ------------------------------------------------
CUSTOM WEB FONTS
--------------------------------------------------*/
@font-face {
font-family: 'MerriweatherRegular';
src: url('fonts/merriweather-regular-webfont.eot');
src: url('fonts/merriweather-regular-webfont.eot?#iefix') format('embedded-opentype'),
url('fonts/merriweather-regular-webfont.woff') format('woff'),
url('fonts/merriweather-regular-webfont.ttf') format('truetype'),
url('fonts/merriweather-regular-webfont.svg#MerriweatherRegular') format('svg');
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: 'MerriweatherBold';
src: url('fonts/merriweather-bold-webfont.eot');
src: url('fonts/merriweather-bold-webfont.eot?#iefix') format('embedded-opentype'),
url('fonts/merriweather-bold-webfont.woff') format('woff'),
url('fonts/merriweather-bold-webfont.ttf') format('truetype'),
url('fonts/merriweather-bold-webfont.svg#MerriweatherBold') format('svg');
font-weight: normal;
font-style: normal;
}
/* --------------------------------------
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;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
/* -------------------------------------------------------
GENERAL
---------------------------------------------------------- */
html { overflow-y: scroll; }
body {
font-family: Georgia, Serif;
font-size: 16px;
line-height: 25px;
color: #3B3B3B;
background: /* url(../images/25-pixel-baseline.png) left top repeat, */ url(../images/bg.png) left top repeat ;
text-shadow: 1px 1px 0 rgba(255, 255, 255, 1);
}
p { margin-bottom: 25px; }
p.intro { font-size: 18px; }
/* links */
a:link, a:visited {
color: #285935;
text-decoration: none;
outline: 0;
}
a:hover, a:focus, a:active {
color: #5E1F00;
}
/* Headers */
h1, h2, h3, h4, h5, h6 {
font-family: 'MerriweatherBold', Serif;
}
h1 {
font-size: 40px;
line-height: 50px;
letter-spacing: -0.9px;
color: #046416;
margin-left: -2px;
}
h2 {
font-size: 22px;
line-height: 25px;
margin-top: 10px;
margin-bottom: 15px;
}
h3 {
font-size: 18px;
line-height: 25px;
}
/* Lists */
ul, ol {
margin-bottom: 25px;
padding: 0 20px;
}
ul { list-style: disc; }
ol { list-style: decimal; }
dl { margin-bottom: 25px; }
dt {
font-weight: bold;
color: #046416;
}
dd {
padding-left: 20px;
}
blockquote {
margin: 25px 0;
padding-left: 40px;
padding-right: 30px;
background: url(../images/quote.png) no-repeat 3px 0;
font-weight: normal;
font-size: 18px;
font-style: italic;
}
input, select {
vertical-align: middle;
}
strong, b {
font-weight: bold;
}
pre {
white-space: pre;
white-space: pre-wrap;
word-wrap: break-word;
}
abbr[title], dfn[title] {
border-bottom: 1px dotted;
cursor: help;
}
mark {
background-color: #FDD2B3;
}
/* Clearing and Alignment Classes */
.align-left {
float: left;
}
.align-right {
float: right;
}
.clearfix:after {
visibility: hidden;
display: block;
font-size: 0;
content: " ";
clear: both;
height: 0;
}
.ie7 .clearfix { zoom: 1; } /* IE7 */
/* ------------------------------------------------------
STRUCTURE
--------------------------------------------------------- */
#header-wrap {
background: url(../images/header-bg.png);
width: 100%;
height: 70px;
z-index: 99999;
position: fixed;
top: 0;
left: 0;
}
header {
position: relative;
width: 940px;
height: 70px;
margin: 0 auto;
}
.content-wrap {
width: 940px;
margin: 0 auto;
}
.content-wrap section {
position: relative;
padding: 125px 0 25px 0;
background: url(../images/section-sep.png) repeat-x left 25px;
}
.content-wrap section section {
background: none;
margin: 0;
}
.content-wrap section .row {
clear: both;
overflow: hidden;
margin-bottom: 25px;
}
.content-wrap section .row .col {
float: left;
margin: 0;
padding: 0;
width: 290px;
text-align: justify;
}
.content-wrap section .row .mid {
margin-left: 35px;
margin-right: 35px;
}
.content-wrap section .no-bottom-margin{
margin-bottom: 0;
}
.content-wrap section .primary {
float: left;
width: 620px;
}
.content-wrap section .primary p.intro {
/* margin: 15px 0 10px 0; */
margin: 15px 0 25px 0;
}
.content-wrap section aside {
float: right;
width: 285px;
}
.content-wrap section aside h2 {
margin: 12.5px 0 12.5px 0;
}
.content-wrap section aside ul.link-list {
font-size: 16px;
margin: 0 0 25px 0;
padding: 0;
list-style: none;
background: url(../images/section-sep.png) repeat-x left top;
}
.content-wrap section aside ul.link-list li {
background: url(../images/section-sep.png) repeat-x left bottom;
padding-left: 3px;
}
.content-wrap section aside ul.link-list li a {
display: block;
color: #3B3B3B;
padding-top: 12.5px;
padding-bottom: 12.5px;
}
.content-wrap section aside ul.link-list li a:hover,
.content-wrap section aside ul.link-list li a:focus,
.content-wrap section aside ul.link-list li a:active {
color: #285935;
}
.content-wrap section aside .testimonials {
margin: 0 0 25px 0;
}
.content-wrap section aside .testimonials blockquote {
font-style: italic;
font-size: 16px;
padding-left: 27px;
background: url(../images/quote-open.png) no-repeat left 5px;
margin: 12.5px 0;
}
.content-wrap section aside .testimonials blockquote p {
margin-bottom: 0;
}
.content-wrap section aside .testimonials blockquote cite {
font-style: normal;
text-transform: uppercase;
font-size: 11px;
}
.content-wrap section .back-to-top {
display: block;
position: absolute;
bottom: -65px;
right: 10px;
height: 43px;
width: 43px;
background: url(../images/back-to-top.png);
text-indent: -9999px;
z-index: 9999;
}
.ie7 .content-wrap section .back-to-top {
bottom: -70px;
}
footer {
position: relative;
background: url(../images/section-sep.png) repeat-x left 25px;
width: 940px;
margin: 0 auto;
padding-top: 125px;
}
/* -------------------------------------------
Header
-------------------------------------------- */
/* Logo */
header hgroup {
position: absolute;
background: url(../images/logo1.png) no-repeat;
height: 56px;
width: 329px;
display: block;
top: 10px;
left: 0;
}
header hgroup h1 a {
text-indent: -9999em;
display: block;
height: 55px;
width: 318px;
}
header hgroup h3 {
text-indent: -9999em;
height: 0;
}
/* Main Navigation */
header nav {
float: right;
margin-top: 25px;
}
header nav ul {
font: bold 12px/25px Helvetica, Arial, Sans-serif;
margin-right: -5px;
padding: 0;
list-style: none;
}
header nav ul li {
float: left;
}
header nav ul a:link, header nav ul a:visited {
color: #c5c4c4;
margin-right: 20px;
text-shadow: 0 -1px 0 rgba(10, 10, 10, 1);
}
header nav ul a:hover,
header nav ul a:active {
color: #17a231;
}
/* -----------------------------------------
Main Section
------------------------------------------ */
section#main {
width: 940px;
background: none;
}
section#main h1 {
margin-top: 10px;
margin-bottom: 15px;
}
section#main .intro-box {
float:left;
width:460px;
min-height: 300px;
}
section#main .row .col h2 {
margin-top: 15px;
margin-bottom: 10px;
}
/* Slider */
.slider-wrapper {
float: right;
position: relative;
background: url(../images/slider.png) no-repeat;
margin-top: 30px;
margin-bottom: 13px;
width: 420px;
height: 227px;
}
.slider-wrapper #slider {
position: absolute;
top: 18px;
left: 18.5px;
width: 383px; /* Make sure your images are the same size */
height: 190px; /* Make sure your images are the same size */
}
.slider-wrapper .nivoSlider {
position: relative;
background: #fff url(../images/loading.gif) no-repeat 50% 50%;
}
.slider-wrapper .nivoSlider img {
position: absolute;
top: 0px;
left: 0px;
display: none;
}
.slider-wrapper .nivoSlider a {
border: 0;
display: block;
}
.slider-wrapper .nivo-controlNav {
position: absolute;
left: 50%;
bottom: -45px;
margin-left: -30px ; /* Tweak this to center bullets */
}
.slider-wrapper .nivo-controlNav a {
display: block;
width: 13px;
height: 14px;
background: url(../images/bullets.png) no-repeat;
text-indent: -9999px;
border: 0;
margin-right: 10px;
float: left;
}
.slider-wrapper .nivo-controlNav a.active {
background-position: 0 -14px;
}
.slider-wrapper .nivo-directionNav a {
display: block;
width: 33px;
height: 52px;
background: url(../images/arrows.png) no-repeat;
text-indent: -9999px;
border: 0;
}
.slider-wrapper a.nivo-nextNav {
background-position: -33px 0;
right: -50px;
top: 70px;
}
.slider-wrapper a.nivo-prevNav {
left: -48.5px;
top: 70px;
}
.slider-wrapper .nivo-caption {
/* font-family: Helvetica, Arial, sans-serif; */
padding: 5px 10px;
width: 363px;
font-size: 12px;
text-shadow: none;
text-align: center;
}
.slider-wrapper .nivo-caption p {
text-shadow: none;
color: #CBCBCB;
}
.slider-wrapper .nivo-caption a {
color: #66CC33;
/* border-bottom: 1px dotted #fff; */
}
.slider-wrapper .nivo-caption a:hover {
color:#fff;
}
/* -----------------------------------------
Services
------------------------------------------- */
section#services h1 {
margin: 0 0 25px 0;
}
section#services .row .col img.align-left {
margin-top: 13px;
margin-right: 12px;
}
/* ---------------------------------------
Portfolio
----------------------------------------- */
section#portfolio ul.folio-list {
margin: 25px 0;
padding: 0;
width: 970px;
list-style: none;
}
section#portfolio ul.folio-list li {
float: left;
margin-right: 29px;
margin-bottom: 10px;
margin-top: 20px;
width: 294px;
height: 230px;
max-height: 250px;
}
section#portfolio ul.folio-list li .thumb {
margin: 0 0 5px 0;
padding: 0;
background: url(../images/thumb-frame.png) no-repeat;
width: 294px;
height: 157px;
}
section#portfolio ul.folio-list li .thumb img {
margin-top: 15px;
margin-left: 18px;
}
section#portfolio ul.folio-list li h3.entry-title {
font-size: 14px;
line-height: 25px;
margin-left: 16px;
}
/* ------------------------------------------------
About
------------------------------------------------ */
section#about-us .primary .row .first {
margin-right: 35px;
}
section#about-us .primary ul.the-team {
margin: 25px 0 25px 0;
padding: 0;
list-style: none;
}
section#about-us .primary ul.the-team li {
float: left;
width: 290px;
height: 150px;
}
section#about-us .primary ul.the-team li a {
color: #3B3B3B;
}
section#about-us .primary ul.the-team li a:hover,
section#about-us .primary ul.the-team li a:focus,
section#about-us .primary ul.the-team li a:active {
color: #285935;
}
section#about-us .primary ul.the-team li .thumbnail {
position: relative;
float: left;
background: url(../images/thumb-bg.png) no-repeat;
width: 120px;
height: 150px;
margin-right: 12px;
}
section#about-us .primary ul.the-team li .thumbnail img {
position: absolute;
top: 19px;
left: 18px;
}
section#about-us .primary ul.the-team li p {
font-size: 14px;
line-height: 20px;
margin: 5px 0 0 0;
}
section#about-us .primary ul.the-team li p.mname {
font-family: "MerriweatherBold", Serif;
margin: 10px 0 0 0;
}
section#about-us .primary ul.the-team li.odd {
margin-right: 35px;
}
section#about-us aside .download-btn {
background: url(../images/btn-bg.png);
display: block;
width: 250px;
height: 53px;
border: 1px solid #066a19;
margin: 0 0 20px 0;
text-align: center;
line-height: 55px;
font-family: "MerriweatherBold", Georgia, Serif;
font-size: 20px;
color: #ffffff;
text-shadow: 0 -1px 0 rgba(0,0,0,0.5);
box-shadow: 0px 1px 1px rgba(0,0,0,0.4), inset 0 1px 0 #28a441;
-moz-box-shadow: 0px 1px 1px rgba(0,0,0,0.4), inset 0 1px 0 #28a441;
-webkit-box-shadow: 0px 1px 1px rgba(0,0,0,0.4), inset 0 1px 0 #28a441;
}
/* ---------------------------------------------------
Contact
----------------------------------------------------- */
h2.success {
color: #27ae60;
}
.errorlist{
list-style: none;
}
label.error, .errorlist li{
margin-bottom: 10px;
color: #bb0000;
display: block;
}
.errorlist li:last-child{
margin-bottom: 20px;
}
section#contact .primary form {
width: 500px;
background: url(../images/form-bg.png);
margin: 35px 0 25px 0;
padding: 50px 40px 50px 40px;
}
section#contact .primary form p {
font-family: "MerriweatherBold", Serif;
font-size: 14.5px;
color: #046416;
}
section#contact .primary form label {
display: block;
font-family: "MerriweatherBold", Serif;
font-size: 14px;
line-height: 25px;
margin: 0 0 5px 0;
text-shadow: 1px 1px 0 rgba(255, 255, 255, 1);
}
section#contact .primary form label span {
color: #046416;
}
section#contact .primary form input,
section#contact .primary form select,
section#contact .primary form textarea {
margin-bottom: 20px;
padding: 9px 10px;
color: #6A6969;
background: #cbcbcb;
border-width: 1px;
border-style: solid;
border-color: #b8b8b8 #EBEBEB #EBEBEB #b8b8b8;
font: 15px Helvetica, Arial, Sans-serif;
-moz-box-shadow:inset 0 3px 1px rgba(0, 0, 0, .1);
-webkit-box-shadow:inset 0 1px 3px rgba(0, 0, 0, .1);
box-shadow:inset 0 1px 3px rgba(0, 0, 0, .1);
}
section#contact .primary form textarea {
height: 325px;
margin-bottom: 0;
}
section#contact .primary form input:focus,
section#contact .primary form select:focus,
section#contact .primary form textarea:focus {
background: #F0F0F0;
}
section#contact .primary form input.button {
height: 38px;
margin: 5px 0;
background: #1F8532 url(../images/btn-bg.png);
border: 1px solid #066a19;
font-family: "MerriweatherBold", Georgia, Serif;
font-size: 14px;
color: #ffffff;
cursor: pointer;
text-shadow: 0 -1px 0 rgba(0,0,0,0.5);
box-shadow: 0px 1px 1px rgba(0,0,0,0.4), inset 0 1px 0 #28a441;
-moz-box-shadow: 0px 1px 1px rgba(0,0,0,0.4), inset 0 1px 0 #28a441;
-webkit-box-shadow: 0px 1px 1px rgba(0,0,0,0.4), inset 0 1px 0 #28a441;
}
.ie7 section#contact .primary form input.button {
padding: 0 2px;
}
#name, #email, #message, #subject, #website {
width: 475px;
}
section#contact aside .social li a {
padding-left: 35px;
}
section#contact aside .social li.facebook a {
background: url(../images/social/facebook.png) no-repeat left 11px;
}
section#contact aside .social li.googleplus a {
background: url(../images/social/googleplus.png) no-repeat left 11px;
}
section#contact aside .social li.twitter a {
background: url(../images/social/twitter.png) no-repeat left 11px;
}
section#contact aside .social li.dribble a {
background: url(../images/social/dribble.png) no-repeat left 11px;
}
section#contact aside .social li.linkedin a {
background: url(../images/social/linkedin.png) no-repeat left 11px;
}
section#contact aside .social li.delicious a {
background: url(../images/social/delicious.png) no-repeat left 11px;
}
section#contact aside .social li.flickr a {
background: url(../images/social/flickr.png) no-repeat left 11px;
}
/* ----------------------------------------------------
Footer
----------------------------------------------------- */
footer p.footer-text {
font-family: "MerriweatherRegular", Serif;
font-size: .75em;
padding: 0 10px;
margin-bottom: 0;
clear: both;
}
footer .footer-content {
position: relative;
width: 900px;
top: -105px;
}
footer ul.footer-menu {
float: left;
margin: 20px 0 5px -3px;
padding: 0;
list-style: none;
}
footer ul.footer-menu li {
float: left;
}
footer ul.footer-menu li a {
display: block;
font-family: "MerriweatherBold", Serif;
font-size: .75em;
line-height: 1em;
color: #3B3B3B;
padding: 1px 12px;
border-left: 1px solid #ADADAD;
text-shadow: 1px 1px 0 rgba(255, 255, 255, 1);
}
footer ul.footer-menu li a:hover,
footer ul.footer-menu li a:focus,
footer ul.footer-menu li a:active {
color: #285935;
}
footer ul.footer-menu li.rss-feed a {
background: url(../images/rss.png) no-repeat right 0;
padding-right: 20px;
}
footer ul.footer-menu li:first-child a {
border: none;
}
@media only screen and (min-width: 150px) and (max-width: 600px)
{
html {
overflow-y: scroll;
}
body {
font-family: Georgia, Serif;
font-size: 1em;
line-height: 25px;
color: #3B3B3B;
background: /* url(../images/25-pixel-baseline.png) left top repeat, */ url(../images/bg.png) left top repeat ;
text-shadow: 1px 1px 0 rgba(255, 255, 255, 1);
}
p {
margin-bottom: 25px;
}
p.intro {
font-size: 18px;
}
#header-wrap {
background: url(../images/header-bg.png);
width: 100%;
height: 35px;
z-index: 99999;
position: fixed;
top: 0;
left: 0;
}
header {
position: relative;
width: 100%;
height: 70px;
margin: 0 auto;
}
header hgroup {
position: absolute;
height: 56px;
width: 329px;
display: none;
top: 10px;
left: 0;
}
header nav {
padding-left: -5;
}
header nav ul {
font: 12px/25px Helvetica, Arial, Sans-serif;
margin-right: 0px;
margin-top: -20px;
margin-left: 0px;
padding: 0;
list-style: none;
}
header nav ul li {
float: left;
margin-left: 0px;
}
header nav ul a{
padding: 0.5em;
}
header nav ul a:link, header nav ul a:visited {
color: #c5c4c4;
margin-right: 0px;
text-shadow: 0 -1px 0 rgba(10, 10, 10, 1);
}
.content-wrap {
max-width: auto;
min-width: auto;
margin: 0 auto;
}
section#main {
width: auto;
}
h1 {
font-size: 40px;
line-height: 50px;
letter-spacing: -0.9px;
color: #046416;
margin-left: -2px;
padding: 10px;
}
.slider-wrapper{
display: none;
}
}
Thank you again!!
