Team:Glendale CC AZ/css

From 2013.igem.org

(Difference between revisions)
Line 1: Line 1:
-
    <link rel="stylesheet" href="https://2013.igem.org/Team:Glendale_CC_AZ/test/services/wix-public/1.30.0/css/Helvetica/fontFace.css">
+
<link rel="stylesheet" href="< YOUR PAGE HERE >?action=raw&ctype=text/css" type="text/css" />
 +
html, body {
 +
height: 100%;
 +
}
-
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
body {
-
<!--
+
margin: 0px;
-
Design by Free CSS Templates
+
padding: 0px;
-
http://www.freecsstemplates.org
+
background: #080808 url(images/main-bg.png) repeat;
-
Released for free under a Creative Commons Attribution 2.5 License
+
font-family: 'Open Sans', sans-serif;
 +
font-size: 13px;
 +
color: #2B2B2B;
 +
}
-
Name      : FlowerClusters
 
-
Description: A two-column, fixed-width design with dark color scheme.
 
-
Version    : 1.0
 
-
Released  : 20130612
 
-
-->
+
h1, h2, h3 {
-
<html xmlns="http://www.w3.org/1999/xhtml">
+
margin: 0;
-
<head>
+
padding: 0;
-
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
+
}
-
<title></title>
+
-
<meta name="keywords" content="" />
+
-
<meta name="description" content="" />
+
-
<link href="http://fonts.googleapis.com/css?family=Source+Sans+Pro:200,300,400,600,700,900" rel="stylesheet" />
+
-
<link href="default.css" rel="stylesheet" type="text/css" media="all" />
+
-
<link href="fonts.css" rel="stylesheet" type="text/css" media="all" />
+
-
<!--[if IE 6]><link href="default_ie6.css" rel="stylesheet" type="text/css" /><![endif]-->
+
p, ol, ul {
 +
margin-top: 0px;
 +
}
-
</head>
+
p {
-
<body>
+
line-height: 180%;
-
<div id="header-wrapper">
+
}
-
<div id="header" class="container">
+
-
<div id="logo">
+
-
<h1><a href="#">Flower Clusters</a></h1>
+
-
</div>
+
-
<div id="menu">
+
-
<ul>
+
-
<li><a href="#" accesskey="1" title="">Services</a></li>
+
-
<li><a href="#" accesskey="2" title="">Our Clients</a></li>
+
-
<li><a href="#" accesskey="3" title="">About Us</a></li>
+
-
<li><a href="#" accesskey="4" title="">Careers</a></li>
+
-
<li><a href="#" accesskey="5" title="">Contact Us</a></li>
+
-
</ul>
+
-
</div>
+
-
</div>
+
-
</div>
+
-
<div id="featured-wrapper">
+
-
<div id="featured" class="container">
+
-
<div class="box box1"><a href="#" class="image image-full"><img src="images/pic02.jpg" alt="" /></a></div>
+
-
<div class="box box2"><a href="#" class="image image-full"><img src="images/pic03.jpg" alt="" /></a></div>
+
-
<div class="box box3"><a href="#" class="image image-full"><img src="images/pic04.jpg" alt="" /></a></div>
+
-
<div class="box box4"><a href="#" class="image image-full"><img src="images/pic05.jpg" alt="" /></a></div>
+
-
<div class="box box5"><a href="#" class="image image-full"><img src="images/pic06.jpg" alt="" /></a></div>
+
-
<div class="box box6"><a href="#" class="image image-full"><img src="images/pic07.jpg" alt="" /></a></div>
+
-
</div>
+
-
</div>
+
-
<div id="page" class="container">
+
-
<div id="content">
+
-
<div class="title">
+
-
<h2>Integer sit amet aliquet</h2>
+
-
<span class="byline">Phasellus nec erat sit amet nibh pellentesque congue</span> </div>
+
-
<a class="image image-full"><img src="images/pic01.jpg" alt="" /></a>
+
-
<p>This is <strong>FlowerClusters</strong>, a free, fully standards-compliant CSS template designed by <a href="http://www.freecsstemplates.org/" rel="nofollow">FreeCSSTemplates.org</a>. The photos in this template are from <a href="http://fotogrph.com/"> Fotogrph</a>. This free template is released under a <a href="http://creativecommons.org/licenses/by/3.0/">Creative Commons Attributions 3.0</a> license, so you are pretty much free to do whatever you want with it (even use it commercially) provided you keep the links in the footer intact. Aside from that, have fun with it :) </p>
+
-
<p>Consectetuer adipiscing elit. Nam pede erat, porta eu, lobortis eget, tempus et, tellus. Etiam neque. Vivamus consequat lorem at nisl. Nullam non wisi a sem semper eleifend. Donec mattis libero eget urna. Duis pretium velit ac mauris. Proin eu wisi suscipit nulla suscipit interdum. Aenean lectus lorem, imperdiet at, ultrices eget, ornare et, wisi. Pellentesque adipiscing purus ac magna. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.  Nullam non wisi a sem semper eleifend. Donec mattis libero eget urna. Nullam non wisi a sem semper eleifend. Donec mattis libero eget urna. Consectetuer adipiscing elit. </p>
+
-
</div>
+
-
<div id="sidebar">
+
-
<div class="box1">
+
-
<div class="title">
+
-
<h2>Mauris vulputate</h2>
+
-
</div>
+
-
<ul class="style1">
+
-
<li><a href="#">Semper mod quis eget mi dolore</a></li>
+
-
<li><a href="#">Quam turpis feugiat sit dolor</a></li>
+
-
<li><a href="#">Amet ornare in hendrerit in lectus</a></li>
+
-
<li><a href="#">Consequat etiam lorem phasellus</a></li>
+
-
<li><a href="#">Amet turpis, feugiat et sit amet</a></li>
+
-
</ul>
+
-
</div>
+
-
<div class="box2">
+
-
<div class="title">
+
-
<h2>Integer gravida</h2>
+
-
</div>
+
-
<ul class="style1">
+
-
<li><a href="#">Amet turpis, feugiat et sit amet</a></li>
+
-
<li><a href="#">Ornare in hendrerit in lectus</a></li>
+
-
<li><a href="#">Semper mod quis eget mi dolore</a></li>
+
-
<li><a href="#">Quam turpis feugiat sit dolor</a></li>
+
-
<li><a href="#">Amet ornare in hendrerit in lectus</a></li>
+
-
<li><a href="#">Consequat etiam lorem phasellus</a></li>
+
-
</ul>
+
-
</div>
+
-
</div>
+
-
</div>
+
-
<div id="footer-wrapper">
+
-
<div id="footer" class="container">
+
-
<div id="box1">
+
-
<div class="title">
+
-
<h2>Latest Post</h2>
+
-
</div>
+
-
<ul class="style1">
+
-
<li><a href="#">Semper mod quis eget mi dolore</a></li>
+
-
<li><a href="#">Quam turpis feugiat sit dolor</a></li>
+
-
<li><a href="#">Amet ornare in hendrerit in lectus</a></li>
+
-
<li><a href="#">Consequat etiam lorem phasellus</a></li>
+
-
<li><a href="#">Amet turpis, feugiat et sit amet</a></li>
+
-
<li><a href="#">Semper mod quisturpis nisi</a></li>
+
-
</ul>
+
-
</div>
+
-
<div id="box2">
+
-
<div class="title">
+
-
<h2>Popular Links</h2>
+
-
</div>
+
-
<ul class="style1">
+
-
<li><a href="#">Semper mod quis eget mi dolore</a></li>
+
-
<li><a href="#">Quam turpis feugiat sit dolor</a></li>
+
-
<li><a href="#">Amet ornare in hendrerit in lectus</a></li>
+
-
<li><a href="#">Consequat etiam lorem phasellus</a></li>
+
-
<li><a href="#">Amet turpis, feugiat et sit amet</a></li>
+
-
<li><a href="#">Semper mod quisturpis nisi</a></li>
+
-
</ul>
+
-
</div>
+
-
<div id="box3">
+
-
<div class="title">
+
-
<h2>Follow Us</h2>
+
-
</div>
+
-
<ul class="contact">
+
-
<li><a href="#" class="icon icon-twitter"><span>Twitter</span></a></li>
+
-
<li><a href="#" class="icon icon-facebook"><span>Facebook</span></a></li>
+
-
<li><a href="#" class="icon icon-dribbble"><span>Dribbble</span></a></li>
+
-
<li><a href="#" class="icon icon-tumblr"><span>Tumblr</span></a></li>
+
-
<li><a href="#" class="icon icon-rss"><span>Pinterest</span></a></li>
+
-
</ul>
+
-
</div>
+
-
</div>
+
-
</div>
+
-
<div id="copyright" class="container">
+
-
<p>Copyright (c) 2013 Sitename.com. All rights reserved. | Photos by <a href="http://fotogrph.com/">Fotogrph</a> | Design by <a href="http://www.freecsstemplates.org/" rel="nofollow">FreeCSSTemplates.org</a>.</p>
+
-
</div>
+
-
</body>
+
-
</html>
+
 +
