/* compliant-browser style sheet for jtcg rev 050408 
generated on NoteTab Pro v5.61 by barton cole*/



body {
margin:0px;
padding:0px;
background: #000 url(images/grad1.jpg) top left repeat-x;
}


a {
text-decoration: none;
color: #666;
font-weight: bold;
}

#wrap {
position: absolute;
height: 800px;
width: 1280px;
left: 50%;
margin-left: -660px;
padding:0px;
background: #fff url(images/wrapback1280.gif) top left no-repeat;
}

#nav1{
display:block;
position:absolute;
height: 50px;
width:149px;
top:400px;
left: 642px; 
background:transparent url(images/navback.gif) top left no-repeat;
}

#nav1 ul {
list-style-type: none;
margin:0px;
padding:0px;
line-height: 30px;
vertical-align: middle;
text-align:center;

}
#nav1 a {
display:block;
height: 28px;
width:128px;
background:transparent url(images/arrow.gif) top left no-repeat;
}

#nav1 a:link {
height: 29px;
width:128px;
background:transparent url(images/arrow.gif) top left no-repeat;
}

#nav1 a:hover {
height: 29px;
width:128px;
background:transparent url(images/arrow.gif) bottom left no-repeat;
}


#media-audio {
position:absolute;
height:50px;
width:130px;
top:200px;
left:640px;
background:none;
}



#nav2 {
display:block;
position:absolute;
height: 290px;
width:149px;
top:240px;
left: 640px; 
background:transparent url(images/navbacksix.gif) top left no-repeat;
}

#nav2 ul {
display: block;
list-style-type: none;
margin-top:1px;
margin-left:1px;
padding:0px;
font: 12pt trebuchet, arial, helvetica, sans-serif;
vertical-align: middle;
text-align: center;
color: #666;
font-weight: bold;
}

#nav2 ul li {
display:block;
width: 128px;
height: 30px;
margin-bottom: 10px;
line-height: 30px;
background:transparent url(images/button.gif) top left no-repeat;
font: 12pt trebuchet, arial, helvetica, sans-serif;
vertical-align: middle;
color: #999;
font-weight: bold;
z-index:2;
}

#nav2 a {
display:block;
height: 29px;
width: 128px;
background:transparent url(images/button.gif) top left no-repeat;
font: 12pt garamond;
line-height: 30px;
vertical-align: middle;
color: #999;
font-weight: bold;
}

#nav2 a:link {
display:block;
height: 29px;
width: 128px;
background:transparent url(images/button.gif) top left no-repeat;
font: 12pt garamond;
line-height: 30px;
vertical-align: middle;
color: #999;
font-weight: bold;
}

#nav2 a:hover {
display:block;
height: 29px;
width: 128px;
background:transparent url(images/button.gif) bottom left no-repeat;
font: 12pt garamond;
line-height: 30px;
vertical-align: middle;
color: #fff;
font-weight: bold;
}
#callout {
position:absolute;
width:auto;
height:auto;
border:1px solid red;
left:0;
top:0;
font: .8em trebuchet, arial, helvetica, sans-serif;

background:transparent url(images/tabgradTall.jpg)top left repeat-x;
margin-left:525px;
margin-top:490px;
padding:2px;
border:1px solid #fb0;

}
#callout a{
color:#666666;
}
#callout a:link{
color:#666666;
}
#callout a:hover{
color:#333333;
}

#contact1 {
margin: 0px;
padding:0px;
position:absolute;
width: 250px;
height: 102px;
left: 623px;
top: 50px;
background: transparent /* url(images/contactB.gif) top left no-repeat */;
}


#contact2 {
margin: 0px;
padding:0px;
position:absolute;
width: 266px;
height: 91px;
left: 654px;
top: 50px;
background: #fb0 url(images/contact2.gif) top left no-repeat;
}

#right {
position: absolute;
top: 0px;
left: 850px;
margin: 0px;
padding: 0px;
width: 410px;
height: auto;
}

/*--------------contact block font styles-------------*/
#contact1 .address {
font:.8em arial, helvetica, sans-serif;
color:#666666;
font-variant:small-caps;
font-weight:bold;
margin-top:2em;
/*background:url(images/scrn2.png) top left repeat;*/
}
#contact1 a:link {color:#151515;}
#contact1 a:visited {color:#151515;}

#contact1 a:hover {color:#ffbb00;}

h3 {margin-top:.25em;margin-bottom:.25em;}
h4 {margin-top:.25em;margin-bottom:.25em;}
h5 {margin-top:.25em;margin-bottom:.25em;}


/*----------styles for Title Bar, and included Tab Bar
=====================================================*/
#title {
position: relative;
left: 0px;
top: 530px;
font: 10pt trebuchet, verdana;
color: #666;
padding-left: 10px;
text-align: left;
line-height: 25px;
font-weight: bold;
font-variant: small-caps;
vertical-align: middle;
height: 25px;
width: 400px;
background: #fb0 url(images/tabgrad2.jpg)top left repeat-x;
border:1px solid #fb0;
}

#tabs{
position: relative;
left: 130px;
top: 505px;
font: 10pt trebuchet, verdana;
color: #666;
margin-right:0px;
text-align:center;
line-height: 23px;
font-weight: bold;
font-variant: small-caps;
height: 23px;
width: 280px;
background: #ffbb00 url(images/tabgrad2.jpg)top left repeat-x;
z-index:1;
}

