/*Make HTML5 elements display as block elements in older browsers*/
header, nav, aside, footer, section{
display:block;
}
#logowrapper{
position: relative;
width: 312px;
margin: 0 0 0 -15px;
text-align: left;
z-index: 100;
}
#titlewrapper{
width: 350px;
margin: 0 auto 0 auto;
padding-top: 60px;
text-align: center;
}
body{
background-color: #292929; /*was #FFF*/
color: #666666;/*was#2b2b2b*/
text-align: left;
font-family: Lato,Sans-Serif;
}
h1{
font: 1.6rem Lato,sans-serif;
font-weight:400;
color:#666666;/*was#2b2b2b*/
}
h2{
font: 1.125rem Lato,sans-serif;
font-weight:400;
color:#2b2b2b;
}
/*#menu-icon {
display: none;
width: 40px;
height: 40px;
background: url(images/mobile-menu-icon.png) center;
}*/
a:link {
color: #666666; /*was#2b2b2b*/
text-decoration: none;
}
a:visited{
color: #666666;
text-decoration: none;
}
/*think about making wrapper ''fluid'' by defining width as a percentage-can also set min and max width in addition-lesson 9 intermed p9*/
#wrapper{
/*min-height:100%;
height:auto !important;
height:100%;*/
width: 100%;
margin-top: 10px;
margin-right: auto;
margin-left: auto;
margin-bottom: 0;
padding-top: 0px;
/* border:thin solid #3D1DDD;*/
}
/*Style 'show menu' label button and hide it by default*/
.show-menu {
text-decoration: none;
color: #666;
text-align: center;
padding: 10px 0;
display: none;
font-size: 3rem;
}
/*Hide checkbox*/
input[type=checkbox]{
display: none;
}
/*Show menu when invisible checkbox is checked*/
input[type=checkbox]:checked ~ nav{
display: block;
}
/*prob dont need*/
aside{
width:130px;
padding:5px;
float:left;
/*border:thin solid #EFE719;*/
}
nav {
font-family: Lato,sans-serif;
font-size: 1rem;
width:50%; margin: 20px 25% 0 25%;
/* float: left;*/
/* margin-top: 10px;
margin-bottom: 25px;*/
}
nav ul {
margin: 0;
padding: 0;
list-style: none;
text-align: center; width: 100%;
}
nav a:link,
nav a:visited {
color: #666; /*was #2b2b2b*/
text-decoration: none;
}
nav a {
display: block;
padding: 6px 0 6px 0; /*left padding was 8px for vert menu*/
}
nav li {
background-color: #292929; /*was #fff*/
/* margin-top: 1px;*/
position: relative;/*I think this is making this a positioned element only so sub menus can be absolutely positioned*/
/* width: auto;*/
float: left;width: 20%;
/* height:30px;*/
/* z-index:98;*/
}
nav li li{
/* width: 125px;
margin-top: 1px;*/
width: 100%;height: auto;
}
/*top tier*/nav li:hover {
background-color: #292929; /*was #fff*/
text-decoration:none;
color: #ccc;
}
/*tier2*/
nav li li:hover {
background-color: #292929;/*was #fff*/
text-decoration:none;
color: #ccc;
}
/*hides tier 2 menu*/
nav ul ul {
position: absolute;/*positioned relative to nearest containing element with a defined position-this is nav li-tier 2 will be 100% to the left and 2px lower than parent*/
left: 100%;
z-index: 100;
/* top: -2px;*/
position: absolute;left:0px;top:30px;
border: solid 1px transparent;
visibility: hidden;
z-index:101;
}
/*hides tier 3 menu-not sure there is a tier 3? maybe it was under about?*/
nav ul ul ul{
position: absolute;
left: 100%;
top: -2px;
border: solid 1px transparent;
}
nav li:hover > ul {
visibility: visible;
}
Nav a:hover {color: #ccc;
text-decoration: none;}
article{
margin-left: 10%;
margin-right: 10%;
margin-top: 10px;
position:relative;
font-size: 1rem;
/* border:thin solid #F81317;*/
}
article p{
text-align: justify;
}
article p:first-child{
/*to make top of text align with top of Nav on text-heavy pages-was 195px changed to 100 for horizontal menu*/
padding-top: 50px;
}
/*Indent resume items and remove spaces between paragraphs */
.cv p{
margin-bottom: 0;
margin-top: 0;
text-indent: -41px;
padding-left: 41px;
line-height: 18px;
}
#frontimage{
position:relative;
/*top: -200px;*/
right:50px;
z-index:1;
/*to undo first child rule above which meant for text*/
padding-top: 0;
}
/*.gallerytitle{
padding-top: 25px;
font-size:20px;
}*/
.gallery img {padding: 10px 10px 2px 10px;
}
table {padding-top: 25px; /*was 111 for vert menu*/
margin: 0 auto 0 auto;
font-size: .75rem; /* was 14px; font-style: italicmake titles italic*/}
td {text-align: center;}
/* padding-top: 25px;}*/
vertvideo {height: 600px;
width:auto;}
footer{
/*width: 900px;*/
position:fixed;
clear:both;
margin-top: 0;
margin-right: auto;
margin-left: 0;
margin-bottom: 0;
height: 4em;
text-align:left;
font-family:sans-serif;
font-size:.5625rem;
color:#2b2b2b;
}
/*Media Queries*/
@media only screen and (max-width: 640px){
/*makes main nav disappear*/
nav {display: none;
width: 100%;
margin: 0;
font-size: 2rem;
}
/* nav ul, nav:active ul {
display: none;
position: absolute;
padding: 20px;
right: 20px;
top: 60px;
width: 50%;
border-radius: 4px 0 4px 4px;
}*/
/*Make all menu links full width*/
ul li, li a {
width: 100%;}
/*makes name disappear*/
#titlewrapper {display: none;}
/*Display 'MENU' link*/
.show-menu {
display:block;
}
/*makes menu icon appear
#menu-icon {
display: inline-block;
float: right;
}
/*styles drop down menu from icon
nav li {
text-align: center;
width: 100%;
padding: 10px 0;
margin: 0;
}
drop down menu appears upon hover over icon
nav:hover ul {
display: inline;
}
nav:hover ul ul {
display: inline;
z-index: 102;
}*/
}
/*
Colorbox Core Style:
The following CSS is consistent between example themes and should not be altered.
*/
#colorbox, #cboxOverlay, #cboxWrapper{position:absolute; top:0; left:0; z-index:9999; overflow:hidden;}
#cboxWrapper {max-width:none;}
/*this is the dark background*/
#cboxOverlay{position:fixed; width:100%; height:100%;}
#cboxMiddleLeft, #cboxBottomLeft{clear:left;}
#cboxContent{position:relative;}
#cboxLoadedContent{overflow:auto; -webkit-overflow-scrolling: touch;}
#cboxTitle{margin:0;}
#cboxLoadingOverlay, #cboxLoadingGraphic{position:absolute; top:0; left:0; width:100%; height:100%;}
#cboxPrevious, #cboxNext, #cboxClose, #cboxSlideshow{cursor:pointer;}
.cboxPhoto{float:left; margin:auto; border:0; display:block; max-width:none; -ms-interpolation-mode:bicubic;}
.cboxIframe{width:100%; height:100%; display:block; border:0; padding:0; margin:0;}
#colorbox, #cboxContent, #cboxLoadedContent{box-sizing:content-box; -moz-box-sizing:content-box; -webkit-box-sizing:content-box;}
/*
User Style:
Change the following styles to modify the appearance of Colorbox. They are
ordered & tabbed in a way that represents the nesting of the generated HTML.
*/
#cboxOverlay{background:url(images/overlay.png) repeat 0 0; opacity: 0.5; filter: alpha(opacity = 50);}
#colorbox{outline:0;}
#cboxTopLeft{width:21px; height:21px; background:url(images/controls.png) no-repeat -101px 0;}
#cboxTopRight{width:21px; height:21px; background:url(images/controls.png) no-repeat -130px 0;}
#cboxBottomLeft{width:21px; height:21px; background:url(images/controls.png) no-repeat -101px -29px;}
#cboxBottomRight{width:21px; height:21px; background:url(images/controls.png) no-repeat -130px -29px;}
#cboxMiddleLeft{width:21px; background:url(images/controls.png) left top repeat-y;}
#cboxMiddleRight{width:21px; background:url(images/controls.png) right top repeat-y;}
#cboxTopCenter{height:21px; background:url(images/border.png) 0 0 repeat-x;}
#cboxBottomCenter{height:21px; background:url(images/border.png) 0 -29px repeat-x;}
#cboxContent{background:#fff; overflow:hidden;}
.cboxIframe{background:#fff;}
#cboxError{padding:50px; border:1px solid #ccc;}
#cboxLoadedContent{margin-bottom:28px;}
#cboxTitle{position:absolute; bottom:4px; left:0; text-align:center; font-size: .875rem; width:100%; color:#949494;}
#cboxCurrent{position:absolute; bottom:4px; left:58px; font-size: .75rem; color:#949494;}
#cboxLoadingOverlay{background:url(images/loading_background.png) no-repeat center center;}
#cboxLoadingGraphic{background:url(images/loading.gif) no-repeat center center;}
/* these elements are buttons, and may need to have additional styles reset to avoid unwanted base styles */
#cboxPrevious, #cboxNext, #cboxSlideshow, #cboxClose {border:0; padding:0; margin:0; overflow:visible; width:auto; background:none; }
/* avoid outlines on :active (mouseclick), but preserve outlines on :focus (tabbed navigating) */
#cboxPrevious:active, #cboxNext:active, #cboxSlideshow:active, #cboxClose:active {outline:0;}
#cboxSlideshow{position:absolute; bottom:4px; right:30px; color:#0092ef;}
#cboxPrevious{position:absolute; bottom:0; left:0; background:url(images/controls.png) no-repeat -75px 0; width:25px; height:25px; text-indent:-9999px;}
#cboxPrevious:hover{background-position:-75px -25px;}
#cboxNext{position:absolute; bottom:0; left:27px; background:url(images/controls.png) no-repeat -50px 0; width:25px; height:25px; text-indent:-9999px;}
#cboxNext:hover{background-position:-50px -25px;}
#cboxClose{position:absolute; bottom:0; right:0; background:url(images/controls.png) no-repeat -25px 0; width:25px; height:25px; text-indent:-9999px;}
#cboxClose:hover{background-position:-25px -25px;}
/*
The following fixes a problem where IE7 and IE8 replace a PNG's alpha transparency with a black fill
when an alpha filter (opacity change) is set on the element or ancestor element. This style is not applied to or needed in IE9.
See: http://jacklmoore.com/notes/ie-transparency-problems/
*/
.cboxIE #cboxTopLeft,
.cboxIE #cboxTopCenter,
.cboxIE #cboxTopRight,
.cboxIE #cboxBottomLeft,
.cboxIE #cboxBottomCenter,
.cboxIE #cboxBottomRight,
.cboxIE #cboxMiddleLeft,
.cboxIE #cboxMiddleRight {
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#00FFFFFF,endColorstr=#00FFFFFF);
}