/*
* Skeleton V1.1
* Copyright 2011, Dave Gamache
* www.getskeleton.com
* Free to use under the MIT license.
* http://www.opensource.org/licenses/mit-license.php
* 8/17/2011
*/
@font-face {
    font-family: "Oswald-Bold";
    font-weight: 400;
    src: url("Oswald/Oswald-Bold.ttf");
}
@font-face {
    font-family: "Oswald";
    font-weight: 400;
    src: url("Oswald/Oswald.ttf");
}
@font-face {
    font-family: "Rokkitt";
    font-weight: 100;
    src: url("Rokkitt/Rokkitt-Bold.ttf");
}
@font-face {
    font-family: "Rokkitt-Regular";
    font-weight: 100;
    src: url("Rokkitt-Regular.ttf");
}

/* Table of Contents
==================================================
	#Base 960 Grid
	#Tablet (Portrait)
	#Mobile (Portrait)
	#Mobile (Landscape)
	#Clearing */


/**************Global Structure*****************/

.wrapper{width:100%; overflow:hidden; position:relative;}
.extra-wrap{overflow:hidden; display:block;}


/***** #Base GREEN 960 Grid background-color:#009900================================================== */


#my-contaner, #container{ margin:0 auto; width:980px; }
.phone-header, .small-contact, .small-area { display:none!Important}

	

/***** #Tablet RED!!!background-color:#FF0000;(Portrait)================================================== */

	/* Note: Design for a width of 768px */
@media only screen and (max-width: 995px) {
.container-content{ width:728px}
#my-contaner, #container{width:768px;  color:#4D473D}
		.phone-header{ display:none!Important}
			h1{  margin-bottom:0px; font-size:20px; margin-top:-40px; background-position: left bottom; font-family: "Oswald";}
h2{ font-size:16px; font-family: "Oswald";}
	.index-pics-L, .index-pics-R{ display:none}
	.index-pics{ width:768px; height:332px; background-image:url(../images/tablet-header.jpg)}
	.index-main-pics-bottom{ display:none; position:relative}
	.container-content-R{ display:none }
	.container-content-L{ width:728px}
	.small-contact{ display:block!Important; width:728px; height:auto}
.my-width{ width:570px!Important;}
.footer, .footer-B, .footer-copyright{ width:728px;}
.footer-R { display:none} 
.small-area{ display:block!Important; width:728px;}
.free-cn-img{ width:572px;}
.footer-B span{ margin:5px 20px}

	}