/*--------styles for tab buttons--------
================================================*/
ul.tabs {
margin:0px;
padding:0px;
width:100%;
float:right;
height:23px;
}

ul.tabs li {
margin-top:-1px;
padding:0px;
list-style-type:none;
line-height:24px;
border-top:1px solid #fe0;
border-right:1px solid #fb0;
border-bottom:1px solid #fb0;
border-left:1px solid #fe0;
float:left;
width:30%;
background: #fb0 url(images/tabgrad2.jpg)bottom left repeat-x;
}

ul.tabs li a {
display:block;
margin-top:-1px;
height:25px;
background: #fb0 url(images/tabgrad2.jpg)bottom left repeat-x;
}

ul .tabs a:link, ul.tabs a:visited, ul.tabs a:active {
color:#666;
}
ul.tabs a:hover, ul.tabs a:focus {
color:#000;
text-decoration:underline;
}

ul.tabs li.selected {
margin-top:-1px;
height:24px;
color:#333;
background:#fb0 url(images/tabgrad2.jpg)bottom left repeat-x;
}


ul.tabs li.empty{
visibility:hidden;
}
/*--------default styles for content div-----
=========================================================*/
#content {
position: relative;
overflow: auto;
display: block;
font: 10pt trebuchet, verdana;
border-top: 1px solid #ccc;
border-left: 1px solid #ccc;
border-bottom: 1px solid #333;
border-right: 1px solid #333;
color: #666;
padding: 5px;
background: transparent url(images/scrn2.png)top left;
}
#content a:hover {
color: #fb0;
}

#content ul {
list-style-type:none;
}

#content li a {
font-size: .9em;
color: #666;
font-weight: bold;
background: url(images/arbul1.gif) no-repeat 0 50%;
padding-left: 18px;
margin-left: -20px;

}

#content li a:hover {
background: url(images/arbul2.gif) no-repeat 0 50%;
padding-left: 18px;
margin-left: -20px;
font-size: .9em;
color: #000;
font-weight: bold;
}

/*----------styles for content div, unique to each page [positioning, mostly]
=====================================================*/
#main #content {
position: relative;
overflow: auto;
display: block;
top: 0px;
left: 0px;
width: 400px;
height: auto;
}

#about #content {
position: relative;
overflow: auto;
display: block;
top: 150px;
left: 0px;
width: 400px;
height: 340px;
}

#services #content {
position: relative;
overflow: auto;
display: block;
top: 0px;
left: 0px;
width: 400px;
height: 470px;
}

#portfolio1 #content {
position: relative;
overflow: auto;
display: block;
top: -50px;
left: 0px;
width: 400px;
height: auto;
}

#portfolio2 #content {
position: relative;
overflow: auto;
display: block;
top: -50px;
left: 0px;
width: 400px;
height: auto;
background: #03070a;
}


#comm #content {
position: relative;
overflow: auto;
display: block;
top: 327px;
left: 0px;
width: 400px;
height: auto;
}
#clients #content  {
position: relative;
overflow: auto;
display: block;
top: 40px;
left: 0px;
width: 400px;
height: auto;
}
#pintail {
position:relative;
margin-left:60px;
}
blockquote {
padding-left:60px;
background:transparent url("images/quote-open-E50.png") top left no-repeat;
color:#222222;
text-align:center;
}
blockquote div {
padding-right:60px;background:transparent url("images/quote-close-E50.png") bottom right no-repeat;
}



/*-------styles for scrolling content on Services page
======================================================*/
a .top {
display:block;
width: 350px;
font: 6pt;
font-weight:bold;
color: #fb0;
line-height: .8em;
margin-left: 10px;
padding:1px;
padding-left: 13px;
border-bottom: 1px dotted #666;
vertical-align: bottom;
background: transparent url(images/arup1.gif) bottom left no-repeat;

}
a .top:hover {
display:block;
width: 350px;
font: 6pt;
font-weight:bold;
color: #333;
line-height: .8em;
margin-left: 10px;
padding: 1px;
padding-left: 13px;
border-bottom: 1px dotted #fb0;
vertical-align: bottom;
background: url(images/arup2.gif) bottom left no-repeat;
}


#credits {
height: 20px;
width: auto;
position: absolute;
top:5px;
right:0px;
float:right;
}
#credits a {
font-weight:normal;
color:#666;
display:inline;
padding:1px;
background:transparent;
font-variant:small-caps;
}
#credits-left {
position: relative;
float:right;
font: 7pt trebuchet, verdana;
color:#999;
margin-right:195px;
text-align: right;
line-height: .9em;
}
#credits-left a {
padding:2px;
}

#credits-left a:hover {
color:#ffbb00;
background:#ffffff;
}

#foot-right {
position: relative;
margin-right:195px;
margin-top:750px;
height: 20px;
width: auto;
font: 7pt trebuchet, verdana;
color:#999;
text-align: right;
line-height: .9em;
}

#foot-right a {
font-weight:normal;
color:#666;
display:inline;
padding:1px;
background:transparent;
font-variant:small-caps;
}

#foot-right a {
padding:2px;
}

#foot-right a:hover {
color:#ffbb00;
}