/*this file sets up all the formatting for the different sections on the web pages*/

html, body, div,
h1, h2, h3, p, blockquote, a, font, img,
b, u, i, center, ul, li, ins, del, table {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-size: 100%;
	vertical-align: baseline;
	background: transparent;
}
body {
	line-height: 1;
}
ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
/* remember to define focus styles! */
:focus {
	outline: 0;
}
/* remember to highlight inserts somehow! */
ins {
	text-decoration: none;
}
del {
	text-decoration: line-through;
}
/* tables still need 'cellspacing="0"' in the markup */
table {
	border-collapse: collapse;
	border-spacing: 0;
}
/* Reset for HTML 5 Elements
----------------------------------------------------------------------------------------------------*/

/* tells browsers that don't read html 5 tags to render like divs */
header, footer, aside, nav, section {
	display: block;
	margin: 0 auto 0 auto;
	padding: 0;
}

/* clears containers with floated elements, no need for extra markup! */
.clear:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}

/* Layout
----------------------------------------------------------------------------------------------------*/
/**scroll bar styling for IE**/
html {
scrollbar-base-color: rgb(165,95,11);
scrollbar-arrow-color: black;
scrollbar-track-color: black;

scrollbar-shadow-color: black;
scrollbar-lightshadow-color: black;
scrollbar-darkshadow-color: gray;

scrollbar-highlight-color: rgb(213,154,76);
scrollbar-3dlight-color: black;
}

body {
    background-color: #f4f5f8;
    border: none;
	margin: 0 auto;
    height: 100%;
    overflow-x:hidden
}
/*sets font styles for each different heading*/
h1 {
	font: 50px 'BankGothic Md BT', Arial, Calibri;
    color:rgb(0,0,0);
	padding-top: 1px;
}
h2 {
    font: 34px/50px 'BankGothic Md BT', Arial, Calibri;
	font-size: 28px;
    font-weight: normal;
	line-height: 30px;
	padding: 0 0 15px 0;
}
h3 {
    font: 34px/50px 'BankGothic Md BT', Arial, Calibri;
	font-size: 22px;
	line-height: 24px;
	padding: 15px 0 15px 0;
	width: 370px;
}
p {
	font: 14px/24px Calibri, Arial;
    font-weight: normal;
	padding-bottom: 15px;
    width: 370px;
}
ital {
     font: 14px/24px Calibri, Arial;
     font-style:italic;
     font-weight: normal;
	 padding-bottom: 15px;
}
a {
	color: #CC6600;
	text-decoration: none;
}
a:visited {
	color: #CC6600;
	outline: none;
	text-decoration: none;
}
a:hover {
	color: #FF9900;
	text-decoration: underline;
}
a:active {
	color: #CC6600;
	outline: none;
	text-decoration: none;
}
a:focus {
	outline: 1px dotted;
}
/**list class settings for jtc logo**/
li.jtc{
         background-repeat: no-repeat;
         background-position: 0px 14px;
         margin-left: 10px;
         padding-left: 23px;
         list-style-type: none;     
}
/*** sets picture size for the preview class***/
img.preview{
              width: 133px;
              height: 100px;
    }
/*** sets picture size for the previewpane class***/
img.previewpane{
              width: 440px;
              height: 293px;
    }
/*sets the picture size for the double class*/
 img.double {
    height: 126px;
    width: 198px;
    margin: 0 9px 0 9px;
 }
 /*sets the picture size for the thumb class*/
 img.thumb {
    height: 150px;
    width: 230px;
 }
 /*picture class for the header**/
 img.header {
    text-align:center;
    width: 700px;
    height: 100px;
 }
 /*logo container*/
#logo {
    background-color: black;
    background-position:center;
    background-repeat:no-repeat;
    /*adds shadow effect to sides of page*/
    box-shadow: 0 1px 10px black; /*ie9*/
    -moz-box-shadow: 0 1px 10px black; /*ff*/
    -webkit-box-shadow: 0  1px 10px black; /*others*/
    float: left;
    position: relative;
    left: 0px;
    margin: auto 5px auto 5px;
    border-style: none;
    height: 143px;
    width: 86px;
 }