strong {
 +
}
-
<style type="text/css" media="screen">
+
a {
-
html, body
+
color: #0000FF;
-
{
+
}
-
height: 100%;
+
-
}
+
-
+
-
body
+
-
{
+
-
margin: 0px;
+
-
padding: 0px;
+
-
background: #FFF;
+
-
font-family: 'Source Sans Pro', sans-serif;
+
-
font-size: 12pt;
+
-
font-weight: 400;
+
-
color: #4C4C4C;
+
-
}
+
-
+
-
+
-
h1, h2, h3
+
-
{
+
-
margin: 0;
+
-
padding: 0;
+
-
}
+
-
+
-
p, ol, ul
+
-
{
+
-
margin-top: 0;
+
-
}
+
-
+
-
ol, ul
+
-
{
+
-
padding: 0;
+
-
list-style: none;
+
-
}
+
-
+
-
p
+
-
{
+
-
line-height: 180%;
+
-
}
+
-
+
-
strong
+
-
{
+
-
}
+
-
+
-
a
+
-
{
+
-
color: #A41F1F;
+
-
}
+
-
+
-
a:hover
+
-
{
+
-
text-decoration: none;
+
-
}
+
-
+
-
.container
+
-
{
+
-
width: 1200px;
+
-
margin: 0 auto;
+
-
}
+
-
+
-
/*********************************************************************************/
+
-
/* Image Style                                                                  */
+
-
/*********************************************************************************/
+
-
.image
+
a:hover {
-
{
+
text-decoration: none;
-
display: inline-block;
+
color: #FFF;
-
}
+
}
-
+
-
.image img
+
-
{
+
-
display: block;
+
-
width: 100%;
+
-
}
+
-
+
-
.image-full
+
-
{
+
-
display: block;
+
-
width: 100%;
+
-
margin: 0 0 0 0;
+
-
}
+
-
+
-
.image-left
+
-
{
+
-
float: left;
+
-
margin: 0 2em 2em 0;
+
-
}
+
-
+
-
.image-centered
+
-
{
+
-
display: block;
+
-
margin: 0 0 2em 0;
+
-
}
+
-
+
-
.image-centered img
+
-
{
+
-
margin: 0 auto;
+
-
width: auto;
+
-
}
+
-
/*********************************************************************************/
+
a img {
-
/* List Styles                                                                  */
+
border: none;
-
/*********************************************************************************/
+
}
-
ul.style1
+
img.border {
-
{
+
}
-
margin: 0;
+
-
padding: 0;
+
-
list-style: none;
+
-
}
+
-
+
-
ul.style1 li
+
-
{
+
-
border-top: solid 1px #E5E5E5;
+
-
padding: 0.80em 0;
+
-
}
+
-
+
-
ul.style1 li:first-child
+
-
{
+
-
border-top: 0;
+
-
padding-top: 0;
+
-
}
+
 +
