/* Styles for Webster Design 2015 */

* { margin: 0; padding: 0; border: 0;}

body {background: #000; color: #eee; font-family: 'Ubuntu', Helvetica, sans-serif;} 
	
#wrapper {
	width: 96%;	
	max-width: 1100px;
	margin: 0 auto;
	padding: 2%;
        /* border: 1px white solid;  */
	}
        
#nav {width: 700px; float: right;}
        
header ul {	list-style: none;
		width:100%;
	}
        
header li {
                /* width: 180px; */
                margin-top: 30px;
		float: left;
		/* border: 1px solid red;  */
		font-family: 'Ubuntu', sans-serif;	
	}

header li:last-child {
		border-right:none;
	}
	
header li a {
		display: inline-block;
		width:140px;
		background:#000;
		padding:5px 0 5px 0;
		font-size:1em;
		text-decoration: none;
		color: #fff;
		font-family: 'Ubuntu', sans-serif;
		font-style: italic;
                
                border: none; 
	}
	
header li a:hover {color: red;}

        header .active a {color: red;}
	
header {background: #000; width: 100%; height: 105px;}

#logo {width: 230px; height: 105px; float: left;
/* border: white solid 1px;  */}
	
	/* Logo H1 */
header h1 {
	width: 198px;
	height: 102px;
	float: left;
	display: block;
	background: url(images/wd_logo_rev2.png) 0 0 no-repeat;
	text-indent: -9999px;
	padding-bottom: 2%;
	}
        
#main {clear: both; margin-top: 15px;}

#footer {color: #a1a1a1; font-size: .75em; text-align: center; padding: 2% 0; clear: both; width: 100%;
		}
                
#footer img {padding: 2px 4px;}
 
#leftnav {width: 25%; float: left;}
 
#leftnav ul {	list-style: none;
		width:100%;
	}
        
        #leftnav li a { display: block; width:100%;
		font-size:.9em; line-height: 250%;
                padding-left: 15px; text-decoration: none;
		color: #a1a1a1; font-family: 'Ubuntu', sans-serif;
	}
	
	#leftnav li a:hover {color: red;}
        
      #leftnav li.active a {color: red;}
        
        #light {width: 73%; float: left; color:#a1a1a1; margin-top: 10px;}
        #light h3 {color: red; font-size: 17px;}
        #light p {font-size: .9em; margin-top: 10px; line-height: 140%; max-width: 750px;}
        #light img {float: left; margin: 20px 25px 0 0; font-size: .85em;
        color: #a1a1a1; }
        
        #content {width: 70%; float: left; color:#a1a1a1; margin-left: 25%; margin-bottom: 10px;}
        #content h3 {color: red; font-size: 17px; margin-top: 15px;}
        #content p {font-size: .9em; margin-top: 10px; line-height: 140%; max-width: 750px;}
        #content ul {font-size: .85em; margin: 10px 0 0 20px; line-height: 140%;}
        #content img {float: left; margin: 0 25px 0 0; font-size: .85em; color: #a1a1a1; }
        
         #lightB {width: 73%; float: left; color:#a1a1a1;}
        #lightB h3 {color: red; font-size: 17px;}
        #lightB p {font-size: .9em; margin-top: 10px; line-height: 140%; max-width: 750px;}
        #lightB img {float: left; margin: 0 25px 0 0; font-size: .85em;
        color: #a1a1a1; }
        
        .workimage {width: 225px; float: left; margin-right: 25px; margin-bottom: 0; font-size: .85em;
        color: #a1a1a1; margin-top: 15px; padding-bottom:8px;}
        .workimage img {margin-bottom: 0;}
        .workimage a {font-size: .85em; color:#6f6e6e;  margin-bottom: 25px;}
        .workimage a:hover {color: red;}
	
	/* Slideshow styles */
	.rslides {clear: both; padding: 2% 0;
  position: relative;
  list-style: none;
  overflow: hidden;
  width: 100%;
  padding: 0;
  margin: 0;
  }

.rslides li {
  -webkit-backface-visibility: hidden;
  position: absolute;
  display: none;
  width: 100%;
  left: 0;
  top: 0;
  }

.rslides li:first-child {
  position: relative;
  display: block;
  float: left;
  }

.rslides img {
  display: block;
  height: auto;
  float: left;
  width: 100%;
  border: 0;
  }
	
     /* media styles */
	
	@media screen and (max-width: 768px) {
		#menu { width:1.4em; display: block;
			background:#000; font-size:1.15em;
			text-align: center; color: #fff; float: right;
		}
		#nav.js { display: none;}
                
		ul { width:100%;  }
                
		li { width:100%; border-right:none;
			/* border-bottom: 1px solid #eee;  */ }
		
		li a { padding:2% 0; /* text-align: center; */ }
                /* Added by me */
                
                #content {width: 100%; margin-left: 0;}
                #content li {border-bottom: none;}
                
                #nav {width: 100%; float: right;}
		li a:hover {color: red; background:none; }
                
                header li {
                width: 25%;  min-width: 150px;
                margin-top:1%; float: left; text-align: left;}
                
                /* work pages */
                
               #leftnav {width: 100%; float: left; text-align:left; border-bottom: 1px solid #2c2c2b; padding-bottom: 2%} 
               
        
                #leftnav li a { display: block; width:100%;
		font-size:.9em; line-height: 120%;
                padding: 2px; text-decoration: underline;}
                
                #lightB {width: 100%; text-align: center; font-size: .8em;}
               /*  #lightB img {width: 30%; margin: 2% 2% 0 0;} */
                
                .workimage {width: 30%; float: left; margin: 2% 2% 0 0; font-size: .85em;
         padding-bottom:8px; color: #d8d5d5;}
		 .workimage a {font-size: .85em; color:#d8d5d5;  }
        .workimage img {width: 100%;}
        
                #light {width: 100%; margin-top:2%; font-size: .95em;}
                #light img {width: 30%; margin: 2% 2% 0 0;}
        }        
	}
	@media screen and (min-width: 768px) {
		#menu {
			display: none;
		}
	}