greymatter
?<!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>
<title>GreyMatter | About Us</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type='text/css'>
body {
background:url("greymatter-images/bg-body.gif") repeat;
font:14px Arial, Helvetica, Sans-Serif;
color:#555555;
margin:0;
padding:0;
text-shadow:1px 1px 0 #FFFFFF;
}
::-moz-selection {
background:#fff2a8;
}
a {
text-decoration:none;
color:#1aa5d4;
}
a:hover {
text-decoration:underline;
}
a:visited {
text-decoration:none;
}
a:active {
text-decoration:none;
}
a img {
border:0;
}
h1, h2, h3, h4, h5 {
font-family:Arial, Helvetica, Sans-Serif;
font-weight:bolder;
color:#222222;
padding:0;
margin:0 0 5px 0;
line-height:1.5em;
}
h1 {
font-size:26px;
}
h2 {
font-size:24px;
letter-spacing:-.7px;
}
h3 {
font-size:21px;
letter-spacing:-.4px;
}
h2, h3 {
margin:25px 0 5px;
}
h4 {
font-size:18px;
margin:20px 0 5px;
}
h5 {
font-size:16px;
margin:20px 0 5px;
}
p {
line-height:1.6em;
padding:0;
margin:0 0 15px 0;
text-align:justify;
}
blockquote {
line-height:1.7em;
}
small {
color:#666666;
font-size:12px;
font-weight:normal;
font-style:italic;
}
ul {
list-style-type:square;
margin:10px 0 0 40px;
padding:0;
}
ul li ul {
margin:5px 0 10px 30px;
}
hr {
height:1px;
color:#CCCCCC;
background:url("greymatter-images/content_seperator.gif") repeat-x;
border:0;
margin:10px 0 15px 0;
}
.hr2 {
background:url("greymatter-images/content_seperator.gif") repeat-x;
height:2px;
margin:35px auto 20px auto;
}
input, textarea {
padding:4px;
font:14px Arial, Helvetica, Sans-Serif;
background:#fff;
border:1px solid #CCCCCC;
}
form {
margin:0;
padding:0;
}
.thumb_small {
background:none repeat scroll 0 0 #EEEEEE;
border:7px solid #FFFFFF;
float:left;
margin:0 0 20px 30px;
outline:1px solid #DDDDDD;
padding:5px;
}
.thumb_large {
background:none repeat scroll 0 0 #EEEEEE;
border:7px solid #FFFFFF;
margin:0 0 20px 0;
outline:1px solid #DDDDDD;
padding:5px;
}
a.logo {
background:url("greymatter-images/logo.jpg") no-repeat;
display:block;
margin:0 0 0 430px;
height:100px;
width:600px;
position:absolute;
}
* html a.logo {
float:left;
right:60px;
left:0;
}
#titleheader_bg {
background:url("greymatter-images/header_bg.jpg") repeat-x;
height:100px;
text-align:center;
border-bottom:1px solid #bbb;
}
.display_bg {
background:url("greymatter-images/display_bg.jpg") repeat-x;
padding:5px 0 35px 0;
}
#container {
background:url("greymatter-images/border-bg.gif") repeat;
width:1048px;
margin:40px auto 15px auto;
border:1px solid #FFFFFF;
outline:1px solid #D8D8D8;
padding:15px;
text-shadow:1px 1px 0 #FFFFFF;
}
* html #container {
border:1px solid #D8D8D8;
}
.navback {
right:0;
left:0;
z-index:1;
}
#navigation {
background:url("greymatter-images/nav_back.jpg") repeat-x;
border:1px solid #D3D3D3;
height:33px;
font-size:12px;
margin:20px auto;
width:960px;
overflow:hidden;
-moz-border-radius:6px;
}
#navigation ul {
float:left;
z-index:100;
padding:0;
list-style-type:none;
margin:0 0 0 10px;
}
* html #navigation ul {
margin:0 0 0 6px;
}
#navigation ul li {
display:block;
float:left;
background:url("greymatter-images/seperator.png") no-repeat right 1px;
padding:4px 6px 4px 0;
margin-right:8px;
}
#navigation ul li a {
display:block;
padding:5px 7px;
text-decoration:none;
}
* html #navigation ul li a {
display:inline-block;
}
#navigation ul li a:link, #navigation ul li a:visited {
color:#777777;
}
#navigation ul li a.selected {
color:#777777;
z-index:100;
}
#navigation ul li a:hover {
color:#1aa5d4;
text-decoration:none;
z-index:100;
}
.search {
float:right;
margin-top:4px;
}
.search input {
background:#FAFAFA;
border:1px solid #ccc;
width:214px;
padding:5px 6px 3px 6px;
font:12px Arial, Helvetica, Sans-Serif;
color:#333333;
margin-right:5px;
-moz-box-shadow:0 0 27px #DDDDDD inset;
}
* html .search {
margin-bottom:5px;
}
#search_btn {
background:url("greymatter-images/btn-search.gif") no-repeat;
color:#FFFFFF;
font:normal 12px Arial, Helvetica, Sans-Serif;
text-shadow:0 -1px 0 rgba(0, 0, 0, 0.2);
border:medium none;
width:65px;
height:25px;
-moz-box-shadow:0 1px 2px rgba(0, 0, 0, 0.2);
margin-right:16px;
padding:0;
cursor:pointer;
}
#search_btn:hover {
background:url("greymatter-images/btn-search_hover.gif") no-repeat;
}
#display {
background:#E5E5E5;
height:336px;
width:940px;
padding:10px 10px 7px 10px;
font-size:12px;
margin:0 auto;
border:1px solid #fff;
*border:1px solid #ccc;
outline:1px solid #ccc;
}
#display h4 {
margin:0 0 4px 0;
line-height:1.2em;
}
ul#pikame {
float:right;
}
.pika_main img {
width:920px;
background:#FFFFFF;
padding:9px;
border:1px solid #CCCCCC;
}
#pikame li {
float:left;
background:#f2f2f2;
text-align:left;
margin-left:10px;
padding:5px;
border:1px solid #fff;
outline:1px solid #ccc;
right:0;
}
.pika_caption {
float:left;
margin:15px 0 0 7px;
font:bolder 18px Arial, Helvetica, Sans-Serif;
color:#333333;
line-height:1.2em;
}
ul#pikame li img {
position:relative;
cursor:pointer;
width:50px;
height:40px;
margin-bottom:5px;
margin-right:5px;
}
.pika_main {
position:relative;
}
.pikachoose li {
overflow:hidden;
list-style:none;
}
.pika_play {
background:#FFFFFF;
padding:10px;
position:absolute;
top:10px;
right:10px;
z-index:1;
}
.pika_play a {
position:relative;
margin-left:auto;
cursor:pointer;
color:#333333;
}
.pika_play img {
border:none !important;
}
.pika_play_previous {
background:url("greymatter-images/arrow-right.png") no-repeat;
height:38px;
width:25px;
display:block;
position:absolute;
left:1220px;
top:300px;
cursor:pointer;
}
.pika_play_next {
background:url("greymatter-images/arrow-left.png") no-repeat;
height:38px;
width:25px;
display:block;
position:absolute;
right:1220px;
top:300px;
cursor:pointer;
}
#content_container {
font-size:14px;
background:#f4f4f4;
border:1px solid #CCCCCC;
outline:1px solid #FFFFFF;
}
* html #content_container {
display:inline-block;
}
#content {
float:left;
width:627px;
padding:40px;
color:#555555;
border-right:1px solid #DDDDDD;
}
* html #content {
background:#f4f4f4;
}
.post {
margin:35px;
}
.post_title {
margin-bottom:20px;
}
.post_title h1 {
font-size:40px;
line-height:42px;
}
.post_title span {
font-size:12px;
color:#999999;
font-style:italic;
}
.folioGallery {
display:inline-block;
margin:40px 0;
}
.folioGallery .image_holder {
margin:0 0 14px 0;
width:640px;
float:left;
}
.folioGallery .image_holder img {
background:#fff;
padding:8px;
border:1px solid #CCCCCC;
}
.folioGallery .discription {
float:left;
width:320px;
}
.details {
border:4px solid #E1E1E1;
margin:12px 0;
overflow:hidden;
}
.details li {
background:url("greymatter-images/tick.png") no-repeat 10px 9px #FFFFFF;
border-bottom:1px solid #EDEDED;
color:#868686;
font-size:12px;
list-style:none outside none;
overflow:hidden;
padding:10px 0 10px 37px;
}
.details li:hover {
background:url("greymatter-images/tick.png") no-repeat 10px 9px #f6f6f6;
}
.contact_form {
padding-top:5px;
}
.contact_form label {
color:#333333;
display:block;
font:bolder 14px Arial, Helvetica, Sans-Serif;
line-height:1.3em;
}
.contact_form .small {
color:#666666;
display:block;
font-size:11px;
font-weight:normal;
}
.contact_form input, textarea {
width:540px;
padding:10px;
margin:10px 0 25px 0;
color:#444444;
line-height:1.7em;
}
.contact_form button {
background:url("greymatter-images/contact_btn.jpg") no-repeat;
font-size:14px;
padding:10px 10px 11px;
width:120px;
color:#fff;
font-weight:normal;
border:none;
text-shadow:0 -1px 0 rgba(0, 0, 0, 0.2);
-moz-box-shadow:0 1px 2px rgba(0, 0, 0, 0.2);
cursor:pointer;
}
.contact_form button:hover {
background:url("greymatter-images/contact_btn_hover.jpg") no-repeat;
}
#sidebar {
float:right;
width:336px;
font-size:12px;
border-left:1px solid #fff;
border-right:1px solid #EEEEEE;
overflow:hidden;
}
* html #sidebar {
width:336px;
}
#sidebar h4 {
margin-top:0;
letter-spacing:2px;
}
.sidebar_section {
padding:25px;
margin-left:1px;
border-top:1px solid #FFFFFF;
border-bottom:1px solid #D5D5D5;
}
.sidebar_title {
margin-bottom:15px;
}
.sidebar_title h4 {
margin-bottom:2px;
}
.sidebar_title small {
font-size:10px;
font-style:italic;
}
.sidebar_link {
text-align:right;
font-style:italic;
}
ul.ads {
margin:0;
padding:0;
list-style-type:none;
}
ul.ads li {
float:left;
margin:0 9px 6px 0;
padding:4px;
background:#e9e9e9;
}
ul.ads li:hover {
background:#fff;
}
.left_column {
float:left;
clear:both;
font-weight:bolder;
margin-bottom:7px;
line-height:1.7em;
}
.right_column {
float:right;
text-align:right;
line-height:1.7em;
margin-bottom:7px;
}
.spacer {
clear:both;
}
#footer {
width:1048px;
margin:0 auto;
padding:0 0 15px 0;
font-size:12px;
color:#1aa5d4;
}
#footer p {
margin:0;
padding:0;
line-height:normal;
white-space:nowrap;
text-indent:inherit;
}
#footer .lf {
float:left;
}
#footer .rf {
float:right;
}
/* ------------------------------------------------------------------------
Miscellaneous
------------------------------------------------------------------------- */
.clearfix:after {
content:".";
display:block;
height:0;
clear:both;
visibility:hidden;
}
.clearfix {
display:inline-block;
}
* html .clearfix {
height:1%;
}
.clearfix {
display:block;
}
</style>
<!--[if IE 6]><link rel="stylesheet" type="text/css" href="css/ie6.css" /><![endif]-->
<!--[if IE 7]><link rel="stylesheet" type="text/css" href="css/ie7.css" /><![endif]-->
</head>
<body>
<div id="titleheader_bg"><a class="logo" href="index.html"></a></div>
<div id="navigation">
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="about-us.html">About Us</a></li>
<li><a href="portfolio.html">Portfolio</a></li>
<li><a href="services.html">Services</a></li>
<li><a href="contact-us.html">Contact Us</a></li>
</ul>
<div class="search">
<form action="#" method="post" name="search" id="search">
<input id="s" type="text" name="search" />
<input type="submit" id="search_btn" value="Search" />
</form>
</div>
</div>
<div id="container">
<div id="content_container">
<div id="content">
<h1>About Us</h1>
<hr />
<p>Ut justo diam, sodales in auctor non, malesuada a mauris. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Cum sociis natoque penatibus et magnis dis parturient montes.</p>
<h1>H1 Heading</h1>
<p>Nascetur ridiculus mus. Integer vel quam semper tortor laoreet fringilla. Donec volutpat pellentesque posuere. Donec malesuada nibh non urna scelerisque eget.</p>
<h2>H2 Heading</h2>
<p>Nulla facilisi. Nunc fringilla sodales pellentesque. Aenean pellentesque pretium cursus. Cras nibh mauris, placerat quis fermentum et, ullamcorper ut quam. Nulla a odio at sapien consectetur viverra. Morbi quam nulla, laoreet varius consectetur sed, convallis et justo. In faucibus accumsan eleifend. Aenean tempus nulla non leo sagittis rhoncus. Phasellus bibendum suscipit felis, vel facilisis enim accumsan fringilla. Sed ut massa purus, nec semper tortor.</p>
<h3>H3 Heading</h3>
<p>Praesent eget ornare nisi. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Praesent sit amet lacinia sapien. Integer non vestibulum lectus. Quisque sem quam, euismod non laoreet in, vestibulum ut mauris.</p>
<h4>H4 Heading</h4>
<p>Donec pulvinar, felis sed mattis ultrices, nibh justo molestie nisl, et posuere neque odio vel magna. Curabitur adipiscing sollicitudin felis, eu egestas erat ullamcorper id. Curabitur non justo eu eros tristique rutrum. Ut rhoncus facilisis purus, at pharetra velit mattis vel.</p>
<h5>H5 Heading</h5>
<p>Donec pulvinar, felis sed mattis ultrices, nibh justo molestie nisl, et posuere neque odio vel magna. Curabitur adipiscing sollicitudin felis, eu egestas erat ullamcorper id. Curabitur non justo eu eros tristique rutrum. Ut rhoncus facilisis purus, at pharetra velit mattis vel.</p>
<h6>H6 Heading</h6>
<ul>
<li>List Item #1</li>
<li>List Item #2</li>
<li>List Item #3</li>
<li>List Item #4</li>
<li>List Item #5</li>
</ul>
</div>
<div id="sidebar">
<div class="sidebar_section">
<div class="sidebar_title">
<h4>Affiliates</h4>
<small>Subtitle w/ Information</small> </div>
<ul class="ads clearfix">
<li><a href="#"><img src="greymatter-images/affiliates/themeforest.jpg" alt="" /></a></li>
<li><a href="#"><img src="greymatter-images/affiliates/graphicriver.jpg" alt="" /></a></li>
<li><a href="#"><img src="greymatter-images/affiliates/videohive.jpg" alt="" /></a></li>
<li><a href="#"><img src="greymatter-images/affiliates/flashden.jpg" alt="" /></a></li>
</ul>
</div>
<div class="sidebar_section">
<div class="sidebar_title">
<h4>About Us</h4>
<small>Subtitle w/ Information</small> </div>
<p>Sed aliquet, augue at consequat porta, nisl nibh fringilla metus, at rutrum diam mauris nec enim. Curabitur odio leo, lacinia non imperdiet in, mollis id ante. Proin venenatis, metus at tristique ultrices, sapien orci blandit libero, a porta erat mauris quis est. </p>
<div class="sidebar_link"><a href="#">Learn More About Us</a></div>
</div>
<div class="sidebar_section" style="border-bottom: 0;">
<div class="sidebar_title">
<h4>Contact Us</h4>
<small>Subtitle w/ Information</small> </div>
<div class="left_column">Email:</div>
<div class="right_column">example@example.com</div>
<div class="left_column">Phone:</div>
<div class="right_column">123 - 456 - 7890</div>
<div class="left_column">Address:</div>
<div class="right_column">1234 Make Believe<br />
New York, NY 50210<br />
United States of America</div>
<br style="clear: both;" />
<div class="sidebar_link"><a href="#">View Our Contact Page</a></div>
</div>
</div>
<div class="spacer"></div>
</div>
</div>
<div id="footer">
<p class="lf">© Copyright 2010 "SiteName" - All Rights Reserved</p>
<p class="rf"><a href="http://www.free-css.com/">Free CSS Templates</a> by <a href="http://www.bloggerzbible.com/">Bloggerzbible</a></p>
<div style="clear:both;"></div>
</div>
</body>
</html>
Related examples in the same category