/*
* HTML5 Boilerplate
*
* What follows is the result of much research on cross-browser styling.
* Credit left inline and big thanks to Nicolas Gallagher, Jonathan Neal,
* Kroc Camen, and the H5BP dev community and team.
*
* Detailed information about this CSS: h5bp.com/css
*
* This Version of HTML5 Boilerplate is modified by Daniel Maurer and
* includes various styes and examples from skeletongrid.
* Additional information about this: www.danma.de
*
* Overview
* # HTML5 display definitions
* # Base
* # Links
* # Typography
* # Lists
* # Embedded content
* # Figures
* # Forms
* # Forms
* # Tables
* # Chrome Frame Prompt
* # Primary Styles
* # media queries
* # non-semantic helper classes
* # additional classes, activated by scripts
* # grid
* # font faces
* # print styles
*
* Colours
* dark-grey #222222
* light-grey #777777
*/
/*
.pager {
display: table-cell;
vertical-align: middle;
}
.pager * {
vertical-align: middle;
}
.pager span {
display: inline-block;
height: 100%;
width: 0px;
}
*/
/* =============================================================================
facebook
========================================================================== */
/*.fb-like-box, .fb-like-box span, .fb-like-box.fb_iframe_widget span iframe { */
.fb-like, .fb-like span, .fb-like iframe span[style], .fb-like.fb_iframe_widget span iframe {
width: 100% !important;
}
a.box {
display: inline-block;
width: 45%;
height: 75px !important;
margin-right: 5px;
overflow: hidden;
}
img.img.big {
width: 95%;
height: auto !important;
}
input[type=checkbox]{
margin-right: 25px;
}
input[type=radio]:checked + label{
font-weight: bold;
}
/* =============================================================================
slider
========================================================================== */
.bx-wrapper a.bx-prev, .bx-wrapper a.bx-next {
top: 41%;
position: absolute;
z-index: 1;
}
.bx-wrapper a.bx-next {
right: 0;
}
.bx-wrapper a.bx-prev {
left: 0;
}
/* IMAGE CAPTIONS */
.bx-wrapper .bx-captions {
position: absolute;
bottom: 0;
left: 0;
background: #666\9;
background: rgba(80, 80, 80, 0.75);
width: 100%;
}
.bx-wrapper .bx-captions span {
color: #fff;
font-family: Arial;
display: block;
font-size: .85em;
padding: 10px;
}
div.pager img.pos {
}
/* headline projects */
span.mobile {
display: block;
}
span.not-mobile{
font-size: 0.9em;
position: absolute;
padding-top: 10px;
background: #fff;
width: 215px;
display: none;
filter: alpha(opacity=70);
opacity: 0.7;
}
span.not-mobile span.no-opacity {
filter: alpha(opacity=100) !important;
opacity: 1 !important;
}
div.row.mobile {
margin-bottom: 0px !important;
}
/* =============================================================================
info
========================================================================== */
.hidden-content {
display: none;
}
.info h2 {
/*border-bottom: 1px solid black;*/
cursor: pointer;
width: 100%;
display: block;
}
.info h2 span {
padding-left: 10px;
}
.container .three-thirds.columns {
margin-left: 0px;
}
/* =============================================================================
projects
========================================================================== */
#project-name {
background-color: white;
display: block;
font-size: 22px;
margin-bottom: -35px;
opacity: 0.5;
padding-left: 14px;
padding-top: 5px;
position: relative;
}
#project-subtitle {
background-color: white;
display: block;
font-size: 16px;
margin-top: -23px;
opacity: 0.5;
padding-left: 14px;
padding-top: 0px;
position: relative;
z-index: 10px;
}
/* =============================================================================
project filter
========================================================================== */
#filter {
margin-top: -20px;
padding-top: 5px;
padding-bottom: 5px;
}
#filter-disable {
display: none;
}
#filter-disable, #filter-enable {
margin-top: -20px;
}
img.check-mark {
margin-top: -8px;
margin-right: 27px;
}
#ajax_loader {
margin-left: 15px;
display: none;
}
/* =============================================================================
HTML5 display definitions
========================================================================== */
article, aside, details, figcaption, figure, footer, header, hgroup, nav, section { display: block; }
footer {
margin-bottom: 15px !important;
}
audio, canvas, video { display: inline-block; *display: inline; *zoom: 1; }
audio:not([controls]) { display: none; }
[hidden] { display: none; }
/* =============================================================================
paddings
========================================================================== */
.padding.small {
padding-top: 10px;
}
/* =============================================================================
Base
========================================================================== */
/*
* 1. Correct text resizing oddly in IE6/7 when body font-size is set using em units
* 2. Prevent iOS text size adjust on device orientation change, without disabling user zoom: h5bp.com/g
* 3. Fixing webkit font-rendering. Inspired by skeletongrid. // getskeleton.css
*/
html { font-size: 100%; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; -webkit-font-smoothing: antialiased; overflow-y: scroll; }
html, button, input, select, textarea { font-family: Arial, sans-serif; color: #222; }
body { margin: 0; font-size: 1em; line-height: 1.4; }
/*
* Remove text-shadow in selection highlight: h5bp.com/i
* These selection declarations have to be separate
* Also: hot pink! (or customize the background color to match your design)
*/
::-moz-selection { background: #fe57a1; color: #fff; text-shadow: none; }
::selection { background: #fe57a1; color: #fff; text-shadow: none; }
.right {
float: right !important;
}
#showIt,#hideIt {
cursor: pointer;
font-style: italic;
}
/* =============================================================================
Links
========================================================================== */
a { color: #777777; text-decoration: none; outline: none;}
a:visited { color: #777777; }
a:hover, a.active { color: #222222; cursor: pointer; outline: none; }
a:focus { outline: thin dotted; outline: none;}
/* Improve readability when focused and hovered in all browsers: h5bp.com/h */
a:hover, a:active { outline: 0; outline: none;}
/* =============================================================================
Typography
========================================================================== */
/* Headlines */
h1, h2, h3, h4, h5 {
color: #181818;
font-family: Arial, sans-serif;
font-weight: normal; }
h1 a, h2 a, h3 a, h4 a, h5 a { font-weight: inherit; }
h1 { font-size: 35px; line-height: 40px; margin-bottom: 10px; }
h2 { font-size: 28px; line-height: 34px; margin-bottom: 8px; }
h3 { font-size: 21px; line-height: 30px; margin-bottom: 4px; }
h4 { font-size: 17px; line-height: 24px; }
h5 { font-size: 14px; line-height: 21px; }
.subheader { color: #777; }
/* Paragraphs */
p { margin: 10px 0 10px 0; }
p img { margin: 0; }
p.lead { font-size: 21px; line-height: 27px; color: #777; }
/* Blockquotes */
blockquote, blockquote p { font-size: 17px; line-height: 24px; color: #777; font-style: italic; }
blockquote { margin: 0 0 20px; padding: 9px 20px 0 19px; border-left: 1px solid #ddd; }
blockquote cite { display: block; font-size: 12px; color: #555; }
blockquote cite:before { content: "\2014 \0020"; }
blockquote cite a, blockquote cite a:visited, blockquote cite a:visited { color: #555; }
q { quotes: none; }
q:before, q:after { content: ""; content: none; }
em { font-style: italic; }
strong { font-weight: bold; color: #333; }
abbr[title] { border-bottom: 1px dotted; }
b, strong { font-weight: bold; }
dfn { font-style: italic; }
hr { display: block; height: 1px; border: 0; border-top: 2px solid #222222; padding: 0; margin-top: 0; }
hr.light {margin-top: 13px; border-top: 1px solid #ccc; }
ins { background: #ff9; color: #000; text-decoration: none; }
mark { background: #ff0; color: #000; font-style: italic; font-weight: bold; }
/* Redeclare monospace font family: h5bp.com/j */
pre, code, kbd, samp { font-family: monospace, serif; _font-family: 'courier new', monospace; font-size: 1em; }
/* Improve readability of pre-formatted text in all browsers */
pre { white-space: pre; white-space: pre-wrap; word-wrap: break-word; }
small, .small { font-size: 85%; }
/* Position subscript and superscript content without affecting line-height: h5bp.com/k */
sub, sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; }
sup { top: -0.5em; }
sub { bottom: -0.25em; }
/* =============================================================================
Lists
========================================================================== */
ul, ol { margin: 1em 0; }
ul { list-style: none outside; }
ol { list-style: decimal; }
ol, ul.square, ul.circle, ul.disc { margin-left: 30px; }
ul.square, ul.square li { list-style: square outside; }
ul.circle, ul.circle li { list-style: circle outside; }
ul.disc, ul.disc li { list-style: disc outside; }
ul ul, ul ol,
ol ol, ol ul { margin: 4px 0 5px 30px; font-size: 90%; }
ul ul li, ul ol li,
ol ol li, ol ul li { margin-bottom: 6px; }
li { line-height: 18px; margin-bottom: 12px; }
ul.large li { line-height: 21px; }
li p { line-height: 21px; }
dd { margin: 0 0 0 40px; }
nav ul, nav ol { list-style: none; list-style-image: none; margin: 0; padding: 0; }
/* =============================================================================
Nav / Menus
========================================================================== */
ul.menu li {
font-family: Arial, sans-serif;
display: inline;
text-transform: uppercase;
}
ul.menu.first {
margin-top: 28px;
}
ul.menu.first li {
margin-right: 20px;
font-size: 28px; line-height: 34px; margin-bottom: 8px;
}
ul.menu.second li.contact {
float: left;
}
ul.menu.second li.lang {
float: right;
}
ul.menu.second {
margin-top: 69px;
margin-bottom: 0px;
}
/* =============================================================================
Embedded content
========================================================================== */
/*
* 1. Improve image quality when scaled in IE7: h5bp.com/d
* 2. Remove the gap between images and borders on image containers: h5bp.com/i/440
* 3. include helper-class for scalable images. Inspired by skeletongrid. // www.getskeleton.com
*/
img { border: 0; -ms-interpolation-mode: bicubic; vertical-align: middle; }
img.scale-with-grid {
max-width: 100%;
height: auto;
}
img.scale-small-with-grid {
max-width: 80%;
height: auto; }
/*
* Correct overflow not hidden in IE9
*/
svg:not(:root) { overflow: hidden; }
/* =============================================================================
Figures
========================================================================== */
figure { margin: 0; }
/* =============================================================================
Forms
========================================================================== */
form { margin: 0; }
fieldset { border: 0; margin: 0; padding: 0; }
/* Indicate that 'label' will shift focus to the associated form element */
label { cursor: pointer; padding-right: 10px; display: inline-block; }
.label { display: block; float: left; width: 150px;}
.label.rightl { width: 50%; }
/*
* 1. Correct color not inheriting in IE6/7/8/9
* 2. Correct alignment displayed oddly in IE6/7
*/
legend { border: 0; *margin-left: -7px; padding: 0; white-space: normal; }
/*
* 1. Correct font-size not inheriting in all browsers
* 2. Remove margins in FF3/4 S5 Chrome
* 3. Define consistent vertical alignment display in all browsers
*/
button, input, select, textarea { font-size: 100%; margin: 0; vertical-align: baseline; *vertical-align: middle; }
/*
* 1. Define line-height as normal to match FF3/4 (set using !important in the UA stylesheet)
*/
button, input { line-height: normal; }
/*
* 1. Display hand cursor for clickable form elements
* 2. Allow styling of clickable form elements in iOS
* 3. Correct inner spacing displayed oddly in IE7 (doesn't effect IE6)
*/
button, input[type="button"], input[type="reset"], input[type="submit"] { cursor: pointer; -webkit-appearance: button; *overflow: visible; }
/*
* Re-set default cursor for disabled elements
*/
button[disabled], input[disabled] { cursor: default; }
/*
* Consistent box sizing and appearance
*/
input[type="checkbox"], input[type="radio"] { box-sizing: border-box; padding: 0; *width: 13px; *height: 13px; }
input[type="checkbox"] { border: 4px solid #fff; }
input[type="search"] { -webkit-appearance: textfield; -moz-box-sizing: content-box; -webkit-box-sizing: content-box; box-sizing: content-box; }
input[type="search"]::-webkit-search-decoration, input[type="search"]::-webkit-search-cancel-button { -webkit-appearance: none; }
/*
* Remove inner padding and border in FF3/4: h5bp.com/l
*/
button::-moz-focus-inner, input::-moz-focus-inner { border: 0; padding: 0; }
/*
* 1. Remove default vertical scrollbar in IE6/7/8/9
* 2. Allow only vertical resizing
*/
textarea { overflow: auto; vertical-align: top; resize: vertical; }
/* Colors for form validity */
input:valid, textarea:valid { }
input:invalid, textarea:invalid { background-color: #f0dddd; }
/* Basic Button-Style from skeletongrid. // www.skeletongrid.com */
.button,
button,
input[type="submit"],
input[type="reset"],
input[type="button"] {
background: #eee; /* Old browsers */
background: #eee -moz-linear-gradient(top, rgba(255,255,255,.2) 0%, rgba(0,0,0,.2) 100%); /* FF3.6+ */
background: #eee -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,.2)), color-stop(100%,rgba(0,0,0,.2))); /* Chrome,Safari4+ */
background: #eee -webkit-linear-gradient(top, rgba(255,255,255,.2) 0%,rgba(0,0,0,.2) 100%); /* Chrome10+,Safari5.1+ */
background: #eee -o-linear-gradient(top, rgba(255,255,255,.2) 0%,rgba(0,0,0,.2) 100%); /* Opera11.10+ */
background: #eee -ms-linear-gradient(top, rgba(255,255,255,.2) 0%,rgba(0,0,0,.2) 100%); /* IE10+ */
background: #eee linear-gradient(top, rgba(255,255,255,.2) 0%,rgba(0,0,0,.2) 100%); /* W3C */
border: 1px solid #aaa;
border-top: 1px solid #ccc;
border-left: 1px solid #ccc;
padding: 4px 12px;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
color: #444;
font-size: 11px;
font-weight: bold;
text-decoration: none;
text-shadow: 0 1px rgba(255, 255, 255, .75);
cursor: pointer;
margin-bottom: 5px;
line-height: normal;
padding: 8px 10px;
font-family: Arial, sans-serif; }
.button:hover,
button:hover,
input[type="submit"]:hover,
input[type="reset"]:hover,
input[type="button"]:hover {
color: #222;
background: #ddd; /* Old browsers */
background: #ddd -moz-linear-gradient(top, rgba(255,255,255,.3) 0%, rgba(0,0,0,.3) 100%); /* FF3.6+ */
background: #ddd -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,.3)), color-stop(100%,rgba(0,0,0,.3))); /* Chrome,Safari4+ */
background: #ddd -webkit-linear-gradient(top, rgba(255,255,255,.3) 0%,rgba(0,0,0,.3) 100%); /* Chrome10+,Safari5.1+ */
background: #ddd -o-linear-gradient(top, rgba(255,255,255,.3) 0%,rgba(0,0,0,.3) 100%); /* Opera11.10+ */
background: #ddd -ms-linear-gradient(top, rgba(255,255,255,.3) 0%,rgba(0,0,0,.3) 100%); /* IE10+ */
background: #ddd linear-gradient(top, rgba(255,255,255,.3) 0%,rgba(0,0,0,.3) 100%); /* W3C */
border: 1px solid #888;
border-top: 1px solid #aaa;
border-left: 1px solid #aaa; }
.button:active,
button:active,
input[type="submit"]:active,
input[type="reset"]:active,
input[type="button"]:active {
border: 1px solid #666;
background: #ccc; /* Old browsers */
background: #ccc -moz-linear-gradient(top, rgba(255,255,255,.35) 0%, rgba(10,10,10,.4) 100%); /* FF3.6+ */
background: #ccc -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,.35)), color-stop(100%,rgba(10,10,10,.4))); /* Chrome,Safari4+ */
background: #ccc -webkit-linear-gradient(top, rgba(255,255,255,.35) 0%,rgba(10,10,10,.4) 100%); /* Chrome10+,Safari5.1+ */
background: #ccc -o-linear-gradient(top, rgba(255,255,255,.35) 0%,rgba(10,10,10,.4) 100%); /* Opera11.10+ */
background: #ccc -ms-linear-gradient(top, rgba(255,255,255,.35) 0%,rgba(10,10,10,.4) 100%); /* IE10+ */
background: #ccc linear-gradient(top, rgba(255,255,255,.35) 0%,rgba(10,10,10,.4) 100%); /* W3C */ }
.button.full-width,
button.full-width,
input[type="submit"].full-width,
input[type="reset"].full-width,
input[type="button"].full-width {
width: 100%;
padding-left: 0 !important;
padding-right: 0 !important;
text-align: center; }
/* =============================================================================
Tables
========================================================================== */
table { border-collapse: collapse; border-spacing: 0; }
td { vertical-align: top; }
/* =============================================================================
Chrome Frame Prompt
========================================================================== */
.chromeframe { margin: 0.2em 0; background: #ccc; color: black; padding: 0.2em 0; }
/* ==|== primary styles =====================================================
Author:
========================================================================== */
/* ==|== media queries ======================================================
EXAMPLE Media Query for Responsive Design.
This example overrides the primary ('mobile first') styles
Modify as content requires.
Media Query examples from skeletongrid. // www.getskeleton.com
========================================================================== */
/* Smaller than standard 960 (devices and browsers) */
@media only screen and (max-width: 959px) {}
/* Tablet Portrait size to standard 960 (devices and browsers) */
@media only screen and (min-width: 768px) and (max-width: 959px) {}
/* All Mobile Sizes (devices and browser) */
@media only screen and (max-width: 767px) {}
/* Mobile Landscape Size to Tablet Portrait (devices and browsers) */
@media only screen and (min-width: 480px) and (max-width: 767px) {}
/* Mobile Portrait Size to Mobile Landscape Size (devices and browsers) */
@media only screen and (max-width: 479px) {}
/* ==|== non-semantic helper classes ========================================
Please define your styles before this section.
========================================================================== */
/* For image replacement */
.ir { display: block; border: 0; text-indent: -999em; overflow: hidden; background-color: transparent; background-repeat: no-repeat; text-align: left; direction: ltr; *line-height: 0; }
.ir br { display: none; }
/* Hide from both screenreaders and browsers: h5bp.com/u */
.hidden { display: none !important; visibility: hidden; }
/* Hide only visually, but have it available for screenreaders: h5bp.com/v */
.visuallyhidden { border: 0; clip: rect(0 0 0 0); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px; }
/* Extends the .visuallyhidden class to allow the element to be focusable when navigated to via the keyboard: h5bp.com/p */
.visuallyhidden.focusable:active, .visuallyhidden.focusable:focus { clip: auto; height: auto; margin: 0; overflow: visible; position: static; width: auto; }
/* Hide visually and from screenreaders, but maintain layout */
.invisible { visibility: hidden; }
/* Classes used for clearing the floats. Taken from skeletongrid // www.skeletongrid.com */
/* Self Clearing Goodness */
.container:after { content: "\0020"; display: block; height: 0; clear: both; visibility: hidden; }
/* Use clearfix class on parent to clear nested columns,
or wrap each row of columns in a */
.clearfix:before,
.clearfix:after,
.row:before,
.row:after {
content: '\0020';
display: block;
overflow: hidden;
visibility: hidden;
width: 0;
height: 0; }
.row:after,
.clearfix:after {
clear: both; }
.row,
.clearfix {
zoom: 1; }
/* You can also use a
to clear columns */
.clear {
clear: both;
display: block;
overflow: hidden;
visibility: hidden;
width: 0;
height: 0;
}
/* Manage bottom-margins. From skeletongrid. // www.getskeleton.com */
.remove-bottom { margin-bottom: 0 !important; }
.half-bottom { margin-bottom: 10px !important; }
.add-bottom { margin-bottom: 20px !important; }
/* ==|== additional classes, activated by scripts ===========================
Include styles for additional functionality here
========================================================================== */
/* ==|== grid ===============================================================
Grid-related classes, taken from www.getskeleton.com includes:
#Base 960 Grid
#Tablet (Portrait)
#Mobile (Portrait)
#Mobile (Landscape)
========================================================================== */
/* #Base 960 Grid
================================================== */
.container { position: relative; width: 960px; margin: 0 auto; padding: 0; }
.container .column,
.container .columns { float: left; display: inline; margin-left: 10px; margin-right: 10px; }
.row { margin-bottom: 20px; }
/* Nested Column Classes */
.column.alpha, .columns.alpha { margin-left: 0; }
.column.omega, .columns.omega { margin-right: 0; }
/* Base Grid */
.container .one.column,
.container .one.columns { width: 40px; }
.container .two.columns { width: 100px; }
.container .three.columns { width: 160px; }
.container .four.columns { width: 220px; }
.container .five.columns { width: 280px; }
.container .six.columns { width: 340px; }
.container .seven.columns { width: 400px; }
.container .eight.columns { width: 460px; }
.container .nine.columns { width: 520px; }
.container .ten.columns { width: 580px; }
.container .eleven.columns { width: 640px; }
.container .twelve.columns { width: 700px; }
.container .thirteen.columns { width: 760px; }
.container .fourteen.columns { width: 820px; }
.container .fifteen.columns { width: 880px; }
.container .sixteen.columns { width: 940px; }
.container .one-third.column { width: 300px; }
.container .two-thirds.column { width: 620px; }
/* Offsets */
.container .offset-by-one { padding-left: 60px; }
.container .offset-by-two { padding-left: 120px; }
.container .offset-by-three { padding-left: 180px; }
.container .offset-by-four { padding-left: 240px; }
.container .offset-by-five { padding-left: 300px; }
.container .offset-by-six { padding-left: 360px; }
.container .offset-by-seven { padding-left: 420px; }
.container .offset-by-eight { padding-left: 480px; }
.container .offset-by-nine { padding-left: 540px; }
.container .offset-by-ten { padding-left: 600px; }
.container .offset-by-eleven { padding-left: 660px; }
.container .offset-by-twelve { padding-left: 720px; }
.container .offset-by-thirteen { padding-left: 780px; }
.container .offset-by-fourteen { padding-left: 840px; }
.container .offset-by-fifteen { padding-left: 900px; }
.column { overflow: hidden; }
/* #Tablet (Portrait)
================================================== */
/* Note: Design for a width of 768px */
@media only screen and (min-width: 768px) and (max-width: 959px) {
#filter-form label, .button { margin-bottom: 10px; }
.container { width: 768px; }
.container .column,
.container .columns { margin-left: 10px; margin-right: 10px; }
.column.alpha, .columns.alpha { margin-left: 0; margin-right: 10px; }
.column.omega, .columns.omega { margin-right: 0; margin-left: 10px; }
.alpha.omega { margin-left: 0; margin-right: 0; }
.container .one.column,
.container .one.columns { width: 28px; }
.container .two.columns { width: 76px; }
.container .three.columns { width: 124px; }
.container .four.columns { width: 172px; }
span.not-mobile { width: 172px; }
.container .five.columns { width: 220px; }
.container .six.columns { width: 268px; }
.container .seven.columns { width: 316px; }
.container .eight.columns { width: 364px; }
.container .nine.columns { width: 412px; }
.container .ten.columns { width: 460px; }
.container .eleven.columns { width: 508px; }
.container .twelve.columns { width: 556px; }
.container .thirteen.columns { width: 604px; }
.container .fourteen.columns { width: 652px; }
.container .fifteen.columns { width: 700px; }
.container .sixteen.columns { width: 748px; }
.container .one-third.column { width: 236px; }
.container .two-thirds.column { width: 492px; }
/* Offsets */
.container .offset-by-one { padding-left: 48px; }
.container .offset-by-two { padding-left: 96px; }
.container .offset-by-three { padding-left: 144px; }
.container .offset-by-four { padding-left: 192px; }
.container .offset-by-five { padding-left: 240px; }
.container .offset-by-six { padding-left: 288px; }
.container .offset-by-seven { padding-left: 336px; }
.container .offset-by-eight { padding-left: 384px; }
.container .offset-by-nine { padding-left: 432px; }
.container .offset-by-ten { padding-left: 480px; }
.container .offset-by-eleven { padding-left: 528px; }
.container .offset-by-twelve { padding-left: 576px; }
.container .offset-by-thirteen { padding-left: 624px; }
.container .offset-by-fourteen { padding-left: 672px; }
.container .offset-by-fifteen { padding-left: 720px; }
}
/* #Mobile (Portrait)
================================================== */
/* Note: Design for a width of 320px */
@media only screen and (max-width: 767px) {
ul.menu.second {
margin-top: 20px;
}
.label { width: 50%}
input[type="button"] { margin-top: 5px; }
#filter { padding-left: 5px; padding-top: 5px;}
.info h2 span {
padding-left: 0px;
}
.container { width: 300px; }
.container .columns,
.container .column { margin: 0; }
.container .one.column,
.container .one.columns,
.container .two.columns,
.container .three.columns,
.container .four.columns,
.container .five.columns,
.container .six.columns,
.container .seven.columns,
.container .eight.columns,
.container .nine.columns,
.container .ten.columns,
.container .eleven.columns,
.container .twelve.columns,
.container .thirteen.columns,
.container .fourteen.columns,
.container .fifteen.columns,
.container .sixteen.columns,
.container .one-third.column,
.container .two-thirds.column { width: 300px; }
span.not-mobile { width: 295px; }
/* Offsets */
.container .offset-by-one,
.container .offset-by-two,
.container .offset-by-three,
.container .offset-by-four,
.container .offset-by-five,
.container .offset-by-six,
.container .offset-by-seven,
.container .offset-by-eight,
.container .offset-by-nine,
.container .offset-by-ten,
.container .offset-by-eleven,
.container .offset-by-twelve,
.container .offset-by-thirteen,
.container .offset-by-fourteen,
.container .offset-by-fifteen { padding-left: 0; }
}
/* #Mobile (Landscape)
================================================== */
/* Note: Design for a width of 480px */
@media only screen and (min-width: 480px) and (max-width: 767px) {
.info h2 span {
padding-left: 0px;
}
.label { width: 50%}
input[type="button"] { margin-top: 5px; }
#filter { padding-left: 5px; padding-top: 5px;}
.container { width: 420px; }
.container .columns,
.container .column { margin: 0; }
.container .one.column,
.container .one.columns,
.container .two.columns,
.container .three.columns,
.container .four.columns,
.container .five.columns,
.container .six.columns,
.container .seven.columns,
.container .eight.columns,
.container .nine.columns,
.container .ten.columns,
.container .eleven.columns,
.container .twelve.columns,
.container .thirteen.columns,
.container .fourteen.columns,
.container .fifteen.columns,
.container .sixteen.columns,
.container .one-third.column,
.container .two-thirds.column { width: 420px; }
span.not-mobile{ width: 415px; }
}
/* ==|== font faces =========================================================
Example font-face pile. Taken from skeletongrid. // www.getsekelton.com
Just create a "fonts" folder at the root, copy your FontName into code
below and remove comment brackets
========================================================================== */
/* @font-face {
font-family: 'FontName';
src: url('../fonts/FontName.eot');
src: url('../fonts/FontName.eot?iefix') format('eot'),
url('../fonts/FontName.woff') format('woff'),
url('../fonts/FontName.ttf') format('truetype'),
url('../fonts/FontName.svg#webfontZam02nTh') format('svg');
font-weight: normal;
font-style: normal; }
*/
@media only screen and (min-height: 0px) and (max-height: 740px) {
body {
transform-origin: top;
transform: scale(0.75,0.75);
font-size: 1.1em;
}
}
/* ==|== project verwaltung styles =======================================================
========================================================================== */
.projects-manager label {
width: 135px;
}
.projects-manager {
font-size: 13px;
}
.projects-manager #upload input {
height: 25px;
margin-bottom: 8px;
}
.projects-manager input[type="submit"] {
height: 30px;
padding: 10px 20px 23px;
}
#allProjects {
margin-bottom: 15px;
column-count: 2;
column-gap: 40px;
-moz-column-count: 2;
-moz-column-gap: 40px;
-webkit-column-count: 2;
-webkit-column-gap: 40px;
}
#allImages {
font-size: 12px;
margin-bottom: 15px;
column-count: 4;
column-gap: 10px;
-moz-column-count: 4;
-moz-column-gap: 10px;
-webkit-column-count: 4;
-webkit-column-gap: 10px;
}
#allProjects a:hover {
color: #fe57a1;
}
.projects-manager #hideShow {
float: right;
border: 4px solid #fe57a1;
border-radius: 5px;
padding: 4px 10px 5px 10px;
}
.projects-manager hr {
background-color: #FE57A1;
border-color: #FE57A1;
height: 3px;
margin: 20px 0px;
}
/* ==|== text verwaltung styles =======================================================
========================================================================== */
.texts-manager label {
width: 135px;
}
.texts-manager {
font-size: 13px;
}
.texts-manager #upload input {
height: 25px;
margin-bottom: 8px;
}
.texts-manager input[type="submit"] {
height: 30px;
padding: 10px 20px 23px;
}
.texts-manager label {
width: 100%;
}
.texts-manager hr {
background-color: #FE57A1;
border-color: #FE57A1;
height: 3px;
margin: 20px 0px;
}
/* ==|== print styles =======================================================
Print styles.
Inlined to avoid required HTTP connection: h5bp.com/r
========================================================================== */
@media print {
* { background: transparent !important; color: black !important; box-shadow:none !important; text-shadow: none !important; filter:none !important; -ms-filter: none !important; } /* Black prints faster: h5bp.com/s */
a, a:visited { text-decoration: underline; }
thead { display: table-header-group; } /* h5bp.com/t */
tr, img { page-break-inside: avoid; }
img { max-width: 100% !important; }
@page { margin: 0.5cm; }
p, h2, h3 { orphans: 3; widows: 3; }
h2, h3 { page-break-after: avoid; }
nav { display: none; }
span.not-mobile { display: block; }
}