/* the title banner on the page*/
#banner {
        overflow: visible;
        background: rgba(248, 247, 216, 0.7);
        height: 143px;
        width: 880px;
    	margin: 0 auto 0 auto;
        padding: 5px 40px 8px 40px;
        text-align: left;
        z-index: 100;
		/**** applys a shadow effect**/
		box-shadow: 0 8px 20px 0 rgba(0,0,0,.08); /*ie9*/
		-moz-box-shadow: 0 8px 20px 0 rgba(0,0,0,.08); /*ff*/
		-webkit-box-shadow: 0 8px 20px 0 rgba(0,0,0,.08); /*others*/
}
#jtcheader {
          width: 700px;
          padding: 0;
          height: 100px;
  	  margin: 25px 40px 0 auto;
 }

/***navigation strip under the banner***/
nav#site {
	position: relative;
    	top: 0px;
	width: 960px;
    	margin: 0 auto 0 auto;
	background-color: #f2f2f2;
	z-index: 10;
    	
	/**** applys a shadow effect**/
	box-shadow: 8px 0 10px -10px rgba(0,0,0,.08), -8px 0 10px -10px rgba(0,0,0,.08); /*ie9*/
    -moz-box-shadow: 8px 0 10px -10px rgba(0,0,0,.08), -8px 0 10px -10px rgba(0,0,0,.08); /*ff*/
	-webkit-box-shadow: 8px 0 10px -10px rgba(0,0,0,.08), -8px 0 10px -10px rgba(0,0,0,.08); /*others*/
		
	/*border-radius: 5px;
    	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;*/
}
/**second navigation strip***/
nav#services {
	position: relative;
    	top: 0px;
	width: 960px;
    	margin: 0 auto 0 auto;
	background-color: #f2f2f2;
	/**** applys a shadow effect**/
	box-shadow: 8px 0 10px -10px rgba(0,0,0,.08), -8px 0 10px -10px rgba(0,0,0,.08); /*ie9*/
    -moz-box-shadow: 8px 0 10px -10px rgba(0,0,0,.08), -8px 0 10px -10px rgba(0,0,0,.08); /*ff*/
	-webkit-box-shadow: 8px 0 10px -10px rgba(0,0,0,.08), -8px 0 10px -10px rgba(0,0,0,.08); /*others*/

    	z-index: 10;
}
/***unordered list contains the navigation buttons and centres them***/
ul.main{
	margin: 0 auto 0 auto;
	width: 880px;
    text-align:center;
	border: none;
}
/** list of the nav buttons***/
ul.main li {
	display: inline;
	list-style: none;
	padding-left: 20px;
}

/** nav buttons font settings etc ***/
ul.main li a {
	color: #000000;
	background-color: #f2f2f2;
    border-style: outset;
    border: 2px solid #000000;
	/*border: 2px solid #222;*/
	font: normal bold 14px/44px Calibri, Arial, sans-serif;
	padding: 5px 40px 5px 40px;
    border-radius: 3px;
	-moz-border-radius: 3px;
	-webkit-border-radius: 3px;
	text-align: center;
}
/*** nav buttons hover settings***/
ul.main li a:hover, nav#site ul li a:focus {
	background-color: #111;
    border-style: inset;
	/*border: 2px solid #444;*/
	color: #FF9900;
	text-decoration: none;
}
/*** highlights the selected nav button***/
ul.main li a.selected {
	border: 3px solid #000000;
	background-color: #d8d8d8;
}
/*** hover settings for the selected nav button***/
ul.main li a.selected:hover {
	color: #FF9900;
}
/***** the main body of the page*************************/
#page {
    
	width: 880px;
	padding: 0 40px 0 40px;
    background-color: #ffffff;
    height: auto;
	margin: 0px auto 0 auto;
    text-align: left;
    z-index: 100;
	/**** applys a shadow effect**/
	box-shadow: 0 8px 20px 0 rgba(0,0,0,.08); /*ie9*/
    -moz-box-shadow: 0 8px 20px 0 rgba(0,0,0,.08); /*ff*/
	-webkit-box-shadow: 0 8px 20px 0 rgba(0,0,0,.08); /*others*/
	
}
/*adds shadow and hover effects for img on the page**/
#page img {
         margin-bottom: 15px;
        /**** rounds the corners**/
        border-radius: 4px; /*ie*/
	    -moz-border-radius: 4px; /*ff*/
	    -webkit-border-radius: 4px; /*others*/
 }
