/*
SITE :: "HUCKLEBUCKDESIGN.COM" site TEMPLATE
FILE TYPES :: HTML // CSS // PHP
WEB DESIGNER // DEVELOPER :: JONNY B' :: OF ALL THE CODE YOU SEE
PERSONAL SITES :: WWW.JONNYB.ORG [or] WWW.RUBYHAUS.COM
CONTACT :: jonnyb@rubyhaus.com
*/

/* OVERALL DEFINED CLASS SELECTORS */
body {
  margin: 0px;
  background-color: #FFFFFF;
	background-image: url(http://www.hucklebuckdesign.com/images/png/gray_bar.png);
	background-repeat: repeat-x;
	background-attachment: fixed;
	background-position:top;}

body {
  padding: 0px;
  margin: 0px 0px;}
  
h1 {
  padding: 0px 0px 0px 0px;
  margin: 0px 0px 4px 0px;}
  
h2 {
  padding: 0px 0px 0px 0px;
  margin: 0px 0px 4px 0px;} 
  
h3 {
  padding: 0px 0px 0px 0px;
  margin: 0px 0px 0px 0px;} 
  
h4 {
  padding: 0px 0px 0px 0px;
  margin: 0px 0px 4px 0px;} 
  
h5 {
  padding: 0px 0px 0px 0px;
  margin: 0px 0px 4px 0px;} 
  
h6 {
  padding: 0px 0px 0px 0px;
  margin: 0px 0px 4px 0px;} 

p {
	padding: 0px 0px 16px 0px;
	margin: 0px;}
  
img {
  border: 0px none;}
  
td {/* */}
  
div {/* */}

a {
	cursor: pointer;
	border: 0px;}

/* WRAPPERS */
.wrapper {
	width: auto;
	height: 655px;
	padding: 0px;
	margin: 0px;
	background-color: transparent;}

.top_row_container {
	width: auto;
	height: 575px;
	padding: 0px;
	margin: 0px 0px 4px 0px;
	background-color: transparent;
	clear: both;}
	
.bottom_row_container {
	width: 280px;
	height: 100px;
	padding: 0px;
	margin: 0px;
	overflow: hidden;
	position: fixed;
	background-color: transparent;
	clear: both;}
	

/* PAGE PARTS */

/* PAGE PARTS */

.header {
	width: 256px;
	height: 577px;
	padding: 0px;
	margin: 0px 30px 0px 0px;
	z-index: 800;
	position: fixed;
	top: 0px;
	left: 0px;
	background-color: transparent;
	background-image: url(http://www.hucklebuckdesign.com/images/png/header_left_side.png);
	background-repeat: no-repeat;
	float: left;}

.home_header {
	width: 626px;
	height: 577px;
	padding: 0px;
	margin: 0px 0px 0px 0px;
	background-color: transparent;
	background-image: url(http://www.hucklebuckdesign.com/images/png/home_header.png);
	background-repeat: no-repeat;
	float: left;}

/*
	padding: 0px;
	margin: 0px;
	width: 2px;
	height: 577px;
	background-color: #FFFFFF;
	float: left;} */

.main_menu_column {
	width: 82px;
	height: 577px;
	padding: 0px;
	margin: 0px 0px 0px 280px;
	background-color: transparent;
	float: left;}

.home_main_menu_column {
	width: 82px;
	height: 577px;
	padding: 0px;
	margin: 0px;
	background-color: transparent;
	float: left;}

.sub_menu_column {
	width: 261px;
	height: 577px;
	padding: 0px;
	margin: 0px;
	background-color: transparent;	
	float: left;}

.home_sub_menu_column {
	width: 703px;
	height: 577px;
	padding: 0px;
	margin: 0px 0px 0px 0px;
	background-color: transparent;	
	float: left;}

.company_overview_column {
	width: 648px;
	height: 577px;
	padding: 0px;
	margin: 0px;
	background-color: transparent;	
	float: left;}

.weep_no_more_column {
	width: 491px;
	height: 577px;
	padding: 0px;
	margin: 0px;
	overflow: hidden;
	background-color: transparent;	
	float: left;}

.gallery_three_columns {
	width: auto;
	height: 577px;
	padding: 0px;
	margin: 0px;
	overflow: hidden;
	background-color: transparent;
	float: left;}

.main_menu_text_box {
	padding: 0px;
	margin: 62px 0px 45px 0px;
	overflow: hidden;
	background-color: transparent;
	clear: both;}

.main_menu_text_box ul {
	list-style: none;
	padding: 0px;
	margin: 0px;
	overflow: hidden;}

.main_menu_text_box ul li {
	display: list-item;
	padding: 0px;
	margin: 0px 0px 5px 0px;}

.main_menu_text_box ul li a:link, .main_menu_text_box ul li a:active, .main_menu_text_box ul li a:visited, .main_menu_text_box ul li a:hover {
	padding: 0px;
	margin: 0px;}

.main_menu_text_box ul li a:hover {
	padding: 0px;
	margin: 0px;}

.blue_dots_main_menu {
	width: 82px;
	height: 407px;
	padding: 0px;
	margin: 0px 0px 0px 0px;
	background-color: transparent;
	background-image: url(http://www.hucklebuckdesign.com/images/jpg/blue_dots_main_menu.jpg);
	background-repeat: no-repeat;
	clear: both;}



.sub_menu_text_box {
	width: 198px;
	padding: 0px;
	margin: 62px 0px 6px 0px;
	overflow: hidden;
	background-color: transparent;
	clear: both;}

.sub_menu_text_box ul {
	list-style: none;
	padding: 0px;
	margin: 0px;
	overflow: hidden;}

.sub_menu_text_box ul li {
	display: list-item;
	padding: 0px;
	margin: 0px 0px 5px 0px;}

.sub_menu_text_box ul li a:link, .sub_menu_text_box ul li a:active, .sub_menu_text_box ul li a:visited, .sub_menu_text_box ul li a:hover {
	padding: 0px;
	margin: 0px;}

.sub_menu_text_box ul li a:hover {
	padding: 0px;
	margin: 0px;}

.sub_menu_text_box_categories {
	width: 198px;
	padding: 0px;
	margin: 0px 0px 0px 0px;
	overflow: hidden;
	background-color: #ffffff;
	clear: both;}

.sub_menu_text_box_categories ul {
	list-style: none;
	padding: 0px;
	margin: 0px;
	overflow: hidden;}

.sub_menu_text_box_categories ul li {
	display: list-item;
	padding: 0px;
	margin: 0px 0px 5px 0px;}

.sub_menu_text_box_categories ul li a:link, .sub_menu_text_box_categories ul li a:active, .sub_menu_text_box_categories ul li a:visited, .sub_menu_text_box_categories ul li a:hover {
	padding: 0px;
	margin: 0px;}

.sub_menu_text_box_categories ul li a:hover {
	padding: 0px;
	margin: 0px;}
	
.signup_link {
	width: 511px;
	height: 102px;
	padding: 0px;
	margin: 45px 0px 0px 0px;
	overflow: hidden;
	background-color: transparent;
	clear: both;}

.blue_dots_main_menu_two {
	width: 623px;
	height: 241px;
	padding: 0px;
	margin: 30px 0px 0px 0px;
	background-color: transparent;
	background-image: url(http://www.hucklebuckdesign.com/images/jpg/blue_dots_main_menu_two.jpg);
	background-repeat: no-repeat;
	clear: both;}

.company_overview_header {	
	width: 648px;
	height: 206px;
	padding: 0px;
	margin: 0px;
	background-color: transparent;	
	clear: both;}

.company_overview_paragraph {
	width: 563px;
	padding: 0px;
	margin: 31px 0px 0px 39px;}

.weep_no_more_image {
	width: 491px;
	height: 573px;
	padding: 0px;
	margin: 30px 0px 0px 0px;}

.left_frame_side_border {
	width: 51px;
	height: 466px;
	padding: 0px;
	margin: 51px 0px 0px 0px;
	background-image: url(http://www.hucklebuckdesign.com/images/png/left_frame_border.png);
	background-repeat: no-repeat;
	z-index: 700;
	position: relative;
	float: left;}

.gallery_container {
	width: auto;
	height: 452px;
	padding: 0px;
	margin: 51px 10px 0px -41px;
	background-color: transparent;
	float: left;}

.home_gallery_container {
	width: auto;
	height: 500px;
	padding: 0px;
	margin: 59px 10px 0px -41px;
	overflow: hidden;
	background-color: transparent;
	background-image: url(http://www.hucklebuckdesign.com/images/jpg/home_gallery_drop_shadow.jpg);
	background-repeat: repeat-x;
	background-position: top;
	float: left;}

.contact_gallery_container {
	width: auto;
	height: 500px;
	padding: 0px;
	margin: 57px 10px 0px -43px;
	overflow: hidden;
	background-color: transparent;
	background-image: url(http://www.hucklebuckdesign.com/images/jpg/home_gallery_drop_shadow.jpg);
	background-repeat: repeat-x;
	background-position: top;
	float: left;}

.story_gallery_container {
	width: auto;
	height: 500px;
	padding: 0px;
	margin: 57px 10px 0px -43px;
	overflow: hidden;
	background-color: transparent;
	background-image: url(http://www.hucklebuckdesign.com/images/jpg/home_gallery_drop_shadow.jpg);
	background-repeat: repeat-x;
	background-position: top;
	float: left;}

.who_gallery_container {
	width: auto;
	height: 500px;
	padding: 0px;
	margin: 57px 10px 0px -43px;
	overflow: hidden;
	background-color: transparent;
	background-image: url(http://www.hucklebuckdesign.com/images/jpg/home_gallery_drop_shadow.jpg);
	background-repeat: repeat-x;
	background-position: top;
	float: left;}

.process_gallery_container {
	width: auto;
	height: 500px;
	padding: 0px;
	margin: 57px 50px 0px -43px;
	overflow: hidden;
	background-color: transparent;
	background-image: url(http://www.hucklebuckdesign.com/images/jpg/home_gallery_drop_shadow.jpg);
	background-repeat: repeat-x;
	background-position: top;
	float: left;}

.gallery_top_row {
	width: auto;
	height: 380px;
	padding: 0px;
	margin: 8px 0px 1px 0px;
	background-color: transparent;
	background-image: url(http://www.hucklebuckdesign.com/images/jpg/gallery_drop_shadow.jpg);
	background-repeat: repeat-x;
	background-position: top;
	clear: both;}

.blue_box {
	width: 203px;
	height: 374px;
	padding: 0px;
	margin: 3px 0px 0px 0px;
	background-image: url(http://www.hucklebuckdesign.com/images/jpg/blue_box.jpg);
	float: left;}

.grey_box {
	width: 199px;
	height: 374px;
	padding: 0px;
	margin: 3px 0px 0px 0px;
	background-image: url(http://www.hucklebuckdesign.com/images/jpg/new_work_bg.jpg);
	float: left;}

.text_box {
	width: 159px;
	height: 320px;
	padding: 0px;
	margin: 30px 0px 0px 23px;
	overflow: hidden;
	background-color: transparent;
	clear: both;}

.text_box_header_black {
	padding: 0px;
	margin: 0px 0px 5px 0px;}

.text_box_header_white {
	padding: 0px;
	margin: 0px 0px 20px 0px;}

.text_box_article {
	padding: 0px;
	margin: 0px;}
	
.work_image_holder {
	width: auto;
	height: 374px;
	border: 0px;
	padding: 0px;
	margin: 3px 0px 0px 0px;
	background-color: transparent;
	float: left;}
	
.work_image_holder_wspacing {
	width: auto;
	height: 374px;
	border: 0px;
	padding: 0px;
	margin: 3px 0px 0px 2px;
	background-color: transparent;
	float: left;}
	

	
	
		
.gallery_bottom_row {
	width: auto;
	height: 78px;
	padding: 0px;
	margin: 0px;
	background-color: transparent;
	clear: both;}

.random_client {
	width: 106px;
	height: 66px;
	padding: 0px;
	margin: 0px 0px 0px 0px;
	background-color: transparent;
	float: left;}

.thumbnail_holder {
	width: 103px;
	height: 66px;
	padding: 0px;
	margin: 0px 0px 0px 4px;
	background-color: transparent;
	float: left;}

.thumbnail_filler {
	height: 66px;
	padding: 0px;
	margin: 0px 0px 0px 4px;
	background-color: #858585;
	float: left;}

.right_frame_side_border {
	width: 91px;
	height: 466px;
	padding: 0px;
	margin: 51px 0px 0px -51px;
	background-image: url(http://www.hucklebuckdesign.com/images/png/right_frame_border.png);
	background-position: left;
	background-repeat: no-repeat;
	z-index: 700;
	position: relative;
	float: right;}

.right_frame_tab {
	width: 40px;
	height: 466px;
	padding: 0px;
	margin: 0px 0px 0px 51px;}	
		




.home_project_wrapper {
	height: 480px;
	padding: 0px;
	margin: 3px 0px 0px 2px;
	overflow: hidden;
	background-color: transparent;
	float: left;}

.home_image_holder {
	width: auto;
	height: 444px;
	border: 0px;
	padding: 0px;
	margin: 0px;
	clear: both;}

.home_image_holder_transOFF {
	width: auto;
	height: 444px;
	border: 0px;
	padding: 0px;
	margin: 0px;
	background-color: silver;
	opacity:.50;
	filter: alpha(opacity=50);
	-moz-opacity: 0.5;
	clear: both;}

.home_image_holder_transON  {
	width: auto;
	height: 444px;
	border: 0px;
	padding: 0px;
	margin: 0px;
	background-color: silver;
	clear: both;}

.home_image_description {
	height: 20px;
	padding: 0px;
	margin: 0px;
	overflow: hidden;
	background-color: transparent;
	clear: both;}

.home_image_company_beginning {
	padding: 0px;
	margin: 8px 5px 0px 50px;
	float: left;}

.home_image_project_beginning {
	padding: 0px;
	margin: 8px 0px 0px 0px;
	float: left;}

.home_image_company {
	padding: 0px;
	margin: 8px 5px 0px 0px;
	float: left;}

.home_image_project {
	padding: 0px;
	margin: 8px 0px 0px 0px;
	float: left;}





.story_info_wrapper {
	width: 400px;
	height: 444px;
	padding: 0px;
	margin: 4px 0px 4px 0px;
	overflow: hidden;
	background-color: transparent;
	clear: both;}

.story_text_box {
	width: 400px;
	height: 400px;
	padding: 0px;
	margin: 44px 0px 0px 0px;
	overflow: hidden;
	background-color: transparent;
	clear: both;}

.story_header {
	padding: 0px;
	margin: 0px 0px 9px 0px;
	clear: both;}	

.story_container {
	width: 400px;
	height: 320px;
	padding: 0px;
	margin: 0px 0px 6px 0px;
	overflow: auto;
	background-color: transparent;
	clear: both;}
	
.story_info {
	width: 370px;
	padding: 0px;
	margin: 0px 0px 20px 0px;
	overflow: hidden;
	background-color: transparent;
	clear: both;}





.who_info_wrapper {
	width: 400px;
	height: 444px;
	padding: 0px;
	margin: 4px 0px 4px 0px;
	overflow: hidden;
	background-color: transparent;
	clear: both;}

.who_text_box {
	width: 400px;
	height: 400px;
	padding: 0px;
	margin: 44px 0px 0px 0px;
	overflow: hidden;
	background-color: transparent;
	clear: both;}

.who_header {
	padding: 0px;
	margin: 0px 0px 9px 0px;
	clear: both;}

.who_header_two {
	padding: 0px;
	margin: 0px 0px 16px 0px;
	clear: both;}

.who_container {
	width: 400px;
	height: 300px;
	padding: 0px;
	margin: 0px 0px 30px 0px;
	overflow: auto;
	background-color: transparent;
	clear: both;}	

.who_info {
	width: 370px;
	padding: 0px;
	margin: 0px 0px 20px 0px;
	overflow: hidden;
	background-color: transparent;
	clear: both;}

.who_contact {
	padding: 0px;
	margin: 0px;
	overflow: hidden;
	clear: both;}





.process_info_wrapper {
	width: 400px;
	height: 444px;
	padding: 0px;
	margin: 4px 0px 4px 0px;
	overflow: hidden;
	background-color: transparent;
	clear: both;}
	
.process_text_box {
	width: 400px;
	height: 400px;
	padding: 0px;
	margin: 44px 0px 0px 0px;
	overflow: hidden;
	background-color: transparent;
	clear: both;}
	
.process_header {
	padding: 0px;
	margin: 0px 0px 9px 0px;
	clear: both;}

.process_container {
	width: 400px;
	height: 315px;
	padding: 0px;
	margin: 0px 0px 6px 0px;
	overflow: auto;
	background-color: transparent;
	clear: both;}

.process_info {
	width: 370px;
	padding: 0px;
	margin: 0px 0px 20px 0px;
	overflow: hidden;
	background-color: transparent;
	clear: both;}

.process_download {
	padding: 0px;
	margin: 0px;
	overflow: hidden;
	background-color: transparent;
	clear: both;}





.contact_info_wrapper {
	width: 400px;
	height: 444px;
	padding: 0px;
	margin: 113px 0px 4px 0px;
	overflow: hidden;
	background-color: transparent;
	clear: both;}

.contact_text_box {
	width: 400px;
	height: 400px;
	padding: 0px;
	margin: 44px 0px 0px 0px;
	overflow: hidden;
	background-color: transparent;
	clear: both;}

.contact_header {
	padding: 0px;
	margin: 0px 0px 9px 0px;
	clear: both;}

.red_exclamation {
	padding: 0px;
	margin: 0px;}

.contact_blurb {
	padding: 0px;
	margin: 0px 0px 16px 0px;}

.dash_divider {
	width: 256px;
	height: 2px;
	padding: 0px;
	margin: 15px 0px 12px 0px;
	background-image: url(http://www.hucklebuckdesign.com/images/jpg/dash_divider.jpg);
  clear: both;}

.contact_info {
	padding: 0px;
	margin: 0px;
	clear: both;}	

.contact_u_r_here {
	padding: 0px;
	margin: 0px;}





.footer_contact_container {
	width: 280px;
	height: 73px;
	padding: 0px;
	margin: 0px 0px 0px 18px;
	overflow: hidden;
	background-color: transparent;
	clear: both;}

.footer_contact_info_container {
	padding: 0px;
	margin: 0px;
	overflow: hidden;
	clear: both;}

.footer_contact_address {
	padding: 0px;
	margin: 0px;}

.footer_contact_phone_p {
	padding: 0px;
	margin: 0px 3px 0px 0px;
	overflow: hidden;}

.footer_contact_phone_number {
	padding: 0px;
	margin: 0px 6px 0px 0px;
	overflow: hidden;}

.footer_contact_email_e {
	padding: 0px;
	margin: 0px 3px 0px 0px;
	overflow: hidden;}

.footer_contact_email_address {	
	padding: 0px;
	margin: 0px;
	overflow: hidden;}

.footer_contact_u_r_here {
	padding: 0px;
	margin: 0px 3px 0px 0px;
	overflow: hidden;}

.footer_contact_web_address {
	padding: 0px;
	margin: 0px 6px 0px 0px;
	overflow: hidden;}
	
.footer_rubyhaus {
	padding: 0px;
	margin: 0px;
	overflow: hidden;}

.legalnotice_container {
	width: 238px;
	height: 15px;
	padding: 0px;
	margin: 0px 0px 0px 18px;
	overflow: hidden;
	background-color: transparent;
	clear: both;}

.legalnotice_container span {
	padding: 0px;
	margin: 0px;
	float: left;}

/* DIV LIGHTBOX STYLE */
.black_overlay {
	display: none;
	position: absolute;
	top: 0%;
	left: 0%;
	width: 100%;
	height: 100%;
	background-color: black;
	z-index:1001;
	-moz-opacity: 0.8;
	opacity:.80;
	filter: alpha(opacity=80);}

.white_content {
	width: 700px;
	height: 426px;
	padding: 16px;
	position: absolute;
	top: 50px;
	left: 18%;
	border: 0px solid #ffffff;
	background-color: transparent;
	z-index:1002;
	overflow: auto;
	display: none;}
	
.close_form_button {
	width: 26px;
	height: 26px;
	padding: 0px;
	margin: 2px 0px 0px 211px;
	border: 0px;
	background-color: #ffffff;
	float:left;}




/* MAILING LIST FORM */
.form_wrapper {
	width: 700px;
	height: 400px;
	padding: 0px;
	margin: 0px;
	overflow: hidden;
	background-image: url(http://www.hucklebuckdesign.com/images/jpg/button_form_blank.jpg);
	background-repeat: no-repeat;
	clear: both;}

/* form containers */
.form_container {
	width: 205px;
	height: 260px;
	padding: 0px;
	margin: 60px 0px 0px 255px;
	background-color: transparent;
	float:left;}

.city_state_container {
	width: 205px;
	height: 28px;
	margin: 0px 0px 6px 0px;
	padding: 0px;
	background-color: transparent;
	clear: both;}

.zip_country_container {
	width: 205px;
	height: 28px;
	margin: 0px 0px 6px 0px;
	padding: 0px;
	background-color: transparent;
	clear: both;}



/* form elements */
.form_elements {
	width: 205px;
	height: 28px;
	margin: 0px 0px 6px 0px;
	padding: 0px;
	overflow: hidden;
	background-color: transparent;}

.form_elements_address {
	width: 205px;
	height: 28px;
	margin: 0px 0px 6px 0px;
	padding: 0px;
	background-color: transparent;}

.form_elements_city {
	width: 75px;
	height: 28px;
	margin: 0px 5px 0px 0px;
	padding: 0px;
	background-color: transparent;
	float: left;}

.form_elements_state {
	width: 50px;
	height: 28px;
	margin: 0px;
	padding: 0px;
	background-color: transparent;
	float: left;}

.form_elements_zip {
	width: 75px;
	height: 28px;
	margin: 0px 5px 0px 0px;
	padding: 0px;
	background-color: transparent;
	float: left;}

.form_elements_country {
	width: 125px;
	height: 28px;
	margin: 0px;
	padding: 0px;
	background-color: transparent;
	float: left;}



/* form labels */
.form_label {
	width: 205px;
	margin: 0px;
	padding: 0px;
	float: left;}

.form_label_group {
	width: 75px;
	margin: 0px;
	padding: 0px;
	float: left;}

.form_label_group {
	margin: 0px;
	padding: 0px;
	float: left;}



/* form boxes */
.address_box {
	width: 200px;
	height: 12px;
	margin: 0px;
	padding: 0px;
	background-color: transparent !important;
	border: 1px solid #cccccc !important;
	cursor: pointer;
	float: left;}

.city_box {
	width: 70px;
	height: 12px;
	margin: 0px;
	padding: 0px;
	background-color: transparent !important;
	border: 1px solid #cccccc !important;
	cursor: pointer;
	float: left;}

.state_box {
	width: 30px;
	height: 12px;
	margin: 0px;
	padding: 0px;
	background-color: transparent !important;
	border: 1px solid #cccccc !important;
	cursor: pointer;
	float: left;}

.zip_box {
	width: 70px;
	height: 12px;
	margin: 0px;
	padding: 0px;
	background-color: transparent !important;
	border: 1px solid #cccccc !important;
	cursor: pointer;}

.country_box {
	width: 120px;
	height: 13px;
	margin: 0px;
	padding: 0px;
	background-color: transparent !important;
	border: 1px solid #cccccc !important;
	cursor: pointer;
	float: left;}

input.boxes {
	width: 200px;
	height: 12px;
	margin: 0px;
	padding: 0px;
	background-color: transparent !important;
	border: 1px solid #cccccc !important;
	cursor: pointer;
	float: left;}

select.boxes {
	width: 200px;
	height: 12px;
	margin: 0px;
	padding: 0px;
	background-color: transparent !important;
	border: 1px solid #cccccc !important;
	cursor: pointer;
	float: left;}



/* form buttons */
input.buttons {
	cursor: pointer;}

submit_block {
	margin: 0px;
	padding: 0px;
	text-align: center;
	cursor: pointer;}

.clear_float {
	clear: both;}