/*=====================Grid ==============================================*/
/*  SECTIONS  */
.section {
	clear: both;
	padding: 0px;
	margin: 0px;
}

/*  COLUMN SETUP  */
.col {
	display: block;
	float:left;
	margin: 1% 0 1% 1.2%;
}
.col:first-child { margin-left: 0; }


/*  GROUPING  */
.group:before,
.group:after {
	content:"";
	display:table;
}
.group:after {
	clear:both;
}
.group {
    zoom:1; /* For IE 6/7 */
}
/*  GRID OF THREE  */
.span_2_of_2 {width: 100%;}
.span_1_of_2 {width: 49.2%;}



/*  GRID OF THREE  */
.span_3_of_3 {width: 100%;}
.span_2_of_3 {width: 66.1%;}
.span_1_of_3 {width: 32.2%;}


/*  GRID OF TWELVE  */
.span_12_of_12 {width: 100%;}
.span_11_of_12 {width: 91.53%;}
.span_10_of_12 {width: 83.06%;}
.span_9_of_12 {width: 74.6%;}
.span_8_of_12 {width: 66.13%;}
.span_7_of_12 {width: 57.66%;}
.span_6_of_12 {width: 49.2%;}
.span_5_of_12 {width: 40.73%;}
.span_4_of_12 {width: 32.0%;}
.span_3_of_12 {width: 23.8%;}
.span_2_of_12 {width: 15.33%;}
.span_1_of_12 {width: 6.866%;}

/*============================= Page Personlization Starts ===============================*/
#header h1,
#header h2,
#header p {
	margin-left:2%;
	padding-right:2%;
}
#title_long {display:block;}
#title_short {display:none;}	
#titlebar {height:25px; background-image:url(/Assets/T-bar_gradBT2.gif); background-color:#ABABAB;}

#support_th{display:inline-block; margin-left: -18%;margin-bottom: -55px;margin-top:12%;}
#support_th ul{width:98%;}
#support_th li {margin-right: -3%;width:17%;}
#support_show_hide {display:inline-block; width:110%;margin-left:-15%;margin-top:-20px;margin-bottom:-20px;}
#support_show_hide ul li div a {margin-right: 25%}

#support_txt{display:inline-block;width:100%;margin-top:-50px;background-color:#D7D5D5;height:20px;margin-bottom:5.5%;}
#support_txt ul {margin-left:-10%;margin-top:3px;}
#support_txt ul li {width: 19%;margin-left:-.2%;}
#weights {margin: 15%;}
#weights {display: inline-block; margin-bottom: 5%;}
#click p {text-align:center;}
#examples {display: block;margin-left:0%;margin-bottom: -3%}
#examples ul li {margin-bottom:3%}
#view_window{background-color: #FFFFFF;}
#display_col{border: 3px solid #CCCCCC;background-color: #FFFFFF;}
#upgrades ul li {display:block;margin-right: 7.5%; margin-left: 12.5%}
#add_ons ul li {display:block;margin-right:15.5%; margin-left: 12.5%}
#tag_lft {display:block;float: left; margin-left:1.8%;}
#tag_rt  {display:block;float: right; margin-right:1.5%}
#divider{height:3px;width:100%;}
#address h5 {margin-left:10%;padding-top:20px;margin-bottom:-5px;}
#address ul li {margin-left: 30%;margin-bottom:-5px;}
#address p a {margin-left: 30%;}
.smaller { font-size:80%; }
#cutsheet {float: right; padding-right: 15px;cursor:pointer;font: 11px/15px Arial, Helvetica, sans-serif;}
#more-info ul{
	text-align: center;
	text-decoration-line: none;
}
#design_list {display:block;}
design ul {
	height: 100px;
	text-decoration-line: none;
}

#help ul li{
	float:right;
	display:block;
	margin-right:20px;
	padding-top:3px;
}
#help ul li a {font: 12px/18px Arial, Helvetica, sans-serif;color: #0E7AB0;text-decoration:none;}


#wrapper3 {
	margin:.5%;
	clear:left;
	float:left;
	width:99%;
	overflow:hidden;
	background:#f3f1f1; 
	font: 12px/15px Arial, Helvetica, sans-serif;
	color:#384749;
	}
#wrapper3 h2{
	background-color: #d7d5d5;
	padding-left: 10px;
	padding-top:5px;
	height: 20px;
	margin: 3px 6px;	
}

#wrapper3 p{
	margin:10px;
}
#wrapper3 li {
	margin-left:5%;
	display: block;
	margin-bottom: 10px;
	text-decoration: none;
}
#wrapper3 ul li {
	
	top: 20px;
	display: inline-block;
}
#wrapper3 ul li a {
	float: right;
	padding-top:2px;;
	text-decoration: none;
	display: inline-block;
	font: 12px/15px Arial, Helvetica, sans-serif;
	font-weight: bold;
	color:#384749;
}
#click {color: #13AC99}
/*============================= Responsive Media 780px ===============================*/
@media screen and (max-width: 780px) {
.span_4_of_12 {width:48%}
#display_col p {margin-left: 10%;}	
#weights {display:none;}
#speciality {display:none;}
#design_list {display:none;}
}
/*============================= Responsive Media 480px ===============================*/
@media only screen and (max-width: 480px) {
	
	.col {  margin: 1% 0 1% 0%; }
	.span_4_of_12{ width: 98%; }
#title_long {display:none;}
#title_short {display:block;}
#examples {display: none;}
#design_list {display:none;}
#weights {margin-top: 2%;margin-left: 25%}
#weights {margin-bottom: 2%;}	
}

@media screen and (max-width: 378px) {
#title-long {display:none;}
#title-short {display:block;}	
#cutsheet1 ul li b a {font: 16px/30px Arial, Helvetica, sans-serif;}
#cutsheet2 ul li b a {font: 16px/30px Arial, Helvetica, sans-serif;}
#cutsheet3 ul li b a {font: 16px/30px Arial, Helvetica, sans-serif;}
#cutsheet4 ul li b a {font: 16px/30px Arial, Helvetica, sans-serif;}
}