body {
     background:url('../images/BGmetal.jpg') repeat-x;    
     background-color:#fff;
     font-family: 'Shanti', sans-serif;
     text-align:left;
    }

   
*   {
     margin:0;
     padding:0;
     font-family: 'Shanti', sans-serif;
    }  
    
#container {
    width:900px;
    height:665px;  
    margin:0 auto;
    text-align:left;
    background-color:#fff;
    -moz-box-shadow: 0 0 5px #000;
    -webkit-box-shadow: 0 0 5px #000;
    box-shadow: 0 0 5px #000;
    }  
    
#header {
    width:100%;
    height:75px;
    background-color:#000000;
    color:#ffffff;
    margin-bottom:10px;
}

#header h1 {
    width:100%;  
    font-family: 'Mate SC', serif;
    font-size:185%;
    font-weight:normal;
    border-bottom:1px solid #ffffff; 
   padding-bottom:3px;
} 


#header {
    margin:0 auto;
    width:900px;
    height:75px;
    padding-top:15px;
}


nav {
    font-size:105%;
    float:right;
    width:100%;
font-size:90%;  
    color:#ffffff;
}

nav ul {
    list-style-type:none;
    padding:3px;   
    float:right;
    color:#ffffff;
}

nav li {
    float:left;    
    margin-right:30px;
    margin-top: 0;  /* was -5px  */
    color:#ffffff;
}

nav li a {

    text-decoration:none;
    color: #ffffff; 
    background-color:#000;
    -webkit-transition: background-color .75s ease;
    -moz-transition: background-color .75s ease;
    -o-transition: background-color .75s ease;
    transition: background-color .75s ease; 
    font-weight: bold;
}

nav li a:link {
    padding:3px 10px;
    color:#ffffff;
}

nav li a:hover,
nav li a:focus,
nav li a.current {
    text-decoration:none;
    background:url(../images/glow.png);
    background-color: rgba(109,207,246,.1);
    color: #ffffff;  
}

nav #indicator {
    position:absolute;
    left:-85px;
    width: 12px;
    height: 7px; 
    background-image: url('images/notch.gif');
    background-repeat:no-repeat;
}

nav #tab {
    margin:0 auto;
    background-color:#FFFFFF;
    color:#ffffff;
	}

nav.current {
    margin:0 auto;
}

  
#logo {
    width:920px; 
    height:245px; 
    background-image: url('../images/metal-banner3.jpg');
    background-repeat: no-repeat; 
    padding-left:10px;
    padding-right:10px; 
}  

#main {
    width:100%;
    height:295px;
    background-color:transparent;
}

#discount {
    background-color:#fff;
    padding:10px 0 0 0;
    width:275px;
    height:295px;
    font-size:90%;
    float:left;
}

#content {
    background-color:#fff;
    padding:20px 28px 0 0;
    margin-top:20px; 
    margin-left:35px;   
    width:250px;           
    height:275px;
    font-size:90%;
    float:left;
}

#contentTwo {
    background-color:#fff;
    padding:20px 28px 0 0;
    margin-top:20px;     
    width:250px;           
    height:275px; 
    font-size:90%;  
    float:left;
    line-height:1.2em;
}

#contentTwo .satisfaction {
    color:#red;
    border-bottom:2px dashed #b7b7b7;
}

#contentTwo .satisfaction:hover {
    background-color:yellow;
    border-bottom:2px dashed #000;
}

#contactForm {
    width:275px;
    height:275px;
    padding:20px 28px 0 30px;
    margin-top:20px;
    float:left;
    font-size:90%;
    background: #888f90;  
    background: -webkit-linear-gradient(rgba(155, 155, 135, 0.6),rgba(53, 56, 67, .5));  
    background: -moz-linear-gradient(rgba(155, 155, 135, 0.6),rgba(53, 56, 67, .5));
    background: -ms-linear-gradient(rgba(155, 155, 135, 0.6),rgba(53, 56, 67, .5));
    background: -o-linear-gradient(rgba(155, 155, 135, 0.6),rgba(53, 56, 67, .5));
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;


}

label {
    display:block;
    letter-spacing:2px;
    font-size:90%;
    padding-top:3px;
}

#contactForm {
    margin:0 auto;
    margin-top:20px;
    width:190px;
    height:210px;
}

