/*! HTML5 Boilerplate v5.2.0 | MIT License | https://html5boilerplate.com/ */
/*
* 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.
*/
/* ==========================================================================
Base styles: opinionated defaults
========================================================================== */
html {
color: #222;
font-size: 1em;
line-height: 1.4;
}
/*
* Remove text-shadow in selection highlight:
* https://twitter.com/miketaylr/status/12228805301
*
* These selection rule sets have to be separate.
* Customize the background color to match your design.
*/
::-moz-selection {
background: #b3d4fc;
text-shadow: none;
}
::selection {
background: #b3d4fc;
text-shadow: none;
}
/*
* A better looking default horizontal rule
*/
hr {
display: block;
height: 1px;
border: 0;
border-top: 1px solid #ccc;
margin: 1em 0;
padding: 0;
}
/*
* Remove the gap between audio, canvas, iframes,
* images, videos and the bottom of their containers:
* https://github.com/h5bp/html5-boilerplate/issues/440
*/
audio,
canvas,
iframe,
img,
svg,
video {
vertical-align: middle;
}
/*
* Remove default fieldset styles.
*/
fieldset {
border: 0;
margin: 0;
padding: 0;
}
/*
* Allow only vertical resizing of textareas.
*/
textarea {
resize: vertical;
}
/* ==========================================================================
Browser Upgrade Prompt
========================================================================== */
.browserupgrade {
margin: 0.2em 0;
background: #ccc;
color: #000;
padding: 0.2em 0;
}
/* ==========================================================================
Author's custom styles
========================================================================== */
/* link style reset */
a {
text-decoration: none;
color: inherit;
font-weight: normal;
}
* ul {
list-style: none;
}
/* font not working */
@font-face {
font-family: 'MyriadPro-Regular';
src: url('fonts/MyriadPro-Regular.otf');
}
/* main body styles */
body {
background-image: url(../images/Background_flag.jpg);
/*background-size: 100%; */
}
#body {
height: 100%;
overflow: auto;
background-color: white;
max-width: 960px;
margin: 3% auto 3% auto;
border-radius: 10px;
/* font-family: MyriadPro-Regular, Arial, sans-serif; */
box-shadow: 10px 10px 10px 0px rgba(0,0,0,0.5)
}
/* HEADER */
.header #logo {
margin: 15px 0px 0px 15px;
height: 12%;
width: 33%;
}
/* contact details */
.header p span {
font-weight: bold;
}
.header #contact {
padding: 0px 15px 0px 0px;
float: right;
}
.header p {
text-align: right;
text-transform: uppercase;
color: rgba(25,25,103,1);
}
#phone {
font-size: 1.3em;
padding: 0px 0px 25px 0px;
}
/* Nav Bar */
.header nav {
overflow: auto;
margin-top: 20px;
clear: right;
box-shadow: 0px 5px 5px 0px rgba(0,0,0,0.5);
}
.header nav ul {
background-color: rgb(12,11,39);
max-width: 960px;
overflow: auto;
width: 100%;
padding: 0px;
margin: 0px;
}
.header nav li {
/* background-color: rgba(25,25,103,1); */
color: rgba(255,255,255,1);
font-size: .9em;
text-transform: uppercase;
margin-right: 2px;
float: left;
width: 158px;
text-align: center;
}
.header nav li:first-child {
max-width: 159px;
}
.header nav li:last-child {
width: 158px;
margin-right: 0px;
-webkit-box-shadow: 2px 0px 0px 0px rgba(255,255,255,.4);
-moz-box-shadow: 2px 0px 0px 0px rgba(255,255,255,.4);
box-shadow: 2px 0px 0px 0px rgba(255,255,255,.4);
}
.header ul li a {
background-color: rgba(25,25,103,1);
display: block;
padding: 15px 20px;
-webkit-box-shadow: inset 2px 0px 2px 0px rgba(255,255,255,.2), inset -2px 0px 2px 0px rgba(255,255,255,.2);
-moz-box-shadow: inset 2px 0px 2px 0px rgba(255,255,255,.2), inset -2px 0px 2px 0px rgba(255,255,255,.2);
box-shadow: inset 2px 0px 2px 0px rgba(255,255,255,.2), inset -2px 0px 2px 0px rgba(255,255,255,.2);
-webkit-transition: background-color .2s;
-moz-transition: background-color .2s;
-o-transition: background-color .2s;
transition: background-color .2s;
}
.header ul li a.active {
background-color: rgb(127,127,187);
}
.header ul li a:hover {
background-color: rgb(104,104,104);
}
/* HOME PAGE */
.home {
overflow: auto;
padding: 0px;
margin: 0px;
font-weight: lighter;
}
.home li {
display: block;
float: left;
-webkit-box-shadow: inset 0px 7px 5px -4px rgba(0,0,0,0.7);
-moz-box-shadow: inset 0px 7px 5px -4px rgba(0,0,0,0.7);
box-shadow: inset 0px 7px 5px -4px rgba(0,0,0,0.7);
}
.home a {
display: block;
width: 320px;
height: 365px;
-webkit-box-shadow: inset 0px 10px 11px -4px rgba(0,0,0,0.5);
-moz-box-shadow: inset 0px 10px 11px -4px rgba(0,0,0,0.5);
box-shadow: inset 0px 10px 11px -4px rgba(0,0,0,0.5);
}
.home h2 {
color: white;
margin: 0px;
padding: 30px 10px 0px 15px;
text-transform: uppercase;
font-size: 1.8em;
}
.home p {
margin-left: 5px;
padding: 0px 10px 0px 10px;
color: white;
}
#radio {
background-image: url(../images/radiosbanner1.jpg)
}
#radio a {
opacity: 0;
-webkit-transition: opacity .3s;
-moz-transition: opacity .3s;
-o-transition: opacity .3s;
transition: opacity .3s;
}
#radio a:hover {
opacity: 1;
background: -webkit-linear-gradient(left,rgba(255,0,0,1),rgba(255,0,0,.2)), url(url(../images/Radiosaligned.jpg)); /*Safari 5.1-6*/
background: -o-linear-gradient(right,rgba(255,0,0,1),rgba(255,0,0,.2)), url(../images/Radiosaligned.jpg); /*Opera 11.1-12*/
background: -moz-linear-gradient(right,rgba(255,0,0,1),rgba(255,0,0,.2)), url(../images/Radiosaligned.jpg); /*Fx 3.6-15*/
background: linear-gradient(to right, rgba(22,20,57,1), rgba(22,20,57,.2)), url(../images/Radiosaligned.jpg); /*Standard*/
}
#tower {
background-image: url(../images/towersbanner1.jpg);
}
#tower a {
opacity: 0;
-webkit-transition: opacity .3s;
-moz-transition: opacity .3s;
-o-transition: opacity .3s;
transition: opacity .3s;
}
#tower a:hover {
opacity: 1;
background: -webkit-linear-gradient(left,rgba(255,0,0,1),rgba(255,0,0,.2)), url(url(../images/Towersaligned.jpg)); /*Safari 5.1-6*/
background: -o-linear-gradient(right,rgba(255,0,0,1),rgba(255,0,0,.2)), url(../images/Towersaligned.jpg); /*Opera 11.1-12*/
background: -moz-linear-gradient(right,rgba(255,0,0,1),rgba(255,0,0,.2)), url(../images/Towersaligned.jpg); /*Fx 3.6-15*/
background: linear-gradient(to right, rgba(22,20,57,1), rgba(22,20,57,.2)), url(../images/Towersaligned.jpg); /*Standard*/
}
#power {
background-image: url(../images/powersourcebanner1.jpg);
}
#power a {
opacity: 0;
-webkit-transition: opacity .3s;
-moz-transition: opacity .3s;
-o-transition: opacity .3s;
transition: opacity .3s;
}
#power a:hover {
opacity: 1;
background: -webkit-linear-gradient(left,rgba(255,0,0,1),rgba(255,0,0,.2)), url(url(../images/Powersourcealigned.jpg)); /*Safari 5.1-6*/
background: -o-linear-gradient(right,rgba(255,0,0,1),rgba(255,0,0,.2)), url(../images/Powersourcealigned.jpg); /*Opera 11.1-12*/
background: -moz-linear-gradient(right,rgba(255,0,0,1),rgba(255,0,0,.2)), url(../images/Powersourcealigned.jpg); /*Fx 3.6-15*/
background: linear-gradient(to right, rgba(22,20,57,1), rgba(22,20,57,.2)), url(../images/Powersourcealigned.jpg); /*Standard*/
}
/* Services and Partners */
.services, .partners {
float: left;
padding: 0px 20px 0px 20px;
margin: 10px 0px 10px 0px;
font-weight: lighter;
}
.services h2, .partners h2 {
color: rgba(25,25,103,1);
}
.services {
max-width: 440px;
border-right: solid 1px rgba(25,25,103,1);
}
.services > ul {
padding-left: 0px;
}
#learnmore {
color: white;
background-color: rgba(25,25,103,1);
padding: 5px;
text-align: center;
width: 25%;
border-radius: 5px;
margin-top: 50px;
}
#learnmore:hover {
background-color: rgb(104,104,104);
}
/* Partners logos */
.partners {
max-width: 439px;
}
.logos {
padding-left: 0px;
margin-top: 0px;
margin-bottom: 0px;
float: left;
max-width: 30%;
}
.logos li {
padding: 10px 10px 10px 10px;
}
#logos2 {
/* float: right; */
margin-left: 125px;
}
/* PRODUCTS PAGE */
.productdiv {
width: 300px;
float: left;
padding: 0px 0px 0px 20px;
color: rgba(25,25,103,1);
box-shadow: inset -5px 0px 10px -4px rgba(0,0,0,0.5);
background-image: url(../images/towersgradient.jpg);
background-position: bottom;
background-repeat: no-repeat;
height: 800px;
}
.productdiv:last-child {
box-shadow: none;
background-image: url(../images/powersourcegradient.jpg);
}
.productdiv:first-child {
background-image: url(../images/radiosgradient.jpg);
}
.productdiv h2 {
font-size: 1.4em;
margin: 20px 0px -5px 0px;
}
.productdiv h3 {
font-size: 1.4em;
font-weight: lighter;
margin: 0px;
}
.productdiv p {
font-size: .8em;
font-weight: lighter;
margin: 0px;
color: gray;
}
/* Code below centres the logos in the tall JPGs */
/* .productdiv > ul {
position: relative;
top: 35%;
transform: translateY(-50%);
-ms-transform: translateY(-50%);
-webkit-transform: translateY(-50%);
} */
.productdiv > ul > li {
padding: 20px 10px 20px 10px;
}
/* SERVICES PAGE */
#services {
color: rgba(25,25,103,1);
padding: 0px 20px 0px 20px;
height:100%;
}
#services h3 {
font-size: 1.4em;
margin-bottom: 10px;
}
#services p {
font-weight: lighter;
margin: 0px;
color: gray;
margin-top: 10px;
}
#services a {
color: rgba(25,25,103,1);
font-weight: bold;
}
#BDA {
padding-top: 15px;
text-align: center;
}
#services:last-child {
margin-bottom: 15px;
}
/* GALLERY */
.slider {
margin-top: 30px;
height: 880px;
width: 880px;
}
.slider li {
list-style: none;
position: absolute;
}
.slider img {
/* height: 880px; */
width: 880px;
vertical-align: top;
box-shadow: 6px 6px 6px 0px rgba(0,0,0,0.5);
}
.slider img.portrait {
height: 880px;
width: auto;
position: relative;
left: 40%;
}
.slider img.portrait[src*="gal8"] {
left: 25%;
}
.slider input {
display: none;
}
.slider label {
background-color: gray;
top: .5em;
cursor: pointer;
display: inline-block;
height: 1.3em;
position: relative;
width: 1.3em;
z-index: 10;
margin-left: 15px;
top: -10px;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;
cursor: pointer;
-webkit-box-shadow: 2px 2px 3px rgba(0,0,0,.8);
-moz-box-shadow: 2px 2px 3px rgba(0,0,0,.8);
box-shadow: 2px 2px 3px rgba(0,0,0,.8);
}
.slider div {
padding-right: 20px;
text-align: center;
}
/* .slider div /* :nth-child(1) label {
margin-left: 15px;
top: -10px;
} */
/* .slider div:nth-child(2) label {
left: 35px;
}
.slider div:nth-child(3) label {
left: 60px;
}
.slider div:nth-child(4) label {
left: 100px;
}
.slider div:nth-child(5) label {
left: 125px;
}
.slider div:nth-child(6) label {
left: 150px;
}
.slider div:nth-child(7) label {
left: 175px;
}
.slider div:nth-child(8) label {
left: 200px;
}
.slider div:nth-child(9) label {
left: 225px;
}
.slider div:nth-child(10) label {
left: 250px;
}
.slider div:nth-child(11) label {
left: 100px;
} */
.slider img {
opacity: 0;
visibility: hidden;
-webkit-transition: opacity .3s;
-moz-transition: opacity .3s;
-o-transition: opacity .3s;
transition: opacity .3s;
}
.slider li input:checked ~ img {
opacity: 1;
visibility: visible;
z-index: 9;
}
.slider label:hover {
background-color: black;
}
/* CONTACT PAGE */
.contact {
width: 438px;
}
.contact p span {
font-weight: bold;
color: rgba(25,25,103,1);
}
.contact p {
color: gray;
}
.contact p:nth-child(5) span, .contact p:nth-child(6) span, .contact p:nth-child(7) span {
color: black;
}
/* FORM STYLING */
.services.contact {
border: none;
}
.partners.contact {
width: 421px;
height: 700px;
padding-left: 30px;
border-left: solid 2px gray;
}
form label {
font-weight: bold;
color: rgba(25,25,103,1);
}
.contact input, .contact textarea {
font-size: 1em;
width: 65%;
margin: 0px 0px 15px 0px;
border: 1px solid rgba(25,25,103,.5);
border-radius: 5px;
font-weight: lighter;
color: black;
}
.contact textarea {
height: 200px;
}
#submit {
width: 100px;
height: 25px;
color: white;
font-size: .8em;
background-color: rgba(25,25,103,1);
text-transform: uppercase;
}
/* CLIENT LOGIN */
.partners.contact#client {
border: none;
}
/* MPRES PDF PAGE */
.services > div > img {
padding: 10px 0px 0px 5px;
}
.services#SMPRES {
border: none;
}
.partners#PMPRES {
border-left: solid 1px rgba(25,25,103,1)
}
#PMPRES ul, #SMPRES ul {
list-style-type: circle;
}
.services#SMPRES p, .partners#PMPRES p, .partners#PMPRES ul li {
font-weight: lighter;
margin: 0px;
color: gray;
margin: 10px;
}
/* Footer */
footer {
float: right;
clear: both;
padding-right: 20px;
margin-top: 0px;
font-size: .8em;
font-weight: lighter;
color: gray;
}
/* ==========================================================================
Helper classes
========================================================================== */
/*
* Hide visually and from screen readers:
*/
.hidden {
display: none !important;
}
/*
* Hide only visually, but have it available for screen readers:
* http://snook.ca/archives/html_and_css/hiding-content-for-accessibility
*/
.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:
* https://www.drupal.org/node/897638
*/
.visuallyhidden.focusable:active,
.visuallyhidden.focusable:focus {
clip: auto;
height: auto;
margin: 0;
overflow: visible;
position: static;
width: auto;
}
/*
* Hide visually and from screen readers, but maintain layout
*/
.invisible {
visibility: hidden;
}
/*
* Clearfix: contain floats
*
* For modern browsers
* 1. The space content is one way to avoid an Opera bug when the
* `contenteditable` attribute is included anywhere else in the document.
* Otherwise it causes space to appear at the top and bottom of elements
* that receive the `clearfix` class.
* 2. The use of `table` rather than `block` is only necessary if using
* `:before` to contain the top-margins of child elements.
*/
.clearfix:before,
.clearfix:after {
content: " "; /* 1 */
display: table; /* 2 */
}
.clearfix:after {
clear: both;
}
/* ==========================================================================
EXAMPLE Media Queries for Responsive Design.
These examples override the primary ('mobile first') styles.
Modify as content requires.
========================================================================== */
@media only screen and (min-width: 35em) {
/* Style adjustments for viewports that meet the condition */
}
@media print,
(-webkit-min-device-pixel-ratio: 1.25),
(min-resolution: 1.25dppx),
(min-resolution: 120dpi) {
/* Style adjustments for high resolution devices */
}
/* ==========================================================================
Print styles.
Inlined to avoid the additional HTTP request:
http://www.phpied.com/delay-loading-your-print-css/
========================================================================== */
@media print {
*,
*:before,
*:after {
background: transparent !important;
color: #000 !important; /* Black prints faster:
http://www.sanbeiji.com/archives/953 */
box-shadow: none !important;
text-shadow: none !important;
}
a,
a:visited {
text-decoration: underline;
}
a[href]:after {
content: " (" attr(href) ")";
}
abbr[title]:after {
content: " (" attr(title) ")";
}
/*
* Don't show links that are fragment identifiers,
* or use the `javascript:` pseudo protocol
*/
a[href^="#"]:after,
a[href^="javascript:"]:after {
content: "";
}
pre,
blockquote {
border: 1px solid #999;
page-break-inside: avoid;
}
/*
* Printing Tables:
* http://css-discuss.incutio.com/wiki/Printing_Tables
*/
thead {
display: table-header-group;
}
tr,
img {
page-break-inside: avoid;
}
img {
max-width: 100% !important;
}
p,
h2,
h3 {
orphans: 3;
widows: 3;
}
h2,
h3 {
page-break-after: avoid;
}
}