/*
CSS for kMist Design Site
*/

*{
  margin: 0;
  padding: 0;
  }

a {
  outline: none;
  color: #5a4b37;
  font-weight: bold;
  }

img {
  border: none;
  }

body {
  font-size: 62.5%;
  font-family: Verdana, Helvetica, Arial, sans-serif;
  background: url(bg-files/body-bg.jpg) repeat-x #6e6955;
  }

p {
  font-size: 1.4em;
  line-height: 1.2em;
  padding-bottom: 0.8em;
  letter-spacing: 1px;
  color: #f8dcb9;
  }

 
h2 {
  font-size: 2.3em;
  padding: 12px 20px 12px 0px;
  color: #da943c;
  font-family: Georgia, serif;
  font-weight: bold;
  }
  
h3 {
  font-size: 1.6em;
  padding: 15px 20px 10px 0;
  font-family: Verdana, Helvetica, Arial, sans-serif;
  color: #da943c;
  } 
  
h4 {
  font-size: 1.3em;
  padding: 6px 4px 2px 0px;
  font-family: Verdana, Helvetica, Arial, sans-serif;
  font-weight: bold;
  color: #5a4b37;
  }
  
h5 {
  font-size: 1.8em;
  padding: 12px 20px 6px 0px;
  color: #da943c;
  font-family: Georgia, serif;
  font-weight: bold;
  }
  

  
.clear { clear: both; }

div#page-wrap {
  width: 900px;
  margin: 0 auto;
  }
div#header_home {
  width: 900px;
  height: 155px;
  background: url(bg-files/blank-bg.jpg) no-repeat;
  }
  div#header_home h1 {
    width: 360px;
    float: left;
    }
  div#contact-note {
  width: 225px;
  height: 155px;
  margin-right: 50px;
  float: right;
  background: url(bg-files/contact-note.jpg) no-repeat;  
  }
  
  div#contact-note a.contact1 {
    width: 225px;
	height: 20px;
	display: block;
    color: #5a4b37;
    font-family: Verdana, sans-serif;
    font-weight: bold;
    font-size: 10pt;    
	text-decoration: none;
	margin: 109px 0 0 22px;
    }
    div#header_home a.contact1:hover {
    color: #da943c;
    }
	
div#navigation {
  font-size: 1.8em;
  font-weight: bold;
  padding: 15px 0 0 10px;
  margin-bottom: 37px;
  }

div#navigation li {
  display: inline;
  list-style: none;
  }

div#navigation li a {
  display: block;
  float: left;
  color: white;
  margin-right: 30px;
  text-decoration: none;
  padding-bottom: 9px;
  }

  div#navigation li a.current {
   border-bottom: 2px solid #da943c;
   }
  div#navigation li a:active {
   color: #da943c;
   }
  div#navigation li a:hover {
   border-bottom: 2px solid #da943c;
   }
