* {margin:0; padding:0;}
body {font-size: 1em; font-family: 'Lato', sans-serif;}
h1 {color:#999; font-size: 2.2em; font-weight:300;}
h2 {color:#666; font-size: 1.4em; font-weight:700;}
h3 {color:#999; font-size: 1.2em; font-weight:300;}
a {color:#999; text-decoration:none}
a:hover {font-family: 'Lato', sans-serif; text-decoration:underline;}
h1 a {text-decoration:none;}
h1 a:hover {/* font-style:normal; */text-decoration:none;}
ul {list-style:none;}
ul.disc {list-style:disc; margin:10px; padding-left:20px;}
ul.circle {list-style:square; margin:10px; padding-left:20px;}
ul.disc li, ul.circle li {font-size:0.9em; font-weight:300;}

#wrapper {width:auto; max-width:1200px; margin: 0 auto;}
#header {background-color: #FFFFFF; border-bottom: 1px solid #999999; height: 37px; padding-top: 30px; position: fixed; width: 100%; max-width:1200px; z-index:10}
#logo {float:left; }
#logotype {margin-left:15px}
#tagline {float: none; position: absolute; right: 0; top: 49px; margin:0 32px 0 0; color:#999;}
#nav {z-index:10}
#nav ul {list-style: none;}
#tenMore {display: none;}
.nav2 {margin: 5px 0 5px 15px; font-size:.8em}
.nav2 li {margin-bottom:3px}
#lCol {background-color: #FFFFFF; float: left; margin: 150px 0 0; padding: 0 15px; position: fixed; width: 150px;}
#content {width: auto; margin: 0; padding-top: 120px; font-size: 1.2em;}
#content>p {padding-left: 20px;}
#footer {clear: both; border-top: 1px solid #999; margin-top:30px; padding-bottom:15px;}
#footer p {margin:5px 15px; text-align:right; font-size:0.8em; color:#999;}

.sans {font-family: 'Lato', sans-serif; font-size:.9em; font-weight:300;}
.caption {font-family: 'Lato', sans-serif; font-size:.8em; margin-top:0px;}
.italics {font-family: 'Lato', sans-serif; font-style: italic; font-weight: 300;}
.bold {font-family: 'Lato', sans-serif; font-weight:700;}
.txt-norm {font-size:1em;}
.txt-sm {font-size:.8em;}
.txt-lg {font-size:1.2em;}
.project-intro {margin-top: 40px; min-height: 200px; overflow:visible;}
.project-intro img {float:left; margin-right: 10px;}
.project-intro h3, .project-intro p {margin-left: 135px;}
.topmarg-10 {margin-top:10px;}
.topmarg-20 {margin-top:20px;}
.leftmarg-20 {margin-left:20px;}
.rightmarg-20 {margin-right:20px;}
.floatL {float:left;}
.floatR {float:right;}
.clear {clear:both;}
.clearL {clear:left;}
.border {border: 1px solid #000;}
.alignR {text-align:right;}
.sixty-percent {width: 57%; padding-left: 20px;}
.forty-percent {width: 37%; padding-right: 15px;}
.fifty-percent {width:345px;}
.sixtysix-percent {width:463px;}
.thirtythree-percent {width:217px;}
.two-col {}
.orange {color:#FF9900}
.brdBottom {border-bottom: 1px solid #999;}
.rel {position:relative;}
.colWidth {width:46.6%; min-height: 200px; float: left; padding-left: 20px;}

.teachThumb { float:left; margin:20px 19px 20px 0; border:1px solid #000;}

.prev {z-index: 3; position: absolute; opacity:0; filter:alpha(opacity=0); top:10px; height:258px;}
.prev:hover {opacity:0.8; filter:alpha(opacity=80);}
.next {z-index:3; position: absolute; opacity:0; filter:alpha(opacity=0); top:10px; height:258px; right:0;}
.next:hover {opacity:0.8; filter:alpha(opacity=80);}
#gallery {width:414px; height:300px; background-color:#FFF; margin-bottom:10px; position:relative; overflow:visible; border:none}
#gallery .slide {position:absolute; display:none; width:414px; overflow:visible;}
#gallery .slide .install {float:left;}
.slide img {border: 1px solid #000;}
.slide p {background-color:#fff; width: 90%;}
#gallery p.art-info {font-size:.7em; margin-top:3px;}
#gallery p.art-info img {margin:2px 0;}
#gallery .moondrops {background-image:url(../img/home/IOL-FrontPage-01-A.jpg);}
.install-info {margin-left:604px; width:276px;}
ul#gallerythumbs, ul#gallerythumbs li {margin:0; padding:0; list-style:none;}
ul#gallerythumbs li {float:left; margin-right:4px; margin-bottom:5px; cursor:pointer; opacity:0.6; filter:alpha(opacity=60); list-style:none none outside; width:25px; height:25px;}
ul#gallerythumbs li:hover {opacity:1; filter:alpha(opacity=100);}
ul#gallerythumbs li.active{opacity:1; filter:alpha(opacity=100);}
ul#gallerythumbs img {width:25px; height:25px;}

/* Small screen Navigation styles */
#nav600 {font-size: .9em; margin-top:68px; position: fixed;}
div.navigation {width: 100%; overflow: visible;}
.navigation ul {float: left; width:50%; background-color: #EBEBEB;}
.navigation ul, .navigation li {margin:0; padding:0; list-style:none; overflow: visible;}
.navigation ul li {float:left; width:49.65%; min-width: 110px; background: #EBEBEB; border-bottom: 1px solid #ccc; border-right: 1px solid #ccc; text-align: center;}
.navigation ul li a {color:black; text-decoration: none; display: block; padding: 6px 0 2px 0; border-bottom: 4px solid #EBEBEB;}
/*.navigation ul li:hover {opacity:1; filter:alpha(opacity=100);}
.navigation ul li.active{opacity:1; filter:alpha(opacity=100);}		*/
		
#nav600 li:hover {background-color: #DDD;}
#nav600 li.active {border-bottom-color: #FF9900; background-color: #FFF;}
#nav600 a:hover {border-bottom-color: #DDD;}
#nav600 a.active {border-bottom-color: #FF9900; color:#FF9900;}

/* Large screen Accordion nav styles */
#nav900 {width: 180px; border-right: 1px solid #ccc; border-left: 1px solid #ccc; font-size: .9em; margin-top:128px; position: fixed;}		
.tab {position: relative; width: 100%; color: #000; overflow: hidden;}
input {position: absolute; opacity: 0; z-index: -1;}
label {position: relative; display: block; padding: 5px 0; background: #EBEBEB; cursor: pointer; font-weight: 400; text-align: center; border-left: 8px solid #EBEBEB; border-bottom: 1px solid #ccc;}
input:hover ~ label {background-color:#DDD; border-left-color:#DDD;}
#navTabs {position: relative; display: block; list-style: none; font-weight: 400; cursor: pointer; text-align: center; margin: 0; padding: 0;}
#navTabs li { padding: 5px 0; background-color: #EBEBEB; border-left: 8px solid #EBEBEB; border-bottom: 1px solid #ccc;}
#navTabs a {display:block;}
#navTabs li:hover {background-color: #DDD; border-left-color: #DDD; font-weight: 400;}
#navTabs li.active {background-color: #FFF; border-left-color: #FF9900;}

.tab-content {max-height: 35em; overflow: hidden; background: #fff; -webkit-transition: display .35s; -o-transition: display .35s; transition: display .35s;}
.tab-content ul {margin: 1em .5em; list-style: none; text-align: right; padding: 0;}
.tab-content li {margin-bottom: 5px;}
.tab-content a:hover {color:#555;}


/* :checked */
input:checked ~ label {background-color: #FFF; border-left-color: #FF9900;}
input:checked ~ .tab-content {max-height: 35em;}

		#nav600 {display:block;}
		#nav900 {display:none;}
		#two-col {display: block;}
		#one-col {display: none; padding:0 20px;}
		
#portfolio {}
div#portfolio div:nth-child(2) {margin-top:0px;}
div#portfolio2 div:nth-child(2) {margin-top:0px;}

.smallVideo {width: 80%; margin: 20px auto;}
.smallVideo iframe {width:100%; height:12em; display: block;}
.portfolioNav {margin: 20px; font-size: .8em;}
.portfolioNav a:hover {text-decoration: none; color: #FF9900;}
		
/* When the screen is less than 750 pixels wide, change navigation ul height to 65px and li width to 100% */
		@media screen and (max-width: 749px) {
			.colWidth {width: auto;}
			#nav600 {}
			div#portfolio div:nth-child(2) {margin-top:40px;}
			.hide {display: none;}
			#tagline {position:inherit; right: inherit; top: inherit; margin-left:15px;}
			#header {padding-top:5px; padding-bottom: 25px;}
		}

/* When the screen is less than 600 pixels wide, change navigation ul height to 65px and li width to 100% */
		@media screen and (max-width: 599px) {
			.navigation ul {}
			.navigation ul li {width: 99.65%;}
			#content {padding-top:130px;}
			#two-col {display: none;}
			#one-col {display: block;}
			#one-col h2 {margin-bottom: 20px;}
			.smallImage {width: 47%;}
			.largeImage {width:80%; margin:0 auto;}
			.fifty-percent {display: none;}
			.one-col {display: none;}
			.two-col {display: none;}

		}

/* When the screen is more than 900 pixels wide, change navigation div to 150px wide, ul width to 100%, height to 65px and li width to 100% */
		@media screen and (min-width: 900px) {
			#header {padding-top: 90px;}
			#nav600 {display: none; margin-top:128px;}
			#nav900 {display: block;}
			#content {margin: 0 0 0 182px; padding-top: 130px}
			#tagline {top:109px;}
		}