@charset "UTF-8";
/* CSS Document */

/*********
jWeb
************/

*{
	list-style:none ;text-decoration:none; font-family: "Trebuchet MS", Arial, Helvetica, sans-serif; font-size: 12px; color: #7F7772;
}

.contact_small{
	list-style:none ;text-decoration:none; font-family: "Trebuchet MS", Arial, Helvetica, sans-serif; font-size: 12px; color: #7F7772;
}

img{
	border:none;
}

p{
	line-height:20px; margin-top:4px;
}


a{
	color:#767676;
}

a:hover{
	color:#A0A0A0;	
}

body{
	
	background:#4B4542 url(/images/main-bg.png) repeat-x; height:auto;
	
}

#general{
	margin:0px auto; width:906px; height:auto; background:url(/images/background.gif) center repeat-y; clear:both;
}
#body #content {
float: left; width: 350px; margin: 0px 20px 0px 0px;
}

#body #rightbar {
float: right; width: 350px;


}

h3 { margin:0px; }

/*#body #rightbar img {
border: #CCCCCC solid 4px;
padding:4px;
margin:30px 0px 0px 0px;
}*/

.clearer {
width: 200px; color: #ECECEC; clear: both;
}
.longthumb {float:left; width:351px; height:108px; background:url(/images/long-thumb-bg.jpg) no-repeat; padding:20px 30px 20px 30px; margin:0px 0px 0px 50px;}
/*.longthumb img {border:#CCCCCC 3px solid;}*/
.longthumb a {border:#CCCCCC 3px solid;  display: block; }
.longthumb a:hover {border:#85D34A 3px solid; display: block;}
.longthumbr {float:left; width:351px; height:108px; background:url(/images/long-thumb-bg.jpg) no-repeat; padding:20px 30px 20px 30px; margin:0px 0px 0px 0px;}
/*.longthumbr img {border:#CCCCCC 3px solid;}*/
.longthumbr a {border:#CCCCCC 3px solid;  display: block; }
.longthumbr a:hover {border:#85D34A 3px solid; display: block;}


.description {width:400px; height:108px; float:left; margin:10px 0px 0px 0px;}

/******************
TOP and MENU
*********************/

#topmenu{
	width:906px; margin:0px auto; margin-bottom:-3px; background:url(/images/top-body-lef.gif) no-repeat bottom;	 height:11px;
			
}

#menu{
	width:541px; height:39px; float:right; position:relative;
}

#menu li{
	height: 39px; position:absolute; display:block;	background: url(/images/menu.jpg) 0px -78px no-repeat;	
}

#menu a{
	height:39px; display: block;	
}

/*- Index Work Preview--------------------------- */

ul#workpreview {display:block;}
ul#workpreview li {display:block; float:left; margin:0px 5px 5px 5px;}

/*- Menu Tabs B--------------------------- */

    #tabsB {
      float:left;
      width:890px;
      background:url(/images/top-body-lef.gif) no-repeat 0 29px;
      font-size:12px;
      line-height: 17px;
	  padding-left: 0px;
	  z-index: 1001;
	  
      }
    #tabsB ul {
	  margin:0;
	  padding:2px 10px 0 50px;
	  list-style:none;	
      }
    #tabsB li {
      display:inline;
      margin:0;
      padding:0;
	  height:37px;
      }
    #tabsB a {
      float:left;
      background:url("/images/tableftB.gif") no-repeat left top;
      margin:0;
      padding:0 0 0 13px;
      text-decoration:none;
      }
    #tabsB a span {
      float:left;
      display:block;
      background:url("/images/tabrightB.gif") no-repeat right top;
      padding:5px 15px 15px 6px;
      color:#666;
      }
    /* Commented Backslash Hack hides rule from IE5-Mac \*/
    #tabsB a span {float:none;}
    /* End IE5-Mac hack */
    #tabsB a:hover span {
      color:#000;
      }
    #tabsB a:hover {
      background-position:0% -39px;
      }
    #tabsB a:hover span {
      background-position:100% -39px;
      }
	  
	  /* ---------------------- Greenslate nav ---------------------- */
.green #slatenav{position:relative;display:block;height:42px;font-size:11px;font-weight:bold;background:transparent url(/images/greenslate_background.gif) repeat-x top left;font-family:Arial,Verdana,Helvitica,sans-serif;text-transform:uppercase; color:#fff; width:868px; margin:0px 0px 0px 20px}