img.alignleft {
 +
float: left;
 +
}
-
/*********************************************************************************/
+
img.alignright {
-
/* Social Icon Styles                                                            */
+
float: right;
-
/*********************************************************************************/
+
}
-
ul.contact
+
img.aligncenter {
-
{
+
margin: 0px auto;
-
margin: 0;
+
}
-
padding: 0em 0em 0em 0em;
+
-
list-style: none;
+
-
}
+
-
+
-
ul.contact li
+
-
{
+
-
padding: 0em 0.30em 0.8em 0em;
+
-
font-size: 1em;
+
-
}
+
-
+
-
ul.contact li span
+
-
{
+
-
margin: 0;
+
-
padding: 0;
+
-
}
+
-
+
-
ul.contact li a
+
-
{
+
-
letter-spacing: 0.20em;
+
-
text-transform: uppercase;
+
-
font-size: 0.90em;
+
-
color: #FFF;
+
-
}
+
-
+
-
ul.contact li a:before
+
-
{
+
-
display: inline-block;
+
-
background: #3f3f3f;
+
-
width: 40px;
+
-
height: 40px;
+
-
margin-right: 1em;
+
-
line-height: 40px;
+
-
border-radius: 20px;
+
-
text-align: center;
+
-
color: #FFFFFF;
+
-
}
+
-
+
-
ul.contact li a.icon-twitter:before { background: #2DAAE4; }
+
-
ul.contact li a.icon-facebook:before { background: #39599F; }
+
-
ul.contact li a.icon-dribbble:before { background: #C4376B; }
+
-
ul.contact li a.icon-tumblr:before { background: #31516A; }
+
-
ul.contact li a.icon-rss:before { background: #F2600B; }
+
-
/*********************************************************************************/
+
hr {
-
/* Button Style                                                                  */
+
display: none;
-
/*********************************************************************************/
+
}
-
.button
+
/** WRAPPER */
-
{
+
-
display: inline-block;
+
-
padding: 1em 3em 1em 2em;
+
-
letter-spacing: 0.20em;
+
-
text-decoration: none;
+
-
text-transform: uppercase;
+
-
font-weight: 400;
+
-
font-size: 0.90em;
+
-
color: #FFF;
+
-
}
+
-
+
-
.button:before
+
-
{
+
-
display: inline-block;
+
-
background: #FFC31F;
+
-
margin-right: 1em;
+
-
width: 40px;
+
-
height: 40px;
+
-
line-height: 40px;
+
-
border-radius: 20px;
+
-
text-align: center;
+
-
color: #272925;
+
-
}
+
-
+
-
/*********************************************************************************/
+
-
/* Heading Titles                                                                */
+
-
/*********************************************************************************/
+
-
.title
+
#wrapper {
-
{
+
}
-
position: relative;
+
-
margin-bottom: 3em;
+
-
padding-bottom: 2em;
+
-
text-transform: uppercase;
+
-
border-bottom: 2px solid #CCC;
+
-
}
+
-
.title:after
+
.container {
-
{
+
width: 1000px;
-
display: block;
+
margin: 0px auto;
-
content: " ";
+
}
-
position: absolute;
+
-
bottom: -2px;
+
-
width: 2em;
+
-
border-bottom: 2px solid #e10126;
+
-
left: 0;
+
-
}
+
-
+
-
.title h2
+
-
{
+
-
letter-spacing: 0.20em;
+
-
font-weight: 700;
+
-
font-size: 2em;
+
-
color: #171717;
+
-
}
+
-
+
-
.title .byline
+
-
{
+
-
display: block;
+
-
letter-spacing: 0.15em;
+
-
text-transform: uppercase;
+
-
font-weight: 400;
+
-
font-size: 0.90em;
+
-
color: #6F6F6F;
+
-
}
+
-
/*********************************************************************************/
+
.clearfix {
-
/* Header                                                                        */
+
clear: both;
-
/*********************************************************************************/
+
}
-
+
-
#header-wrapper
+
-
{
+
-
background: #e10126;
+
-
box-shadow: inset 0 -15px 10px -10px rgba(0,0,0,.2);
+
-
}
+
-
#header
+
/** HEADER */
-
{
+
-
position: relative;
+
-
height: 150px;
+
-
}
+
-
/*********************************************************************************/
+
#header {
-
/* Logo                                                                          */
+
overflow: hidden;
-
/*********************************************************************************/
+
width: 900px;
 +
height: 150px;
 +
padding: 0px 50px;
 +
background: url(images/gradient-bg.png) no-repeat center top;
 +
}
-
#logo
+
/** LOGO */
-
{
+
-
position: absolute;
+
-
top: 3em;
+
-
left: 0;
+
-
width: 100%;
+
-
}
+
-
+
-
#logo h1
+
-
{
+
-
display: inline-block;
+
-
font-size: 2.5em;
+
-
text-transform: uppercase;
+
-
font-weight: 700;
+
-
color: #FFF;
+
-
}
+
-
+
-
#logo a
+
-
{
+
-
text-decoration: none;
+
-
color: #FFF;
+
-
}
+
-
/*********************************************************************************/
+
#logo {
-
/* Menu                                                                          */
+
float: left;
-
/*********************************************************************************/
+
width: 300px;
 +
height: 150px;
 +
}
-
#menu
+
#logo h1, #logo p {
-
{
+
margin: 0px;
-
position: absolute;
+
line-height: normal;
-
right: 0;
+
}
-
top: 3em;
+
-
}
+
-
+
-
#menu ul
+
-
{
+
-
display: inline-block;
+
-
}
+
-
+
-
#menu li
+
-
{
+
-
display: block;
+
-
float: left;
+
-
text-align: center;
+
-
}
+
-
+
-
#menu li a, #menu li span
+
-
{
+
-
display: block;
+
-
padding: 0.80em 1.5em;
+
-
letter-spacing: 0.20em;
+
-
text-decoration: none;
+
-
font-size: 0.90em;
+
-
font-weight: 600;
+
-
text-transform: uppercase;
+
-
outline: 0;
+
-
color: #FFF;
+
-
}
+
-
+
-
#menu li:hover a, #menu li.active a, #menu li.active span
+
-
{
+
-
}
+
-
+
-
#menu .current_page_item a
+
-
{
+
-
color: #FFF;
+
-
}
+
-
/*********************************************************************************/
+
#logo h1 a {
-
/* Banner                                                                        */
+
display: block;
-
/*********************************************************************************/
+
line-height: 150px;
 +
text-transform: uppercase;
 +
text-decoration: none;
 +
font-family: 'Archivo Narrow', sans-serif;
 +
font-size: 1.3em;
 +
color: #FFFFFF;
 +
}
-
#banner
+
/** MENU */
-
{
+
-
}
+
-
/*********************************************************************************/
+
#menu {
-
/* Page                                                                          */
+
float: right;
-
/*********************************************************************************/
+
width: 600px;
 +