div#main-content {
  width: 900px;
  padding-bottom: 20px;
  }
  div#main-content div#left-col {
    float: left;
    width: 528px;
    }
  div#port-service {
    width: 243px;
	height: 233px;
	float: right;
	background: url(bg-files/paper2.jpg) no-repeat;
	padding: 5px 0 0px 15px;
	margin: 5px 0 0px 10px;
	}
	div#port-service h4 {
	  color: #da943c;
	  margin: 50px 0 2px 6px;
	  font-size: 1.6em;
	  }
	  div#port-service ul {
	  margin-left: 10px;	  
	  }
	  div#port-service li {
	    color: #5a4b37;
		font-size: 1.0em;
		font-weight: bold;
		line-height: 1.8em;
	    }
    a.visit {
	font-size: 1.5em;
	color: #da943c;
    font-family: Georgia, serif;
    font-weight: bold;
	}
	a.visit:hover {
	color: #5a4b37;
	}
	
    .portfolio {
	 width: 528px;
	 height: 200px;
     background: url(bg-files/notepad1.jpg) no-repeat;
	 }
	 .portfolio a:hover img {
       filter:alpha(opacity=70);
       -moz-opacity: 0.7;
       opacity: 0.7;
       -khtml-opacity: 0.7;
	   }
	   
	 .left-port {
	   float: left;
	   width: 248px;
	   padding: 23px 0px 15px 25px;
	   }
	   
	 .right-port {
	   float: right;
	   width: 235px;
	   padding: 10px 10px 6px 0;
	   }
	   	 .right-port p {
		 font-size: 1.1em;
		 color: #5a4b37;
		 }
		 .right-port a:hover {
		   color: #da943c;
		   }

    div#main-content div#right-col {
      float: right;
      width: 345px;
      }
	    div#main-content div#right-col p {
		padding: 0px 35px 35px 45px;
		font-size: 1.2em;		
	    }
	    div#main-content div#right-col h3 {
		padding: 10px 0 5px 20px;
		}
    div#main-content div#right-col img {
	  padding: 5px 0 20px 0;
	  }
	  
	div#main-content div#right-col a {
	  color: #da943c;
	  }

	div#main-content div#right-col a:hover {
	  color: #5a4b37;
	  }
	  
	div#main-content div#right-col h3 {
	  text-align: center;
	  margin-bottom: 15px;
	  padding: 10px 0 10px 0;
	  color: #da943c;
	  text-align: center;
	  border-top: 1px solid #5a4b37;
	  border-bottom: 1px solid #5a4b37;
	  }
	  div#right-col a.lightbox {
	  width: 345px;
	  float: right;
	  margin:  0px;
	  padding: 0px;
	  }
	  div#right-col a.lightbox img:hover {
	  filter:alpha(opacity=70);
       -moz-opacity: 0.7;
       opacity: 0.7;
       -khtml-opacity: 0.7;
	   }
	 img.thanks {
	 padding: 15px 0 10px 25px;
	 }
	  
	  
	  .contact {
	    width: 345px;
	    height: 240px;
	    }
	  
	  
	  a.postcard {
	  display: block;
	  width: 200px;
	  height: 50px;
	  background: url(bg-files/contact1.jpg) no-repeat;
	  padding: 10px 10px 20px 0;
	  margin-top: 10px;
	  margin-left: 120px;
	  }
	  
	  a.postcard:hover {
	  background: url(bg-files/contact2.jpg) no-repeat;
	  }
     div#contact-area {
	  width: 345px;
	  height: 240px;
	  margin-top: 0;
	  background-image: url(bg-files/back-card1.jpg);
	  }
	 div#contact-left {
	   width: 145px;
	   float: left;
	   margin-top: 75px;	   
	   margin-left: 35px;	   
	   }
	   
	 
	 div#contact-right {
	   margin-top: 75px;
	   margin-right: 20px;
	   width: 130px;
	   float: right;
	   }
	  div#contact-area input {
	    padding: 5px;
    	width: 130px;
		float: right;
	    font-family: Verdana, sans-serif;
	    font-size: 0.9em;
	    margin: 0px 0px 0px 0px;
	    border: 2px solid #ccc;
		background: white;
        }

      div#contact-area textarea {
	    width: 130px;
	    float: right;
	    height: 90px;
		padding-top: 5px;
		margin: 10px 0px 3px 0px;
        font-family: Verdana, sans-serif;
	    font-size: 1.0em;
	    margin: 0px 0px 10px 0px;
	    border: 2px solid #ccc;
		background: white;
        }

div#contact-area textarea:focus, #contact-area input:focus {
	border: 2px solid #da943c;
    }

div#contact-area input.submit-button {
	width: 100px;
	Margin-top: -5px;
	margin-left: 15px;
	font-family: Verdana, sans-serif;
	font-size: 1.0em;
	background: white;
    }

label {
    width: 130px;
	float: left;
	text-align: left;
	margin-left: 0px;
	padding: 0px;
	font-size: 1.0em;
	font-weight: bold;
	letter-spacing: 0.5px;
	}
	
