/* * Company: Trucks.nl * Author: Michel Cuppen */ body {background: #000 url('../images/WebsiteBackground.jpg') no-repeat center top;} header {} .bar1 {background-color:#F7F7F7;text-align:center;} .bar1 .tlogo {display:block;} .bar1 .cinfo {line-height:4;font-size:1.2rem;} .bar1 .cinfo .citel {text-decoration:none;color:#222;padding-left:28px;background: url(../images/cinfotel.jpg) no-repeat left;margin-right:15px;} .bar1 .cinfo .cimail {text-decoration:none;color:#222;padding-left:28px;background: url(../images/cinfomail.jpg) no-repeat left;} .bar2 {padding:0px 20px;} .bar2:after {display:block;content:'';clear:both;} .bar2 .tlogo {display:none;max-height:83px;} nav {float:right;position:relative;} nav ul {margin:0;list-style:none;font-size:1.7rem;} nav ul li {display:inline-block;line-height:60px;margin:0 10px;height:100%;} nav ul li a {color:#29aae2;font-weight:bold;text-decoration:none;padding:10px 5px;} nav ul li:hover a {text-decoration:underline;} nav ul li.activ a {color:#387fbb;text-decoration:none;} #langbtn{display:block;padding:6px;cursor:pointer;} ul#flags{display:block;margin:0;float:right;min-height:36px;} /*ul#flags:before {display:block;content:'';background:#F7F7F7;height:10px;width:10px;border:1px solid #ddd;}*/ ul#flags li {display:block;margin:0;float:left;line-height:16;} ul#flags li a {display:block;padding:10px;text-decoration:none;font-size:0;opacity:.8;} ul#flags li.activ a {opacity:1;} ul#flags li:last-child a {border-bottom:0;} .bar3 {background-color:#F7F7F7;} .bar3:after {display:block;content:'';clear:both;} .bar3 ul {margin:0;list-style:none;padding-top:7px;min-height:70px;} .bar3 ul li {float:left;margin:0;display:block;text-align:center;font-size:1.2rem;} .bar3 ul li a {display:block;width:103px;min-height:18px;padding:42px 0 10px 0;color:#666;text-decoration:none;} .bar3 ul li.activ a, .bar3 ul li a:hover {color:#29aae2;} .stock.kipper {background:url(../images/Kipper.png) no-repeat top;} .stock.kipper:hover, li.activ .stock.kipper {background:url(../images/KipperH.png) no-repeat top;} .stock.containersytem {background:url(../images/Containersysteem.png) no-repeat top;} .stock.containersytem:hover, li.activ .stock.containersytem {background:url(../images/ContainersysteemH.png) no-repeat top;} .stock.tractor-unit {background:url(../images/Trekker.png) no-repeat top;} .stock.tractor-unit:hover, li.activ .stock.tractor-unit {background:url(../images/TrekkerH.png) no-repeat top;} .stock.mixer {background:url(../images/Betonmixer.png) no-repeat top;} .stock.mixer:hover, li.activ .stock.mixer {background:url(../images/BetonmixerH.png) no-repeat top;} .stock.truck-crane {background:url(../images/Kraanwagen.png) no-repeat top;} .stock.truck-crane:hover, li.activ .stock.truck-crane {background:url(../images/KraanwagenH.png) no-repeat top;} .stock.closed-box-truck {background:url(../images/Bakwagen.png) no-repeat top;} .stock.closed-box-truck:hover, li.activ .stock.closed-box-truck {background:url(../images/BakwagenH.png) no-repeat top;} .stock.vacuum-truck {background:url(../images/Kolkenzuiger.png) no-repeat top;} .stock.vacuum-truck:hover, li.activ .stock.vacuum-truck {background:url(../images/KolkenzuigerH.png) no-repeat top;} .stock.tank {background:url(../images/Tankwagen.png) no-repeat top;} .stock.tank:hover, li.activ .stock.tank {background:url(../images/TankwagenH.png) no-repeat top;} .stock.trailer {background:url(../images/Trailer.png) no-repeat top;} .stock.trailer:hover, li.activ .stock.trailer {background:url(../images/TrailerH.png) no-repeat top;} .stock.misc {background:url(../images/Diversen.png) no-repeat top;} .stock.misc:hover, li.activ .stock.misc {background:url(../images/DiversenH.png) no-repeat top;} #voorraadFrame {width:100%;border:none;} .content{padding:40px;margin-top:20px;background-color:#F7F7F7;} .ytube {width:100%;height:300px;} .fform label {font-weight:normal;} .fform textarea{min-height:160px;} .fform input {margin-bottom:5px;} .fform input[type='submit'].button{background-color:#4a97c2;font-weight:normal;width:100%;} .gmap {margin-top:40px;pointer-events:none;} .cnav {line-height:48px;} .cnav:after {display:block;content:'';clear:both;} .flag {display:block;height:30px;width:30px;float:right;margin:10px 0 0 10px;background:url(../img/icons_flags.png) no-repeat;font-size:0;opacity:.6;} .flag.activ {opacity:1;} .flag.nl{background-position:-10px -10px;} .flag.en{background-position:-60px -10px;} .flag.de{background-position:-110px -10px;} span.icon.mail {padding:5px 21px;background:url(../img/icon_mail.png) no-repeat;} span.icon.call {padding:5px 16px;background:url(../img/icon_call.png) no-repeat;} .button:hover > span.icon {background-position:0px -30px;} footer {background:#F7F7F7;padding:30px 40px;margin-top:20px;font-size:1.3rem;} footer p {margin-bottom:10px;line-height:1.8;} footer .copyr {line-height:9rem;} /* alert paragrafs */ p.warning {padding:5px 8px;background-color:#f9f2f4;color:#c7254e;border-radius:3px;border-left:3px solid #c7254e;} p.success {padding:5px 8px;background-color:#dff0d8;color:#3c763d;border-radius:3px;border-left:3px solid #3c763d;} /* * Skeleton V2.0.4 * Copyright 2014, Dave Gamache * www.getskeleton.com * Free to use under the MIT license. * http://www.opensource.org/licenses/mit-license.php * 12/29/2014 */ /* Grid –––––––––––––––––––––––––––––––––––––––––––––––––– */ .container { position: relative;width: 100%;max-width: 1030px;margin: 0 auto;padding: 0 20px;box-sizing: border-box; } .column, .columns { width: 100%;float: left;box-sizing: border-box; } /* For devices larger than 400px */ @media (min-width: 400px) { .container { width: 85%;padding: 0; } } /* For devices larger than 550px */ @media (min-width: 550px) { .container { width: 80%; } .column, .columns { margin-left: 4%; } .column:first-child, .columns:first-child { margin-left: 0; } .one.column, .one.columns { width: 4.66666666667%; } .two.columns { width: 13.3333333333%; } .three.columns { width: 22%; } .four.columns { width: 30.6666666667%; } .five.columns { width: 39.3333333333%; } .six.columns { width: 48%; } .seven.columns { width: 56.6666666667%; } .eight.columns { width: 65.3333333333%; } .nine.columns { width: 74.0%; } .ten.columns { width: 82.6666666667%; } .eleven.columns { width: 91.3333333333%; } .twelve.columns { width: 100%; margin-left: 0; } .one-third.column { width: 30.6666666667%; } .two-thirds.column { width: 65.3333333333%; } .one-half.column { width: 48%; } /* Offsets */ .offset-by-one.column, .offset-by-one.columns { margin-left: 8.66666666667%; } .offset-by-two.column, .offset-by-two.columns { margin-left: 17.3333333333%; } .offset-by-three.column, .offset-by-three.columns { margin-left: 26%; } .offset-by-four.column, .offset-by-four.columns { margin-left: 34.6666666667%; } .offset-by-five.column, .offset-by-five.columns { margin-left: 43.3333333333%; } .offset-by-six.column, .offset-by-six.columns { margin-left: 52%; } .offset-by-seven.column, .offset-by-seven.columns { margin-left: 60.6666666667%; } .offset-by-eight.column, .offset-by-eight.columns { margin-left: 69.3333333333%; } .offset-by-nine.column, .offset-by-nine.columns { margin-left: 78.0%; } .offset-by-ten.column, .offset-by-ten.columns { margin-left: 86.6666666667%; } .offset-by-eleven.column, .offset-by-eleven.columns { margin-left: 95.3333333333%; } .offset-by-one-third.column, .offset-by-one-third.columns { margin-left: 34.6666666667%; } .offset-by-two-thirds.column, .offset-by-two-thirds.columns { margin-left: 69.3333333333%; } .offset-by-one-half.column, .offset-by-one-half.columns { margin-left: 52%; } } /* Base Styles –––––––––––––––––––––––––––––––––––––––––––––––––– */ /* NOTE html is set to 62.5% so that all the REM measurements throughout Skeleton are based on 10px sizing. So basically 1.5rem = 15px :) */ html { font-size: 62.5%; } body { font-size: 1.5em; /* currently ems cause chrome bug misinterpreting rems on body element */ line-height: 1.6; font-weight: 400; font-family: "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif; color: #666; } /* Typography –––––––––––––––––––––––––––––––––––––––––––––––––– */ h1, h2, h3, h4, h5, h6 {margin-top: 0;margin-bottom: 2rem;font-weight: bold; color:#29AAE2; } h1 { font-size: 2.3rem; line-height: 1.2; letter-spacing: -.1rem;} h2 { font-size: 3.6rem; line-height: 1.25; letter-spacing: -.1rem; } h3 { font-size: 3.0rem; line-height: 1.3; letter-spacing: -.1rem; } h4 { font-size: 2.4rem; line-height: 1.35; letter-spacing: -.08rem; } h5 { font-size: 1.8rem; line-height: 1.5; letter-spacing: -.05rem; } h6 { font-size: 1.5rem; line-height: 1.6; letter-spacing: 0; } p { margin-top: 0; } /* Links –––––––––––––––––––––––––––––––––––––––––––––––––– */ a { color: #29AAE2; } a:hover { color: #29AAE2; } /* Buttons –––––––––––––––––––––––––––––––––––––––––––––––––– */ .button, button, input[type="submit"], input[type="reset"], input[type="button"] { display: inline-block;height: 38px;padding: 0 30px;background-color:#4a97c2;color: #fff;text-align: center;font-size: 12px;font-weight: 600;line-height: 38px;letter-spacing: .1rem;text-decoration: none;white-space: nowrap;background-color: transparent;border: 1px solid #4a97c2;cursor: pointer;box-sizing: border-box; } .button:hover, button:hover, input[type="submit"]:hover, input[type="reset"]:hover, input[type="button"]:hover, .button:focus, button:focus, input[type="submit"]:focus, input[type="reset"]:focus, input[type="button"]:focus { color: #333;border-color: #888;outline: 0; } .button.button-primary, button.button-primary, input[type="submit"].button-primary, input[type="reset"].button-primary, input[type="button"].button-primary { color: #FFF;background-color: #426489;border-color: #375372; } .button.button-primary:hover, button.button-primary:hover, input[type="submit"].button-primary:hover, input[type="reset"].button-primary:hover, input[type="button"].button-primary:hover, .button.button-primary:focus, button.button-primary:focus, input[type="submit"].button-primary:focus, input[type="reset"].button-primary:focus, input[type="button"].button-primary:focus { color: #FFF;background-color: #2e4763;border-color: #253a51; } /* Forms –––––––––––––––––––––––––––––––––––––––––––––––––– */ input[type="email"], input[type="number"], input[type="search"], input[type="text"], input[type="tel"], input[type="url"], input[type="password"], textarea, select {height: 30px;padding: 6px 10px;width:100%;background-color: #fff;border: 1px solid #D1D1D1;box-shadow: none;box-sizing: border-box; } input[type="email"], input[type="number"], input[type="search"], input[type="text"], input[type="tel"], input[type="url"], input[type="password"], textarea {-webkit-appearance: none;-moz-appearance: none;appearance: none; } textarea { min-height: 65px;padding-top: 6px;padding-bottom: 6px; } input[type="email"]:focus, input[type="number"]:focus, input[type="search"]:focus, input[type="text"]:focus, input[type="tel"]:focus, input[type="url"]:focus, input[type="password"]:focus, textarea:focus, select:focus {border: 1px solid #33C3F0;outline: 0; } label, legend {display: block;margin-bottom: .5rem;font-weight: 600; } fieldset {padding: 0;border-width: 0; } input[type="checkbox"], input[type="radio"] {display: inline; } label > .label-body {display: inline-block;margin-left: .5rem;font-weight: normal; } /* Lists –––––––––––––––––––––––––––––––––––––––––––––––––– */ ul {list-style: circle inside; } ol {list-style: decimal inside; } ol, ul {padding-left: 0;margin-top: 0; } ul ul, ul ol, ol ol, ol ul {margin: 1.5rem 0 1.5rem 3rem;font-size: 90%; } li {margin-bottom: 1rem; } /* Code –––––––––––––––––––––––––––––––––––––––––––––––––– */ code {padding: .2rem .5rem;margin: 0 .2rem;font-size: 90%;white-space: nowrap;background: #F1F1F1;border: 1px solid #E1E1E1;border-radius: 4px; } pre > code {display: block;padding: 1rem 1.5rem;white-space: pre; } /* Tables –––––––––––––––––––––––––––––––––––––––––––––––––– */ th, td {padding: 12px 15px;text-align: left;border-bottom: 1px solid #E1E1E1; } th:first-child, td:first-child {padding-left: 0; } th:last-child, td:last-child {padding-right: 0; } /* Spacing –––––––––––––––––––––––––––––––––––––––––––––––––– */ button, .button {margin-bottom: 1rem; } input, textarea, select, fieldset {margin-bottom: 1.5rem; } pre, blockquote, dl, figure, table, p, ul, ol, form {margin-bottom: 2.5rem; } /* Utilities –––––––––––––––––––––––––––––––––––––––––––––––––– */ .u-full-width {width: 100%;box-sizing: border-box; } .u-max-full-width {max-width: 100%;box-sizing: border-box; } .u-pull-right {float: right; } .u-pull-left {float: left; } /* Misc –––––––––––––––––––––––––––––––––––––––––––––––––– */ hr { margin-top: 3rem;margin-bottom: 3.5rem;border-width: 0;border-top: 1px solid #E1E1E1; } /* Clearing –––––––––––––––––––––––––––––––––––––––––––––––––– */ .container:after, .row:after, .u-cf {content: "";display: table;clear: both; } /* Media Queries –––––––––––––––––––––––––––––––––––––––––––––––––– */ /* Larger than mobile */ @media (min-width: 400px) {} /* Larger than phablet (also point when grid becomes active) */ @media (min-width: 550px) { .bar1 {text-align:right;padding:0 20px;} .bar1 .tlogo {float:left;} .bar1 .tlogo img {height:38px;padding:2px 0;} nav ul li {line-height:54px;} } /* Larger than tablet */ @media (min-width: 750px) { .bar1 {text-align:left;} .bar1 .tlogo {display:none;} .bar2 {padding:25px 20px;} .bar2 .tlogo {display:inline;} } /* Larger than desktop */ @media (min-width: 1000px) {} /* Larger than Desktop HD */ @media (min-width: 1200px) {}