#contactForm input, textarea, {
    width:190px;
    height:30px;
    background:#efefef;
    border:1px solid #dedede;
    padding:5px;
    margin-top:3px;
    font-size:90%;
    color:#3a3a3a;
    border-radius:5px;
    -moz-border-radius:5px;
    -webkit-border-radius:5px;
}

#contactForm textarea {
    height:45px;
    font-size:95%;
}

#contactForm input:focus, textarea:focus {
    border:1px solid #97d6eb;
}

#submit {
    width:70px;
    height:22px;
    background-color:#BCBEC0;
    border:1px solid #dedede;
    border-radius: 5px;
    margin-top:10px;
    cursor:pointer;
}

#submit:hover {
    opacity:.25;
}

#center { 
    margin:0 auto;
    padding-top:15px;
    position:relative;
    width:900px; 
    background-color:#FFFFFF;
}	

#superhero {
    width:100%;
    height:275px;
}

#artwork {
    font-size:90%;
    width:100px;
    height:275px; 
    background-color:#fff;
    padding-left:0;  /* was 280px  */
    padding-bottom:20px;
    margin-top:20px;  
    margin-left:15px;
    float:left;
}

#artwork p.one {
    margin-left:-100px;
}

#artwork p.two {
    margin-left:-100px;
}


#content table {
	float:left;
	width:275px;
	height:295px;
}	

#content h1 {
	text-align:left;
	float:left;
}	

#content table p {
	font: 100% Verdana, Arial,Helvetica, sans-serif;
	line-height:120%;
	font-size:95%;
	width:255px;
	height:100px;
	margin-left:35px;
	margin-top:30px;
}

#content table p.savings {
	font: 150% Verdana, Arial,Helvetica, sans-serif;
	color:#009900;
}

#content table img {
	margin-left:29px;
	margin-top:30px;
}

#gallery {
  background: #fff;
  height:275px;
  width: 800px; 
  margin-top:20px; 
  padding-left: 50px;  
  padding-bottom:20px;
}
	
#gallery ul {
  list-style: none;
  padding-top:20px;
  margin: 0px;
  float: left;
  clear: both;
}
#gallery ul li {
  display: inline;
  padding: 0px;
  margin: 0px;
  position: relative;
}

#gallery ul img {
  border: 5px solid #fff;
  border-width: 5px 5px 10px;
  margin-left:10px;
}

#gallery ul a:hover img {
  border: 5px solid #e0e0e0;
  border-width: 5px 5px 10px;
  color: #fff;
}

#gallery ul a:hover { color: #fff; }




.tinted {
  text-align:center;
  filter:alpha(opacity=80);
  -moz-opacity:0.8;
  -khtml-opacity: 0.8;
  opacity: 0.8;
}

.transparent {
	filter:alpha(opacity=0);
	-moz-opacity:0;
	-khtml-opacity: 0;
	opacity: 0;
}

#form {
    width:900px;
    height:285px;
    margin-left:95px; 
    margin-top:30px; 
}


#switch {
        width:700px;
        margin-left:50px;
        padding-bottom:3px;
        font-size:85%;
        position:relative;
}

#switch a {
	display:block;
        width:700px; 
	height:275px;
	position:absolute;
	top:0;
	left:0;
        margin-right:150px;
        padding:3px;
}

#one { background: url(../images/myservices-websites.jpg);background-repeat:no-repeat; z-index:1; }
#two { background: url(../images/myservices-email.jpg);background-repeat:no-repeat;}
#three { background: url(../images/myservices-businesscards.jpg);background-repeat:no-repeat; }
#four { background: url(../images/myservices-postcard.jpg);background-repeat:no-repeat; }
#five { background: url(../images/myservices-illustration.jpg);background-repeat:no-repeat; }
#six { background: url(../images/myservices-logo.jpg);background-repeat:no-repeat;}
#seven { background: url(../images/myservices-flyer.jpg);background-repeat:no-repeat; }

#switch a span {
height:10px;
        position:absolute;
      	width:120px;
        height:10px;
        padding:3px;
	background-color: #fff;
        color:#808080;
}

#one span {left:-105px; top: 10px; }
#two span {left:-105px; top: 30px;}
#three span {left:-105px; top: 50px;}
#four span {left:-105px; top: 70px;}
#five span {left:-105px; top: 90px;}
#six span {left:-105px; top: 110px;}
#seven span {left:-105px; top: 130px;}