height: 99px;
 +
}
-
#page
+
#menu ul {
-
{
+
float: right;
-
position: relative;
+
margin: 0px;
-
overflow: hidden;
+
padding: 60px 0px 0px 0px;
-
padding: 6em 0em 5em 0em;
+
list-style: none;
-
}
+
line-height: normal;
 +
}
-
/*********************************************************************************/
+
#menu li {
-
/* Content                                                                      */
+
float: left;
-
/*********************************************************************************/
+
margin-left: 2em;
 +
color: #FFF;
 +
}
-
#content
+
#menu a {
-
{
+
display: block;
-
float: right;
+
padding: 10px 15px;
-
width: 790px;
+
letter-spacing: 2px;
-
}
+
text-decoration: none;
-
+
text-transform: uppercase;
-
#content .image-full
+
font-family: 'Archivo Narrow', sans-serif;
-
{
+
font-size: 1.10em;
-
margin-bottom: 3em;
+
font-weight: 600;
-
}
+
color: #B6B6B6;
 +
}
-
/*********************************************************************************/
+
#menu .active a
-
/* Sidebar                                                                      */
+
{
-
/*********************************************************************************/
+
background: #F00;
 +
border-radius: 5px;
 +
color: #FFFFFF;
 +
}
-
#sidebar
+
#menu a:hover {
-
{
+
text-decoration: underline;
-
float: left;
+
color: #FF0000;
-
width: 345px;
+
}
-
}
+
-
+
-
#sidebar .title h2
+
-
{
+
-
font-size: 1.6em;
+
-
}
+
-
+
-
#sidebar .box1
+
-
{
+
-
margin-bottom: 3em;
+
-
}
+
-
/*********************************************************************************/
+
/** PAGE */
-
/* Footer                                                                        */
+
-
/*********************************************************************************/
+
-
+
-
#footer-wrapper
+
-
{
+
-
overflow: hidden;
+
-
padding: 5em 0em;
+
-
background: #1E1B1A;
+
-
}
+
-
#footer
+
#page {
-
{
+
overflow: hidden;
-
}
+
width: 900px;
-
+
padding: 70px 50px 50px 50px;
-
#footer .title h2
+
background-color: #FFFFFF;
-
{
+
border-radius: 10px 10px 0px 0px;
-
font-weight: 400;
+
}
-
font-size: 1.2em;
+
-
color: #FFF;
+
-
}
+
-
#footer .title
+
#page h2
-
{
+
{
-
border-color: #2D2926 !important;
+
margin-bottom: 30px;
-
}
+
font-size: 16px;
-
+
text-align: center;
-
#footer .style1 li
+
}
-
{
+
-
border-color: #2D2926 !important;
+
-
}
+
-
+
-
#footer .style1 a
+
-
{
+
-
letter-spacing: 0.10em;
+
-
text-decoration: none;
+
-
font-size:1em;
+
-
color: #B1B1B1;
+
-
}
+
-
+
-
#box1
+
-
{
+
-
float: left;
+
-
width: 354px;
+
-
margin-right: 24px;
+
-
padding-right: 30px;
+
-
}
+
-
+
-
#box2
+
-
{
+
-
float: left;
+
-
width: 354px;
+
-
margin-left: 24px;
+
-
padding-right: 30px;
+
-
}
+
-
+
-
#box3
+
-
{
+
-
float: right;
+
-
width: 344px;
+
-
padding-left: 40px;
+
-
}
+
-
/*********************************************************************************/
+
/** CONTENT */
-
/* Copyright                                                                    */
+
-
/*********************************************************************************/
+
-
#copyright
+
#content {
-
{
+
float: right;
-
overflow: hidden;
+
width: 580px;
-
padding: 5em 0em;
+
}
-
}
+
-
+
-
#copyright p
+
-
{
+
-
letter-spacing: 0.20em;
+
-
text-align: center;
+
-
text-transform: uppercase;
+
-
font-size: 0.80em;
+
-
color: #6F6F6F;
+
-
}
+
-
+
-
#copyright a
+
-
{
+
-
text-decoration: none;
+
-
color: #8C8C8C;
+
-
}
+
-
/*********************************************************************************/
+
#content #onecolumn
-
/* Featured                                                                      */
+
{
-
/*********************************************************************************/
+
padding-bottom: 30px;
 +
border-bottom: 1px solid #D4D4D4;
 +
}
-
#featured-wrapper
+
#content h2
-
{
+
{
-
overflow: hidden;
+
letter-spacing: -1px;
-
padding: 3em 0em;
+
font-size: 3em;
-
background: #1E1B1A;
+
}
-
}
+
-
+
-
#featured
+
-
{
+
-
overflow: hidden;
+
-
}
+
-
+
-
#featured .box
+
-
{
+
-
overflow: hidden;
+
-
width: 160px;
+
-
padding: 10px;
+
-
background: #FFF;
+
-
}
+
-
+
-
#feaured .box .image-full
+
-
{
+
-
margin-bottom: 0 !important;
+
-
}
+
-
+
-
#featured .box1,
+
-
#featured .box2,
+
-
#featured .box3,
+
-
#featured .box4
+
-
{
+
-
float: left;
+
-
margin-right: 24px;
+
-
}
+
-
#featured .box5
+
/** SIDEBAR */
-
{
+
-
float: left;
+
-
}
+
-
#featured .box6
+
#sidebar {
-
{
+
float: left;
-
float: right;
+
width: 260px;
-
}
+
padding-top: 10px;
-
</style>
+
}
 +
 
 +
