/* Approach Comments
101% html height - always make a scroll - dont hate
*/
/* App spec css styling */
/* --------------------------------------------------
Table of Contents
-----------------------------------------------------
:: Shared Styles
:: Page Name 1
:: Page Name 2
*/
.full {width:100%; margin-left:-20px;}
/* -----------------------------------------
Shared Styles
----------------------------------------- */
.blue{color:#004c79;}
.download{ font-weight:bold; color:#999;}
.italic{ font-style:italic; font-size:12px; margin-bottom:4px; }
/* Accordion ---------------------- */
ul.accordion { margin: 0 0 12px 0; border-bottom: 1px solid #e9e9e9; }
ul.accordion li { list-style: none; margin: 0; padding: 0; border-top: 1px solid #e9e9e9; }
ul.accordion li .title {cursor: pointer; background: #f6f6f6; padding-top:10px; padding-bottom:1px; margin: 0; position: relative; border-left: 1px solid #e9e9e9; border-right: 1px solid #e9e9e9; -webkit-transition: 0.15s background linear; -moz-transition: 0.15s background linear; -o-transition: 0.15s background linear; transition: 0.15s background linear; }
ul.accordion li .title h1, ul.accordion li .title h2, ul.accordion li .title h3, ul.accordion li .title h4, ul.accordion li .title h5 { margin: 0; }
ul.accordion li .title:after { content: ""; display: block; width: 0; height: 0; border: solid 6px; border-color: transparent transparent transparent #9d9d9d; position: absolute; right: 92% ; top: 12px; }
ul.accordion li .content { display: none; padding: 11px; }
ul.accordion li.active { border-top: 1px solid #666; }
ul.accordion li.active .title { background: white; padding-top: 13px; }
ul.accordion li.active .title:after { content: ""; display: block; width: 0; height: 0; border: solid 6px; border-color: #9d9d9d transparent transparent transparent; }
ul.accordion li.active .content { background: white; display: block; border-left: 1px solid #e9e9e9; border-right: 1px solid #e9e9e9; }
/* -----------------------------------------
Main
----------------------------------------- */
html{height:101%;}
#picture-panel {
}
#slider{ width:800px;}
#slider-gallery{margin-bottom:90px;}
#header{}
/*#header-logo{background-image:url('../images/logo_360x80.jpg'); height:80px; width:365px; background-repeat: no-repeat; background-position:center;}*/
#footer-space{ border-top:1px solid #ddd; border-bottom:1px solid #ddd; text-align:right;}
/*
.content {
clear: both;
width:auto;
}
a.skip {
position: absolute;
left: -999em;
}
.nav-primary ul {
width:100%;
border-bottom:1px solid #ddd;
}
.nav-primary li {
font-size: 1.0em;
color:#000;
border-bottom:1px solid #ddd;
}
.nav-primary li:last-child {
}
.nav-primary li:last-child {
}
.nav-primary a {
display:inline-block;
text-decoration: none;
}
.nav-primary a:first-child {
text-align:left;
}
.nav-primary a:hover {
background-color: #f8f8f8;
}
.nav-primary .nav-current {
font-weight:bold;
color:#000;
}
.nav-primary {
width:100%;
margin: 0 auto;
}
left-link a{
margin-left:0px;
}
-----------------------------------------
Page Name 2
-----------------------------------------
@media screen and (min-width: 640px) {
.nav-primary,
.nav-primary ul {
}
left-link a{
margin-left:0px;
}
.nav-primary ul {
float: left;
}
.nav-primary li {
float: left;
font-size: 1.1em;
border-bottom:none;
border:none;
}
.nav-primary li:last-child {
float:right;
}
.nav-primary li:first-child {
background:silver;
width:80px;
}
.nav-primary a {
border-bottom:none;
border:none;
}
#nav-mid {
margin-left:70px;
}
}*/
/**
* ]Respnsive Menu
*/
* {
padding: 0;
margin: 0;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
nav {
width: 100%;
margin: 10px auto;
overflow: hidden;
border-bottom:1px solid #ddd;
}
nav ul {
list-style: none;
overflow:hidden;
margin-left:1px;
}
nav li {
margin-top:0px;
}
nav li a {
border-right: 1px solid #fff;
color: #666;
display:inline-block;
float: left;
text-align: center;
text-decoration: none;
text-transform: uppercase;
width: 11.5%;
/*TRANSISTIONS*/
-webkit-transition: background 0.5s ease;
-moz-transition: background 0.5s ease;
-o-transition: background 0.5s ease;
-ms-transition: background 0.5s ease;
transition: background 0.5s ease;
}
/*HOVER*/
nav li a:hover {
color:#ddd;
}
.current {
color:#000;
}
.current:hover {
color:#000;
}
/*BORDER FIX*/
nav li:last-child a {
border: none;
}
/*BLUE MENU*/
nav .blue {
margin-top: 50px;
}
.blue li a {
background: #75b1de;
}
.blue small {
color: white;
}
.blue li a:hover {
background: #444;
}
/*RED MENU*/
nav .red {
margin-top: 50px;
}
.red li a {
background: #5C0002;
}
.red small {
color: white;
}
.red li a:hover {
background: #a60306;
}
/* MEDIA QUERIES
see how they run -
the min/max width 1220px - exists only for the ability to have specific needs for the main navigation in this instance
still needs to work on iPhone top logo scaling for min-320px screen res. means
-- approach --
*/
@media only screen and (min-width : 1220px){
nav li:last-child a { float:right; text-align: right; width:8%;}
nav li:first-child a { float:left; text-align: left; width:8%;
}
nav li:nth-child(2) a, nav li:nth-child(3) a, nav li:nth-child(4) a, nav li:nth-child(5) a, nav li:nth-child(6) a {
width:11.5%;
}
}
@media only screen and (max-width : 1220px),
only screen and (max-device-width : 1220px) {
nav li:last-child a {
float:right;
text-align: right;
width:9.5%;
}
nav li:first-child a {
float:left;
text-align: left;
width:9.5%;
}
nav li:nth-child(2) a, nav li:nth-child(3) a, nav li:nth-child(4) a, nav li:nth-child(5) a, nav li:nth-child(6) a {
width:11.5%;
}
}
@media only screen and (max-width : 930px),
only screen and (max-device-width : 930px){
nav li a {
width: 25%;
border-bottom: 1px solid #fff;
font: 400 11px/1.4 'Cutive', Helvetica, Verdana, Arial, sans-serif;
}
nav li:last-child a, nav li:nth-child(4) a {
border-right: none;
}
nav li:nth-child(5) a, nav li:nth-child(6) a, nav li:nth-child(7) a, nav li:nth-child(8) a {
border-bottom: none;
}
nav li:first-child a {
float:left;
text-align: center;
width:25%;
}
nav li:last-child a {
text-align: center;
float:left;
width:25%;
}
nav li:nth-child(2) a, nav li:nth-child(3) a, nav li:nth-child(4) a, nav li:nth-child(5) a, nav li:nth-child(6) a {
width:25%;
}
ul.accordion li .title:after { content: ""; display: block; width: 0; height: 0; border: solid 6px; border-color: transparent transparent transparent #9d9d9d; position: absolute; right: 91% ; top: 12px; }
}
@media only screen and (max-width : 580px),
only screen and (max-device-width : 580px){
nav li a {
width: 50%;
font: 12px/1.4 Helvetica, Verdana, Arial, sans-serif;
padding-top: 12px;
padding-bottom: 12px;
}
nav li:nth-child(even) a {
border-right: none;
}
nav li:nth-child(5) a, nav li:nth-child(6) a {
border-bottom: 1px solid #fff;
}
nav li:first-child a {
float:left;
text-align: center;
width:50%;
}
nav li:last-child a {
text-align: center;
float:left;
width:50%;
}
nav li:nth-child(2) a, nav li:nth-child(3) a, nav li:nth-child(4) a, nav li:nth-child(5) a, nav li:nth-child(6) a {
width:50%;
}
ul.accordion li .title:after { content: ""; display: block; width: 0; height: 0; border: solid 6px; border-color: transparent transparent transparent #9d9d9d; position: absolute; right: 95% ; top: 12px; }
}
/* Mobile Portrait Only*/
@media only screen and (max-width : 320px),
only screen and (max-device-width : 320px) {
nav li a {
font: 12px/1.4 Helvetica, Verdana, Arial, sans-serif;
}
ul.accordion li .title:after { content: ""; display: block; width: 0; height: 0; border: solid 6px; border-color: transparent transparent transparent #9d9d9d; position: absolute; right: 90% ; top: 12px; }
}
/* 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) {
#slider-gallery{margin-bottom:290px;}
}
/* 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) {
}