Skip to content

Instantly share code, notes, and snippets.

@nauris-m

nauris-m/index.html

Created June 11, 2013 10:12
Show Gist options
  • Save nauris-m/5755826 to your computer and use it in GitHub Desktop.
Save nauris-m/5755826 to your computer and use it in GitHub Desktop.
Download ZIP
Simple Responsive HTML Theme
Raw
index.html
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="utf-8" />
<meta name="author" content="Script Tutorials" />
<title>Neat and modern design - responsive - lesson 3 | Script Tutorials</title>
<meta http-equiv="X-UA-Compatible" content="IE=Edge" />
<meta content="width=device-width, initial-scale=1" name="viewport" />
<!-- add styles -->
<link href="css/main.css" rel="stylesheet" type="text/css" />
<link href="css/responsive.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="header">
<!-- logo -->
<a href="#" id="logo"><img src="images/logo.png"></a>
<!-- extra top links -->
<div id="links">
<a href="#">About us</a>
<a href="#">Help</a>
<a href="#">Contact Us</a>
</div>
<!-- navigation menu -->
<div id="navmenu">
<nav id="menu">
<input type="checkbox" id="menu_check">
<label for="menu_check" onclick>&nbsp;</label>
<ul>
<li class="active"><a href="index.php">Home</a>
<ul>
<li><a href="#"><span class="icon elem1"></span>Facebook</a></li>
<li><a href="#"><span class="icon elem2"></span>Google</a></li>
<li><a href="#"><span class="icon elem3"></span>RSS</a></li>
<li><a href="#"><span class="icon elem4"></span>Skype</a></li>
<li><a href="#"><span class="icon elem5"></span>Stumbleupon</a></li>
</ul>
</li>
<li><a href="#">Faces</a>
<ul>
<li><a href="#"><span class="icon elem0"></span>menu element 1</a></li>
<li><a href="#"><span class="icon elem0"></span>menu element 2</a></li>
<li><a href="#"><span class="icon elem0"></span>menu element 3</a></li>
<li><a href="#"><span class="icon elem0"></span>menu element 4</a></li>
<li><a href="#"><span class="icon elem0"></span>menu element 5</a></li>
</ul>
</li>
<li><a href="#">Clubs</a>
<ul>
<li><a href="#"><span class="icon elem0"></span>menu element 1</a></li>
<li><a href="#"><span class="icon elem0"></span>menu element 2</a></li>
<li><a href="#"><span class="icon elem0"></span>menu element 3</a></li>
<li><a href="#"><span class="icon elem0"></span>menu element 4</a></li>
<li><a href="#"><span class="icon elem0"></span>menu element 5</a></li>
</ul>
</li>
<li><a href="#">Photos</a>
<ul>
<li><a href="#"><span class="icon elem0"></span>menu element 1</a></li>
<li><a href="#"><span class="icon elem0"></span>menu element 2</a></li>
<li><a href="#"><span class="icon elem0"></span>menu element 3</a></li>
<li><a href="#"><span class="icon elem0"></span>menu element 4</a></li>
<li><a href="#"><span class="icon elem0"></span>menu element 5</a></li>
</ul>
</li>
<li><a href="#">Videos</a></li>
<li><a href="#">Games</a></li>
<li><a href="#">Blog</a>
<ul>
<li><a href="#"><span class="icon elem0"></span>menu element 1</a></li>
<li><a href="#"><span class="icon elem0"></span>menu element 2</a></li>
<li><a href="#"><span class="icon elem0"></span>menu element 3</a></li>
<li><a href="#"><span class="icon elem0"></span>menu element 4</a></li>
<li><a href="#"><span class="icon elem0"></span>menu element 5</a></li>
</ul>
</li>
<li><a href="#">Classifieds</a></li>
</ul>
</nav>
<!-- search form -->
<div id="search">
<form role="search" method="get">
<input type="text" placeholder="search..." name="s" value="" autocomplete="off" />
</form>
</div>
</div>
</div>
<!-- main content section -->
<div class="main">
<!-- left column -->
<div class="left">
<!-- block element -->
<div class="block">
<h3 class="head">Header</h3>
<div>
<img src="images/photo.jpg" />
Some extra content. Some extra content. Some extra content. Some extra content.
</div>
<h3 class="foot">Footer</h3>
</div>
<div class="block">
<h3 class="head head_a">Header A</h3>
<div>Some extra content</div>
<h3 class="foot foot_a">Footer A</h3>
</div>
<div class="block block_a">
<h3 class="head">Header</h3>
<div>Block A: Some extra content</div>
<h3 class="foot">Footer</h3>
</div>
<div class="block block_b">
<h3 class="head">Header</h3>
<div>Block B: Some extra content</div>
<h3 class="foot">Footer</h3>
</div>
<div class="block block_c">
<h3 class="head">Header</h3>
<div>Block C: Some extra content</div>
<h3 class="foot">Footer</h3>
</div>
</div>
<!-- right column -->
<div class="right">
<div class="block">
<h3 class="head head_b">Header B</h3>
<div>Some extra content</div>
<h3 class="foot foot_b">Footer B</h3>
</div>
<div class="block">
<h3 class="head head_c">Header C</h3>
<div>Some extra content</div>
<h3 class="foot foot_c">Footer C</h3>
</div>
<div class="block">
<h3 class="head head_b">Contact us block</h3>
<div>
<form>
<fieldset>
<legend>Contact us form</legend>
<p><label for="name">Your name:</label> <input type="text" id="name" value=""></p>
<p><label for="email">Your email:</label> <input type="text" id="email" value=""></p>
<p><label for="text">Message:</label><textarea id="text" cols="33" rows="4"></textarea></p>
<input type="submit" value="Submit">
</fieldset>
</form>
</div>
</div>
</div>
</div>
<div class="footer">
Neat and modern design - responsive - lesson 3 (<a href="http://www.script-tutorials.com/neat-and-modern-design-responsive/">Back to original tutorial</a>)
</div>
</body>
</html>
Raw
main.css
/* import responsive styles */
/*@import url("responsive.css");*/
* {
margin: 0;
padding: 0;
}
html {
background-color: #ffffff;
}
a {
color: #4C9FEB;
text-decoration: none;
}
a:hover {
color: #FF7D4C;
}
/* header styles */
#header {
border:1px solid;
border-color:rgba(0,0,0,0.1);
border-bottom-color:rgba(0,0,0,0.2);
border-top:none;
background:#f7f7f7;
background:-webkit-linear-gradient(top, #f7f7f7, #f4f4f4);
background:-moz-linear-gradient(top, #f7f7f7, #f4f4f4);
background:-o-linear-gradient(top, #f7f7f7, #f4f4f4);
background:linear-gradient(to bottom, #f7f7f7, #f4f4f4);
background-clip:padding-box;
border-radius:0 0 5px 5px;
margin: 0 auto 25px;
position: relative;
width: 1000px;
}
#logo {
float: left;
margin: 15px 10px;
}
#logo img {
border: 0;
}
#links {
float: right;
font-size: 12px;
margin: 10px 20px 10px;
overflow: hidden;
text-shadow: 0 1px 0 #FFFFFF;
}
#links a {
border-left: 1px solid #DEDEDE;
margin-left: 7px;
padding-left: 8px;
text-decoration: none;
}
#links a:first-child {
border-width: 0;
}
/* navigation menu styles */
#navmenu {
background: -webkit-linear-gradient(#f6f6f6, #e9eaea) repeat scroll 0 0 transparent;
background: -moz-linear-gradient(#f6f6f6, #e9eaea) repeat scroll 0 0 transparent;
background: linear-gradient(#f6f6f6, #e9eaea) repeat scroll 0 0 transparent;
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f6f6f6', endColorstr='#e9eaea',GradientType=0 );
border-radius: 0 0 4px 4px;
border-top: 1px solid #D1D1D1;
box-shadow: -1px 1px 0 rgba(255, 255, 255, 0.8) inset;
clear: both;
height: 51px;
padding-top: 1px;
}
#menu {
float: left;
}
#menu a {
text-decoration: none;
}
#menu ul {
list-style: none;
margin: 0;
padding: 0;
}
#menu > ul > li {
float: left;
padding-bottom: 12px;
}
#menu ul li a {
border-color: #D1D1D1;
border-image: none;
border-style: solid;
border-width: 0 1px 0 0;
box-shadow: -1px 0 0 rgba(255, 255, 255, 0.8) inset, 1px 0 0 rgba(255, 255, 255, 0.8) inset;
color: #333333;
display: block;
font-size: 14px;
height: 30px;
line-height: 30px;
padding: 11px 15px 10px;
text-shadow: 0 1px 0 #FFFFFF;
}
#menu ul li a:hover {
background: -webkit-linear-gradient(#efefef, #e9eaea) repeat scroll 0 0 transparent;
background: -moz-linear-gradient(#efefef, #e9eaea) repeat scroll 0 0 transparent;
background: linear-gradient(#efefef, #e9eaea) repeat scroll 0 0 transparent;
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#efefef', endColorstr='#e9eaea',GradientType=0 );
}
#menu > ul > li.active > a {
background: -webkit-linear-gradient(#55A6F1, #3F96E5) repeat scroll 0 0 transparent;
background: -moz-linear-gradient(#55A6F1, #3F96E5) repeat scroll 0 0 transparent;
background: linear-gradient(#55A6F1, #3F96E5) repeat scroll 0 0 transparent;
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#55A6F1', endColorstr='#3F96E5',GradientType=0 );
border-bottom: 1px solid #2D81CC;
border-top: 1px solid #4791D6;
box-shadow: -1px 0 0 #55A6F1 inset, 1px 0 0 #55A6F1 inset;
color: #FFFFFF;
margin: -1px 0 -1px -1px;
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.3);
}
#menu > ul > li.active > a:hover {
background: -webkit-linear-gradient(#499FEE, #3F96E5) repeat scroll 0 0 transparent;
background: -moz-linear-gradient(#499FEE, #3F96E5) repeat scroll 0 0 transparent;
background: linear-gradient(#499FEE, #3F96E5) repeat scroll 0 0 transparent;
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#499FEE', endColorstr='#3F96E5',GradientType=0 );
}
#menu > ul > li:first-child > a {
border-radius: 0 0 0 5px;
}
/* dropdown menu */
#menu ul ul {
background: -webkit-linear-gradient(#F7F7F7, #F4F4F4) repeat scroll 0 0 padding-box transparent;
background: -moz-linear-gradient(#F7F7F7, #F4F4F4) repeat scroll 0 0 padding-box transparent;
background: linear-gradient(#F7F7F7, #F4F4F4) repeat scroll 0 0 padding-box transparent;
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#F7F7F7', endColorstr='#F4F4F4',GradientType=0 );
border: 1px solid rgba(0, 0, 0, 0.1);
border-radius: 5px 5px 5px 5px;
box-shadow: 0 1px 0 #FFFFFF inset;
height: 0;
margin-top: 10px;
opacity: 0;
overflow: hidden;
padding: 0;
position: absolute;
visibility: hidden;
width: 250px;
z-index: 1;
-webkit-transition: all .5s;
-moz-transition: all .5s;
-ms-transition: all .5s;
-o-transition: all .5s;
transition: all .5s;
}
#menu ul li:hover ul {
height: 195px;
margin-top: 0\9;
opacity: 1;
visibility: visible;
}
#menu ul ul a {
border-right-width: 0;
border-top: 1px solid #D1D1D1;
box-shadow: 0 1px 0 #FFFFFF inset;
color: #444444;
height: 24px;
line-height: 24px;
padding: 7px 12px;
text-shadow: 0 1px 0 #FFFFFF;
}
#menu ul ul li:first-child a {
border-top-width: 0;
}
#menu ul ul a .icon {
background-position: 50% 50%;
background-repeat: no-repeat;
display: block;
float: left;
height: 24px;
margin-right: 10px;
width: 24px;
}
#menu ul ul a .icon.elem0 {
background-image: url("../images/elem.png");
}
#menu ul ul a .icon.elem1 {
background-image: url("../images/fb.png");
}
#menu ul ul a .icon.elem2 {
background-image: url("../images/go.png");
}
#menu ul ul a .icon.elem3 {
background-image: url("../images/rs.png");
}
#menu ul ul a .icon.elem4 {
background-image: url("../images/sk.png");
}
#menu ul ul a .icon.elem5 {
background-image: url("../images/su.png");
}
/* search bar */
#search {
margin:13px 10px 0 0;
float: right;
}
#search form {
background: url("../images/search.gif") no-repeat scroll 5% 50% transparent;
border: 1px solid #CCCCCC;
border-radius: 3px 3px 3px 3px;
box-shadow: 0 1px 0 rgba(0, 0, 0, 0.05) inset, 0 1px 0 #FFFFFF;
height: 26px;
padding: 0 25px;
position: relative;
width: 130px;
}
#search form:hover {
background-color: #F9F9F9;
}
#search form input {
color: #999999;
font-size: 13px;
height: 26px;
text-shadow: 0 1px 0 #FFFFFF;
background: none repeat scroll 0 0 transparent;
border: medium none;
float: left;
outline: medium none;
padding: 0;
width: 100%;
}
#search form input.placeholder, #search form input:-moz-placeholder {
color: #C4C4C4;
}
/* main layout */
.main {
margin: 0 auto 25px;
overflow: hidden;
position: relative;
width: 1000px;
}
.left {
float: left;
width: 60%;
}
.right {
float: right;
width: 38%;
}
/* blocks */
.block {
background: -webkit-linear-gradient(#F7F7F7, #F4F4F4) repeat scroll 0 0 padding-box transparent;
background: -moz-linear-gradient(#F7F7F7, #F4F4F4) repeat scroll 0 0 padding-box transparent;
background: linear-gradient(#F7F7F7, #F4F4F4) repeat scroll 0 0 padding-box transparent;
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#F7F7F7', endColorstr='#F4F4F4',GradientType=0 );
border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.2);
border-image: none;
border-radius: 5px 5px 5px 5px;
border-style: solid;
border-width: 1px;
box-shadow: 0 1px 0 #FFFFFF inset;
color: #56595E;
margin-bottom: 20px;
padding: 20px;
}
.block > div {
overflow: hidden;
}
.block > div img {
float: left;
margin: 0 10px 10px 0;
width: 50%;
}
.block_a, .block_b, .block_c {
box-shadow: 0 1px 0 transparent inset;
}
.block_a {
background: -webkit-linear-gradient(#F1F1F1, #ECEBEC) repeat scroll 0 0 transparent;
background: -moz-linear-gradient(#F1F1F1, #ECEBEC) repeat scroll 0 0 transparent;
background: linear-gradient(#F1F1F1, #ECEBEC) repeat scroll 0 0 transparent;
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#F1F1F1', endColorstr='#ECEBEC',GradientType=0 );
}
.block_b {
background: -webkit-linear-gradient(#55A6F1, #3F96E5) repeat scroll 0 0 transparent;
background: -moz-linear-gradient(#55A6F1, #3F96E5) repeat scroll 0 0 transparent;
background: linear-gradient(#55A6F1, #3F96E5) repeat scroll 0 0 transparent;
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#55A6F1', endColorstr='#3F96E5',GradientType=0 );
}
.block_c {
background: -webkit-linear-gradient(#5B5D63, #4D5055) repeat scroll 0 0 transparent;
background: -moz-linear-gradient(#5B5D63, #4D5055) repeat scroll 0 0 transparent;
background: linear-gradient(#5B5D63, #4D5055) repeat scroll 0 0 transparent;
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#5B5D63', endColorstr='#4D5055',GradientType=0 );
}
/* block headers and footers */
.block .head {
font-size: 18px;
line-height: 15px;
text-shadow: 0 1px 0 #FFFFFF;
margin: 0 0 15px;
}
.block .foot {
font-size: 16px;
line-height: 14px;
text-shadow: 0 1px 0 #FFFFFF;
margin: 15px 0 0;
}
.block .head_a, .block .head_b, .block .head_c {
border-bottom: 1px solid #D1D1D1;
border-radius: 5px 5px 0 0;
box-shadow: 0 1px 0 #FFFFFF inset;
margin: -20px -20px 10px;
padding: 13px 15px 11px;
}
.block .foot_a, .block .foot_b, .block .foot_c {
border-radius: 0 0 5px 5px;
border-top: 1px solid #D1D1D1;
box-shadow: 0 1px 0 #FFFFFF inset;
margin: 10px -20px -20px;
padding: 13px 15px 11px;
}
.block .head_a, .block .foot_a {
background: -webkit-linear-gradient(#F1F1F1, #ECEBEC) repeat scroll 0 0 transparent;
background: -moz-linear-gradient(#F1F1F1, #ECEBEC) repeat scroll 0 0 transparent;
background: linear-gradient(#F1F1F1, #ECEBEC) repeat scroll 0 0 transparent;
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#F1F1F1', endColorstr='#ECEBEC',GradientType=0 );
}
.block .head_b, .block .foot_b {
background: -webkit-linear-gradient(#55A6F1, #3F96E5) repeat scroll 0 0 transparent;
background: -moz-linear-gradient(#55A6F1, #3F96E5) repeat scroll 0 0 transparent;
background: linear-gradient(#55A6F1, #3F96E5) repeat scroll 0 0 transparent;
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#55A6F1', endColorstr='#3F96E5',GradientType=0 );
box-shadow: 0 1px 0 #3F96E5 inset;
color: #FFFFFF;
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.3);
}
.block .head_c, .block .foot_c {
background: -webkit-linear-gradient(#5B5D63, #4D5055) repeat scroll 0 0 transparent;
background: -moz-linear-gradient(#5B5D63, #4D5055) repeat scroll 0 0 transparent;
background: linear-gradient(#5B5D63, #4D5055) repeat scroll 0 0 transparent;
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#5B5D63', endColorstr='#4D5055',GradientType=0 );
box-shadow: 0 1px 0 #4D5055 inset;
color: #FFFFFF;
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.3);
}
.block_b .head, .block_c .head,
.block_b .foot, .block_c .foot,
.block_b > div, .block_c > div {
color: #FFFFFF;
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.3);
}
/* forms */
.main form fieldset {
background: none repeat scroll 0 0 #F1F1F1;
border: 1px solid #CCCCCC;
border-radius: 5px 5px 5px 5px;
box-shadow: 0 1px 0 #FFFFFF;
padding: 15px;
}
.main form legend {
color: #999999;
font-size: 18px;
padding: 0 15px;
}
.main form p {
margin-bottom: 10px;
overflow: hidden;
}
.main form input, .main form select, .main form textarea {
background-color: #F9F9F9;
border: 1px solid #CCCCCC;
border-radius: 4px 4px 4px 4px;
box-shadow: 0 1px 0 rgba(0, 0, 0, 0.05) inset, 0 1px 0 #FFFFFF;
color: #999999;
padding: 6px;
resize: none;
text-shadow: 0 1px 0 #FFFFFF;
}
.main form input[type="text"], .main form input[type="password"], .main form select, .main form textarea {
min-width: 200px;
}
.main form textarea {
display: block;
margin-top: 10px;
}
.main form input[type="text"]:focus, .main form input[type="password"]:focus, .main form select:focus, .main form textarea:focus {
background: none repeat scroll 0 0 #FFFFFF;
color: #444444;
outline: medium none;
text-shadow: none;
}
.main form button, .main form input[type="button"], .main form input[type="submit"] {
background: -webkit-linear-gradient(to bottom, #F9F9F9, #F7F7F7) repeat scroll 0 0 transparent;
background: -moz-linear-gradient(to bottom, #F9F9F9, #F7F7F7) repeat scroll 0 0 transparent;
background: linear-gradient(to bottom, #F9F9F9, #F7F7F7) repeat scroll 0 0 transparent;
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#F9F9F9', endColorstr='#F7F7F7',GradientType=0 );
border-color: #E0E0E0 #E0E0E0 #CDCDCD;
border-image: none;
border-radius: 4px 4px 4px 4px;
border-style: solid;
border-width: 1px;
box-shadow: 0 1px 0 #FFFFFF inset;
color: #444444;
cursor: pointer;
padding: 6px 10px;
}
.main form button:hover, .main form input[type="button"]:hover, .main form input[type="submit"]:hover {
background: -webkit-linear-gradient(to bottom, #59A8F3, #479CEB) repeat scroll 0 0 transparent;
background: -moz-linear-gradient(to bottom, #59A8F3, #479CEB) repeat scroll 0 0 transparent;
background: linear-gradient(to bottom, #59A8F3, #479CEB) repeat scroll 0 0 transparent;
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#59A8F3', endColorstr='#479CEB',GradientType=0 );
border-color: #3990DB #3990DB #2F78B7;
border-style: solid;
border-width: 1px;
box-shadow: 0 1px 0 rgba(255, 255, 255, 0.2) inset;
color: #FFFFFF;
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.3);
}
.main form button:active, .main form input[type="button"]:active, .main form input[type="submit"]:active {
background: -webkit-linear-gradient(to bottom, #3F96E5, #55A6F1) repeat scroll 0 0 transparent;
background: -moz-linear-gradient(to bottom, #3F96E5, #55A6F1) repeat scroll 0 0 transparent;
background: linear-gradient(to bottom, #3F96E5, #55A6F1) repeat scroll 0 0 transparent;
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#3F96E5', endColorstr='#55A6F1',GradientType=0 );
border-color: #3990DB #3990DB #2F78B7;
border-style: solid;
border-width: 1px;
box-shadow: 0 1px 0 rgba(255, 255, 255, 0.2) inset;
color: #FFFFFF;
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.3);
}
/* footer block */
.footer {
background: -webkit-linear-gradient(#F7F7F7, #F4F4F4) repeat scroll 0 0 padding-box transparent;
background: -moz-linear-gradient(#F7F7F7, #F4F4F4) repeat scroll 0 0 padding-box transparent;
background: linear-gradient(#F7F7F7, #F4F4F4) repeat scroll 0 0 padding-box transparent;
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#F7F7F7', endColorstr='#F4F4F4',GradientType=0 );
border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.2);
border-image: none;
border-radius: 5px 5px 5px 5px;
border-style: solid;
border-width: 1px;
box-shadow: 0 1px 0 #FFFFFF inset;
color: #666666;
font-size: 22px;
font-weight: bold;
line-height: 31px;
margin: 0 auto 20px;
overflow: hidden;
padding: 20px;
position: relative;
text-align: center;
text-shadow: 0 1px 0 #FFFFFF;
width: 960px;
}
Raw
responsive.css
/* menu - hidden elements */
#menu input[type=checkbox] {
left: -9999px;
position: absolute;
top: -9999px;
}
#menu label {
cursor: pointer;
display: none;
user-select: none;
}
@media (max-width: 1050px){
#header, .main, .footer {
-moz-box-sizing: border-box;
box-sizing: border-box;
width: 96%;
}
}
@media (min-width: 851px) and (max-width: 1050px){
.left, .right {
width: 49%;
}
}
@media (max-width: 850px){
.left, .right {
width: 100%;
}
#navmenu {
height: auto;
overflow: hidden;
}
#menu {
float: none;
overflow: hidden;
}
#menu ul {
display: none;
height: 100%;
}
#menu label {
background: -webkit-linear-gradient(#5B5D63, #4D5055) repeat scroll 0 0 transparent;
background: -moz-linear-gradient(#5B5D63, #4D5055) repeat scroll 0 0 transparent;
background: linear-gradient(#5B5D63, #4D5055) repeat scroll 0 0 transparent;
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#5B5D63', endColorstr='#4D5055',GradientType=0 );
color: #EEEEEE;
display: block;
font-size: 18px;
padding: 8px;
}
#menu label:after {
content: "\2261";
position: absolute;
right: 10px;
}
#menu input:checked ~ ul {
display: block;
}
#menu input:checked ~ ul > li {
width: 100%;
}
#menu > ul > li {
float: none;
padding-bottom: 5px;
}
#menu ul li a {
border-width: 0;
height: 18px;
line-height: 18px;
}
#menu ul ul, #menu ul li:hover ul {
display: none;
}
#search {
float: none;
margin: 10px 0 10px 10px;
}
.footer {
font-size: 16px;
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment