@charset "UTF-8";
/* CSS Document */

/*CSS 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;}
/*End reset*/

.body {height:100%;}
.wrap {width:1000px; margin:0 auto; font-family:Arial, Helvetica, sans-serif;}
.logo {padding: 20px 10px 20px 0; float:left;}
.nav {display:block; clear:both;}
ul.nav li {display:inline; padding-right:20px; text-transform:lowercase;}
ul.nav li a:active {color:#666; text-decoration:none;}
ul.nav li a:link {color:#666; text-decoration:none;}
ul.nav li a:visited {color:#666; text-decoration:none;}
ul.nav li a:hover {color:#693; text-decoration:none;}
.maincontent {ckground-color:#ffffff;border:1px solid #CCC;-moz-border-radius:5px;-webkit-border-radius:5px;border-radius:5px; width:100%;margin-bottom:20px;}
.content {width:650px; padding:20px 20px;display:inline-block; border-right: #CCC 1px solid; }
.sidebar {width:250px; padding:20px 20px; margin-bottom:20px;display:inline-block;}
.social{width:210px; margin-bottom:20px;}
.widget {width:210px; font-size:13px; color:#999;}
.footer {ckground-color:#ffffff;border:1px solid #CCC;-moz-border-radius:5px;-webkit-border-radius:5px;border-radius:5px; width:100%;margin-bottom:20px; height:200px;}
.content p {margin: 10px 0 10px 0; color:#666; text-align:justify; font-size:13.5px; line-height:20px;}
.content h1 {line-height:30px; font-size:34px; color:#693;}
.content h2 {line-height:25px; font-size:18px; color:#696;}
.sidebar h1 {line-height:30px; font-size:24px; color:#693;}
.sidebar .social img{opacity:0.4;filter:alpha(opacity=40); /* For IE8 and earlier */}
.sidebar .social img:hover{opacity:1.0;filter:alpha(opacity=100); /* For IE8 and earlier */}



/* Slider */
.nivoSlider {position:relative;margin:20px 0; border: 5px solid #CCC; overflow:hidden;}
.nivoSlider img {position:absolute;top:0px;left:0px;}
/* If an image is wrapped in a link */
.nivoSlider a.nivo-imageLink {position:absolute;top:0px;left:0px;width:100%;height:100%;border:0;padding:0;margin:0;z-index:6;display:none;}
/* The slices and boxes in the Slider */
.nivo-slice {display:block;position:absolute;z-index:5;height:100%;}
.nivo-box {display:block;position:absolute;z-index:5;}
/* Caption styles */
.nivo-caption {position:absolute;left:0px;bottom:0px;background:#000;color:#999;opacity:0.4; filter: alpha(opacity=40); -moz-opacity:0.4; -khtml-opacity: 0.4;/* Overridden by captionOpacity setting */width:100%;z-index:8;}
.nivo-caption p {padding:10px 7px;margin:0; font-size:12px}
.nivo-caption a {display:inline !important;}
.nivo-html-caption {display:none;}
/* Direction nav styles (e.g. Next & Prev) */
.nivo-directionNav a {position:absolute;top:50%;z-index:9;cursor:pointer;color:#FFF;margin:0 20px;background:#333;padding:5px 5px;}
.nivo-prevNav {left:0px;}
.nivo-nextNav {right:0px;}
/* Control nav styles (e.g. 1,2,3...) */
.nivo-controlNav a {position:relative;z-index:9;cursor:pointer;}
.nivo-controlNav a.active {font-weight:bold;}
.nivoSlider {position:relative;width:1000px; /* Change this to your images width */height:500px; /* Change this to your images height */background:url(images/loading.gif) no-repeat 50% 50%;}
.nivoSlider img {position:absolute;top:0px;left:0px;display:none;}
.nivoSlider a {border:0;display:block;}
.nivoSlider a:active {color:; text-decoration:none;}
.nivoSlider a:link {color:#CCC; text-decoration:none;}
.nivoSlider a:visited {color:#CCC; text-decoration:none;}
.nivoSlider a:hover {color:#FFF; text-decoration:underline;}
/* End Slider */

<!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>Untitled Document</title>
<link href="css/style.css" rel="stylesheet" type="text/css" media="screen" />
<title>Phayse</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>
<script src="js/jquery.nivo.slider.pack.js" type="text/javascript"></script>
</head>
	<body>
<div class="wrap">
<div class="logo"><img src="images/logo.png" width="454" height="123" /></div>     

<div class="nav">
<ul class="nav">
	<li><a href="index.html">Home</a></li>
    <li><a href="index.html">Services</a></li>
    <li><a href="index.html">Blog</a></li>
    <li><a href="index.html">Contact</a></li>
</ul>
</div>

<div id="slider" class="nivoSlider">
    <img src="images/slide1.jpg" alt="" />
    <img src="images/slide2.jpg" alt="" title="Here's another awesome caption" />
    <img src="images/slide3.jpg" alt="" title="This is an example of a caption" />
    <img src="images/slide4.jpg" alt="" />
</div>

<!-- To further customise captions add ID into title attribute with the hash e.g. #htmlcaption then make a div with the id name and class name 'nivo-html-caption'. -->
<!-- <div id="htmlcaption" class="nivo-html-caption">
    <strong>This</strong> is an example of a <em>HTML</em> caption with <a href="#">a link</a>.
</div> -->
        
 <div class="maincontent">
 	<div class="content">
    <h1>Perfection</h1>
    	<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
        <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus</p>
        <h2>No Shortcuts</h2>
        <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
        <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus</p>
    </div>
    <div class="sidebar">
    	<div class="social"><h1>Stalk Us</h1><p><img src="images/facebook.png" width="32" height="32" alt="Facebook" /><img src="images/twitter.png" width="32" height="32" alt="Twitter" /></p></div>
        <div class="widget"><h1>Widget</h1><p>Here's a widget with some text in the sidebar.</p></div>
    </div>
 </div>       
    <div class="footer"></div>



</div>
<script type="text/javascript">
$(window).load(function() {
    $('#slider').nivoSlider({
        effect: 'random', // Specify sets like: 'fold,fade,sliceDown'
        slices: 5, // For slice animations
        boxCols: 8, // For box animations
        boxRows: 4, // For box animations
        animSpeed: 500, // Slide transition speed
        pauseTime: 3000, // How long each slide will show
        startSlide: 0, // Set starting Slide (0 index)
        directionNav: true, // Next & Prev navigation
        directionNavHide: true, // Only show on hover
        controlNav: false, // 1,2,3... navigation
        controlNavThumbs: false, // Use thumbnails for Control Nav
        controlNavThumbsFromRel: false, // Use image rel for thumbs
        controlNavThumbsSearch: '.jpg', // Replace this with...
        controlNavThumbsReplace: '_thumb.jpg', // ...this in thumb Image src
        keyboardNav: true, // Use left & right arrows
        pauseOnHover: true, // Stop animation while hovering
        manualAdvance: false, // Force manual transitions
        captionOpacity: 0.8, // Universal caption opacity
        prevText: 'Prev', // Prev directionNav text
        nextText: 'Next', // Next directionNav text
        beforeChange: function(){}, // Triggers before a slide transition
        afterChange: function(){}, // Triggers after a slide transition
        slideshowEnd: function(){}, // Triggers after all slides have been shown
        lastSlide: function(){}, // Triggers when last slide is shown
        afterLoad: function(){} // Triggers when slider has loaded
    });
});
</script>
</body>
</html>