div#port-top {
  width: 900px;
  height: auto;
  margin-bottom: 15px;
  }
  div#port-mid {
 width: 900px;
 }
	 
     .portfolio2 {
	 width: 900px;
	 height: 200px;
     background: url(bg-files/hi-lite3.jpg) repeat-x;
	 }
	 
	 .portfolio2 a:hover img {
       filter:alpha(opacity=70);
       -moz-opacity: 0.7;
       opacity: 0.7;
       -khtml-opacity: 0.7;
	   }
	   

	 
	 .left-port2 {
	   float: left;
	   width: 248px;
	   padding: 28px 8px 0 34px;
	   }
	   
	 .right-port2 {
	   float: right;
	   width: 570px;
	   padding: 26px 28px 6px 0px;
	   }
	   	 .right-port2 p {
		 font-size: 1.1em;
		 color: #5a4b37;
		 margin: 0 0 -4px 0;
		 }
		 .right-port2 h4 {
		 padding: 4px 0 0 0;
		 }
         .right-port2 a:hover {
		   color: #da943c;
		   }
	.portfolio3 {
	 width: 900px;
	 height: 200px;
     background: url(bg-files/hi-lite4.jpg) repeat-x;
	 }
	 .portfolio3 a:hover img {
       filter:alpha(opacity=70);
       -moz-opacity: 0.7;
       opacity: 0.7;
       -khtml-opacity: 0.7;
	   }
	.right-port3 {
	   float: right;
	   width: 540px;
	   margin-right: 66px;
	   padding: 26px 0 6px 0px;
	   }
	   .right-port3 p {
		 font-size: 1.1em;
		 color: #5a4b37;
		 margin: 0 0 -4px 0;
		 }
		 .right-port3 h4 {
		 padding: 4px 0 0 0;
		 }
         .right-port3 a:hover {
		   color: #da943c;
		   }
	a.case {
	  display: block;
	  height: 200px;
	  width: 50px;
	  float: right;
	  margin: -170px 15px 0 0;
	  }
	   
div#bottom-content {
  font-size: 0.85em;
  width: 900px;
  margin-bottom: 20px;
  text-align: left;
  } 
  
  div#bottom-content li {
  font-size: 1.5em;
  color: #f8dcb9;
  width: 240px;
  float: left;
  }
  div#bottom-content a {
  float: right;
  color: #da943c;
  font-size: 1.3em;
  padding: 10px 20px 0 0;
  }
  div#bottom-content a:hover {
	  color: #5a4b37;
	  }
  div#bottom-content p {
    letter-spacing: 0px;
	margin-right: 10px;
	line-height: 1.4em;
	}
	div#bottom-content h3 {
	width: 235px;
	float: left;
	text-align: center;
	color: #5a4b37;
	background: #da943c;
	padding: 5px 0 5px 0;
	margin-right: 20px;
	margin-bottom: 5px;
	}
    
  div#bottom-content div#about {
  float: left;
  padding: 0 35px 0 45px;
  border-right: 2px dotted #5a4b37;
  margin-left: -35px;
  margin-bottom: 20px;
  width: 240px;
  height: 250px;
  }
  div#about img {
    margin: 0 0 0 0;
	}
    div#bottom-content div#services {
  float: left;
  padding: 0 20px 0px 60px;
  border-right: 2px dotted #5a4b37;
  margin-bottom: 20px;
  width: 240px;
  height: 250px;
  }
  div#bottom-content div#services h3 {
    margin-left: -20px;
	}

  div#bottom-content div#in-touch {
  float: left;
  padding: 0 0 0 45px;
  margin-bottom: 20px;
  width: 240px;
  height: 230px;
  }
 
div#bottom-nav {
  height: 30px;
  line-height: 30px;
  background-color: #625d4a;
  border-top: 1px solid #828c73;
  color: white;
  }  
  div#bottom-nav a {
  font-size: 1.3em;
  color: #5a4b37;
  text-decoration: none;
  text-transform: uppercase;
  line-height: 1.0em;
   margin-left: 20px;
  }
  div#bottom-nav a:hover {
  color: #da943c;
  }
  
div#left-col ul.about {
  font-size: 1.4em;
  color: white;
  margin-left: 20px;
  margin-bottom: 10px;
  }
  
div#left-col img.profile {
 float: left;
 padding: 5px;
 }
  
div#social img {
  margin-left: 15px;
  }
 
div#footer {
  font-size: 0.8em;
  background: #5a4b37;
  color: #b79e7e;
  padding: 20px 0 30px 0;
  text-transform: uppercase;
  border-top: 1px solid #828c73;
  text-align: center;
  }
  div#footer p {
   color: #b79e7e;
   }
   
   div#footer a {
    float: right;
	padding: 0 20px 0 0;
    }	
  div#footer-right {    
    position:absolute;
    left: 20px;
    text-align: left;
	}
	div#footer-right p {
      padding: 0;
	  color: #b79e7e;
	  }