/*  
  7pt = 9.33px
  8pt = 10.66px
  9pt = 12px
  10pt = 13.33px
  12pt = 16px
  14pt = 18.66px
  16pt = 20px
  
  
  purple  #65477a
  green   #348354
*/


/* need this next line for mozilla browser to allocate space for scrollbar, or page jumps left as scrollbar is added */
body {overflow:-moz-scrollbars-vertical;   }
    

body,  td, th, p	{
	font-family: Verdana,"Lucida Sans Unicode",  sans-serif;
	font-size: 12px;
	letter-spacing: .02em;
	font-weight: normal;
	color: #404040;
	line-height: 150%;
	text-align: justify; 
	}
	
.wrapper {margin-top:0px;
    padding-top:0px;
    }


p {margin-top:0;}

p span.standout,
li span.standout {
	font-size: 15px; 
	font-weight: bold;
	color: #404040;
	}
#leftcontent span.standout { 
	size: 16.66px;
	}	
ul {	list-style-image: url('images/listsquare.gif');	}

p a,
li a {
	font-weight: normal;
	text-decoration: underline;
	}

a { outline: none; }

.hidden {display:none;}
 
#content  { 
	background: white url('images/contentback.jpg') no-repeat;
	margin: 0;   
	height: auto; 
	}   
    
	
#nav {  
    font-family: Verdana, "Lucida Sans Unicode", sans-serif;
    font-size: 12px;
    font-weight: normal;
    letter-spacing: .05em;
    color: #404040;  
    padding: 0 0 0 300px;
    height:132px;
    margin:0;
    }
#nav a {
    text-decoration: none;
    padding: 0 32px 0 0; 
    color: #404040;
    }
    
.failed {
     color: #B8005C;
     margin: 40px 0;
     }
/* =================== mobile vs desk =========================== */    
/*  ----- mobile  --------  */
@media  
   (max-device-width: 1200px)    {
   
       #leftcontent, .leftcontent,  #nav   {display:none;}
   
       body { width:100%; max-width:100%; margin:auto; 
       		background: grey;
       		}
       
       #content  {
       		max-width:100%;
       		padding:0 5px;
       		min-height:200px;
       		}
       #mbanner {   
       		background:white url('images/bannerback.jpg') -50px 0 no-repeat;  
       		height:132px;
       		}         
       #mbanner #openmenu { 
            vertical-align:bottom;
            padding-top:105px;
            padding-right:20px;
            text-align:right;
            border: 0px;
            outline: none;
       		}
       #mnav {  
       		background: #d4ccd9 url('images/contentback.jpg') no-repeat;
       		}
       #mnav li {		
       		font-family: Verdana,"Lucida Sans Unicode",  sans-serif;
            font-size: 14px;
            letter-spacing: .02em;
            font-weight: normal;
            color: #404040;
            }
 
       h1  {  	padding: 17px 0 15px 25px; }		
       #footer  { 
            width: 98%; 
            margin:auto;
            border-top: 1px solid #65477a; 	
            }
        #footer span {
            font-size: 10px;
            letter-spacing: .02em;
            text-align: center; 
            }
        #footer .center {
            text-align: center; 
            }
        #footer .right {
            text-align: right;
            padding-left: 20px;
            }
        #footer .left, #footer .modified { display:none; }
        #footer a {
            text-decoration: none;
            color: #404040;
            }
        #footer a.lee { text-decoration: underline;}	
    
    /* ===================== portfolio  ================================ */	
    #portcontainer {
    	text-align:center;
    	margin:auto;
    	width:100%;
    	}
    .imgcontainer  { 
        width: 290px;
        height: 250px;
        float: left;  
        } 	
     #clickon {display:block;}
       		
  	/* ============= portfolio details pop-up ==================== */
 		
    div.details p {  
        padding: 0 10px 10px 20px;	
        }
    div.details img {
        margin-top: 8px;  
        }
    .topbar {
        height:30px;
        width:100%;
        vertical-align:middle;
        }
    .topbar a { font-size:16px;
        } 
        
    /* ===========  paynow ====================  */
    #paynow {
        min-height: 350px;
        }
 
    #paynow  form  div {
        margin: 20px auto; 
        }     		
       		
}
@media (max-device-width: 1200px) and
     (orientation: landscape) {
    div.details {   
        height: 98%;  
        position: fixed;
        left: 15%;
        top: 1%; 
	    }
    div.details img {  
        max-height: 60%;
        }  
}
@media (max-device-width: 1200px) and
     (orientation: portrait) {
     div.details {  
        width: 95%;  
        position: fixed;
        left: 2%;
        top: 142px; 
	    }
     div.details img {  
        max-width: 90%
        }
     #paynow  form  span {display:block;}
}

