Team:Glendale CC AZ/css.main

From 2013.igem.org

(Difference between revisions)
 
(One intermediate revision not shown)
Line 1: Line 1:
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<style>
<style>
-
body {
+
@charset "utf-8";
-
margin: 0;
+
#contentSub, #search-controls, #footer-box, .firstHeading, #catlinks, #p-logo {
-
background-color: #1d1d1d;
+
    display:none;}
-
font-family: Trebuchet MS;
+
#top-section {
-
max-width: 100%;
+
    border: none;
-
min-width: 100px;
+
    height: 0px;}
-
}
+
#content {
-
+
    border: none;}
-
#header {
+
-
background-color: #cc3333;
+
-
height: 55px;
+
-
box-shadow: inset 0px -3px 0px #663333;
+
-
padding: 0;
+
-
margin: 0;
+
-
}
+
-
#navtainer {
 
-
width: 100%;
 
-
position: relative;
 
-
padding: 0;
 
-
margin: 0;
 
-
}
 
-
#navtainer ul {
+
/* Removes "teams" from the menubar */
-
list-style-type: none;
+
#menubar > ul > li:last-child {
-
padding: 0;
+
    display: none;}
-
margin: 0;
+
/* Resizes the menubar to fik the links (default is 400px) */
-
height: 55px;
+
#menubar {
-
position: absolute;
+
    width: auto;}
-
right: 15%;
+
-
}
+
-
#navtainer ul li {
 
-
float: left;
 
-
height: 55px;
 
-
padding: 0;
 
-
margin: 0;
 
-
}
 
-
#navtainer ul li a {
+
body {
-
margin: 0;
+
    margin: 10px 0 0 0;
-
padding: 0 15px 0 15px;
+
    padding: 0;}
-
line-height: 55px;
+
#top-section {
-
text-decoration: none;
+
    width: 965px;
-
color: #fff;
+
    height: 0;
-
}
+
    margin: 0 auto;
 +
    padding: 0;
 +
    border: none;}
 +
#menubar {
 +
    font-size: 65%;
 +
    top: -14px;}
 +
.left-menu:hover {
 +
    background-color: transparent;}
 +
#menubar li a {
 +
    background-color: transparent;}
 +
#menubar:hover {
 +
    color: white;}
 +
#menubar li a {
 +
    color: transparent;}
 +
#menubar:hover li a {
 +
    color: white;}
 +
 
 +
body {
 +
margin:0;
 +
padding:0;
 +
width:100%;
 +
color:#5f5f5f;
 +
font:normal 12px/1.8em Arial, Helvetica, sans-serif;
 +
 
 +
}
 +
html, .main {
 +
padding:0;
 +
margin:0;
 +
background:#fff url(http://images.all-free-download.com/free-website-templates-preview/red_hive_template_849/images/header_bg.gif) repeat-x top;
 +
}
 +
.clr {
 +
clear:both;
 +
padding:0;
 +
margin:0;
 +
width:100%;
 +
font-size:0;
 +
line-height:0;
 +
}
 +
.logo {
 +
padding:80px 0 0 26px;
 +
float:left;
 +
width:auto;
 +
}
 +
h1 {
 +
margin:0;
 +
padding:16px 0;
 +
color:#717171;
 +
font:normal 32px/1.2em Arial, Helvetica, sans-serif;
 +
letter-spacing:-3px;
 +
text-transform:uppercase;
 +
}
 +
h1 a, h1 a:hover {
 +
color:#717171;
 +
text-decoration:none;
 +
}
 +
h1 span {
 +
color:#de484d;
 +
}
 +
h1 small {
 +
display:block;
 +
padding:0;
 +
font:normal 12px/1.2em Arial, Helvetica, sans-serif;
 +
letter-spacing:normal;
 +
}
 +
h2 {
 +
font:normal 24px Arial, Helvetica, sans-serif;
 +
padding:8px 0;
 +
margin:8px 0;
 +
color:#4f5452;
 +
}
 +
p {
 +
margin:8px 0;
 +
padding:0 0 8px 0;
 +
font:normal 12px/1.8em Arial, Helvetica, sans-serif;
 +
}
 +
a {
 +
color:#de484d;
 +
text-decoration:underline;
 +
}
 +
.header, .content, .menu_nav, .fbg, .footer, form, ol, ol li, ul, .content .mainbar, .content .sidebar {
 +
margin:0;
 +
padding:0;
 +
}
 +
