mirror of
https://github.com/dawidolko/Website-Templates.git
synced 2025-10-30 00:03:10 +01:00
527 lines
9.0 KiB
CSS
527 lines
9.0 KiB
CSS
@font-face {
|
|
font-family: Yanone Kaffeesatz;
|
|
src: url('../fonts/YanoneKaffeesatz-Regular.eot');
|
|
src: local("Yanone Kaffeesatz"), url('../fonts/YanoneKaffeesatz-Regular.ttf');
|
|
}
|
|
|
|
@font-face {
|
|
font-family: News Cycle;
|
|
src: url('../fonts/NewsCycle-Regular.eot');
|
|
src: local("News Cycle"), url('../fonts/NewsCycle-Regular.ttf');
|
|
}
|
|
|
|
html {
|
|
height: 100%;
|
|
}
|
|
|
|
* {
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
|
|
/* tell the browser to render HTML 5 elements as block */
|
|
article, aside, figure, footer, header, hgroup, nav, section {
|
|
display:block;
|
|
}
|
|
|
|
body {
|
|
font: normal .80em arial, sans-serif;
|
|
background: #FFF url(../images/back.jpg) no-repeat center fixed;
|
|
color: #DDD;
|
|
}
|
|
|
|
p {
|
|
padding: 0 0 20px 0;
|
|
line-height: 1.7em;
|
|
}
|
|
|
|
img {
|
|
border: 0;
|
|
}
|
|
|
|
h1, h2, h3, h4, h5, h6 {
|
|
color: #362C20;
|
|
letter-spacing: 0em;
|
|
padding: 0 0 5px 0;
|
|
}
|
|
|
|
h1, h2, h3 {
|
|
font: normal 140% arial, sans-serif;
|
|
margin: 0 0 15px 0;
|
|
padding: 15px 0 5px 0;
|
|
color: #FFF;
|
|
}
|
|
|
|
h2 {
|
|
font-size: 160%;
|
|
padding: 9px 0 5px 0;
|
|
color: #F67F00;
|
|
}
|
|
|
|
h3 {
|
|
font-size: 140%;
|
|
padding: 5px 0 0 0;
|
|
}
|
|
|
|
h4, h6 {
|
|
color: #F67F00;
|
|
padding: 0 0 5px 0;
|
|
font: normal 150% 'Yanone kaffeesatz', arial, sans-serif;
|
|
}
|
|
|
|
h5, h6 {
|
|
color: #888;
|
|
font: italic 95% arial, sans-serif;
|
|
letter-spacing: normal;
|
|
padding: 0 0 15px 0;
|
|
}
|
|
|
|
a, a:hover {
|
|
outline: none;
|
|
text-decoration: underline;
|
|
color: #09D4FF;
|
|
}
|
|
|
|
a:hover {
|
|
text-decoration: none;
|
|
}
|
|
|
|
blockquote {
|
|
margin: 20px 0;
|
|
padding: 10px 20px 0 20px;
|
|
border: 1px solid #E5E5DB;
|
|
background: #FFF;
|
|
}
|
|
|
|
ul {
|
|
margin: 2px 0 22px 17px;
|
|
}
|
|
|
|
ul li {
|
|
list-style-type: circle;
|
|
margin: 0 0 6px 0;
|
|
padding: 0 0 4px 5px;
|
|
line-height: 1.5em;
|
|
}
|
|
|
|
ol {
|
|
margin: 8px 0 22px 20px;
|
|
}
|
|
|
|
ol li {
|
|
margin: 0 0 11px 0;
|
|
}
|
|
|
|
.left {
|
|
float: left;
|
|
width: auto;
|
|
margin-right: 10px;
|
|
}
|
|
|
|
.right {
|
|
float: right;
|
|
width: auto;
|
|
margin-left: 10px;
|
|
}
|
|
|
|
.center {
|
|
display: block;
|
|
text-align: center;
|
|
margin: 20px auto;
|
|
}
|
|
|
|
#main, nav, #container, #logo, #site_content, footer {
|
|
margin-left: auto;
|
|
margin-right: auto;
|
|
}
|
|
|
|
#main {
|
|
margin: 50px auto;
|
|
width: 980px;
|
|
padding-bottom: 30px;
|
|
}
|
|
|
|
header {
|
|
background: transparent;
|
|
height: 225px;
|
|
}
|
|
|
|
#logo {
|
|
width: 330px;
|
|
float: left;
|
|
height: 100px;
|
|
color: #888;
|
|
padding: 20px;
|
|
margin-bottom: 20px;
|
|
}
|
|
|
|
#logo h1, #logo h2 {
|
|
font: normal 320% 'News Cycle', arial, sans-serif;
|
|
border-bottom: 0;
|
|
text-transform: none;
|
|
margin: 0;
|
|
}
|
|
|
|
#logo_text h1, #logo_text h1 a, #logo_text h1 a:hover {
|
|
padding: 0;
|
|
color: #FFF;
|
|
text-decoration: none;
|
|
}
|
|
|
|
#logo_text h1 a .logo_colour {
|
|
color: #09D4FF;
|
|
}
|
|
|
|
#logo_text a:hover .logo_colour {
|
|
color: #FFF;
|
|
}
|
|
|
|
#logo_text h2 {
|
|
font-size: 140%;
|
|
padding: 0 0 0 0;
|
|
color: #FFF;
|
|
}
|
|
|
|
nav {
|
|
float: left;
|
|
height: 44px;
|
|
width: 980px;
|
|
margin: 0 auto 0 auto;
|
|
color: #FFF;
|
|
background: transparent url(../images/transparent.png);
|
|
}
|
|
|
|
#menu_container {
|
|
width: 980px;
|
|
margin: 0 auto 0 auto;
|
|
}
|
|
|
|
#site_content {
|
|
width: 930px;
|
|
overflow: hidden;
|
|
margin: 0px auto 0 auto;
|
|
padding: 25px;
|
|
background: transparent url(../images/transparent.png);
|
|
}
|
|
|
|
#sidebar_container {
|
|
float: right;
|
|
width: 224px;
|
|
padding: 20px 5px 0 0;
|
|
}
|
|
|
|
.sidebar {
|
|
float: right;
|
|
width: 200px;
|
|
margin: 0 0 17px 0;
|
|
padding: 0 15px 5px 13px;
|
|
}
|
|
|
|
.sidebar h3, .content h1 {
|
|
padding: 0 15px 20px 0;
|
|
font: 200% 'News Cycle', arial, sans-serif;
|
|
text-shadow: #000 1px 1px;
|
|
margin: 0 1px;
|
|
color: #FFF;
|
|
}
|
|
|
|
.sidebar h3 {
|
|
padding: 0 15px 14px 0;
|
|
color: #FFF;
|
|
font: 230% 'News Cycle', arial, sans-serif;
|
|
}
|
|
|
|
.sidebar ul {
|
|
margin: 0 0 15px 0;
|
|
}
|
|
|
|
.sidebar li a, .sidebar li a:hover {
|
|
color: #DDD;
|
|
text-decoration: none;
|
|
}
|
|
|
|
.sidebar li a:hover {
|
|
text-decoration: underline;
|
|
}
|
|
|
|
.sidebar_item, .content_item {
|
|
padding: 15px 0;
|
|
}
|
|
|
|
.paperclip {
|
|
float: left;
|
|
position: relative;
|
|
z-index: 0;
|
|
vertical-align: middle;
|
|
margin: -15px 0 -60px -40px;
|
|
}
|
|
|
|
.content {
|
|
text-align: left;
|
|
width: 630px;
|
|
margin: 0 0 15px 0;
|
|
float: left;
|
|
font-size: 120%;
|
|
padding: 14px 0 0 0;
|
|
}
|
|
|
|
.content ul {
|
|
margin: 2px 0 22px 0px;
|
|
}
|
|
|
|
.content ul li, .sidebar ul li {
|
|
list-style-type: none;
|
|
background: url(../images/bullet.png) no-repeat;
|
|
margin: 0 0 0 0;
|
|
padding: 0 0 4px 28px;
|
|
line-height: 1.5em;
|
|
}
|
|
|
|
footer {
|
|
width: 980px;
|
|
font: 170% 'Yanone Kaffeesatz', arial, sans-serif;
|
|
text-shadow: 1px 1px #000;
|
|
height: 30px;
|
|
padding: 5px 0 20px 0;
|
|
text-align: center;
|
|
color: #FFF;
|
|
margin-top: 25px;
|
|
background: transparent url(../images/transparent.png);
|
|
}
|
|
|
|
footer p {
|
|
line-height: 1.7em;
|
|
padding: 0 0 10px 0;
|
|
}
|
|
|
|
footer a {
|
|
color: #FFF;
|
|
text-decoration: none;
|
|
}
|
|
|
|
footer a:hover {
|
|
color: #FFF;
|
|
text-decoration: underline;
|
|
}
|
|
|
|
.form_settings {
|
|
margin: 15px 0 0 0;
|
|
}
|
|
|
|
.form_settings p {
|
|
padding: 0 0 4px 0;
|
|
}
|
|
|
|
.form_settings span {
|
|
float: left;
|
|
width: 200px;
|
|
text-align: left;
|
|
}
|
|
|
|
.form_settings input, .form_settings textarea {
|
|
padding: 5px;
|
|
width: 299px;
|
|
font: 100% arial;
|
|
border: 1px solid #C6E7F0;
|
|
background: #EFF8FB;
|
|
color: #47433F;
|
|
border-radius: 7px 7px 7px 7px;
|
|
-moz-border-radius: 7px 7px 7px 7px;
|
|
-webkit-border: 7px 7px 7px 7px;
|
|
}
|
|
|
|
.form_settings .submit {
|
|
font: 140% 'Yanone Kaffeesatz', arial, sans-serif;
|
|
border: 0;
|
|
width: 99px;
|
|
margin: 0 0 0 212px;
|
|
height: 33px;
|
|
padding: 2px 0 3px 0;
|
|
cursor: pointer;
|
|
background: #1EC9F4;
|
|
-webkit-border-radius: .5em .5em .5em .5em ;
|
|
-moz-border-radius: .5em .5em .5em .5em ;
|
|
border-radius: .5em .5em .5em .5em ;
|
|
-webkit-box-shadow: 0 1px 2px rgba(0,0,0,.2);
|
|
-moz-box-shadow: 0 1px 2px rgba(0,0,0,.2);
|
|
box-shadow: 0 1px 2px rgba(0,0,0,.2);
|
|
color: #FFF;
|
|
border: solid 1px #0D8AA9;
|
|
background: #46C4DD;
|
|
background: -webkit-gradient(linear, left top, left bottom, from(#63CFDF), to(#17B2D9));
|
|
background: -moz-linear-gradient(top, #63CFDF, #17B2D9);
|
|
text-shadow: 1px 1px #178497;
|
|
}
|
|
|
|
.form_settings textarea, .form_settings select {
|
|
font: 100% arial;
|
|
width: 299px;
|
|
}
|
|
|
|
.form_settings select {
|
|
width: 310px;
|
|
}
|
|
|
|
.form_settings .checkbox {
|
|
margin: 4px 0;
|
|
padding: 0;
|
|
width: 14px;
|
|
border: 0;
|
|
background: none;
|
|
}
|
|
|
|
.separator {
|
|
width: 100%;
|
|
height: 0;
|
|
border-top: 1px solid #D9D5CF;
|
|
border-bottom: 1px solid #FFF;
|
|
margin: 0 0 20px 0;
|
|
}
|
|
|
|
table {
|
|
margin: 10px 0 30px 0;
|
|
}
|
|
|
|
table tr th, table tr td {
|
|
background: #70D4E6;
|
|
color: #FFF;
|
|
padding: 7px 4px;
|
|
text-align: left;
|
|
}
|
|
|
|
table tr td {
|
|
background: #D3F2F7;
|
|
color: #47433F;
|
|
border-top: 1px solid #FFF;
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
/**
|
|
Stylesheet for SooperFish by www.SooperThemes.com
|
|
Author: Jurriaan Roelofs
|
|
**/
|
|
|
|
/* Configuration of menu width */
|
|
html body ul.sf-menu ul,html body ul.sf-menu ul li {
|
|
width: 200px;
|
|
}
|
|
|
|
html body ul.sf-menu ul ul {
|
|
margin: 0 0 0 200px;
|
|
}
|
|
|
|
/* Framework for proper showing/hiding/positioning */
|
|
ul.sf-menu,ul.sf-menu * {
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
|
|
ul.sf-menu {
|
|
display: block;
|
|
position: relative;
|
|
}
|
|
|
|
ul.sf-menu li {
|
|
display: block;
|
|
list-style: none;
|
|
float: left;
|
|
position: relative;
|
|
}
|
|
|
|
ul.sf-menu li:hover {
|
|
visibility: inherit; /* fixes IE7 'sticky bug' */
|
|
}
|
|
|
|
ul.sf-menu a {
|
|
display: block;
|
|
position: relative;
|
|
}
|
|
|
|
ul.sf-menu ul {
|
|
position: absolute;
|
|
left: 0;
|
|
width: 150px;
|
|
top: auto;
|
|
left: -999999px;
|
|
}
|
|
|
|
ul.sf-menu ul a {
|
|
zoom: 1; /* IE6/7 fix */
|
|
}
|
|
|
|
ul.sf-menu ul li {
|
|
float: left; /* Must always be floated otherwise there will be a rogue 1px margin-bottom in IE6/7 */
|
|
width: 150px;
|
|
}
|
|
|
|
ul.sf-menu ul ul {
|
|
top: 0;
|
|
margin: 0 0 0 150px;
|
|
}
|
|
|
|
ul.sf-menu li:hover ul,ul.sf-menu li:focus ul,ul.sf-menu li.sf-hover ul,
|
|
ul.sf-menu ul li:hover ul,ul.sf-menu ul li:focus ul,ul.sf-menu ul li.sf-hover ul,
|
|
ul.sf-menu ul ul li:hover ul,ul.sf-menu ul ul li:focus ul,ul.sf-menu ul ul li.sf-hover ul,
|
|
ul.sf-menu ul ul ul li:hover ul,ul.sf-menu ul ul ul li:focus ul,ul.sf-menu ul ul ul li.sf-hover ul {
|
|
left: auto;
|
|
}
|
|
|
|
ul.sf-menu li:hover ul ul,ul.sf-menu li:focus ul ul,ul.sf-menu li.sf-hover ul ul,
|
|
ul.sf-menu ul li:hover ul ul,ul.sf-menu ul li:focus ul ul,ul.sf-menu ul li.sf-hover ul ul,
|
|
ul.sf-menu ul ul li:hover ul ul,ul.sf-menu ul ul li:focus ul ul,ul.sf-menu ul ul li.sf-hover ul ul,
|
|
ul.sf-menu ul ul ul li:hover ul ul,ul.sf-menu ul ul ul li:focus ul ul,ul.sf-menu ul ul ul li.sf-hover ul ul {
|
|
left: -999999px;
|
|
}
|
|
|
|
/* autoArrows CSS */
|
|
span.sf-arrow {
|
|
width: 7px;
|
|
height: 7px;
|
|
position: absolute;
|
|
top: 20px;
|
|
right: 5px;
|
|
display: block;
|
|
background: url(../images/arrows-white.png) no-repeat 0 0;
|
|
overflow: hidden; /* making sure IE6 doesn't overflow and expand the box */
|
|
font-size: 1px;
|
|
}
|
|
|
|
ul ul span.sf-arrow {
|
|
right: 10;
|
|
top: 20px;
|
|
background-position: 0 100%;
|
|
}
|
|
|
|
/* Theming the menu */
|
|
ul#nav {
|
|
float: right;
|
|
}
|
|
|
|
ul#nav ul {
|
|
background: #0DBBD5;
|
|
margin-top: 5px;
|
|
padding-bottom: 15px;
|
|
}
|
|
|
|
ul#nav li a {
|
|
padding:7px 20px 6px 20px;
|
|
font: 170% 'Yanone Kaffeesatz', arial, sans-serif;
|
|
text-shadow: 1px 1px #000;
|
|
text-decoration: none;
|
|
color: #FFF;
|
|
margin-right: 2px;
|
|
}
|
|
|
|
ul#nav li a:hover,ul#nav li a:focus {
|
|
color: #0DBBD5;
|
|
text-shadow: none;
|
|
}
|
|
|
|
ul#nav ul li a:hover,ul#nav ul li a:focus {
|
|
color: #222;
|
|
text-shadow: none;
|
|
}
|