/******section that uses the full width of the page container******/
#pagefw {
           width: 100%;
           height: auto;
	   float: left;
           background-color:transparent;
           margin: 0 0 0 0;
           font:normal 14px/44px Calibri, Arial, sans-serif;
           border-style: none;
}
/**** paragraph settings *******************/
#pagefw p {        
    padding: 0 0 15px 0;
 	width: 100%;
}
#imglinks {
    float: left;
	margin: 0 auto 0 auto;
	width: 100%;
    text-align:center;
	border: none;
    }
    
#imglinks li {
	display: inline;
	list-style: none;
	padding: 0 20px 0 20px;
}

#imglinks li a {
        text-align: center;
}
 /*changes the shadow colour on hover*/
 #imglinks img:hover {
        /**** rounds the corners and applys a shadow effect**/
        box-shadow: 0 1px 10px #FF9900; /*ie9*/
        -moz-box-shadow: 0 1px 10px #FF9900; /*ff*/
	    -webkit-box-shadow: 0  1px 10px #FF9900; /*others*/
        border-radius: 4px; /*ie*/
	    -moz-border-radius: 4px; /*ff*/
	    -webkit-border-radius: 4px; /*others*/
 }

/*left hand column in the page container*/
#leftcol {
background-color:transparent;
float: left;
margin: 40px 0 40px 0;
font:normal 14px/44px Calibri, Arial, sans-serif;
border-style: none;
height: auto;
width: 440px;
text-align:left;
 }
/*link buttons in the intro section*/
#leftcol a {
	color: #CC6600;
    	background-color: transparent;
	font: normal bold 14px/44px Calibri, Arial, sans-serif;
	/*padding-left: 5px;*/
}
/*what happens when the cursor is over the links*/
#leftcol a:hover {
	color: #FF9900;
	background-color: transparent;
	text-decoration: none;
}
/*right hand column for the page container********/
#rightcol {
          background-color: transparent;
          float: left;
          margin: 40px 0 40px 0;
          Width: 440px;
          height: auto;
 }
#rightcol a {
	color: #CC6600;
    	background-color: transparent;
	font: normal bold 14px/44px Calibri, Arial, sans-serif;
	/*padding-left: 5px;*/
}
#rightcol a:hover {
	color: #FF9900;
	background-color: transparent;
	text-decoration: none;
	
}
/*********** end of the main page css *****************************************/
footer {
	position: relative;
    left: 0;
	width: 960px;
	background-color: #f2f2f2;
	/**** applys a shadow effect**/
	box-shadow: 0 8px 20px 0 rgba(0,0,0,.08); /*ie9*/
    -moz-box-shadow: 0 8px 20px 0 rgba(0,0,0,.08); /*ff*/
	-webkit-box-shadow: 0 8px 20px 0 rgba(0,0,0,.08); /*others*/
}

footer div {
	margin: 0 auto 0 auto;
	padding: 15px 0 15px 0;
	width: 880px;
	border: none;
}

footer div section {
	color: #222;
	float: left;
	width: 440px;
	border: none;
	margin-bottom: 15px;
}

footer div section h3 {
	color: #222;
}

nav#SiteMap ul li {
	color: #222;
	list-style: none;
    background-repeat: no-repeat;
    background-position: 0px 5px;
    margin-left: 10px;
    padding-left: 30px;
    list-style-type: none;
    font: 14px/24px Calibri, Arial;
    font-weight: normal;
}
#colA {
      float: left;
      margin: 0;
      padding: 0;
      width: 220px
 }
#colB {
      float: left;
      margin: 0;
      padding: 0;
      width: 220px
 }
footer #about {
	width: 440px;
	margin-bottom: 15px;
}
footer #note {
       margin: 0 auto 0 auto;
       text-align:center;
       color: #777;
 }
 footer #note p{
       width: 880px;
 }