/***** #Mobile ELECTRIC BLUE background-color:#33FFFF;(Landscape)================================================== */
	/* Note: Design for a width of 480px */
	@media only screen and (max-width: 767px) {
	#container{ width:480px!Important;  font-size:15px; text-align:left}
	.index-pics{width:480px!Important;height:82px!Important; background-image:url(../images-phone/mobile-index-pick-L.jpg) ; background-repeat:no-repeat; background-position:left; background-color:#201B17 }
	 /**.index-pics-L{ width:135px!Important; height:82px!Important; background-color:#33FFFF; float:right; display:block}
	 .index-pics-R{ width:345px!Important; height:82px!Important; background-color:#660033; float:right; display:block}*/
    #slideshow1, .index-pics-R, .index-pics-L, .index-pics-R img, .index-main-pics-bottom{ display:none!Important}
	.phone-header{ margin-left:150px; display:block!Important; text-align:left; text-decoration:none;  font-size:26px; color:#FF9900; font-family:"Oswald-Bold"; font-weight:bold; height:72px; padding-top:10px;  }
	.container-content, .footer, .footer-B{width:440px!Important; }
	.container-content-L{width:440px!Important; margin-right:0px }
	.container-content-R{ display:none;}
	h1{ background-image:none!Important; margin-bottom:0px; height:auto; font-size:20px; margin-top:-40px;}
h2{ font-size:16px;}
.free-consultation, .get-legal-help-now { width:440px!Important; margin:0px}
p{ margin-bottom:0px!Important;}
h3.h3-home-page{ padding-top:0px;}
	p.p-top-margin { margin-top:10px;}
	.footer-L{ display:none}
	.footer-R{ text-align:center; width:440px}
	.footer-copyright{ width:440px}
	
	.box-1{width:428px; border: 1px solid #EBEBEB;border-radius: 3px 3px 3px 3px;  padding:5px; background-color:#ffffff; margin-top:30px;}
.box-2{width:408px; padding:10px; background-color:#F8F8F8 }
.box-3{ display:none}
.box-4{width:200px;  float:left; margin-top:0px; padding-left:0px;padding-top:0px;letter-spacing:1px;}
.box-5{color:#FF9900;font-family: 'Oswald';padding-top:5px; font-size: 19px;}
.box-6{color:#FF9900; font-family: 'Oswald';  font-size: 13px;font-size: 19px;}
.box-7{float:left; width:140px; padding-top:8PX; color:#858080; letter-spacing:2PX; line-height:18PX;  font-family:'Oswald';}
.small-area{ display:block!Important; width:440px; height:auto}
ul.ul-line li {margin-top:15px!Important; background-color:#F3F3F3; width:440px!Important; height:auto}
.news-space{ display:none!Important}
.small-contact{ display:block!Important; width:428px}
.top-links{ height:0px}
.my-width{ width:438px!Important;}
.free-cn-img{ width:438px;}
.footer-B span{ margin:25px!Important; line-height:25px!Important}
#phone-img{ width:440px!Important; height:229px!Important;}
	}

/*****  #Mobile YELLOW background-color:#FFFF00;(Portrait)================================================== */
	/* Note: Design for a width of 320px */

	@media only screen and (max-width: 479px) {
	#my-contaner, #container{width:320px !Important; color:#4D473D;  font-size:15px; text-align:left}

	.index-pics{width:320px!Important;  height:76px!Important; background-image:url(../images-phone/mobile-index-pick-P.jpg) ; background-repeat:no-repeat; background-position:left; background-color:#201B17 }
	/* .index-pics-L{ width:122px!Important; height:76px!Important; float:right; display:block; background-color:#FFFF00;}
	.index-pics-R{ width:198px!Important; height:76px; float:right; display:block}*/
  #slideshow1,.index-main-pics-bottom, .index-pics-R, .index-pics-L{ display:none!Important}
  .phone-header{ margin-left:120px;display:block!Important; text-align:left; color:#FF9900; font-weight:bold;  font-size:20px; text-decoration:none;  font-family:"Oswald-Bold"; height:71px; padding-top:5px; }
	.container-content, .footer, .footer-B{width:280px!Important; }
	.container-content-L{width:280px!Important;margin-right:0px }
	.container-content-R{ display:none;}
	.free-consultation, .get-legal-help-now { width:280px!Important; margin:0px}
	h1{ background-image:none!Important; margin-bottom:0px; height:auto; font-size:20px;margin-top:-40px;}
	h2{ font-size:16px;}
	h3.h3-home-page{ padding-top:0px;}
	p{ margin-bottom:0px!Important;}
	p.p-top-margin { margin-top:10px;}
	.footer-copyright{ width:280px}
	.footer-R{ text-align:center; width:280px;}
	
	.box-1{width:268px; border: 0px solid #EBEBEB;border-radius: 3px 3px 3px 3px;  padding:5px; background-color:#ffffff; margin-top:30px;}
.box-2{width:248px; padding:10px; background-color:#F8F8F8 }
.box-3{ display:none}
.box-4{width:300px;  float:left; margin-top:0px; padding-left:0px;padding-top:0px;letter-spacing:1px;}
.box-5{color:#FF9900;font-family: 'Oswald';padding-top:5px; font-size: 19px!Important;}
.box-6{color:#FF9900; font-family: 'Oswald';  font-size: 13px;font-size: 19px;}
.box-7{float:left; width:260px; padding-top:8PX; color:#858080; letter-spacing:2PX; line-height:18PX;  font-family:'Oswald';}
.small-area{ display:block!Important; width:248px; height:auto}
ul.ul-line li {margin-top:15x!Important; background-color:#F3F3F3; width:248px!Important; height:auto}
.news-space{ display:none!Important}
.small-contact{ display:block!Important; width:278px}
.top-links{ height:0px}
.my-width{ width:278px!Important;}
.free-cn-img{ width:278px;}
.footer-B span{ margin:25px!Important; line-height:25px!Important}
#phone-img{ width:280px!Important; height:146px!Important;}
}


	}

/* #Clearing ================================================== */


/* Self Clearing Goodness */
	#my-contaner:after {content: "\0020"; display: block; height: 0; clear: both; visibility: hidden;}
	
	.container_24:after {content: "\0020"; display: block; height: 0; clear: both; visibility: hidden;}

/* Use clearfix class on parent to clear nested columns,
or wrap each row of columns in a <div class="row"> */
.clearfix:before,
.clearfix:after,
.row:before,
.row:after {
	content: '\0020';
	display: block;
	overflow: hidden;
	visibility: hidden;
	width: 0;
	height: 0;
}
.row:after, .clearfix:after {clear: both;}
.row, .clearfix {zoom: 1;}

/* You can also use a <br class="clear" /> to clear columns */
.clear {
	clear: both;
	display: block;
	overflow: hidden;
	visibility: hidden;
	width: 0;
	height: 0;
}