/*
--------------------------------------------------------------------------------------------
PRESETS & DEFAULT FIXES
--------------------------------------------------------------------------------------------
*/
/*
* Margin, padding, and border resets
* except for form elements
*/
body,div,h1,h2,h3,h4,h5,h6,p,blockquote,pre,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,th,td,
article,aside,figure,footer,header,hgroup,menu,nav,section {
margin: 0;
padding: 0;
border: 0;
}
header, section, article, aside, footer, nav, menu {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
/*
* Consistency fixes
* adopted from http://necolas.github.com/normalize.css/
*/
html {
height: 100%;
-webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
}
body {
min-height: 100%;
background: url(/css/img/image_background.jpg) no-repeat;
background-position: center 15px;
color: rgb(105,105,105);
font-size: 100%;
}
article,aside,details,figcaption,figure,footer,header,hgroup,nav,section,audio,canvas,video {
display: block;
}
sub, sup {
position: relative;
vertical-align: baseline;
font-size: 75%;
line-height: 0;
}
sup {
top: -0.5em;
}
sub {
bottom: -0.25em;
}
pre {
white-space: pre;
white-space: pre-wrap;
word-wrap: break-word;
}
b, strong {
font-weight: bold;
}
abbr[title] {
border-bottom: 1px dotted;
}
input,
textarea,
button,
select {
margin: 0;
vertical-align: baseline;
font-size: 100%;
line-height: normal;
}
button,
html input[type="button"],
input[type="reset"],
input[type="submit"] {
cursor: pointer;
-webkit-appearance: button;
}
input[type="checkbox"], input[type="radio"] {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
-o-box-sizing: border-box;
-ms-box-sizing: border-box;
}
textarea {
overflow: auto;
}
table {
border-spacing: 0;
border-collapse: collapse;
}
/* * Zoomable baseline grid
* type size presets: ; */
body {
font-weight: normal;
font-size: 1em;
line-height: 1.5em;
/* 16px / 24px */
}
.small {
font-size: 0.8125em;
line-height: 1.3846153846153846em;
}
menu {
font-size: 0.875em;
}
.normal, h3, h4, h5, h6 {
font-size: 1.25em;
line-height: 1.2em;
}
.large, h2 {
font-size: 1.625em;
line-height: 1.15385em;
}
.huge, h1 {
font-size: 2.25em;
line-height: 1em;
}
.massive {
font-size: 4.25em;
line-height: 1.0588235294117647em;
}
.gigantic {
font-size: 6.875em;
line-height: 1.0909090909090908em;
}
p.ingress {
font-weight: normal;
}
.allCAPS {
text-transform: uppercase;
}
a:link, a:visited {
color: inherit;
text-decoration: underline;
-webkit-transition: all 0.5s ease-out;
-moz-transition: all 0.5s ease-out;
-o-transition: all 0.5s ease-out;
transition: all 0.5s ease-out;
}
a:hover, a:active {
color: rgb(220,135,5);
text-decoration: none;
}
/* Selection colours */
::selection {background: rgb(255,155,155);}
::-moz-selection {background: rgb(255,155,155);}
img::selection {background: transparent;}
img::-moz-selection {background: transparent;}
body {-webkit-tap-highlight-color: rgb(255,155,155);}
/*
--------------------------------------------------------------------------------------------
PAGE DEFAULTS
--------------------------------------------------------------------------------------------
*/
#pageFrame {
position: relative;
top: 0;
height: 100%;
}
/*
* Simple elastic gutters
* Note: box-sizing will not work in IE6-7
*/
.wrapper {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
padding: 0 0.75em;
}
.minMargin {
margin: 0 !important;
}
.minPadding {
padding: 0 !important;
}
.compact {
margin: 0 !important;
padding: 0 !important;
}
.clearing {
clear: both;
}
/*
--------------------------------------------------------------------------------------------
FONT FACES
--------------------------------------------------------------------------------------------
*/
body,
.small
{ font-family: sans-serif;}
h1, h2, h3, h4, h5,
.normal,
.large,
.huge,
.massive,
.gigantic
{ font-weight: normal; font-family: sans-serif; }
h6
{ font-weight: 300; font-family: sans-serif; text-transform: uppercase; }
big
{ text-transform: uppercase; }
/*
--------------------------------------------------------------------------------------------
MAINTAIN DISPLAY OPTIONS
--------------------------------------------------------------------------------------------
*/
/*
--------------------------------------------------------------------------------------------
MEDIA DEFAULT DECORATIONS
--------------------------------------------------------------------------------------------
*/
/*
* Simple fluid media
*/
figure {
position: relative;
}
figure img,
figure object,
figure embed,
figure video {
display: block;
max-width: 100%;
}
/*
* Images
* ------
*/
img {
}
a img {
border: 0;}
img {
-ms-interpolation-mode: bicubic;
}
/*
* Four-column grid active
* ----------------------------------------
* Margin | # 1 2 3 4 | Margin
* 5.55555% | % 25 50 75 100 | 5.55555%
*
*/
/*
Margins & columns
-----------------
*/
#pageFrame {
margin: 5.5555555% 0;
}
#pageFrame header, #pageFrame footer {
clear: both;
margin: 0 5.5555555%;
}
#pageFrame header {
text-align: center;
}
#pageFrame section {
margin: 0 5.5555555%;
}
section article {
position: relative;
float: none;
margin-top: 1.5em;
padding: 0.75em 0;
}
section aside {
float: none;
}
.chapter {
clear: both;
padding-top: 1em;
}
section .split1, section .split2, section .split3, section .split4 {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
margin: 0;
width: auto;
}
/*
Fonts
-----
*/
h1 {
padding: 0.3em 0;
}
h2, h3, h4, h5 , h6 {
padding: 0.5em 0;
}
p {
padding: 0.5em 0;
}
/*
Navigation
----------
*/
nav {
z-index: 999;
display: block;
clear: both;
margin: 0;
padding: 0.2em 5.5555555%;
width: 100%;
border-top: 1px solid rgb(60,60,60);
border-bottom: 1px solid rgb(60,60,60);
background-color: #fff;
text-align: center;
}
nav a {
color: inherit !important;
text-decoration: none !important;
}
nav ul {
list-style: none;;
}
nav li {
display: inline-block;
margin: 0.2em;
padding: 0.2em 0.375em;
height: 20px;
border: 3px solid rgb(255,255,255);
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
border-radius: 6px;
vertical-align: middle;
-webkit-transition: all 0.5s ease-out;
-moz-transition: all 0.5s ease-out;
transition: all 0.5s ease-out;
/* behavior: url(/css/PIE-1-1/PIE.htc); */ /* IE */
}
nav li:hover, nav li.active {
border: 3px solid rgb(255,90,90);
}
nav #home {
margin-left: 0.75em;
background: url(/css/img/btn_home.gif) no-repeat center center;
text-align: center;
}
nav #home img {
position: relative;
margin: 0;
padding: 0;
width: 30px;
height: 26px;
}
nav #home.active {
background: none;
}
nav.LockedPos {
border-bottom: 3px solid rgb(210,35,42);
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
background: rgb(210,35,42);
color: #fff;
opacity: 0.90;
filter: alpha(opacity=90);
-webkit-transition: all 0.5s ease-out;
-moz-transition: all 0.5s ease-out;
transition: all 0.5s ease-out;
-moz-opacity: 0.90;
}
nav.LockedPos li, nav.LockedPos li.active {
border: 3px solid rgb(210,35,42);
}
nav.LockedPos li:hover, nav.LockedPos li.active {
border: 3px solid rgb(255,255,255);
}
nav.LockedPos #home, nav.LockedPos #home.active {
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
border-radius: 8px;
background-color: #fff;
}
menu {
position: relative;
padding: 0;
width: 94.555555%;
-webkit-border-radius: 1px 8px 8px 1px;
-moz-border-radius: 1px 8px 8px 1px;
border-radius: 1px 8px 8px 1px;
background: rgb(60,60,60);
-webkit-box-shadow: 2px 2px 8px rgba(60,60,60,0.8);
-moz-box-shadow: 2px 2px 8px rgba(60,60,60,0.8);
box-shadow: 2px 2px 8px rgba(60,60,60,0.8);
color: #fff;
text-align: left;
}
menu a:link, menu a:visited {
display: block;
width: 100%;
color: inherit;
text-decoration: none;
}
menu a:hover, menu a:active {
color: rgb(220,135,5);
text-decoration: none;
/*
background-image: linear-gradient(left, rgb(65,65,65) 100%, rgb(60,60,60) 55%);
background-image: -o-linear-gradient(left, rgb(70,70,70) 100%, rgb(60,60,60) 55%);
background-image: -moz-linear-gradient(left, rgb(70,70,70) 100%, rgb(60,60,60) 55%);
background-image: -webkit-linear-gradient(left, rgb(70,70,70) 100%, rgb(60,60,60) 55%);
background-image: -ms-linear-gradient(left, rgb(70,70,70) 100%, rgb(60,60,60) 55%);
background-image: -webkit-gradient(linear, 0 0, 100% 0, color-stop(1, rgb(70,70,70)), color-stop(0.55, rgb(60,60,60)));
*/
}
menu ul {
position: relative;
list-style: none;
}
menu li {
display: inline-block;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
padding: 0.5em;
width: 100%;
border-bottom: 1px rgb(125,125,125) solid;
border-left: 1px rgb(125,125,125) solid;
-webkit-border-radius: 0 0 0 6px;
-moz-border-radius: 0 0 0 6px;
border-radius: 0 0 0 6px;
}
menu li:last-child {
border-bottom: 0;
}
ul.arkistojaksot {
z-index: 999;
display: block;
clear: both;
margin: 0;
padding: 0.2em;
list-style: none;
}
ul.arkistojaksot li {
display: inline-block;
margin: 0.5em 0.25em;
padding: 0.2em 0.375em;
height: 20px;
border: 3px rgb(210,35,42) solid;
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
border-radius: 6px;
background: rgb(210,35,42);
color: #fff;
vertical-align: middle;
font-weight: bold;
-webkit-transition: all 0.5s ease-out;
-moz-transition: all 0.5s ease-out;
transition: all 0.5s ease-out;
/* behavior: url(/css/PIE-1-1/PIE.htc); */ /* IE */
}
ul.arkistojaksot a {
color: inherit !important;
text-decoration: none !important;
}
ul.arkistojaksot li:hover, ul.arkistojaksot li.aktiivi {
border: 3px rgb(210,35,42) solid;
background: none;
}
/*
Styling
-------
*/
section.intro {
position:relative;
}
section.intro img {
position: relative;
z-index: 2;
margin: 1em 0;
padding: 0;
max-width: 50em;
width: 95%;
height: auto;
border: 8px solid rgba(255,255,255,0.25);
-webkit-border-radius: 15px;
-moz-border-radius: 15px;
border-radius: 15px;
box-shadow: 3px 3px 9px rgba(0,0,0,0.4);
}
section.intro small {
position: relative;
top: -1.2em;
left: 1em;
z-index: 1;
display: inline-block;
margin: 0;
padding: 0.5em 0.5em 0.2em;
max-width: 80%;
-webkit-border-radius: 0 0 6px 6px;
-moz-border-radius: 0 0 6px 6px;
border-radius: 0 0 6px 6px;
background: rgb(232,232,232);
font-size: 0.75em;
line-height: 1.25em;
}
#logo {
position: relative;
top: 0;
left: 0;
z-index: 888;
margin: 0 auto;
padding: 0;
width: 162px;
height: 115px;
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
border-radius: 6px;
background-color: #fff;
}
#logo img {
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
border-radius: 6px;
}
hgroup {
position: relative;
display: table-cell;
margin: 0;
padding: 0;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
background: rgb(210,35,42);
color: #fff !important;
font-weight: normal;
opacity: 0.80;
filter: alpha(opacity=80);
-moz-opacity: 0.80;
}
hgroup h1 {
padding: 0.2em 0.5em;
color: #fff !important;
}
.imgFolder, .infoBox {
position: relative;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
margin: 0 auto;
padding: 1.5em 0;
min-width: 16.6666666%;
min-height: 16.6666666%;
max-width: 20em;
width: 100%;
height: auto;
border: 3px solid rgb(230,230,230);
-webkit-border-radius: 9px;
-moz-border-radius: 9px;
border-radius: 9px;
background-color: rgba(255,255,255, 1.0);
-webkit-box-shadow: inset 0 0 15px rgba(0,0,0, 0.12);
-moz-box-shadow: inset 0 0 15px rgba(0,0,0, 0.12);
box-shadow: inset 0 0 15px rgba(0,0,0, 0.12);
text-align: center;
-webkit-transition: all 0.2s ease-in-out;
-moz-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
}
.imgFolder:after {
position: absolute;
bottom: 0;
left: 0.5em;
content: "KUVAT";
font-size: 0.75em;
}
.imgFolder:hover, infoBox:hover {
border: 3px solid rgb(255,90,90);
-webkit-box-shadow: inset 0 0 15px rgba(0,0,0, 0.35);
-moz-box-shadow: inset 0 0 15px rgba(0,0,0, 0.35);
box-shadow: inset 0 0 15px rgba(0,0,0, 0.35);
cursor: pointer;
}
.imgFolder img {
position: relative;
display: inline-block;
margin: auto;
width: 40%;
height: auto;
border: 1px #fff solid;
}
.imgFolder.inText {
display: inline-block;
}
.infoBox img {
max-width: 95%;
height: auto;
}
iframe {
position: relative;
display: block;
width: 100%;
}
article img {
max-width: 100%;
height: auto;
}
p {
overflow-x: auto;
max-width: 100%;
}
/*
News
----
*/
#headline {
position: relative;
display: table;
clear: both;
margin: 5px auto;
padding: 0;
width: 100%;
border-top: 1px solid rgba(0,0,0,0.3);
border-bottom: 1px solid rgba(0,0,0,0.3);
color: rgba(0,0,0,0.7);
}
#headline a {
color: rgb(105,105,105);
text-decoration: none;
}
#headline a:hover {
text-decoration: underline;
}
.p1, .p2 {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
padding: 0 0.75em;
}
#headline.odd .p1, #headline.even .p2 {
display: table-cell;
float: left;
width: 100%;
/* background-color: lightgreen; */
vertical-align: top;
}
#headline.even .p1, #headline.odd .p2 {
display: table-cell;
float: left;
padding: 0;
width: auto;
height: 100%;
/* background-color: lightblue; */
vertical-align: top;
}
#headline .imgFolder {
position: relative;
display: none;
float: none;
margin: 0.5em auto !important;
}
#headline .imgFolder img {
max-width: 90%;
}
#news aside {
display: none;
}
#news article {
width: 100%;
}
.news aside {
display: none;
}
.news article {
width: 100%;
}
#headline.short h1 {
font-size: 1.35em;
}
#headline.long h1 {
font-size: 2em;
line-height: 1em;
}
#timestamp {
padding: 5px 0;
border-radius: 10px;
font-size: 0.75em;
}
/*
AD's
----
*/
#ads {
position: absolute;
top: 0;
right: 0;
bottom: 0;
z-index: 999;
display: none;
float: right;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
background: rgb(222,222,222);
background-image: linear-gradient(left , rgb(232,232,232) 4%, rgb(202,202,202) 0%);
background-image: -o-linear-gradient(left, rgb(232,232,232) 4%, rgb(202,202,202) 0%);
background-image: -moz-linear-gradient(left, rgb(232,232,232) 4%, rgb(202,202,202) 0%);
background-image: -webkit-linear-gradient(left, rgb(232,232,232) 4%, rgb(202,202,202) 0%);
background-image: -ms-linear-gradient(left, rgb(232,232,232) 4%, rgb(202,202,202) 0%);
background-image: -webkit-gradient(linear, 0 0, 100% 0, color-stop(0.04, rgb(232,232,232)), color-stop(0, rgb(202,202,202)));
-webkit-transition: all 0.5s ease-out;
-moz-transition: all 0.5s ease-out;
transition: all 0.5s ease-out;
}
#ads h1,
#ads h2,
#ads h3,
#ads h4,
#ads h5,
#ads h6
{
font-size: 1em;
line-height: 1em;
}
#ads p {
overflow: hidden;
padding: 0.3em;
font-size: 0.875em;
line-height: 1.05em;
}
#ads .panel {
position: absolute;
top: 0;
right: 0;
bottom: 0;
z-index: 999;
display: block;
float: right;
overflow: none;
width: 2em;
background-color: rgb(202,202,202);
background-color: rgba(60,60,60, 0.3);
background-image: url(img/paneltext.gif) no-repeat center center;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
#ads .panel:hover {
background: rgba(60,60,60, 0.1);
cursor: pointer;
}
#ads .panelControls .timer {
display: block;
}
#ads .panelControls .button a {
border: 0.2em rgb(160,160,160) solid;
-webkit-border-radius: 0.5em;
-moz-border-radius: 0.5em;
border-radius: 0.5em;
padding: 0.25em;
text-decoration: none;
}
#ads .panelControls .button a:hover {
color: inherit;
background: rgba(60,60,60, 0.1);
}
#ads .panelControls {
position: absolute;
display: block;
margin: 0;
padding: 0;
width: 100%;
text-align: center;
padding-right: 2em;
bottom: 2em;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.mainoskooste {
display: block;
margin: 3em 0.75em;
}
.mainoskooste div {
display: block;
clear: both;
padding: 0.25em 0.75em;
border: 3px rgb(222,222,222) solid;
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
border-radius: 8px;
background: #fff;
cursor: pointer;
-webkit-transition: all 0.2s ease-in-out;
-moz-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
-moz-opacity: 0.9;
}
.mainoskooste div:hover {
}
.mainoskooste div:after {
float: right;
clear: both;
padding-top: 0.15em;
width: auto;
color: rgb(202,202,202);
content: "Mainos";
font-size: 0.675em;
}
#edison {
right: 3.75em !important;
}
/*
------------------------------------------------------------------------------------------------------------------------------------------------
@media screen and (min-width: 400px)
------------------------------------------------------------------------------------------------------------------------------------------------
*/
@media screen and (min-width: 25em) {
body { font-size: 1.0625em; } /* Zoom baseline grid to 17/16 = 1.0625 */
/*
Margins & columns
-----------------
*/
.split4 .wrapper { float: left; width: 50%; }
/*
Fonts
-----
*/
/*
Navigation
----------
*/
/*
Styling
-------
*/
/*
News
----
*/
}
/*
*
* Eight-column grid active
* ----------------------------------------------------------------------
* Margin | # 1 2 3 4 5 6 7 8 | Margin
* 5.55555% | % 12.5 25.0 37.5 50.0 62.5 75.0 87.5 100 | 5.55555%
*
*
*/
/*
------------------------------------------------------------------------------------------------------------------------------------------------
@media screen and (min-width: 720px)
------------------------------------------------------------------------------------------------------------------------------------------------
*/
@media screen and (min-width: 45em) {
body { font-size: 1em; } /* Reset baseline grid to 16/16 = 1 */
/*
Margins & columns
-----------------
*/
#pageFrame { margin: 3em 5.5555555%; }
#pageFrame section, section.intro { float: right; margin: 0; width: 75%; }
.split2 .wrapper:first-child { float: left; clear: left; width: 33.3333333%; }
.split2 .wrapper { float: left; width: 66.6666666%; }
.split3 .wrapper { float: left; width: 50%; }
.split4 .wrapper { float: left; width: 50%; }
/*
Fonts
-----
*/
/*
Navigation
----------
*/
menu { float: left; margin-top: 2.5em; max-width: 11em; width: 25%; }
menu li { width: 100%; }
menu li:last-child { border-bottom: 0; }
/*
Styling
-------
*/
#ads { display: block; width: 2em; }
.mainoskooste { display: none; }
/*
News
----
*/
#headline.odd .p1, #headline.even .p2 { width: 66.6666666%; }
#headline.even .p1, #headline.odd .p2 { width: 33.3333333%;}
#headline .imgFolder { display: inline-block; }
}
/*
------------------------------------------------------------------------------------------------------------------------------------------------
@media screen and (min-width: 888px)
------------------------------------------------------------------------------------------------------------------------------------------------
*/
@media screen and (min-width: 55.5em) {
body { /* font-size: 1.0625em; */ } /* Zoom baseline grid to 17/16 = 1.0625 */
/*
Margins & columns
-----------------
*/
/*
Fonts
-----
*/
/*
Navigation
----------
*/
menu { max-width: 13em; }
/*
Styling
-------
*/
}
/*
------------------------------------------------------------------------------------------------------------------------------------------------
@media screen and (min-width: 984px)
------------------------------------------------------------------------------------------------------------------------------------------------
*/
@media screen and (min-width: 61.5em) {
body { /* font-size: 1em; */ } /* Reset baseline grid to 16/16 = 1.0 */
/*
Margins & columns
-----------------
*/
#pageFrame header { float: left; margin: 0; padding: 0; width: 25%; border-bottom: 1px #000 solid; -webkit-border-radius: 0; -moz-border-radius: 0; border-radius: 0; background-color: #fff; }
#pageFrame section { float: right; width: 75%; }
section article, section.intro { float: left; width: 66.6666666%; }
section aside { float: right; margin-top: 25%; width: 33.3333333%; }
.split2 .wrapper:first-child { float: left; clear: left; width: 33.3333333%; }
.split2 .wrapper { float: left; width: 50%; }
.split3 .wrapper { float: left; width: 33.3333333%; }
.split4 .wrapper { float: left; width: 33.3333333%; }
/*
Fonts
-----
*/
/*
Navigation
----------
*/
nav { float: left; clear: none; margin-top: 70px; padding: 0.2em 0; width: 75%; text-align: left; }
menu { float: left; clear: left; max-width: 15em; width: 25%; }
/*
Styling
-------
*/
.imgFolder {
max-width: 10em;
width: 75%;
height: auto;
}
.imgFolder img {
width: 80%;
}
.imgFolder img ~ img {
margin: 2px 0;
}
.imgFolder.inText {
max-width: 20em;
width: 100%;
height: auto;
}
.imgFolder.inText img {
width: 40%;
}
.imgFolder.inText img ~ img {
margin: 0;
}
/*
News
----
*/
#headline.odd .p1, #headline.even .p2 { width: 66.6666666%; }
#headline.even .p1, #headline.odd .p2 { width: 33.3333333%;}
#headline .imgFolder { max-width: 90%; width: auto; }
}
/*
------------------------------------------------------------------------------------------------------------------------------------------------
@media screen and (min-width: 1200px)
------------------------------------------------------------------------------------------------------------------------------------------------
*/
@media screen and (min-width: 75em) {
body { /* font-size: 1.0625em; */ } /* Zoom baseline grid to 17/16 = 1.0625 */
/*
Margins & columns
-----------------
*/
/*
Fonts
-----
*/
/*
Navigation
----------
*/
menu { max-width: 18em; }
/*
Styling
-------
*/
.imgFolder.inText { width: 50%; }
}
/*
------------------------------------------------------------------------------------------------------------------------------------------------
@media screen and (min-width: 1392px)
------------------------------------------------------------------------------------------------------------------------------------------------
*/
@media screen and (min-width: 87em) {
body { /* font-size: 1em; */ } /* Reset baseline grid to 16/16 = 1.0 */
/*
Margins & columns
-----------------
*/
#pageFrame section { margin-right: 12.5%; width: 62.5%; }
section article, section.intro { width: 60%; }
section aside { float: right; margin-top: 25%; width: 40%; }
.split2 .wrapper:first-child { float: left; clear: left; width: 20%; }
.split2 .wrapper { float: left; width: 60%; }
.split3 .wrapper { float: left; width: 40%; }
.split4 .wrapper { float: left; width: 20%; }
#ads { display: block; padding-right: 2em; width: 240px; }
.mainoskooste { display: block; }
/*
Fonts
-----
*/
/*
Navigation
----------
*/
nav { width: 62.5%; }
menu { max-width: 20em; }
/*
Styling
-------
*/
.imgFolder {
max-width: 20em;
width: 100%;
}
.imgFolder img {
width: 40%;
}
.imgFolder img ~ img {
margin: 0;
}
.imgFolder.inText { width: 66.6666666%; }
#headline.odd .p1, #headline.even .p2 { width: 60%; }
#headline.even .p1, #headline.odd .p2 { width: auto;}
}
/*
------------------------------------------------------------------------------------------------------------------------------------------------
@media screen and (min-width: 1680px)
------------------------------------------------------------------------------------------------------------------------------------------------
*/
@media screen and (min-width: 105em) {
body { /* font-size: 1.0625em; */ } /* Zoom baseline grid to 17/16 = 1.0625 */
/*
Margins & columns
-----------------
*/
/*
Fonts
-----
*/
/*
Navigation
----------
*/
/*
Styling
-------
*/
}
/*
*
* Sixteen-column grid active
* ----------------------------------------------------------------------------------------------------------------------
* Margin | # 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 | Margin
* 5.55555% | % 6.25 12.5 18.75 25.0 31.25 37.5 43.75 50.0 56.25 62.5 68.75 75.0 81.25 87.5 93.75 100 | 5.55555%
*
*
*/
/* @media screen and (min-width: 1872px) */
@media screen and (min-width: 117em) {
/*
Margins & columns
-----------------
*/
/*
Fonts
-----
*/
/*
Navigation
----------
*/
/*
Styling
-------
*/
}
/* @media screen and (min-width: 2080px) */
@media screen and (min-width: 130em) {
body { /* max-width: 160em; */ font-size: 1.125em; } /* Zoom baseline grid to 18/16 = 1.125 */
/*
Margins & columns
-----------------
*/
/*
Fonts
-----
*/
/*
Navigation
----------
*/
/*
Styling
-------
*/
}
/*
--------------------------------------------------------------------------------------------
--------------------------------------------------------------------------------------------
*/
/* Set button size */
.actionLink {font-size: 0.9625em; }
/* Set button color */ .actionLink { border-color: white !important; background: white !important; }
/* Set button hover color */ .actionLink:hover { border-color: white; background: white; }
/* Set Icon color */ .icon { background-color: red; }
/* Set icon hover color */ .icon:hover, .actionLink:hover .icon { background-color: orange !important; }
/* Set link color */ .actionLink a { color: rgb(60,60,60) !important; }
/* Set link hover color */ .actionLink:hover a { color: orange !important; }
/*
--------------------------------------------------------------------------------------------
ADD BEHAVIORS for IE
--------------------------------------------------------------------------------------------
*/
.imgFolder, .infoBox, hgroup, menu, nav li, section.intro img {
behavior: url(/css/PIE-1-1/PIE.htc); /* IE */
}
}
section {
border: 2px lightblue solid; /* visibility settings */
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
}
section:after {
display: inline-block; /* visibility settings */
background-color: lightblue;
content: "Section";
font-size: 0.85em;
}
article {
border: 2px pink solid; /* visibility settings */
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
}
article:after {
display: inline-block; /* visibility settings */
background-color: pink;
content: "Article";
font-size: 0.85em;
}
aside {
border: 2px lightgray solid; /* visibility settings */
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
}
aside:after {
display: inline-block; /* visibility settings */
background-color: lightgray;
content: "Aside";
font-size: 0.85em;
}
footer {
clear: both;
padding-top: 1em;
padding-bottom: 2em;
border: 2px lightyellow solid; /* visibility settings */
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
}
footer:after {
display: inline-block; /* visibility settings */
background-color: lightyellow;
content: "Footer";
font-size: 0.85em;
}
#chapter {
/* border: 2px lightgreen solid; */
/* -webkit-border-radius: 5px; */
/* -moz-border-radius: 5px; */
/* border-radius: 5px; */
}
.split1 .wrapper:after {
display: inline-block; /* visibility settings */
background-color: lightgreen;
content: "Chapter Split 1";
font-size: 0.85em;
}
.split2 .wrapper:after {
display: inline-block; /* visibility settings */
background-color: lightgreen;
content: "Chapter Split 2";
font-size: 0.85em;
}
.split3 .wrapper:after {
display: inline-block; /* visibility settings */
background-color: lightgreen;
content: "Chapter Split 3";
font-size: 0.85em;
}
.split4 .wrapper:after {
display: inline-block; /* visibility settings */
background-color: lightgreen;
content: "Chapter Split 4";
font-size: 0.85em;
}
/*
--------------------------------------------------------------------------------------------
CREDITS
--------------------------------------------------------------------------------------------
*/
/*
* Golden Grid System (1.01)
* by Joni Korpi
* licensed under MIT
*/