<!--[if IE]>       <mce:script _mce_src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></mce:script>     <![endif]-->

<h1><a title="WeGraphics - high quality design resources and tutorials" href="http://wegraphics.net">WeGraphics</a></h1>

<hr />

<div class="column">
<h2>Who we are</h2>
WeGraphics is a team of creative professionals working hard to produce top-notch design goodies.

<h2>Where we are</h2>
WeGraphics HQ is located in Philadelphia, but the team is international. We've gathered a great bunch of talented and skilled designers to provide people with amazing resources.
</div>

<div class="column pitch">
<h2>How we can help you</h2>
We work with different mediums such as web, print and motion.Having worked in different niches, we posses the invaluable knowledge and outstanding skillset that we use to solve             clients' problems and bring their ideas to life.
<a href="#">we blog too</a> <!-- this will be a button -->
</div>

 <!-- We'll style the third column's paragraphs and links a bit differently from the rest. The telephone number needs to be wrapped into a <span>   tag in order for the whole column to be styled with         consistency-->

<div class="column contacts">
<h2>How to contact</h2>
Send an email to <a href="mailto:#">[email protected]</a>
Chat with us on Skype <a href="callto:#">wegraphics</a>
Call us at <span>+1 (23) 456-78-99</span>
Socialize with us <a href="#footer">See footer for the links</a>
</div>
<hr />

<h3>Recent projects:</h3>
<a href="#">view portfolio</a>
<ul>
	<li class="item1"><a href="#"></a></li>
	<li class="item2"><a href="#"></a></li>
	<li class="item3"><a href="#"></a></li>
	<li class="item4"><a href="#"></a></li>
	<li class="item5"><a href="#"></a></li>
	<li class="item6"><a href="#"></a></li>
	<li class="item7"><a href="#"></a></li>
	<li class="item8"><a href="#"></a></li>
</ul>
 <hr />

<a href="#">Facebook</a>             <a href="#">Twitter</a>             <a href="#">Flickr</a>             <a href="#">Dribbble</a>             <a href="#">Forrst</a>
All content © 2011 WeGraphics &amp; DesignerOnDuty. All rights reserved.

/*** CSS RESET ***/  html, 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;     outline:0;     font-size:100%;     vertical-align:baseline;     background:transparent;     } body{     line-height:1; } article,aside,details,figcaption,figure, footer,header,hgroup,menu,nav,section{          display:block; } nav ul{     list-style:none; } blockquote, q{     quotes:none; } blockquote:before, blockquote:after, q:before, q:after{     content:'';     content:none; } a{     margin:0;     padding:0;     font-size:100%;     vertical-align:baseline;     background:transparent;     text-decoration: 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; } /****** This content separator is already styled to match the look we are after ******/ hr{     clear: both;     display:block;     height:1px;     border:0;        border-top: 1px dashed #ffbca4; /* Change this color and border style to suit your needs */     margin:2.5em 0 3em 0;     padding:0; } input, select{     vertical-align:middle; }

/* @font-face DECLARATION */
@font-face{
    font-family: 'Museo-500';
    src: url('../webfonts/eot/museo500.eot');
    src: url('../webfonts/woff/museo500.woff') format('woff'),
         url('../webfonts/ttf/museo500.ttf') format('truetype'),
         url('../webfonts/museo500.svg#Museo-500') format('svg');
}
@font-face{
    font-family: 'MuseoSans-500';
    src: url('../webfonts/eot/museosans500.eot');
    src: url('../webfonts/woff/museosans500.woff') format('woff'),
         url('../webfonts/ttf/museosans500.ttf') format('truetype'),
         url('../webfonts/museosans500.svg#MuseoSans-500') format('svg');
}

html{
    width: 100%; height: 100%;
}
body{
    font-family: 'MuseoSans-500', Helvetica, Arial, sans-serif;
    font-size: 14px;
    color:#454545;
    background:#fff;
}
header{
    width: 940px;
    margin: 50px auto 30px; /* this will center the header on the page (horizontally) and apply the top and bottom margins */
}

header h1 a{
    background: url('../img/logo.png');
    width: 268px;  height: 59px;
    float: left;  display: block;
    text-indent: -99999px;
}

header nav{
    float: right;
    margin: 10px 0 0 0;
    font-family: 'Museo-500', Helvetica, Arial, sans-serif;
}
header li{
    float: left;  display: inline;
    position:relative; /* We'll need this for the dropdown to work properly */
}
header li a{
    display: block;
    color: #454545;
    padding: 8px 16px; /* Spacing out the links */
}
header li a:hover, header li a.active{
    color: #fff;
    background: #e35e35;
}

.dropdown{
    list-style: none;
    position: absolute;
    left: -9999px;
    z-index: 10; /* So the dropdown stays on top of everything else */
    opacity: 0;
    -webkit-transition: opacity 0.35s linear;
    -moz-transition: opacity 0.35s linear;
    -o-transition: opacity 0.35s linear;
    transition: opacity 0.35s linear;
}

.dropdown li{
    padding: 0;
    margin: 0;
    float: none;
}
.dropdown a{
    white-space: nowrap;
    text-align: left;
    display: block;
    font-size: 13px;
}

header li:hover ul{
    left: 0;
    opacity: 1;
}
header li:hover ul a{
    color: #e35e35;
    background: #fff;
    -webkit-transition: all 0.15s linear;
    -moz-transition: all 0.15s linear;
    -o-transition: all 0.15s linear;
    transition: all 0.15s linear;
}
header li:hover ul a:hover{
    color: #fff;
    background: #e35e35;
}

#slider{
    clear: both;
    height: 340px;
    background: url('../img/slider_bg.png') repeat;
    padding: 25px 0 8px 0;
    position: relative;
    top: 40px;
}