.header {
 +
background:url(http://images.all-free-download.com/free-website-templates-preview/red_hive_template_849/images/image.jpg) no-repeat center top;
 +
height:180px;
 +
}
 +
.header_resize {
 +
margin:0 auto;
 +
padding:0;
 +
width:970px;
 +
}
 +
.menu_nav {
 +
margin:0;
 +
padding:136px 0 0;
 +
float:right;
 +
}
 +
.menu_nav ul {
 +
list-style:none;
 +
}
 +
.menu_nav ul li {
 +
margin:0;
 +
padding:0 16px 0 0;
 +
float:left;
 +
background:no-repeat right center;
 +
}
 +
.menu_nav ul li a {
 +
display:block;
 +
margin:0;
 +
padding:10px 30px 8px;
 +
color:#fff;
 +
text-decoration:none;
 +
font-size:13px;
 +
background-color:#621b1d;
 +
}
 +
.menu_nav ul li.active a, .menu_nav ul li a:hover {
 +
background:#f00 url(http://images.all-free-download.com/free-website-templates-preview/red_hive_template_849/images/menu_a.gif) repeat-x center;
 +
}
 +
.searchform {
 +
margin:0 0 8px 0;
 +
padding:16px 32px 60px 0;
 +
}
 +
#formsearch {
 +
margin:0;
 +
padding:0;
 +
}
 +
#formsearch span {
 +
display:block;
 +
margin:6px 0;
 +
padding:0 8px 0 11px !important;
 +
padding:0 4px 0 6px;
 +
float:right;
 +
width:183px;
 +
background:#fff url(http://images.all-free-download.com/free-website-templates-preview/red_hive_template_849/images/search.gif) no-repeat top left;
 +
}
 +
#formsearch input.editbox_search {
 +
margin:0;
 +
padding:5px 0;
 +
float:left;
 +
width:180px;
 +
height:20px;
 +
border:none;
 +
background:none;
 +
font:normal 13px/20px Arial, Helvetica, sans-serif;
 +
color:#a8acb2;
 +
}
 +
#formsearch input.button_search {
 +
margin:6px 0 0 0;
 +
padding:0;
 +
border:none;
 +
float:right;
 +
}
 +
