commit
abce8b84b8
@ -1,370 +1,367 @@ |
|||||||
/*=================================*/ |
/*=================================*/ |
||||||
/* Pico Default Theme |
/* Pico Default Theme |
||||||
/* By: Gilbert Pellegrom |
/* By: Gilbert Pellegrom |
||||||
/* http: //dev7studios.com |
/* http: //dev7studios.com |
||||||
/*=================================*/ |
/*=================================*/ |
||||||
|
|
||||||
/* Reset Styles |
/* Reset Styles |
||||||
/*---------------------------------------------*/ |
/*---------------------------------------------*/ |
||||||
html, body, div, span, applet, object, iframe, |
html, body, div, span, applet, object, iframe, |
||||||
h1, h2, h3, h4, h5, h6, p, blockquote, pre, |
h1, h2, h3, h4, h5, h6, p, blockquote, pre, |
||||||
a, abbr, acronym, address, big, cite, code, |
a, abbr, acronym, address, big, cite, code, |
||||||
del, dfn, em, font, img, ins, kbd, q, s, samp, |
del, dfn, em, font, img, ins, kbd, q, s, samp, |
||||||
small, strike, strong, sub, sup, tt, var, |
small, strike, strong, sub, sup, tt, var, |
||||||
dl, dt, dd, ol, ul, li, |
dl, dt, dd, ol, ul, li, |
||||||
fieldset, form, label, legend, |
fieldset, form, label, legend, |
||||||
table, caption, tbody, tfoot, thead, tr, th, td { |
table, caption, tbody, tfoot, thead, tr, th, td { |
||||||
margin: 0; |
margin: 0; |
||||||
padding: 0; |
padding: 0; |
||||||
border: 0; |
border: 0; |
||||||
outline: 0; |
outline: 0; |
||||||
font-weight: inherit; |
font-weight: inherit; |
||||||
font-style: inherit; |
font-style: inherit; |
||||||
font-size: 100%; |
font-size: 100%; |
||||||
font-family: inherit; |
font-family: inherit; |
||||||
vertical-align: baseline; |
vertical-align: baseline; |
||||||
} |
} |
||||||
|
|
||||||
body { |
body { |
||||||
line-height: 1; |
line-height: 1; |
||||||
color: black; |
color: black; |
||||||
background: white; |
background: white; |
||||||
} |
} |
||||||
|
|
||||||
table { |
table { |
||||||
border-collapse: collapse; |
border-collapse: collapse; |
||||||
border-spacing: 0; |
border-spacing: 0; |
||||||
} |
} |
||||||
|
|
||||||
caption, th, td { |
caption, th, td { |
||||||
text-align: left; |
text-align: left; |
||||||
font-weight: normal; |
font-weight: normal; |
||||||
} |
} |
||||||
|
|
||||||
blockquote:before, blockquote:after, |
blockquote:before, blockquote:after, |
||||||
q:before, q:after { |
q:before, q:after { |
||||||
content: ""; |
content: ""; |
||||||
} |
} |
||||||
|
|
||||||
blockquote, q { |
blockquote, q { |
||||||
quotes: "" ""; |
quotes: "" ""; |
||||||
} |
} |
||||||
|
|
||||||
/* HTML5 tags */ |
/* HTML5 tags */ |
||||||
header, section, footer, |
header, section, footer, |
||||||
aside, nav, article, figure { |
aside, nav, article, figure { |
||||||
display: block; |
display: block; |
||||||
} |
} |
||||||
|
|
||||||
/* hand cursor on clickable input elements */ |
/* hand cursor on clickable input elements */ |
||||||
label, input[type=button], input[type=submit], button { |
label, input[type=button], input[type=submit], button { |
||||||
cursor: pointer; |
cursor: pointer; |
||||||
} |
} |
||||||
|
|
||||||
/* make buttons play nice in IE: |
/* make buttons play nice in IE: |
||||||
www.viget.com/inspire/styling-the-button-element-in-internet-explorer/ */ |
www.viget.com/inspire/styling-the-button-element-in-internet-explorer/ */ |
||||||
button { |
button { |
||||||
width: auto; |
width: auto; |
||||||
overflow: visible; |
overflow: visible; |
||||||
} |
} |
||||||
|
|
||||||
/* Sharper Thumbnails */ |
/* Sharper Thumbnails */ |
||||||
img { |
img { |
||||||
-ms-interpolation-mode: bicubic; |
-ms-interpolation-mode: bicubic; |
||||||
} |
} |
||||||
|
|
||||||
/* Input Styles |
/* Input Styles |
||||||
/*---------------------------------------------*/ |
/*---------------------------------------------*/ |
||||||
input, |
input, |
||||||
textarea, |
textarea, |
||||||
select { |
select { |
||||||
padding: 5px; |
padding: 5px; |
||||||
font: 400 1em Verdana, Sans-serif; |
font: 400 1em Verdana, Sans-serif; |
||||||
color: #666; |
color: #666; |
||||||
background: #fff; |
background: #fff; |
||||||
border: 1px solid #999999; |
border: 1px solid #999999; |
||||||
margin: 0 0 1em 0; |
margin: 0 0 1em 0; |
||||||
} |
} |
||||||
|
|
||||||
input:focus, |
input:focus, |
||||||
textarea:focus, |
textarea:focus, |
||||||
select:focus { |
select:focus { |
||||||
color: #000; |
color: #000; |
||||||
background: #fff; |
background: #fff; |
||||||
border: 1px solid #666666; |
border: 1px solid #666666; |
||||||
} |
} |
||||||
|
|
||||||
/* Main Styles |
/* Main Styles |
||||||
/*---------------------------------------------*/ |
/*---------------------------------------------*/ |
||||||
body { |
body { |
||||||
font: 14px/1.8em 'Open Sans', Helvetica, Arial, Helvetica, sans-serif; |
font: 14px/1.8em 'Open Sans', Helvetica, Arial, Helvetica, sans-serif; |
||||||
color: #444; |
color: #444; |
||||||
background: #fff; |
background: #fff; |
||||||
-webkit-font-smoothing: antialiased; |
-webkit-font-smoothing: antialiased; |
||||||
} |
} |
||||||
|
|
||||||
a, a:visited { |
a, a:visited { |
||||||
color: #2EAE9B; |
color: #2EAE9B; |
||||||
text-decoration: none; |
text-decoration: none; |
||||||
-webkit-transition: all 0.2s linear; |
-webkit-transition: all 0.2s linear; |
||||||
-moz-transition: all 0.2s linear; |
-moz-transition: all 0.2s linear; |
||||||
-ms-transition: all 0.2s linear; |
-ms-transition: all 0.2s linear; |
||||||
-o-transition: all 0.2s linear; |
-o-transition: all 0.2s linear; |
||||||
transition: all 0.2s linear; |
transition: all 0.2s linear; |
||||||
} |
} |
||||||
|
|
||||||
a:hover, a:active { |
a:hover, a:active { |
||||||
color: #000; |
color: #000; |
||||||
text-decoration: none; |
text-decoration: none; |
||||||
} |
} |
||||||
|
|
||||||
h1, h2, h3, h4, h5, h6 { |
h1, h2, h3, h4, h5, h6 { |
||||||
color: #000; |
color: #000; |
||||||
line-height: 1.2em; |
line-height: 1.2em; |
||||||
margin-bottom: 0.6em; |
margin-bottom: 0.6em; |
||||||
} |
} |
||||||
|
|
||||||
h1 { |
h1 { |
||||||
font-size: 2em; |
font-size: 2em; |
||||||
} |
} |
||||||
|
|
||||||
h2 { |
h2 { |
||||||
font-size: 1.7em; |
font-size: 1.7em; |
||||||
} |
} |
||||||
|
|
||||||
h3 { |
h3 { |
||||||
font-size: 1.5em; |
font-size: 1.5em; |
||||||
margin-top: 2em; |
margin-top: 2em; |
||||||
} |
} |
||||||
|
|
||||||
p, table { |
p, table { |
||||||
margin-bottom: 1em; |
margin-bottom: 1em; |
||||||
} |
} |
||||||
|
|
||||||
ol, ul { |
ol, ul { |
||||||
padding-left: 30px; |
padding-left: 30px; |
||||||
margin-bottom: 1em; |
margin-bottom: 1em; |
||||||
} |
} |
||||||
|
|
||||||
b, strong { |
b, strong { |
||||||
font-weight: bold; |
font-weight: bold; |
||||||
} |
} |
||||||
|
|
||||||
i, em { |
i, em { |
||||||
font-style: italic; |
font-style: italic; |
||||||
} |
} |
||||||
|
|
||||||
u { |
u { |
||||||
text-decoration: underline; |
text-decoration: underline; |
||||||
} |
} |
||||||
|
|
||||||
abbr, acronym { |
abbr, acronym { |
||||||
cursor: help; |
cursor: help; |
||||||
border-bottom: 0.1em dotted; |
border-bottom: 0.1em dotted; |
||||||
} |
} |
||||||
|
|
||||||
td, td img { |
td, td img { |
||||||
vertical-align: top; |
vertical-align: top; |
||||||
} |
} |
||||||
|
|
||||||
td, th { |
td, th { |
||||||
border: solid 1px #999; |
border: solid 1px #999; |
||||||
padding: 0.25em 0.5em; |
padding: 0.25em 0.5em; |
||||||
} |
} |
||||||
|
|
||||||
th { |
th { |
||||||
font-weight: bold; |
font-weight: bold; |
||||||
text-align: center; |
text-align: center; |
||||||
background: #eee; |
background: #eee; |
||||||
} |
} |
||||||
|
|
||||||
sub { |
sub { |
||||||
vertical-align: sub; |
vertical-align: sub; |
||||||
font-size: smaller; |
font-size: smaller; |
||||||
} |
} |
||||||
|
|
||||||
sup { |
sup { |
||||||
vertical-align: super; |
vertical-align: super; |
||||||
font-size: smaller; |
font-size: smaller; |
||||||
} |
} |
||||||
|
|
||||||
code { |
code { |
||||||
font-family: Courier, "Courier New", Monaco, Tahoma; |
font-family: Courier, "Courier New", Monaco, Tahoma; |
||||||
background: #eee; |
background: #eee; |
||||||
color: #333; |
color: #333; |
||||||
padding: 0px 2px; |
padding: 0px 2px; |
||||||
} |
} |
||||||
|
|
||||||
pre { |
pre { |
||||||
background: #eee; |
background: #eee; |
||||||
padding: 20px; |
padding: 20px; |
||||||
margin-bottom: 1em; |
margin-bottom: 1em; |
||||||
overflow: auto; |
overflow: auto; |
||||||
} |
} |
||||||
|
|
||||||
blockquote { |
blockquote { |
||||||
font-style: italic; |
font-style: italic; |
||||||
margin: 0 0 1em 15px; |
margin: 0 0 1em 15px; |
||||||
padding-left: 10px; |
padding-left: 10px; |
||||||
border-left: 5px solid #dddddd; |
border-left: 5px solid #dddddd; |
||||||
} |
} |
||||||
|
|
||||||
/* Structure Styles |
/* Structure Styles |
||||||
/*---------------------------------------------*/ |
/*---------------------------------------------*/ |
||||||
.inner { |
.inner { |
||||||
width: 850px; |
width: 850px; |
||||||
margin: 0 auto; |
margin: 0 auto; |
||||||
} |
} |
||||||
|
|
||||||
#header { |
#header { |
||||||
background: #2EAE9B; |
background: #2EAE9B; |
||||||
padding: 60px 0; |
padding: 60px 0; |
||||||
margin-bottom: 80px; |
margin-bottom: 80px; |
||||||
color: #afe1da; |
color: #afe1da; |
||||||
} |
} |
||||||
#header a { color: #afe1da; } |
#header a { color: #afe1da; } |
||||||
#header h1 a, |
#header h1 a, |
||||||
#header a:hover { color: #fff; } |
#header a:hover { color: #fff; } |
||||||
#header h1 { |
#header h1 { |
||||||
font-weight: bold; |
font-weight: bold; |
||||||
margin: 0; |
margin: 0; |
||||||
float: left; |
float: left; |
||||||
} |
} |
||||||
#header .menu-icon { |
#header .menu-icon { |
||||||
display: none; |
display: none; |
||||||
width: 35px; |
width: 35px; |
||||||
height: 35px; |
height: 35px; |
||||||
background: #afe1da url(menu-icon.png) center; |
background: #afe1da url(menu-icon.png) center; |
||||||
} |
} |
||||||
#header nav { |
#header nav { |
||||||
float: right; |
float: right; |
||||||
list-style: none; |
list-style: none; |
||||||
margin: 0; |
margin: 0; |
||||||
padding: 0; |
padding: 0; |
||||||
} |
} |
||||||
#header nav a { |
#header nav a { |
||||||
font-weight: bold; |
font-weight: bold; |
||||||
margin-left: 20px; |
margin-left: 20px; |
||||||
} |
} |
||||||
#header a:hover#menu-icon { |
#header a:hover#menu-icon { |
||||||
background-color: #444; |
background-color: #444; |
||||||
border-radius: 4px 4px 0 0; |
border-radius: 4px 4px 0 0; |
||||||
} |
} |
||||||
#header ul { |
#header ul { |
||||||
list-style: none; |
list-style: none; |
||||||
} |
} |
||||||
#header li { |
#header li { |
||||||
display: inline-block; |
display: inline-block; |
||||||
float: left; |
float: left; |
||||||
} |
} |
||||||
#footer { |
#footer { |
||||||
background: #707070; |
background: #707070; |
||||||
padding: 60px 0; |
padding: 60px 0; |
||||||
margin-top: 80px; |
margin-top: 80px; |
||||||
color: #C0C0C0; |
color: #C0C0C0; |
||||||
} |
} |
||||||
#footer a { color: #ddd; } |
#footer a { color: #ddd; } |
||||||
#footer a:hover { color: #fff; } |
#footer a:hover { color: #fff; } |
||||||
|
|
||||||
/* Misc Styles |
/* Misc Styles |
||||||
/*---------------------------------------------*/ |
/*---------------------------------------------*/ |
||||||
.clearfix:before, |
.clearfix:before, |
||||||
.clearfix:after { |
.clearfix:after { |
||||||
content: " "; |
content: " "; |
||||||
display: table; |
display: table; |
||||||
} |
} |
||||||
.clearfix:after { |
.clearfix:after { |
||||||
clear: both; |
clear: both; |
||||||
} |
} |
||||||
.clearfix { |
.clearfix { |
||||||
*zoom: 1; |
*zoom: 1; |
||||||
} |
} |
||||||
|
|
||||||
/* Media Queries |
/* Media Queries |
||||||
/*---------------------------------------------*/ |
/*---------------------------------------------*/ |
||||||
|
|
||||||
/* Small Devices, Tablets */ |
/* Small Devices, Tablets */ |
||||||
@media only screen and (max-width : 768px) { |
@media only screen and (max-width : 768px) { |
||||||
|
.inner { |
||||||
.inner { |
width: 85%; |
||||||
width: 85%; |
} |
||||||
} |
.inner img { |
||||||
.inner img { |
width:100%; |
||||||
width:100%; |
} |
||||||
} |
#header { |
||||||
#header { |
margin-bottom: 40px; |
||||||
margin-bottom: 40px; |
} |
||||||
} |
#header h1 a { |
||||||
#header h1 a { |
font-size:1em; |
||||||
font-size:1em; |
} |
||||||
} |
#header .menu-icon { |
||||||
#header .menu-icon { |
display:inline-block; |
||||||
display:inline-block; |
} |
||||||
} |
#header nav a { color: #000; } |
||||||
#header nav a { color: #000; } |
#header nav a:hover { color: #afe1da; } |
||||||
#header nav a:hover { color: #afe1da; } |
#header nav ul, nav:active ul { |
||||||
#header nav ul, nav:active ul { |
display: none; |
||||||
display: none; |
position: absolute; |
||||||
position: absolute; |
padding: 20px; |
||||||
padding: 20px; |
background: #fff; |
||||||
background: #fff; |
border: 5px solid #444; |
||||||
border: 5px solid #444; |
right: 2.7em; |
||||||
right: 2.7em; |
top: 100px; |
||||||
top: 100px; |
width: 80%; |
||||||
width: 80%; |
border-radius: 4px 0 4px 4px; |
||||||
border-radius: 4px 0 4px 4px; |
z-index: 9999; |
||||||
z-index: 9999; |
} |
||||||
} |
#header nav li { |
||||||
#header nav li { |
text-align: center; |
||||||
text-align: center; |
width: 100%; |
||||||
width: 100%; |
padding: 10px 0; |
||||||
padding: 10px 0; |
margin: 0; |
||||||
margin: 0; |
} |
||||||
} |
#header nav:hover ul { |
||||||
#header nav:hover ul { |
display: block; |
||||||
display: block; |
} |
||||||
} |
} |
||||||
|
|
||||||
} |
/* Extra Small Devices, Phones */ |
||||||
|
@media only screen and (max-width : 480px) { |
||||||
/* Extra Small Devices, Phones */ |
.inner { |
||||||
@media only screen and (max-width : 480px) { |
width: 85%; |
||||||
|
} |
||||||
.inner { |
.inner img { |
||||||
width: 85%; |
width:100%; |
||||||
} |
} |
||||||
.inner img { |
#header { |
||||||
width:100%; |
margin-bottom: 30px; |
||||||
} |
} |
||||||
#header { |
#header h1 a { |
||||||
margin-bottom: 30px; |
font-size:1em; |
||||||
} |
} |
||||||
#header h1 a { |
#header .menu-icon { |
||||||
font-size:1em; |
display:inline-block; |
||||||
} |
} |
||||||
#header .menu-icon { |
#header nav a { color: #000; } |
||||||
display:inline-block; |
#header nav a:hover { color: #afe1da; } |
||||||
} |
#header nav ul, nav:active ul { |
||||||
#header nav a { color: #000; } |
display: none; |
||||||
#header nav a:hover { color: #afe1da; } |
position: absolute; |
||||||
#header nav ul, nav:active ul { |
padding: 20px; |
||||||
display: none; |
background: #fff; |
||||||
position: absolute; |
border: 5px solid #444; |
||||||
padding: 20px; |
right: 0em; |
||||||
background: #fff; |
top: 100px; |
||||||
border: 5px solid #444; |
width: auto; |
||||||
right: 0em; |
border-radius: 4px 0 4px 4px; |
||||||
top: 100px; |
} |
||||||
width: auto; |
#header nav li { |
||||||
border-radius: 4px 0 4px 4px; |
text-align: center; |
||||||
} |
width: 100%; |
||||||
#header nav li { |
padding: 10px 0; |
||||||
text-align: center; |
margin: 0; |
||||||
width: 100%; |
} |
||||||
padding: 10px 0; |
#header nav:hover ul { |
||||||
margin: 0; |
display: block; |
||||||
} |
} |
||||||
#header nav:hover ul { |
} |
||||||
display: block; |
|
||||||
} |
|
||||||
} |
|
||||||
|
Loading…
Reference in new issue