500 lines
9.8 KiB
CSS
500 lines
9.8 KiB
CSS
/**********************************************************************************
|
|
|
|
.__ __ .__ ____ .__
|
|
______ | | _____ _/ |________| |__/_ |______ ______ ____ | |__
|
|
\____ \| | \__ \\ __\___ / | \| \_ __ \/ ___// ___\| | \
|
|
| |_> > |__/ __ \| | / /| Y \ || | \/\___ \\ \___| Y \
|
|
| __/|____(____ /__| /_____ \___| /___||__| /____ >\___ >___| / .ch
|
|
|__| \/ \/ \/ \/ \/
|
|
|
|
**********************************************************************************/
|
|
|
|
|
|
@font-face {
|
|
font-family: 'Socialico';
|
|
src: url(fonts/Socialico.otf) format('otf'),
|
|
url(fonts/Socialico.ttf) format('ttf');
|
|
src: local('Socialico'), local(Socialico),
|
|
url(fonts/Socialico.otf) format('opentype');
|
|
font-weight: normal;
|
|
font-style: normal;
|
|
}
|
|
|
|
a img { border: none; }
|
|
|
|
h1, h2, h3 {
|
|
font-family: 'Press Start 2P', cursive;
|
|
font-family: 'Codystar', cursive;
|
|
font-family: 'Acme', sans-serif;
|
|
text-transform: uppercase;
|
|
}
|
|
h1 { font-size: 2em; }
|
|
h2 { font-size: 1.7em; }
|
|
h3 { font-size: 1.5em; }
|
|
|
|
|
|
html, body {
|
|
width:100%;
|
|
font-family: 'Quando', serif;
|
|
font-size: 14px;
|
|
margin: 0;
|
|
padding: 0;
|
|
min-height: 100%;
|
|
height: 100%;
|
|
line-height: 23px;
|
|
background: url('img/bg-pattern-black.png') repeat;
|
|
text-align: center;
|
|
}
|
|
body {
|
|
overflow-x: hidden;
|
|
overflow-y: scroll;
|
|
}
|
|
|
|
div.layout {
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
|
|
aside { background-color: rgba(255, 255, 255, 0.1); }
|
|
aside > * { margin: 0 15px; padding: 15px 0; }
|
|
|
|
.wrapper { width: 100%; }
|
|
.mobile { display: none; }
|
|
|
|
.sidebar {
|
|
display: inline-block;
|
|
width: 320px;
|
|
float: left;
|
|
background: url(bg-pattern-green.png) repeat;
|
|
height: 100%;
|
|
position: fixed;
|
|
left: 0;
|
|
top: 0;
|
|
font-family: 'Acme', sans-serif;
|
|
text-transform: uppercase;
|
|
/*color: rgb(31,52,4); - dark green */
|
|
color: rgba(0,0,0,0.55);
|
|
text-align: left;
|
|
-webkit-box-shadow: 2px 2px 5px rgba(50, 50, 50, 0.75);
|
|
-moz-box-shadow: 2px 2px 5px rgba(50, 50, 50, 0.75);
|
|
box-shadow: 2px 2px 5px rgba(50, 50, 50, 0.75);
|
|
}
|
|
|
|
::selection {
|
|
background: rgba(24, 106, 12,0.7); /* Safari */
|
|
}
|
|
|
|
::-moz-selection {
|
|
background: rgba(24, 106, 12,0.7); /* Firefox */
|
|
}
|
|
|
|
/*---------------------------------------------------------------------
|
|
|
|
Sidebar: Navigation
|
|
|
|
*/
|
|
ul.nav {
|
|
list-style: none outside none;
|
|
font-size: 15px;
|
|
padding: 0;
|
|
margin: 0;
|
|
}
|
|
ul.nav.sub {
|
|
background-color: rgba(0,0,0,0.3);
|
|
background/*\**/: url(img/bg/black_30.png)\9;
|
|
display: none;
|
|
}
|
|
ul.nav.sub.active {
|
|
display: block;
|
|
}
|
|
|
|
ul.nav li {
|
|
line-height: 40px;
|
|
list-style: none outside none;
|
|
padding-left: 2em;
|
|
transition-property: background-color, padding-left;
|
|
transition-duration: 0.7s;
|
|
}
|
|
ul.nav.sub li{
|
|
padding-left: 2.8em;
|
|
}
|
|
|
|
ul.nav li:hover { background-color: rgba(255,255,255,0.2); background/*\**/: url(img/bg/white_20.png)\9; *background: url(img/bg/white_20.png); padding-left: 2.5em;}
|
|
ul.nav li.active { background-color: rgba(255,255,255,0.1); background/*\**/: url(img/bg/white_20.png)\9; *background: url(img/bg/white_20.png);}
|
|
|
|
ul.nav a, ul.nav a:link, ul.nav a:active, ul.nav a:visited, ul.nav a:hover, ul.nav a:focus { color: rgb(31,52,4); text-decoration: none; font-size: 1.5em;}
|
|
|
|
|
|
.main {
|
|
display: inline-block;
|
|
position: static;
|
|
margin: 0 auto;
|
|
text-align: left;
|
|
}
|
|
|
|
.header { display: none;}
|
|
|
|
.header, .content, .footer {
|
|
margin: 30px;
|
|
max-width: 700px;
|
|
background: rgba(0,0,0,0.4);
|
|
background/*\**/: url(img/bg/black_40.png)\9;
|
|
color: rgba(255,255,255,0.9);
|
|
color/*\**/: rgb(250,250,250)\9;
|
|
padding: 4em;
|
|
width: 700px;
|
|
-webkit-box-shadow: 2px 2px 5px rgba(50, 50, 50, 0.75);
|
|
-moz-box-shadow: 2px 2px 5px rgba(50, 50, 50, 0.75);
|
|
box-shadow: 2px 2px 5px rgba(50, 50, 50, 0.75);
|
|
}
|
|
|
|
.main a, .main a:link, .main a:active, .main a:visited {
|
|
/*color: rgba(20,20,20,0.9);
|
|
background: rgba(250,250,250,0.6);*/
|
|
|
|
/*color: rgba(255,255,255,0.8);
|
|
|
|
background: #367e20;*/
|
|
|
|
color: #367e20;
|
|
text-decoration: none;
|
|
}
|
|
.main a:hover, .main a:focus {
|
|
/*color: rgba(20,20,20,0.9);
|
|
text-decoration: none;
|
|
background: rgba(250,250,250,0.5);*/
|
|
|
|
text-decoration: underline;
|
|
color: #367e20;
|
|
}
|
|
|
|
.content {
|
|
min-height: 400px;
|
|
}
|
|
|
|
|
|
.logo {
|
|
width: 220px;
|
|
display: block;
|
|
margin: 30px auto 10px auto;
|
|
|
|
}
|
|
|
|
.social{
|
|
font-family: 'Socialico';
|
|
text-transform: none;
|
|
font-size: 40px;
|
|
text-align:center;
|
|
line-height: 55px;
|
|
vertical-align: top;
|
|
}
|
|
|
|
.social a, .social a:link, .social a:active, .social a:visited, .social a:hover, .social a:focus {
|
|
/*color: rgb(31, 52, 4); - dark green */
|
|
color: rgba(0,0,0,0.55);
|
|
text-decoration: none;
|
|
transition-property: opacity;
|
|
transition-duration: 0.3s;
|
|
}
|
|
.social a:hover {opacity: 0.8;}
|
|
|
|
/*---------------------------------------------------------------------
|
|
|
|
Boxes
|
|
|
|
*/
|
|
|
|
.box2, .box3 {
|
|
display: inline-block;
|
|
margin-right: 5px !important;
|
|
vertical-align: top;
|
|
}
|
|
|
|
.box2 {
|
|
width: 50%;
|
|
max-width: 320px;
|
|
}
|
|
|
|
.box3 {
|
|
width: 33%;
|
|
max-width: 205px;
|
|
}
|
|
|
|
div + .box2, div + box3 { margin: 5px !important;}
|
|
|
|
.portfolio-tile {
|
|
width: 200px;
|
|
height: 200px;
|
|
border: 1px solid rgba(0,0,0,0.5);
|
|
background: rgba(0,0,0,0.5);
|
|
display: inline-block;
|
|
margin-right: 10px;
|
|
margin-bottom: 10px;
|
|
}
|
|
|
|
.portfolio-tile:hover {
|
|
opacity: 0.8;
|
|
}
|
|
|
|
.portfolio-tile div {
|
|
visibility: hidden;
|
|
display: inline-block;
|
|
height: 35px;
|
|
width: 100%;
|
|
top: 165px;
|
|
line-height: 25px;
|
|
position: relative;
|
|
background: rgba(0,0,0,0.6);
|
|
background-size: 100%;
|
|
}
|
|
|
|
.portfolio-tile:hover div {
|
|
visibility: visible;
|
|
}
|
|
|
|
span.portfolio-label {
|
|
margin: auto 10px;
|
|
line-height: 35px;
|
|
height: 35px;
|
|
display: block;
|
|
vertical-align: middle;
|
|
color: #fff !important;
|
|
}
|
|
|
|
|
|
@media screen and (max-width: 1500px) {
|
|
.main {
|
|
position:absolute;
|
|
left: 320px;
|
|
}
|
|
}
|
|
|
|
@media screen and (max-width: 1040px) {
|
|
.box2 { width: 45%;}
|
|
.box3 { width: 27%;}
|
|
.portfolio-tile { width: 175px; height: 175px; }
|
|
.portfolio-tile div { top: 140px; }
|
|
}
|
|
|
|
@media screen and (max-width: 800px) {
|
|
.portfolio-tile { width: 150px; height: 150px; margin: 0 7px 7px 0;}
|
|
.portfolio-tile div { top: 115px; }
|
|
}
|
|
|
|
@media screen and (max-width: 650px) {
|
|
.portfolio-tile {
|
|
width: 200px;
|
|
height: 200px;
|
|
left: 50%;
|
|
position: relative;
|
|
margin-left: -100px;
|
|
display: block;
|
|
}
|
|
.portfolio-tile div {
|
|
top: 165px;
|
|
visibility: visible;
|
|
}
|
|
}
|
|
|
|
@media screen and (max-width: 320px) {
|
|
.box2 { width: 42%;}
|
|
.box3 { width: 25%;}
|
|
}
|
|
|
|
|
|
/*---------------------------------------------------------------------
|
|
|
|
Tables
|
|
|
|
*/
|
|
|
|
table {
|
|
width: 100%;
|
|
background-color: rgb(255,255,255);
|
|
color: rgba(0,0,0,0.9);
|
|
padding: 0;
|
|
border-spacing: 0;
|
|
/* padding: 1em; */
|
|
margin: 0.5em 0px !important;
|
|
overflow: auto;
|
|
}
|
|
td {
|
|
margin: 0;
|
|
padding: 1em;
|
|
}
|
|
thead {
|
|
font-weight: bold;
|
|
background: url(bg-pattern-green.png) repeat;
|
|
text-transform: uppercase;
|
|
}
|
|
|
|
tbody tr:nth-child(even){
|
|
background-color: #efefef;
|
|
}
|
|
|
|
/*---------------------------------------------------------------------
|
|
|
|
Forms
|
|
|
|
*/
|
|
|
|
input, select, textarea {
|
|
padding: 0.4em;
|
|
margin: 0.4em;
|
|
|
|
}
|
|
|
|
input[type=button], input[type=submit] {
|
|
background: #326a21;
|
|
text-transform: uppercase;
|
|
/*font-family: 'Acme',sans-serif;*/
|
|
border-radius: 15px;
|
|
color: #fff;
|
|
border: none;
|
|
}
|
|
input[type=text], input[type=password], textarea {
|
|
box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.3) inset;
|
|
}
|
|
input[type=button]:hover, input[type=button]:focus, input[type=submit]:hover, input[type=submit]:focus {
|
|
background: #367e20;
|
|
cursor: pointer;
|
|
}
|
|
|
|
input[type=text]:hover, input[type=text]:focus, input[type=password]:hover, input[type=password]:focus, textarea:hover, textarea:focus {
|
|
border: 1px solid #009600;
|
|
}
|
|
|
|
/*---------------------------------------------------------------------
|
|
|
|
Swipe.js - Javascript Slider
|
|
|
|
*/
|
|
|
|
.swipe {
|
|
margin: 1em 0;
|
|
|
|
}
|
|
.swipe ul { padding: 0;}
|
|
.swipe li div {
|
|
padding: 1em;
|
|
background: rgba(255,255,255,0.2);
|
|
border-radius: 8px;
|
|
}
|
|
|
|
|
|
/* Mobile CSS - Medium (Tablets, small Screens) */
|
|
|
|
@media screen and (max-width: 1050px) {
|
|
|
|
.main {
|
|
background: rgba(0,0,0,0.4);
|
|
background/*\**/: url(img/bg/black_40.png)\9;
|
|
background-attachment: fixed;
|
|
}
|
|
.header, .content, .footer {
|
|
margin: 0;
|
|
max-width: none;
|
|
width: auto;
|
|
height:100%;
|
|
background: none;
|
|
}
|
|
|
|
}
|
|
|
|
/* Mobile CSS - Small (Smartphones) */
|
|
@media screen and (max-width: 650px) {
|
|
|
|
html, body { height: auto;}
|
|
|
|
.main { background: none; }
|
|
body { background: rgba(0,0,0,0.4);
|
|
background/*\**/: url(img/bg/black_40.png)\9;
|
|
}
|
|
|
|
|
|
h1 {
|
|
font-size: 1.8em;
|
|
}
|
|
|
|
.mobile {
|
|
display: block;
|
|
}
|
|
.nomobile {
|
|
display: none !important;
|
|
}
|
|
.logo {
|
|
height: 90px;
|
|
width: auto;
|
|
/*display: inline-block;
|
|
float: left;*/
|
|
margin: 5px auto 5px auto;
|
|
}
|
|
|
|
.sidebar {
|
|
width: 100%;
|
|
height: auto;
|
|
position:relative;
|
|
}
|
|
|
|
.header, .content, .footer {
|
|
margin: 0;
|
|
max-width: 650px;
|
|
/*padding: 5px 10px;*/
|
|
padding: 5px 0;
|
|
}
|
|
|
|
.main {
|
|
position: relative;
|
|
left: 0;
|
|
width: 100%;
|
|
overflow-x: hidden;
|
|
|
|
}
|
|
|
|
.header > *, .content > *, .footer > * {
|
|
margin: 5px 10px;
|
|
}
|
|
.footer { position: relative; margin-bottom: 0; height: 40px;}
|
|
|
|
ul.nav {
|
|
margin: 0;
|
|
text-align: center;
|
|
}
|
|
|
|
ul.nav.sub {
|
|
margin: 0 auto;
|
|
background: rgba(0,0,0,0.4);
|
|
}
|
|
|
|
ul.nav li, ul.nav.sub li{
|
|
padding: 0 0.5em;
|
|
margin: 0;
|
|
display: inline-block;
|
|
background: none;
|
|
}
|
|
ul.nav li:hover, ul.nav.sub li:hover {
|
|
padding: 0 0.5em;
|
|
}
|
|
}
|
|
|
|
@media screen and (max-width: 360px) {
|
|
ul.nav.sub li { display: block; }
|
|
.box2, .box3 { display: block; width: 100%;}
|
|
}
|
|
|
|
@media screen and (max-width: 320px) {
|
|
ul.nav li { margin: 0; padding: 0 0.3em;}
|
|
ul.nav li:hover, ul.nav.sub li:hover { padding: 0 0.3em; }
|
|
}
|
|
|
|
#adsense {
|
|
text-align: center;
|
|
display: block;
|
|
}
|
|
|
|
#adsense .adsbygoogle {
|
|
|
|
margin-left: auto;
|
|
margin-right: auto;
|
|
}
|