#sidebar #sbox1
 +
{
 +
margin-bottom: 40px;
 +
}
 +
 
 +
#sidebar #sbox2
 +
{
 +
overflow: hidden;
 +
margin-bottom: 50px;
 +
}
 +
 
 +
#sidebar #sbox3
 +
{
 +
overflow: hidden;
 +
text-align: center;
 +
}
 +
/** BANNER */
 +
 
 +
#banner {
 +
overflow: hidden;
 +
padding: 50px 0px 0px 0px;
 +
background: #A11C47 url(images/banner-bg.png) repeat;
 +
border-radius: 10px 10px 0px 0px;
 +
}
 +
 
 +
#banner:before
 +
{
 +
content: '';
 +
width: 100%;
 +
height: 100%;
 +
display: block;
 +
position: absolute;
 +
background: url('images/gradient-bg.png') no-repeat right top;
 +
background-size: 100% 100%;
 +
top: 0px;
 +
right: 0px;
 +
}
 +
 
 +
 
 +
/* Footer */
 +
 
 +
#footer {
 +
overflow: hidden;
 +
width: 900px;
 +
padding: 70px 50px 50px 50px;
 +
background-color: #161616;
 +
border-top: 6px solid #000000;
 +
border-radius: 0px 0px 10px 10px;
 +
}
 +
 
 +
#footer h2
 +
{
 +
padding: 0px 0px 50px 0px;
 +
font-weight: 400;
 +
color: #D3D3D3;
 +
}
 +
 
 +
#footer p {
 +
color: #4E4E4E;
 +
}
 +
 
 +
#footer #fbox1 {
 +
float: left;
 +
width: 260px;
 +
margin-right: 60px;
 +
}
 +
 
 +
#footer #fbox2 {
 +
float: left;
 +
width: 260px;
 +
}
 +
 
 +