.green #slatenav ul{margin:0px;padding:0;list-style-type:none;width:auto;}
.green #slatenav ul li{display:block;float:left;margin:0 1px 0 0;}
.green #slatenav ul li a{display:block;float:left;color:#EEFFDF;text-decoration:none;padding:14px 22px 0 22px;height:28px; font-family:Arial,Verdana,Helvitica,sans-serif; font-size:11px;}
.green #slatenav ul li a:hover,.green #slatenav ul li a.current{color:#fff;background:transparent url(/images/greenslate_backgroundOVER.gif) no-repeat top center;}
/* ---------------------- END Greenslate nav ---------------------- */


/******************
 TOP and MENU
*********************/

#header-sub {
	margin: 0px 0px 0px 20px; background:url("/images/subpage-header.png") no-repeat;height: 32px; width: 868px; border-top:4px #EEEEEE solid; border-bottom:4px #EEEEEE solid;
}
	

/* logo */
	.logocont { width: 940px; height: 40px; margin: 2px 0 40px 40px ; padding:10px 0px 20px 0px; clear:left; 
}

.logocont .logo { text-indent:-9999px; background:url(/images/big-click-web-design-logo.png) no-repeat; width:254px; height:79px; float:left; display:block; overflow:hidden; }

.contact {
	width: 340px; height: 10px; padding:30px 20px 20px 40px ; font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;  color:#666666;  font-size:16px; text-align:left; float:left;
}	
.contact_links:link, .contact_links:visited, .contact_links:hover {
	font-size:16px; color:#666666; 
}