.content {
 +
background:url(http://images.all-free-download.com/free-website-templates-preview/red_hive_template_849/images/content_bg.gif) repeat-x top;
 +
}
 +
.content_resize {
 +
margin:0 auto;
 +
padding:28px 0 0;
 +
width:970px;
 +
background:url(http://images.all-free-download.com/free-website-templates-preview/red_hive_template_849/images/content_rbg.jpg) no-repeat left top;
 +
}
 +
.content .mainbar {
 +
margin:0;
 +
padding:0;
 +
float:left;
 +
width:662px;
 +
}
 +
.content .mainbar img {
 +
padding:4px;
 +
border:1px solid #d2d5d4;
 +
}
 +
.content .mainbar img.fl {
 +
margin:4px 16px 4px 0;
 +
float:left;
 +
}
 +
.content .mainbar .article {
 +
margin:0 0 8px 0;
 +
padding:16px 24px 16px 40px;
 +
  height:500px
 +
}
 +
.content .sidebar {
 +
padding:0;
 +
float:right;
 +
width:300px;
 +
}
 +
.content .sidebar .gadget {
 +
margin:0 0 8px 0;
 +
padding:16px 16px 16px 40px;
 +
  height:413px;
 +
}
 +
ul.sb_menu, ul.ex_menu {
 +
margin:0;
 +
padding:0;
 +
list-style:none;
 +
color:#959595;
 +
}
 +
ul.sb_menu li, ul.ex_menu li {
 +
margin:0;
 +
}
 +
ul.sb_menu li {
 +
padding:4px 0 4px 12px;
 +
width:220px;
 +
}
 +
ul.ex_menu li {
 +
padding:4px 0 8px 12px;
 +
}
 +
ul.sb_menu li a, ul.ex_menu li a {
 +
color:#5f5f5f;
 +
text-decoration:none;
 +
margin-left:-12px;
 +
padding-left:12px;
 +
background:url(http://images.all-free-download.com/free-website-templates-preview/red_hive_template_849/images/li.gif) no-repeat left center;
 +
}
 +
ul.sb_menu li a:hover, ul.ex_menu li a:hover {
 +
color:#de484d;
 +
font-weight:bold;
 +
}
 +
ul.sb_menu li a:hover {
 +
text-decoration:underline;
 +
}
 +
ul.ex_menu li a:hover {
 +
text-decoration:none;
 +
}
 +
.content .mainbar .article, .content .sidebar .gadget, .fbg_resize, .searchform {
 +
border:2px solid #e3e3e3;
 +
background-color:#fff;
 +
border-radius:12px;
 +
-moz-border-radius:12px;
 +
-webkit-border-radius:12px;
 +
}
 +
.content .mainbar .comment {
 +
margin:0;
 +
padding:16px 0 0 0;
 +
}
 +
.content .mainbar .comment img.userpic {
 +
border:1px solid #dedede;
 +
margin:10px 16px 0 0;
 +
padding:0;
 +
float:left;
 +
}
 +
.fbg_resize {
 +
margin:0 auto;
 +
padding:24px 40px;
 +
width:886px;
 +
}
 +
.fbg img {
 +
padding:4px;
 +
border:1px solid #d2d5d4;
 +
}
 +
.fbg .col {
 +
margin:0;
 +
float:left;
 +
}
 +
.fbg .c1 {
 +
padding:0 16px 0 0;
 +
width:262px;
 +
}
 +
.fbg .c2 {
 +
padding:0 16px;
 +
width:280px;
 +
}
 +
.fbg .c3 {
 +
padding:0 0 0 16px;
 +
width:280px;
 +
}
 +
.fbg .c1 img {
 +
margin:8px;
 +
}
 +
.fbg .c3 img {
 +
margin:8px 16px 4px 0;
 +
float:left;
 +
}
 +
.footer_resize {
 +
margin:0 auto;
 +
padding:24px 40px;
 +
width:890px;
 +
}
 +
.footer p {
 +
margin:0;
 +
padding:4px 0;
 +
}
 +
.footer a {
 +
color:#5f5f5f;
 +
text-decoration:underline;
 +
}
 +
.footer a:hover {
 +
text-decoration:none;
 +
}
 +
.footer .lf {
 +
float:left;
 +
}
 +
.footer .rf {
 +
float:right;
 +
}
 +
ul.fmenu li a:hover, ul.fmenu li.active a {
 +
background:url(http://images.all-free-download.com/free-website-templates-preview/red_hive_template_849/images/menu_a.gif) repeat-x top;
 +
color:#fff;
 +
}
 +
ul.fmenu li a:hover {
 +
text-decoration:underline;
 +
}
 +
ol {
 +
list-style:none;
 +
}
 +
ol li {
 +
display:block;
 +
clear:both;
 +
}
 +
ol li label {
 +
display:block;
 +
margin:0;
 +
padding:16px 0 0 0;
 +
}
 +
ol li input.text {
 +
width:480px;
 +
border:1px solid #c0c0c0;
 +
margin:2px 0;
 +
padding:5px 2px;
 +
height:16px;
 +
background:#fff;
 +
}
 +
ol li textarea {
 +
width:480px;
 +
border:1px solid #c0c0c0;
 +
margin:2px 0;
 +
padding:2px;
 +
background:#fff;
 +
}
 +
ol li .send {
 +
margin:16px 0 0 0;
 +
}
</style>
</style>
<head>
<head>
Line 54: Line 363:
<body>
<body>
-
<div id="header">
+
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
-
<div id="navtainer">
+
<html xmlns="http://www.w3.org/1999/xhtml">
-
<ul>
+
  <head>
-
<li><a href="http://www.igem.org">home</a></li>
+
      <title>RedHive</title>
-
<li><a href="#">about</a></li>
+
      <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
-
<li><a href="#">services</a></li>
+
  </head>
-
<li><a href="#">portfolio</a></li>
+
  <body>
-
<li><a href="#">blog</a></li>
+
      <div class="main">
-
<li><a href="#">contact</a></li>
+
        <div class="header">
-
</ul>
+
            <div class="header_resize">
-
</div>
+
              <div class="logo">
-
</div>
+
                  <h1><a href="index.html"><span>iGEM </span>2013 <small> Glendale Community College</small></a></h1>
-
 
+
              </div>
-
</body>
+
              <div class="menu_nav">
-
<script>
+
                  <ul>
-
//binding click event on li elements to having good active element
+
                    <li class="active"><a href="index.html">Home</a></li>
-
$("li").click(function(){
+
                    <li><a href="support.html"><strong>Get a Quote</strong></a></li>
-
  $("li").removeAttr("class");
+
                    <li><a href="about.html">About Us</a></li>
-
  $(this).addClass("active");
+
                    <li><a href="contact.html">Contact Us</a></li>
-
});
+
                  </ul>
-
</script>
+
              </div>
 +
              <div class="clr"></div>
 +
            </div>
 +
        </div>
 +
        <div class="content">
 +
            <div class="content_resize">
 +
              <div class="mainbar">
 +
                  <div class="article">
 +
                    <h2><span>Lorem Ipsum</span></h2>
 +
                    <div class="clr"></div>
 +
                    <img src="http://images.all-free-download.com/free-website-templates-preview/red_hive_template_849/images/img1.jpg" width="263" height="146" alt="" class="fl" />
 +
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam eget lorem id purus vulputate dignissim. Vivamus gravida ullamcorper condimentum. Aenean porttitor bibendum ligula eget pharetra. Quisque ut nibh vel tellus volutpat placerat. Sed tincidunt massa tempus risus eleifend et fermentum urna lacinia. Aliquam erat eros, facilisis at rutrum non, mollis eget ligula. Etiam sagittis, arcu at fermentum egestas, mauris felis viverra lectus, varius pretium risus elit in lorem. Donec rhoncus risus id purus commodo sed rutrum justo euismod. Integer in erat quis nibh elementum pharetra. Integer ut mattis erat. Aenean sit amet libero mauris, vel vulputate leo. Sed vitae purus vestibulum sapien ultrices cursus. Nullam lacus quam, pretium sed convallis sit amet, convallis at magna.
 +
</p>
 +
                    <p>Etiam sed enim vehicula neque condimentum adipiscing. In sapien lectus, aliquam quis pharetra vehicula, tempor sed dui. Curabitur pretium, dui vitae dignissim suscipit, leo mi adipiscing ante, vel sollicitudin elit dui et erat. Maecenas porttitor porttitor nisl, sed consectetur libero tincidunt et. Praesent lobortis, erat et commodo molestie, nisi nulla fermentum turpis, eget faucibus nibh diam consectetur enim. Aenean laoreet aliquam sapien sit amet feugiat. Aliquam tempor turpis a justo iaculis sodales. Sed et lacus quis nisl convallis laoreet. Donec ut risus lacus, vitae fermentum orci.</p>
 +
                    <p class="spec"><a href="#" class="rm">Read more</a> <a href="#" class="com">Comments (3)</a></p>
 +
                  </div>
 +
                 
 +
              </div>
 +
              <div class="sidebar">
 +
                  <div class="searchform">
 +
                    <form id="formsearch" name="formsearch" method="post" action="#">
 +
                        <input name="button_search" src="http://images.all-free-download.com/free-website-templates-preview/red_hive_template_849/images/search_btn.gif" class="button_search" type="image" />
 +
                        <span>
 +
                        <input name="editbox_search" class="editbox_search" id="editbox_search" maxlength="80" value="Search" type="text" />
 +
                        </span>
 +
                    </form>
 +
                  </div>
 +
                  <div class="gadget">
 +
                    <h2 class="star"><span>Sidebar</span> Menu</h2>
 +
                    <div class="clr"></div>
 +
                    <ul class="sb_menu">
 +
                        <li><a href="#">Home</a></li>
 +
                        <li><a href="#">TemplateInfo</a></li>
 +
                        <li><a href="#">Style Demo</a></li>
 +
                        <li><a href="#">Blog</a></li>
 +
                        <li><a href="#">Archives</a></li>
 +
                    </ul>
 +
                  </div>
 +
                 
 +
              </div>
 +
              <div class="clr"></div>
 +
            </div>
 +
        </div>
 +
       
 +
        </div>
 +
        <div class="footer">
 +
            <div class="footer_resize">
 +
             
 +
              <div class="clr"></div>
 +
            </div>
 +
        </div>
 +
      </div>
 +
  </body>
</html>
</html>

Latest revision as of 07:36, 12 August 2013

Test RedHive

Lorem Ipsum

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam eget lorem id purus vulputate dignissim. Vivamus gravida ullamcorper condimentum. Aenean porttitor bibendum ligula eget pharetra. Quisque ut nibh vel tellus volutpat placerat. Sed tincidunt massa tempus risus eleifend et fermentum urna lacinia. Aliquam erat eros, facilisis at rutrum non, mollis eget ligula. Etiam sagittis, arcu at fermentum egestas, mauris felis viverra lectus, varius pretium risus elit in lorem. Donec rhoncus risus id purus commodo sed rutrum justo euismod. Integer in erat quis nibh elementum pharetra. Integer ut mattis erat. Aenean sit amet libero mauris, vel vulputate leo. Sed vitae purus vestibulum sapien ultrices cursus. Nullam lacus quam, pretium sed convallis sit amet, convallis at magna.

Etiam sed enim vehicula neque condimentum adipiscing. In sapien lectus, aliquam quis pharetra vehicula, tempor sed dui. Curabitur pretium, dui vitae dignissim suscipit, leo mi adipiscing ante, vel sollicitudin elit dui et erat. Maecenas porttitor porttitor nisl, sed consectetur libero tincidunt et. Praesent lobortis, erat et commodo molestie, nisi nulla fermentum turpis, eget faucibus nibh diam consectetur enim. Aenean laoreet aliquam sapien sit amet feugiat. Aliquam tempor turpis a justo iaculis sodales. Sed et lacus quis nisl convallis laoreet. Donec ut risus lacus, vitae fermentum orci.

Read more Comments (3)

Sidebar Menu

Retrieved from "http://2013.igem.org/Team:Glendale_CC_AZ/css.main"