#footer #fbox3 {
 +
float: right;
 +
width: 260px;
 +
}
 +
 
 +
#copyright
 +
{
 +
overflow: hidden;
 +
width: 900px;
 +
padding: 50px;
 +
}
 +
 
 +
#copyright p
 +
{
 +
text-align: center;
 +
text-shadow: 1px 1px 1px rgba(0,0,0,1);
 +
font-weight: bold;
 +
font-size: larger;
 +
color: #FFFFFF;
 +
}
 +
 
 +
#copyright a
 +
{
 +
color: #4E4E4E;
 +
}
 +
 
 +
 
 +
ul.style1
 +
{
 +
margin: 0px;
 +
padding: 0px;
 +
list-style: none;
 +
}
 +
 
 +
ul.style1 li
 +
{
 +
padding: 10px 0px 20px 0px;
 +
border-top: 1px solid #242424;
 +
}
 +
 
 +
ul.style1 a
 +
{
 +
color: #4E4E4E;
 +
}
 +
 
 +
ul.style1 .first
 +
{
 +
padding-top: 0px;
 +
border-top: none;
 +
}
 +
 
 +
ul.style2
 +
{
 +
margin: 30px 0px 0px 0px;
 +
padding: 0px;
 +
list-style: none;
 +
}
 +
 
 +
ul.style2 li
 +
{
 +
float: left;
 +
margin-right: 10px;
 +
}
 +
 
 +
ul.style3
 +
{
 +
margin: 0px;
 +
padding: 0px;
 +
list-style: none;
 +
}
 +
 
 +
ul.style3 li
 +
{
 +
padding: 10px 0px 20px 0px;
 +
border-top: 1px solid #E0E0E0;
 +
}
 +
 
 +
ul.style3 a
 +
{
 +
color: #4E4E4E;
 +
}
 +
 
 +
ul.style3 .first
 +
{
 +
padding-top: 0px;
 +
border-top: none;
 +
}
 +
/** Slider */
 +
 
 +
#slider
 +
{
 +
overflow: hidden;
 +
margin: 0 auto;
 +
position: relative;
 +
}
 +
 
 +
#slider .button
 +
{
 +
display: inline-block;
 +
background: #0074C6;
 +
color: #ffffff;
 +
text-align: center;
 +
line-height: 50px;
 +
height: 50px;
 +
text-decoration: none;
 +
outline: 0;
 +
border-radius: 8px;
 +
font-size: 1.25em;
 +
border-bottom: solid 2px #0054A6;
 +
text-shadow: 0 1px 1px #003A6C;
 +
}
 +
 
 +
#slider .button:hover
 +
{
 +
background: #2094E6;
 +
}
 +
 
 +
#slider .viewer
 +
{
 +
width: 900px;
 +
height: 400px;
 +
margin: 0 auto 50px auto;
 +
overflow: hidden;
 +
}
 +
 
 +
#slider .viewer .reel
 +
{
 +
display: none;
 +
}
 +
 
 +
#slider .viewer .reel .slide
 +
{
 +
position: relative;
 +
width: 900px;
 +
height: 500px;
 +
}
 +
 
 +
#slider .viewer .reel h2
 +
{
 +
position: absolute;
 +
top: 230px;
 +
left: 0;
 +
padding: 0px 30px;
 +
line-height: 80px;
 +
background: #111111;
 +
text-align: center;
 +
opacity: 0.75;
 +
font-weight: normal;
 +
font-family: 'Archivo Narrow', sans-serif;
 +
color: #ffffff;
 +
font-size: 4.50em;
 +
}
 +
 
 +
#slider .viewer .reel p
 +
{
 +
position: absolute;
 +
top: 310px;
 +
left: 0;
 +
display: block;
 +
padding: 5px 35px;
 +
background: #0074C6;
 +
text-align: center;
 +
opacity: 0.75;
 +
font-family: 'Archivo Narrow', sans-serif;
 +
font-weight: normal;
 +
color: #ffffff;
 +
font-size: 2.00em;
 +
}
 +
 
 +
#slider .indicator
 +
{
 +
padding: 30px 0px;
 +
background-color: #7A0C30;
 +
margin: 0 auto 0 auto;
 +
}
 +
 
 +
#slider .indicator ul
 +
{
 +
list-style: none;
 +
padding: 0;
 +
margin: 0;
 +
text-align: center;
 +
}
 +
 
 +
#slider .indicator ul li
 +
{
 +
display: inline-block;
 +
width: 12px;
 +
height: 12px;
 +
text-indent: -9999em;
 +
background: #970D39;
 +
margin: 0 2px 0 2px;
 +
border-radius: 8px;
 +
}
 +
 
 +
#slider .indicator ul li.active
 +
{
 +
background: #C4164E;
 +
}
 +
 
 +
#two-column
 +
{
 +
padding-top: 50px;
 +
}
 +
 
 +
.box-content
 +
{
 +
overflow: hidden;
 +
margin-bottom: 4em;
 +
}
 +
 
 +
.box-content p
 +
{
 +
padding-left: 60px;
 +
}
 +
 
 +
.title
 +
{
 +
display: block;
 +
padding-left: 60px;
 +
padding-bottom: 1em;
 +
font-size: 1.70em !important;
 +
font-weight: 600;
 +
color: #333333;
 +
}
 +
 
 +