/*   DESKTOP  */
@media (min-device-width: 1201px)   {     
    #mbanner {display:none;}  
    
    body {	margin: 0px;             
        padding: 0;
        width: 1000px;
        /* border: 1px solid black; */
        background: grey; 
        margin-left:auto;
        margin-right:auto;
        }

    h1  {  	padding: 17px 0 15px 270px; }     
    #content {
    	padding: 0px 30px 10px 30px; 
        vertical-align: top;
        background: white url('images/contentback.jpg') no-repeat; 
        }
	
    /* =============== index ============================  */
    #indexspacer { height: 65px;  }  /* takes the place of the page title */
	

    /* ================= overall layout ======================= */
     
    #nav {   
        background:white url('images/bannerback.jpg') no-repeat; 
        font-size: 12px; 
        letter-spacing: .05em; 
        padding-left:260px; 
        }
    #nav ul { 
    	position:relative;
    	top: 108px;
    	list-style:none; 
    	}
    #nav ul li {
    	display: inline;
    	}
    #nav ul li a {
        text-decoration: none;
        padding: 0 32px 0 0; 
        color: #404040;
        }
    #nav form { 
    	position:relative;
    	top:77px;
    	left:455px;
    	width:250px;
    	   }
    #nav input  {
        border: 0px;
        }
	
    .swash {
        background: url('images/swash.png') right no-repeat;
        height: 30px;
        width: 206px;
        margin-top:12px;
        margin-bottom:12px;
        }	
    #content  {  
        }

    #leftcontent  {
        width: 206px;
        float: left;
        vertical-align:top;
        text-align:right;
        padding:0px 0 0 0;
        }	
    #rightcontent  {
        width: 632px;
        padding: 0px 28px 0 64px;
        vertical-align:top;
        float: left;
        min-height: 60px;
        }
    ul {margin-top:0;}
    ul.general li {
        margin: 0 0 18px -25px;
        } 
	
    #footer  { 
        width: 890px; 
        margin-left:20px;
        margin-top: 40px;
        border-top: 1px solid #65477a; 	
        }
    #footer span {
        font-size: 10px;
        letter-spacing: .02em;
        text-align: left;
        }
    #footer .center {
        text-align: center;
        padding: 0 15px;
        }
    #footer .right {
        text-align: right;
        padding-left:20px;
        }
    #footer .left {
        text-align: left;
        padding-right:5px;
        }
    #footer a {
        text-decoration: none;
        color: #404040;
        }
    #footer a.lee { text-decoration: underline;}

	
    /* ===================== portfolio  ================================ */	
    #portcontainer {
    	text-align:center;
    	margin:auto;
    	width:870px;
    	display:flex;
    	flex-flow: row wrap;
    	justify-content: space-around;
    	}
    .imgcontainer  { 
        width: 290px;
        height: 250px;
        /* float: left; */ 
        margin:auto;  
        }
    div.left { text-align:left; }
    div.middle { text-align:center; }
    div.right { text-align:right;}	
	
 	/* ============= portfolio details pop-up ==================== */
 	div.details { 
        width: 700px;  
        position: fixed;
        top: 10px;
        margin-left: 200px;  
	    }	
    div.details p {  
        padding: 0 10px 10px 20px;	
        }
    div.details img {
        margin-top: 8px; 
        }
    .topbar {
        height:20px;
        width:100%;
        }
    .topbar a { 
        }
        
        
    /* ===========  paynow ====================  */
    #paynow {
        min-height: 350px; 
        width: 870px;
        margin:auto;
        } 
    #paynow  form  div {
        margin: 20px auto; 
        }        		

}   /* end of desktop */



/* ===================== portfolio  ================================ */	
.imgcontainer img {
    border: 1px solid #828282; 
    }	

/* ============= portfolio details pop-up ==================== */
div.details {
    display: none;
    background: #F5F5F5; 
    border: 1px solid #404040;
    border:1px solid #404040; 
    text-align: center;   
    filter:alpha(opacity=100);
}
	
div.details p { 
    text-align:left; 	
    }
div.details img {
    border: 1px solid #404040;
    }
.topbar {
    font-family: "Arial Black", sans-serif;
    display: block;
    color: #EFEFEF;
    font-weight: bold;
    background-color: #888888;
    text-align:right; 
        }
.topbar a {
    color:  #EFEFEF;
    text-decoration: none;
    }		


 		
/* ============= headers ============================ */    

h1  { font-family: Verdana, "Lucida Sans Unicode", sans-serif; 
	font-size: 16px; 
	font-weight: bold; 
	color: #606060; 
	margin:0;
	margin-bottom:15px;
	 }

h2  { font-family: Verdana, "Lucida Sans Unicode", sans-serif; 
	font-size: 13.33px; 
	font-weight: bold; 
	color: #404040;
	padding: 0px 0 0px 0;
	margin-top: 2px;
	letter-spacing: .06em;
	line-height: 150%;
	 }
h2 span.standout {
	font-family: Verdana, "Lucida Sans Unicode", sans-serif;
	font-size:  17px;
	font-weight: bold;
	}
 h3  { font-family: Verdana, "Lucida Sans Unicode", sans-serif; 
	font-size: 10pt; 
	font-weight: bold; 
	color: #000000;
	padding-bottom: 0;
	 }