#about{
    width: 940px;
    margin: 30px auto 0;
}
.column{
    float: left;  display: inline;
    width: 240px;
    margin: 0 40px 0 15px;
    text-align: left;
}

 .pitch{     width: 345px;     margin: 0 40px 0 25px; } .contacts{     width: 205px;     margin: 0 15px 30px 15px; }

 #about h2{
    font: 19px 'Museo-500', Helvetica, Arial, sans-serif;
    margin-bottom: 14px;
}
.column p{
    font-size: 13px;
    line-height: 1.7;
    margin-bottom: 18px;
    padding: 0 5px;
    border-left: 1px dashed #ffbca4; /* That vertical dashed line we've drawn in photoshop */
}
.contacts a, span{
    font-size: 12px;
    display: block;
    color: #454545;
    -webkit-transition: 0.15s linear color;
}
.contacts a:hover{
    color: #e35e35; /* Everything but the telephone number will change the color when hovered over */
}

.pitch p{
    margin: 0 0 28px 0;
}
.pitch a{
    font: 14px 'Museo-500', Helvetica, Arial, sans-serif;
    text-align: left;
    color: #e35e35;
    padding: 6px 12px;
    background: #fff;
    border: 1px solid #ffbca4;
    -webkit-transition: all 0.15s linear;
    -moz-transition: all 0.15s linear;
    -o-transition: all 0.15s linear;
    transition: all 0.15s linear;
}
pitch a:hover{
    padding: 6px 18px;
}
.pitch a:active{
    color: #fff;
    background: #e35e35;
}

#recent_projects{
    overflow: hidden;
    width:940px;
    margin: 60px auto 0;
}
#recent_projects h3{
    font: 16px 'Museo-500', Helvetica, Arial, sans-serif;
    margin: 0 0 35px 15px;
}

#recent_projects p a{
    font: 14px 'Museo-500', Helvetica, Arial, sans-serif;
    text-align: left;
    color: #e35e35;
    margin: 0 0 0 15px;
    padding: 6px 12px;
    background: #fff;
    border: 1px solid #ffbca4;
    -webkit-transition: all 0.15s linear;
    -moz-transition: all 0.15s linear;
    -o-transition: all 0.15s linear;
    transition: all 0.15s linear;
}
#recent_projects p a:hover{
    padding: 6px 18px;
}
#recent_projects p a:active{
    color: #fff;
    background: #e35e35;
}

#recent_projects li a{
    display: block;
    width: 140px;  height: 140px;
}
#recent_projects li{
    float: left;  display: inline;
    margin: 20px;
}

#recent_projects li{
    float: left;  display: inline;
    margin: 20px;
    -webkit-border-radius: 80px;
    -moz-border-radius: 80px;
    border-radius: 80px;
}

#recent_projects li{
    float: left;  display: inline;
    margin: 20px;
    -webkit-border-radius: 80px;
    -moz-border-radius: 80px;
    border-radius: 80px;
    -webkit-transition: -webkit-border-radius 0.20s linear;
    -moz-transition: -moz-border-radius 0.20s linear;
    -o-transition: all 0.20s linear;
    transition: border-radius 0.20s linear;
}
#recent_projects li:hover{
    -webkit-border-radius: 0px;
    -moz-border-radius: 0px;
    border-radius: 0px;
}

.item1{
    background: url('../img/portfolio_item1.jpg') 0 140px;
}
.item2{
    background: url('../img/portfolio_item2.jpg') 0 140px;
}
.item3{
    background: url('../img/portfolio_item3.jpg') 0 140px;
}
.item4{
    background: url('../img/portfolio_item4.jpg') 0 140px;
}
.item5{
    background: url('../img/portfolio_item5.jpg') 0 140px;
}
.item6{
    background: url('../img/portfolio_item6.jpg') 0 140px;
}
.item7{
    background: url('../img/portfolio_item7.jpg') 0 140px;
}
.item8{
    background: url('../img/portfolio_item8.jpg') 0 140px;
}