.title01
 +
{
 +
background: url(images/icon01.png) no-repeat left top;
 +
}
 +
 
 +
.title02
 +
{
 +
background: url(images/icon02.png) no-repeat left top;
 +
}
 +
 
 +
/* List Style 1 */
 +
 
 +
.list-style1 {
 +
margin: 0px;
 +
padding: 0px;
 +
list-style: none;
 +
}
 +
 
 +
.list-style1 li {
 +
padding: 20px 0px 20px 0px;
 +
border-top: 1px solid #D4D4D4;
 +
text-align: center;
 +
}
 +
 
 +
.list-style1 .date {
 +
font-weight: bold;
 +
color: #212121;
 +
}
 +
 
 +
.list-style1 img {
 +
float: left;
 +
margin-right: 25px;
 +
}
 +
 
 +
.list-style1 .first {
 +
padding-top: 0px;
 +
border-top: none;
 +
}
 +
 
 +
/* List Style 1 */
 +
 
 +
.link-style {
 +
display: inline-block;
 +
margin-top: 10px;
 +
padding: 5px 15px;
 +
background: #0091E6;
 +
border-radius: 5px;
 +
letter-spacing: 1px;
 +
text-decoration: none;
 +
text-transform: uppercase;
 +
color: #FFFFFF;
 +
}
 +
 
 +
 
 +
 
 +
 
 +
.testimonial
 +
{
 +
font-style: italic;
 +
color: #878787;
 +
}
 +
 
 +
.author
 +
{
 +
padding-top: 20px;
 +
font-style: italic;
 +
}
 +
 
 +
.author .name
 +
{
 +
display: block;
 +
padding: 5px 0px;
 +
font-size: 1.2em;
 +
font-weight: 700;
 +
font-style: normal;
 +
}
 +
 
 +
.author .position
 +
{
 +
display: block;
 +
padding: 5px 0px;
 +
}
 +
 
 +
.author img
 +
{
 +
float: left;
 +
margin-right: 30px;
 +
border-radius: 10px;
 +
border: 5px solid rgba(0,0,0,.1);
 +
}

Revision as of 08:50, 27 July 2013

<link rel="stylesheet" href="< YOUR PAGE HERE >?action=raw&ctype=text/css" type="text/css" /> html, body { height: 100%; }