/* start of image slideshow css ************************************************************/
	#dhtmlgoodies_slideshow{
		position: relative;
		width:100%;
		height: auto;	/* Total width of slideshow */
	}
	
	#previewPane{
		margin-bottom:10px;	
		text-align:center;
		vertical-align:middle;
		padding-top:10px;
		position:relative;

		/* CSS HACK */
		height: 306px;	/* IE 5.x */
		height/* */:/**/302px;	/* Other browsers */
		height: /**/302px;
				
	}
	#previewPane img{
		line-height:300px;
        /**** rounds the corners**/
        border-radius: 4px; /*ie*/
	    -moz-border-radius: 4px; /*ff*/
	    -webkit-border-radius: 4px; /*others*/
	}
	#previewPane #largeImageCaption{	/* CSS styling of image caption below large image */
		font-style:italic;
		text-align:center;
		font-family: Calibri, Arial, sans-serif;	/* Font to use */
		font-size:0.9em;
	}

    /*** contains the smaller images in the bottom of the slideshow***/
	#galleryContainer{
		
		height:200px;	/* Height of the images + 2 */
		border:none;
		position:relative;
		overflow:hidden;
		padding:0px;
        	margin: 0px auto 0 auto;
        /**** rounds the corners and applys a shadow effect**/
        /*box-shadow: 0 1px 10px #333;*/ /*ie9*/
        /*-moz-box-shadow: 0 1px 10px #333;*/ /*ff*/
	    /*-webkit-box-shadow: 0  1px 10px #333;*/ /*others*/
        /*border-radius: 4px;*/ /*ie*/
	    /*-moz-border-radius: 4px;*/ /*ff*/
	    /*-webkit-border-radius: 4px;*/ /*others*/
		
		/* CSS HACK */
		height: 204px;	/* IE 5.x - Added 2 pixels for border left and right */
		height/* */:/**/200px;	/* Other browsers */
		height: /**/200px;
				
	}   
	
	#theImages{
		position:relative;
		height:200px;
		left:0px;
		width:100%;
		
	}
	#theImages #slideEnd{
		float:left;
	}
	#theImages img{
		float:left;
		/*filter: alpha(opacity=50);*/
		/*opacity: 0.5;*/
		cursor:pointer;
		border:0px;
	}
	/*changes the shadow colour on hover*/
 	#theImages img:hover {
        /**** rounds the corners and applys a shadow effect**/
        box-shadow: 0 1px 10px #FF9900; /*ie9*/
        -moz-box-shadow: 0 1px 10px #FF9900; /*ff*/
	    -webkit-box-shadow: 0  1px 10px #FF9900; /*others*/
        border-radius: 4px; /*ie*/
	    -moz-border-radius: 4px; /*ff*/
	    -webkit-border-radius: 4px; /*others*/
 	}

	#waitMessage{
		display:none;
		position:absolute;
		left: 47%;
		top:175px;
		height: 32px;
		/*background-color:#777;*/
		/**** rounds the corners and applys a shadow effect**/
        	box-shadow: 0 1px 10px #333; /*ie9*/
        	-moz-box-shadow: 0 1px 10px #333; /*ff*/
	    	-webkit-box-shadow: 0  1px 10px #333; /*others*/
        	border-radius: 4px; /*ie*/
	    	-moz-border-radius: 4px; /*ff*/
	    	-webkit-border-radius: 4px; /*others*/
		padding: 0px;
	}
	
	#theImages .imageCaption{
		display:none;
	}
/* end of image slideshow css ************************************************************/
/******image rotator css***/
* {
	margin: 0;
	padding: 0;
}

#rotator {
	/*border: 1px solid #000;*/
    background-color: black;
	cursor: pointer;
	overflow: hidden;
	margin: 50px auto 10px;
	position: relative;
	width: 400px;
	height: 250px;
    /**** rounds the corners**/
        border-radius: 4px; /*ie*/
	    -moz-border-radius: 4px; /*ff*/
	    -webkit-border-radius: 4px; /*others*/
}

#rotator img {
	border: 0;
	cursor: pointer;
	width: 400px;
	height: 250px;.
} 
#rotator:hover {
        /**** rounds the corners and applys a shadow effect**/
        box-shadow: 0 1px 10px #FF9900; /*ie9*/
        -moz-box-shadow: 0 1px 10px #FF9900; /*ff*/
	    -webkit-box-shadow: 0  1px 10px #FF9900; /*others*/
        border-radius: 4px; /*ie*/
	    -moz-border-radius: 4px; /*ff*/
	    -webkit-border-radius: 4px; /*others*/
 }     
    /***end of image rotator css