/******************
HOME PAGE MODULES
*********************/
#webdesign{width: 381px;height: 138px;padding:20px 20px 20px 40px;background: url(/images/homepan-webdesign.jpg) no-repeat;}
#webdesign h3{font:16px "Trebuchet MS", Arial, Helvetica, sans-serif;color:#3164B3;text-align:left;	}
#webdesign h3 a{font:16px "Trebuchet MS", Arial, Helvetica, sans-serif; color:#3164B3; text-align:left; background:url(/images/h1-blue.gif) left no-repeat; padding:0px 0px 0px 30px; }
#webdesign h3 a:hover{font:16px "Trebuchet MS", Arial, Helvetica, sans-serif; color:#6795D1; text-align:left; background:url(/images/h1-blue.gif) left no-repeat; padding:0px 0px 0px 30px; margin-left:2px;}
#graphicdesign{width: 381px; height: 138px; padding:20px 20px 20px 40px; background: url(/images/homepan-graphicdesign.jpg) no-repeat;}
#graphicdesign h3{font:16px "Trebuchet MS", Arial, Helvetica, sans-serif;color:#E3A202;text-align:left;}
#graphicdesign h3 a{font:16px "Trebuchet MS", Arial, Helvetica, sans-serif; color:#E3A202; text-align:left; background:url(/images/h1-yellow.gif) left no-repeat; padding:0px 0px 0px 30px; }
#graphicdesign h3 a:hover{font:16px "Trebuchet MS", Arial, Helvetica, sans-serif; color:#E3C00E; text-align:left; background:url(/images/h1-yellow.gif) left no-repeat; padding:0px 0px 0px 30px; margin-left:2px;}
#seo{width: 381px;height: 138px;padding:20px 20px 20px 40px;background: url(/images/homepan-seo.jpg) no-repeat;}
#seo h3{font:16px "Trebuchet MS", Arial, Helvetica, sans-serif;color:#F17706;text-align:left;}
#seo h3 a{font:16px "Trebuchet MS", Arial, Helvetica, sans-serif; color:#F17706; text-align:left; background:url(/images/h1-orange.gif) left no-repeat; padding:0px 0px 0px 30px;}
#seo h3 a:hover{font:16px "Trebuchet MS", Arial, Helvetica, sans-serif; color:#F19B00; text-align:left; background:url(/images/h1-orange.gif) left no-repeat; padding:0px 0px 0px 30px; margin-left:2px;}
#hosting{width: 381px; height: 138px; padding:20px 20px 20px 40px ;background: url(/images/homepan-hosting.jpg) no-repeat;}
#hosting h3{font:16px "Trebuchet MS", Arial, Helvetica, sans-serif; color:#EA3B82; text-align:left;}
#hosting h3 a{font:16px "Trebuchet MS", Arial, Helvetica, sans-serif; color:#EA3B82; text-align:left; background:url(/images/h1-pink.gif) left no-repeat; padding:0px 0px 0px 30px;}
#hosting h3 a:hover{font:16px "Trebuchet MS", Arial, Helvetica, sans-serif; color:#FA53CE; text-align:left; background:url(/images/h1-pink.gif) left no-repeat; padding:0px 0px 0px 30px; margin-left:2px;}
#iphone {width: 381px; height: 138px; padding:20px 20px 20px 40px ;background: url(/images/homepan-iphone-dev.jpg) no-repeat;}
#iphone h3{font:16px "Trebuchet MS", Arial, Helvetica, sans-serif; color:#993399; text-align:left;}
#iphone h3 a{font:16px "Trebuchet MS", Arial, Helvetica, sans-serif; color:#993399; text-align:left; background:url(/images/h1-purple.gif) left no-repeat; padding:0px 0px 0px 30px;}
#iphone h3 a:hover{font:16px "Trebuchet MS", Arial, Helvetica, sans-serif; color:#996F94; text-align:left; background:url(/images/h1-purple.gif) left no-repeat; padding:0px 0px 0px 30px; margin-left:2px;}
.blankpan{width: 381px;height: 145px;padding:15px 20px 20px 40px;}
.blankpan h3{font:16px "Trebuchet MS", Arial, Helvetica, sans-serif; color:#6CD309; text-align:left;}
.blankpan h3 a{font:16px "Trebuchet MS", Arial, Helvetica, sans-serif; color:#6CD309; text-align:left; }
.blankpan h3 a:hover{font:16px "Trebuchet MS", Arial, Helvetica, sans-serif; color:#A0E64B; text-align:left;  padding:0px 0px 0px 2px;}
.blankpan .folioimage img {border:#CCCCCC 3px solid;  display: block; }
.blankpan .folioimage img:hover {border:#85D34A 3px solid; display: block;}
.home a.blogpullindex { border-bottom:1px dashed #87C434; padding:3px; margin:1px 0px; width: 341px; display:block; color:#87C434;  }
.home a.blogpullindex:hover { background:#B3AAA6; color:#fff;  }

/*****************
BODY
**********************/


#body{ width:730px; margin:0px 0px 0px 0px; height:auto;}
#sendForm input {
	border:#DBDBDB solid 2px;
	background:#F9F9F9 url(/images/input-bg.jpg) top repeat-x;
	height:20px;
	width:290px;
	font-family: "Trebuchet MS", Arial, Helvetica, sans-serif; 
	color:#666666; 
	font-size:16px;
	text-align:left;
	padding:5px;
		
}

#sendForm input:focus { border:#D2D2D2 solid 2px; background: #F7F9EC; }

#sendForm textarea { border:#DBDBDB solid 2px; background:#F9F9F9 url(/images/input-bg.jpg) top repeat-x; height:100px; width:290px; font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;  color:#666666;  font-size:16px; text-align:left; padding:5px; }


#sendForm textarea:focus { border:#D2D2D2 solid 2px; background: #F7F9EC; }

#sendForm .grn-btn { border:none; width: 150px; text-align: center; padding: 3px 10px; font-size: 11px; text-transform: uppercase; background:#87C434 ; color: #fff; }
#sendForm .grn-btn:hover {  background: #6B9E37; cursor: pointer; }

.border-splash{	
	clear:both;
	font:0px Arial, Helvetica, sans-serif;
	height:4px;
	
}

#splash{
	position:relative;
	background:url(/images/body-body.jpg) repeat-y;
	height:170px;	
	/*visibility:hidden;*/
	/*border:1px solid red;*/
}

#splash img{
	display:none;
	position:absolute;
	top:0;
	left:20px;
}


.img_right{
	margin:30px 10px 0 0;
	width:114px;
	float:right;
}

.sub_titles{ font-size:15px; color:#545454; }
.sub_titles_orange{ font-size:15px; color:#F49E49; }
.sub_titles_red{ font-size:15px; color:#EA3F44; }
.sub_titles_green{ font-size:15px; color:#87C434; }
.sub_titles_blue{ font-size:15px; color:#6EB8DA; }
.text_orange{ font-size:12px; color:#F49E49; }
.text_red{ font-size:12px; color:#EA3F44; }
.text_green{ font-size:12px; color:#87C434; }
.text_blue { font-size:12px; color:#6EB8DA; }

#topinfo { height:10px; width:100%; color:#333333; margin:auto; position:relative;  }
#topinfo #wrap { height:10px; width:860px; margin:auto;  position:relative; }
#topinfo #wrap h1 { font-size:10px; font-weight:normal; position:absolute; top:-100px;  }
#topinfo #wrap p { font-size:10px; font-weight:normal; position:absolute; top:-100px;  }

/*****************
Buttons
**********************/
a.squarebutton{
background: transparent url('/images/square-green-left.gif') no-repeat top left;
display: block;
float: left;
font: normal 12px Arial; /* Change 12px as desired */
line-height: 15px; /* This value + 4px + 4px (top and bottom padding of SPAN) must equal height of button background (default is 23px) */
height: 23px; /* Height of button background height */
padding-left: 9px; /* Width of left menu image */
text-decoration: none;
}

a:link.squarebutton, a:visited.squarebutton, a:active.squarebutton{
color: #494949; /*button text color*/
}

a.squarebutton span{
background: transparent url('/images/square-green-right.gif') no-repeat top right;
display: block;
padding: 4px 9px 4px 0; /*Set 9px below to match value of 'padding-left' value above*/
}

a.squarebutton:hover{ /* Hover state CSS */
background-position: bottom left;
}

a.squarebutton:hover span{ /* Hover state CSS */
background-position: bottom right;
color: black;
}

.buttonwrapper{ /* Container you can use to surround a CSS button to clear float */
overflow: hidden; /*See: http://www.quirksmode.org/css/clearing.html */
width: 100%;
}

/*************************
RODAPE
*****************************/
#bottom-body{
	position:relative;
	height:40px;
	width:846px;
	margin:-13px auto;
	background:#4B4542 url(/images/footer.jpg) no-repeat;
	text-align:right;
	padding:30px 50px 0 10px;
	font:10px Verdana, sans-serif;
	clear: both;
	text-align:center;
}
	.linebreak {
	background-image:url(/images/scissor-cut.gif);
	background-repeat:repeat-x;
	clear:left;
	height:20px;
	width:800px;
	color:#FFFFFF;
	}

/*************************
Quote Form
*****************************/

.quoteDetails {
	margin-left: 20px;
	margin-bottom: 25px;
}

.quoteHeadingBig {
	font-size: 16px;
}
.quoteHeading {
	font-size: 14px;
}

.quoteSection {
	margin-left: 20px;
}

.portfolio_items img {
	padding: 7px;
	border: 1px solid #EEEEEE;
	margin-bottom: 5px;
}

.portfolio_items img:hover {
	border: 1px solid #999999;
}
#body .folioleft {
float: left;
width: 350px;
text-align:center;


}
#body .folioright {
float: right;
width: 350px;
text-align:center;

}

#body #home_left {
	float: left;
	width: 431px;
	height: auto;
}
#body #home_right {
	float: left;
	width: 438px;
	height: auto;
	background: url(/images/homepan-blank.jpg) no-repeat 6px 0px;
}

#body.home { padding:0px 0px 0px 20px; width: 906px; }
#body.subpage { padding-left: 20px; width: 880px; }

/* News Fader */

ul#news { width: 381px; list-style: none; padding: 0; margin: 0; color: #333333; }
ul#news li div { padding: 5px; }

/* Left Column */

#leftContent { width: 160px; padding: 30px 20px 30px 20px; height: auto; min-height: 400px; float: left; background: url(/images/leftcol-line.gif) repeat-y top right;}
#leftContent h3 { font:14px "Trebuchet MS", Arial, Helvetica, sans-serif; color:#3164B3; text-align:left; margin:10px 0px 3px 0px; border-bottom:1px dashed #87C434; padding-bottom:3px; }
#leftContent h3 a { font:14px "Trebuchet MS", Arial, Helvetica, sans-serif; color:#3164B3; text-align:left; }
#leftContent h3 a:hover { font:14px "Trebuchet MS", Arial, Helvetica, sans-serif; color:#87C434; text-align:left; }
#leftContent a.blogpullout { border-bottom:1px dashed #87C434; padding:4px; margin:1px 0px; width: 152px; display:block; color:#87C434;  }
#leftContent a.blogpullout:hover { background:#B3AAA6; color:#fff;  }

#leftContent input { border:#DBDBDB solid 2px; background:#F9F9F9 url(/images/input-bg.jpg) top repeat-x; height:15px; width:150px; font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;  color:#666666;  font-size:16px; text-align:left; padding:3px; }

#leftContent input:focus { border:#D2D2D2 solid 2px; background: #F7F9EC; }

#leftContent .grn-btn { border:none; width: 100px; height: 20px; text-align: center; padding: 3px 10px; font-size: 11px; text-transform: uppercase; background:#87C434 ; color: #fff; margin: 5px 0px 20px 0px; }
#leftContent .grn-btn:hover {  background: #6B9E37; cursor: pointer; }

/* Main Content */

#mainContent { width: 568px; padding: 30px 40px 20px 40px; height: auto; min-height: 400px; float: left; background: url(/images/fade-logo.jpg) no-repeat bottom right; }
#mainContent h1{ font:16px "Trebuchet MS", Arial, Helvetica, sans-serif; color:#3164B3; text-align:left; background:url(/images/h1-blue.gif) left no-repeat; padding:0px 0px 0px 30px; clear:left; }
#mainContent h2{ font:14px "Trebuchet MS", Arial, Helvetica, sans-serif; color:#E3A202; text-align:left; background:url(/images/h1-orange.gif) left no-repeat; padding:3px 0px 0px 30px; clear:left; height:20px; }
#mainContent li { list-style-image: url(/images/bullet_green.png); border-bottom:#669900 dotted 1px; line-height:30px; }
#mainContent img { border:#CCCCCC 4px solid; }

#mainContent .noborder { border: none; }

p.scissor { border: 0; background:url(/images/scissor-cut.gif) no-repeat top right; height: 20px; width: 640px; color:#FFFFFF; margin:0px 0px 20px -30px; }

	
	
/* Gallery List First */
#mainContent .folio-row1 { background: #FCFCDB url(/images/folio-bg.png) no-repeat bottom; float: left; padding: 0px; width: 560px; height:162px; margin:0px 0px 30px 0px; }
#mainContent .folio-row1 .folioimage {float:left; width:355px; margin-right:10px  }
#mainContent .folio-row1 .folioimage img {border:#FFFFFF 3px solid; width:345px;  display: block; margin:3px; }
#mainContent .folio-row1 .folioimage img:hover {border:#85D34A 3px solid; display: block;}
#mainContent .folio-row1 .foliotext {float:left; width:190px; height:136px;  }
#mainContent .folio-row1 h2 {font:16px "Trebuchet MS", Arial, Helvetica, sans-serif; color:#6CD309; text-align:left; margin:3px 0px 3px 0px; }
#mainContent .folio-row1 h2 a {font:16px "Trebuchet MS", Arial, Helvetica, sans-serif; color:#6CD309; text-align:left;}
#mainContent .folio-row1 h2 a:hover {font:16px "Trebuchet MS", Arial, Helvetica, sans-serif; color:#A0E64B; text-align:left;  padding:0px 0px 0px 2px; }
#mainContent .folio-row1 span {font-size:11px; color:#6EB8DA; padding:0px 0px 0px 15px; float:left;}

#mainContent .folio-row2 { background: #c0e8ff url(/images/folio-bg-active.png) no-repeat bottom; float: left; padding: 0px; width: 560px; height:162px; margin:0px 0px 30px 0px; }
#mainContent .folio-row2 .folioimage {float:left; width:355px; margin-right:10px; }
#mainContent .folio-row2 .folioimage img {border:#85D34A 3px solid; width:345px;  display: block; margin:3px; }
#mainContent .folio-row2 .folioimage img:hover {border:#85D34A 3px solid; display: block; }
#mainContent .folio-row2 .foliotext {float:left; width:190px; height:136px; }
#mainContent .folio-row2 h2 {font:16px "Trebuchet MS", Arial, Helvetica, sans-serif; color:#6CD309; text-align:left; margin:3px 0px 3px 0px; }
#mainContent .folio-row2 h2 a {font:16px "Trebuchet MS", Arial, Helvetica, sans-serif; color:#6CD309; text-align:left; }
#mainContent .folio-row2 h2 a:hover {font:16px "Trebuchet MS", Arial, Helvetica, sans-serif; color:#A0E64B; text-align:left;  padding:0px 0px 0px 2px; }
#mainContent .folio-row2 span {font-size:11px; color:#6EB8DA; padding:0px 0px 0px 15px; }


/* tagfloat */
#upperRightCorner a { 
	  display: block;
	  position: relative;
	  left: 745px;
	  top: -140px;
	  overflow: visible;
	  width: 110px;
	  height: 158px;
	  margin: 0 0 0 0;
	  padding: 0;
	  z-index: 9999;
	  border: none;
	  float: none;
	}
#upperRightCorner a:hover { 
	  display: block;
	  position: relative;
	  left: 745px;
	  top: -145px;
	  overflow: visible;
	  width: 110px;
	  height: 158px;
	  margin: 0 0 0 0;
	  padding: 0;
	  z-index: 9999;
	  border: none;
	  float: none;
	}