#recent_projects li:hover{
    -webkit-border-radius: 0px;
    -moz-border-radius: 0px;
    border-radius: 0px;
    background-position: 0 0; /* This is what we just added */
}

footer{
    clear:both;
    width: 940px;
    margin: 0 auto;
    padding: 0 0 50px 0;
}
footer nav{
    font-size: 13px;
    width: 660px;
}
footer a{
    float: left;
    display: inline;
    color: #ffbca4;
    margin: 0 0 0 20px;
}

footer a{
    float: left;
    display: inline;
    color: #ffbca4;
    margin: 0 0 0 20px;
    padding: 5px 10px;
    -webkit-transition: all 0.1s linear;
    -moz-transition: all 0.1s linear;
    -o-transition: all 0.1s linear;
    transition: all 0.1s linear;
}
footer a:hover{
    padding: 10px 10px;
    color: #fff;
    background: #e35e35;
}
footer a:active{
    color: #fff;
    background: #454545;
}

footer p{
    float: right;  display: inline;
    color: #454545;
    font-size: 11px;
    line-height: 1.5;
    text-align: left;
}

<section id="slider">

        <div class="window">
        <div class="image_reel">
            <a href="#"><img src="img/slide1.jpg" alt="" /></a>
            <a href="#"><img src="img/slide2.jpg" alt="" /></a>
            <a href="#"><img src="img/slide3.jpg" alt="" /></a>
            <a href="#"><img src="img/slide4.jpg" alt="" /></a>
        </div>
        </div>
        <div class="paging">
        <a class="bullet1" href="#" rel="1">1</a> <!-- this is the active control bullet -->
        <a href="#" rel="2">2</a>
        <a href="#" rel="3">3</a>
        <a href="#" rel="4">4</a>
        </div>
</section>

 .window{
    width: 940px;  height: 280px;
    position: relative;
    margin: 0 auto;
    overflow: hidden; /*--Hides anything outside of the set width/height--*/
    border: 5px solid #e3e3e3;
}
.image_reel{
    position: absolute;
    top: 0;
    left: 0;
}
.image_reel img{
    float: left; display: inline;
}
.paging{
    width: 940px;
    margin: 18px auto 22px;
}
.paging a{
    float: left;  display: inline;
    padding: 5px 11px;
    background: url('../img/bullets.png') 0 0;
    text-indent: -9999px;
}
.paging a.active{
    background-position: 0 22px;
}
.bullet1 {
    margin: 0 0 0 9px;
}

$(document).ready(function() {

    //Show the paging and activate its first link
    $(".paging").show();
    $(".paging a:first").addClass("active");

    //Get size of the image, how many images there are, then determin the size of the image reel.
    var imageWidth = $(".window").width();
    var imageSum = $(".image_reel img").size();
    var imageReelWidth = imageWidth * imageSum;

    //Adjust the image reel to its new size
    $(".image_reel").css({'width' : imageReelWidth});

    //Paging and Slider Function
    rotate = function(){
    var triggerID = $active.attr("rel") - 1; //Get number of times to slide
    var image_reelPosition = triggerID * imageWidth; //Determines the distance the image reel needs to slide

    $(".paging a").removeClass('active'); //Remove all active class
    $active.addClass('active'); //Add active class (the $active is declared in the rotateSwitch function)

    //Slider Animation
    $(".image_reel").animate({
        left: -image_reelPosition
    }, 500 );

    }; 

  //Rotation and Timing Event
    rotateSwitch = function(){
    play = setInterval(function(){ //Set timer - this will repeat itself every 5 seconds
        $active = $('.paging a.active').next(); //Move to the next paging
        if ( $active.length === 0) { //If paging reaches the end...
            $active = $('.paging a:first'); //go back to first
        }
        rotate(); //Trigger the paging and slider function
    }, 5000); //Timer speed in milliseconds (5 seconds)
    };

    rotateSwitch(); //Run function on launch

   //On Hover
    $(".image_reel a").hover(function() {
    clearInterval(play); //Stop the rotation
    }, function() {
    rotateSwitch(); //Resume rotation timer
    });        
    //On Click
    $(".paging a").click(function() {
    $active = $(this); //Activate the clicked paging
    //Reset Timer
    clearInterval(play); //Stop the rotation
    rotate(); //Trigger rotation immediately
    rotateSwitch(); // Resume rotation timer
    return false; //Prevent browser jump to link anchor
    });
    });