#switch a:hover { z-index:1; padding:3px; }
#switch a:hover span {background-color: #f0f0f0;padding:3px; }

#contact {
    width:275px;   /*  was 100%   */
    height:195px;   /*  was 295px   */
    padding-left:0;   /*  was 280px  */
    margin-top:40px;
    font-size:95%;
    text-align:left;
    float:left;        /* didn't exist before   */
    line-height:125%;
    border-left:1px solid #a8a8a8;
}


#contact textarea {
    text-align:left;
}	

#contact p {
    width:275px;     /* was 305px    */
    height:100px;    /*  was 295px   */
    font-family:Arial, Helvetica,sans-serif;
    font-size:95%;     /* was 14px   */
    color:#000;
    padding-top:0;
    padding-left:25px;
}

#contact a:link {
    color:#999999;
    text-decoration:none;
}

#contact a:visited {
    color:#1e7a8e;
    text-decoration:none;
}

#contact a:hover {
    color:#888888;     /*  was 00aeef - #39b44a   */ 
    text-decoration:underline;
}

#contact a:active {
     color:#000;
    text-decoration:none;
}
 			

#contact form {
    width:275px;
    height:295px;
    font-family:Arial, Helvetica,sans-serif;
    font-size:12px;
    color:#1e7a8e;
}

#contact img {
    padding-right:5px;
    padding-top:10px;
    border:0px
}

#contact .hr {
	width:260px;
	margin:0;
	padding:0;
	color:#33CC33;
}

#content section {
    margin:0 auto;
	display: none;
	background-color:#FFFFFF;
	width:100%;
	height:295px;
}

#content p {
	margin-bottom: 1em;
	max-width: 50em;
	line-height: 1.2;
}

#section gallery {
    background-color:#FFFFFF;
} 

#footer {
    color:#000;
    width:100%;
    height:225px;
    padding: 0 0px;
    clear:both; 
}


a:link {
	color:#999999;
	text-decoration:none;
}

a:visited {
	color:#666;
	text-decoration:none;
}

a:hover {
	color:#0066ff; 
	text-decoration:underline;
}	

a:active {
	color:#666;
	text-decoration:underline;
}

#footer {
    width:900px;
    height:295px;

    background-color:#d3d3d3;
    color:#f26522;
    font-family:verdana,arial,sans-serif;
    font-size:100%;
}

#footerLC {
    padding:0 20px 0 0;
    margin-left:35px;
    margin-top:30px;
    width:200px;  /* was 225px;  */
    height:90px;
    float:left;
    border-right:1px dotted #363636;
    color:#555555;
}

#footerLC a {
    padding-right:5px;
}


#footerLC p {
    margin-left:0;
}

span.info {
    font-family: 'Mate SC', serif;
    font-size:125%;
    font-weight:normal;
    color:#555;
}


#footerLC img {
    border:0;
}

#footerMC {
    color:#555;
    padding:0 20px 0 10px;
    margin-top:30px;
    margin-left:10px;
    width:245px;   /* was 270px;  */
    height:90px;
font-size:90%;
    border-right:1px dotted #363636;
    float:left;
}

#footerMC img {
    border: 0;
    padding-right:5px;
}

#footerMC a:link {
    color:#707070;
    text-decoration:none;
}

#footerMC a:visited {
    color:#555;
    text-decoration:none;
}

#footerMC a:hover {
    color:#1e7a8e;     /* was 00aeef  - #39b44a */ 
    text-decoration:underline;
}

#footerMC a:active {
     color:#000;
    text-decoration:none;
}

#footerRC {
    color:#555;
    background-image:url('../images/james_TWITTER2.png');
    background-repeat:no-repeat;
    padding:10px 20px 0 25px;
    margin-left:30px;  
    width:275px;
    height:225px;
font-size:90%;
    float:left;
    text-decoration:none;
}

#twitter_update_list
{
    width:200px;
    margin-left:-10px; 
    list-style-type:none;   
}
#footerRC a:link {
    color:#555;
    text-decoration:none;
}

#footerRC a:visited {
    color:#fff;
    text-decoration:none;
}

#footerRC a:hover {
    color:#1e7a8e;     /* was 00aeef - #39b44a   */
    text-decoration:none;
}

#footerRC p {
    margin:10px 10px;
}