body { margin: 0px; padding: 0px; background: #080808 url(images/main-bg.png) repeat; font-family: 'Open Sans', sans-serif; font-size: 13px; color: #2B2B2B; }


h1, h2, h3 { margin: 0; padding: 0; }

p, ol, ul { margin-top: 0px; }

p { line-height: 180%; }

strong { }

a { color: #0000FF; }

a:hover { text-decoration: none; color: #FFF; }

a img { border: none; }

img.border { }

img.alignleft { float: left; }

img.alignright { float: right; }

img.aligncenter { margin: 0px auto; }

hr { display: none; }

/** WRAPPER */

  1. wrapper {

}

.container { width: 1000px; margin: 0px auto; }

.clearfix { clear: both; }

/** HEADER */

  1. header {

overflow: hidden; width: 900px; height: 150px; padding: 0px 50px; background: url(images/gradient-bg.png) no-repeat center top; }

/** LOGO */

  1. logo {

float: left; width: 300px; height: 150px; }

  1. logo h1, #logo p {

margin: 0px; line-height: normal; }

  1. logo h1 a {

display: block; line-height: 150px; text-transform: uppercase; text-decoration: none; font-family: 'Archivo Narrow', sans-serif; font-size: 1.3em; color: #FFFFFF; }

/** MENU */

  1. menu {

float: right; width: 600px; height: 99px; }

  1. menu ul {

float: right; margin: 0px; padding: 60px 0px 0px 0px; list-style: none; line-height: normal; }

  1. menu li {

float: left; margin-left: 2em; color: #FFF; }

  1. menu a {

display: block; padding: 10px 15px; letter-spacing: 2px; text-decoration: none; text-transform: uppercase; font-family: 'Archivo Narrow', sans-serif; font-size: 1.10em; font-weight: 600; color: #B6B6B6; }

  1. menu .active a

{ background: #F00; border-radius: 5px; color: #FFFFFF; }

  1. menu a:hover {

text-decoration: underline; color: #FF0000; }

/** PAGE */

  1. page {

overflow: hidden; width: 900px; padding: 70px 50px 50px 50px; background-color: #FFFFFF; border-radius: 10px 10px 0px 0px; }

  1. page h2

{ margin-bottom: 30px; font-size: 16px; text-align: center; }

/** CONTENT */

  1. content {

float: right; width: 580px; }

  1. content #onecolumn

{ padding-bottom: 30px; border-bottom: 1px solid #D4D4D4; }

  1. content h2

{ letter-spacing: -1px; font-size: 3em; }

/** SIDEBAR */

  1. sidebar {

float: left; width: 260px; padding-top: 10px; }

  1. sidebar #sbox1

{ margin-bottom: 40px; }

  1. sidebar #sbox2

{ overflow: hidden; margin-bottom: 50px; }

  1. sidebar #sbox3

{ overflow: hidden; text-align: center; } /** BANNER */

  1. banner {

overflow: hidden; padding: 50px 0px 0px 0px; background: #A11C47 url(images/banner-bg.png) repeat; border-radius: 10px 10px 0px 0px; }

#banner:before { content: ; width: 100%; height: 100%; display: block; position: absolute; background: url('images/gradient-bg.png') no-repeat right top; background-size: 100% 100%; top: 0px; right: 0px; }


/* Footer */

  1. footer {

overflow: hidden; width: 900px; padding: 70px 50px 50px 50px; background-color: #161616; border-top: 6px solid #000000; border-radius: 0px 0px 10px 10px; }

  1. footer h2

{ padding: 0px 0px 50px 0px; font-weight: 400; color: #D3D3D3; }

  1. footer p {

color: #4E4E4E; }

  1. footer #fbox1 {

float: left; width: 260px; margin-right: 60px; }

  1. footer #fbox2 {

float: left; width: 260px; }

  1. footer #fbox3 {

float: right; width: 260px; }

  1. copyright

{ overflow: hidden; width: 900px; padding: 50px; }

  1. copyright p

{ text-align: center; text-shadow: 1px 1px 1px rgba(0,0,0,1); font-weight: bold; font-size: larger; color: #FFFFFF; }

  1. copyright a

{ color: #4E4E4E; }


ul.style1 { margin: 0px; padding: 0px; list-style: none; }

ul.style1 li { padding: 10px 0px 20px 0px; border-top: 1px solid #242424; }

ul.style1 a { color: #4E4E4E; }

ul.style1 .first { padding-top: 0px; border-top: none; }

ul.style2 { margin: 30px 0px 0px 0px; padding: 0px; list-style: none; }

ul.style2 li { float: left; margin-right: 10px; }

ul.style3 { margin: 0px; padding: 0px; list-style: none; }

ul.style3 li { padding: 10px 0px 20px 0px; border-top: 1px solid #E0E0E0; }

ul.style3 a { color: #4E4E4E; }

ul.style3 .first { padding-top: 0px; border-top: none; } /** Slider */

  1. slider

{ overflow: hidden; margin: 0 auto; position: relative; }

  1. slider .button

{ display: inline-block; background: #0074C6; color: #ffffff; text-align: center; line-height: 50px; height: 50px; text-decoration: none; outline: 0; border-radius: 8px; font-size: 1.25em; border-bottom: solid 2px #0054A6; text-shadow: 0 1px 1px #003A6C; }

  1. slider .button:hover

{ background: #2094E6; }

  1. slider .viewer

{ width: 900px; height: 400px; margin: 0 auto 50px auto; overflow: hidden; }

  1. slider .viewer .reel

{ display: none; }

  1. slider .viewer .reel .slide

{ position: relative; width: 900px; height: 500px; }

  1. slider .viewer .reel h2

{ position: absolute; top: 230px; left: 0; padding: 0px 30px; line-height: 80px; background: #111111; text-align: center; opacity: 0.75; font-weight: normal; font-family: 'Archivo Narrow', sans-serif; color: #ffffff; font-size: 4.50em; }

  1. slider .viewer .reel p

{ position: absolute; top: 310px; left: 0; display: block; padding: 5px 35px; background: #0074C6; text-align: center; opacity: 0.75; font-family: 'Archivo Narrow', sans-serif; font-weight: normal; color: #ffffff; font-size: 2.00em; }

  1. slider .indicator

{ padding: 30px 0px; background-color: #7A0C30; margin: 0 auto 0 auto; }

  1. slider .indicator ul

{ list-style: none; padding: 0; margin: 0; text-align: center; }

  1. slider .indicator ul li

{ display: inline-block; width: 12px; height: 12px; text-indent: -9999em; background: #970D39; margin: 0 2px 0 2px; border-radius: 8px; }

  1. slider .indicator ul li.active

{ background: #C4164E; }

  1. two-column

{ padding-top: 50px; }

.box-content { overflow: hidden; margin-bottom: 4em; }

.box-content p { padding-left: 60px; }

.title { display: block; padding-left: 60px; padding-bottom: 1em; font-size: 1.70em !important; font-weight: 600; color: #333333; }

.title01 { background: url(images/icon01.png) no-repeat left top; }

.title02 { background: url(images/icon02.png) no-repeat left top; }

/* List Style 1 */

.list-style1 { margin: 0px; padding: 0px; list-style: none; }

.list-style1 li { padding: 20px 0px 20px 0px; border-top: 1px solid #D4D4D4; text-align: center; }

.list-style1 .date { font-weight: bold; color: #212121; }

.list-style1 img { float: left; margin-right: 25px; }

.list-style1 .first { padding-top: 0px; border-top: none; }

/* List Style 1 */

.link-style { display: inline-block; margin-top: 10px; padding: 5px 15px; background: #0091E6; border-radius: 5px; letter-spacing: 1px; text-decoration: none; text-transform: uppercase; color: #FFFFFF; }



.testimonial { font-style: italic; color: #878787; }

.author { padding-top: 20px; font-style: italic; }

.author .name { display: block; padding: 5px 0px; font-size: 1.2em; font-weight: 700; font-style: normal; }

.author .position { display: block; padding: 5px 0px; }

.author img { float: left; margin-right: 30px; border-radius: 10px; border: 5px solid rgba(0,0,0,.1); }