www.gusucode.com > 200套html5精品模板51_75 > 057/css/responsive.css

    
/* -------------------------------------------------------------- */
/* --- REPSONSE 768px -------------------------------------------- */
/* -------------------------------------------------------------- */
@media screen and (max-width:980px) {
	#content {width:748px;}
	.res768hide {display:none !important; }
	
	.sti-menu { padding-left:16px; width:780px;}
	.sti-menu li {width: 195px; height:300px;}
	.sti-icon { width: 155px; height:155px; left:30px;}
	.sti-menu li a h2 {width:155px; top:185px;}
	.sti-menu li a h3 {width:155px; top:215px;}
	
	.sti-icon-one{background-image:url(../images/icons/960/button1.png);}
	.sti-icon-two{background-image:url(../images/icons/960/button2a.png);}
	.sti-icon-three{background-image:url(../images/icons/960/button3a.png);}
	.sti-icon-four{background-image:url(../images/icons/960/button4.png);}
	
	

	/* ------------------- COLUMNS -------------------- */

	
	.column {margin-right:20px;}
	.column-1-2 {width:364px;}
	.column-1-2 img  {max-width:364px;}
	.column-1-3 {width:236px;}
	.column-1-3 img {max-width:236px;}
	.column-2-3 {width:492px;}
	.column-2-3 img {max-width:492px;}
	.column-1-4 {width:172px;}
	.column-1-4 img {max-width:172px;}
	.column-3-4 {width:556px;}
	.column-3-4 img {max-width:556px;}
	
	
	.column36 {margin-right:32px;}
	.column-1-2.column36 {width:358px;}
	.column-1-2.column36 img {max-width:358px;} 
	.column-1-3.column36 {width:228px;}
	.column-1-3.column36 img {max-width:228px;} 
	.column-2-3.column36 {width:488px;}
	.column-2-3.column36 img {max-width:488px;} 
	.column-1-4.column36 {width:163px;}
	.column-1-4.column36 img {max-width:163px;} 
	.column-3-4.column36 {width:553px;}
	.column-3-4.column36 img {max-width:553px;} 
	
	
	
	.column48 {margin-right:44px;}
	.column-1-2.column48 {width:352px;}
	.column-1-2.column48 img  {max-width:352px;} 
	.column-1-3.column48 {width:220px;}
	.column-1-3.column48 img {max-width:220px;} 
	.column-2-3.column48 {width:484px;}
	.column-2-3.column48 img {max-width:484px;} 
	.column-1-4.column48 {width:154px;}
	.column-1-4.column48 img {max-width:154px;} 
	.column-3-4.column48 {width:550px;}
	.column-3-4.column48 img {max-width:550px;} 
	
	
	
	.column60 {margin-right:56px;}
	.column-1-2.column60 {width:346px;}
	.column-1-2.column60 img  {max-width:346px;} 
	.column-1-3.column60 {width:212px;}
	.column-1-3.column60 img {max-width:212px;} 
	.column-2-3.column60 {width:480px;}
	.column-2-3.column60 img {max-width:480px;} 
	.column-1-4.column60 {width:145px;}
	.column-1-4.column60 img {max-width:145px;} 
	.column-3-4.column60 {width:547px;}
	.column-3-4.column60 img {max-width:547px;} 
	
	 .column .nivoSlider img, .column36 .nivoSlider img, .column48 .nivoSlider img, .column60 .nivoSlider img
	 {max-width:none !important;}
	


	/* -------------------- FOOTER -------------------- */

	
	#footer-wrapper {width:748px;}
	.footer-column {width:220px; margin:0 22px 0 0; padding:0 21px 0 0;}
	
	.footer-column .fadehover {width:54px; height:54px;}
	.footer-column .fadehover img {max-width:54px; max-height:54px;}
	
	.footer-info-map {width:365px;}
	.footer-info-text {padding-left:18px; width:365px;}
	.footer-info-picks {margin:22px 0 0 -10px; width:100%;}

	
	/* --------------------- MENU --------------------- */

	div.menu{width:748px}
	ul.blockeasing li a {padding-left:13px; padding-right:13px;}
	
	
	/* --------------------- BLOG --------------------- */
	
	.blog_left, .border, .blog_left_content,
	ul.filterOptionsblog {width:461px;}
	.blog_content_inner {width:350px;}
	.nivo-directionNav,
	.theme-default .nivo-directionNav {display:block;}
	
	
	.bott_post {width:129px; padding-left:18px; margin-left:18px;}
	.bott_post img {width:129px;}
	
	.comment_cont {width:461px;}
	.comment_cont_reply1 {width:411px; margin-left:50px;}
	.comment_cont_reply2 {width:361px; margin-left:100px;}
	.comment_cont_reply3 {width:311px; margin-left:150px;}
	
	#commentform input {width:130px;}
	#commentform textarea {width:287px;}
	

	/* ----------------- SERVICES --------------------- */
		
	.services_container {width:748px;}
	ul.ourHolder {width: 1020px;overflow: hidden;}
	ul.ourHolder li.item  {width:353px; margin-right:40px;}
	ul.ourHolder li.item img {max-width:353px;}


	
	/* ------------------ CONTACT --------------------- */
	
	.three_inf, .four_inf {width:100%; background:#767676; padding:0; height:44px; margin-bottom:10px;}
	.sub_inf {background:none; padding:0;}
	.sub_inf.border_right {border:0;}
	.sub_inf .contact_title {float:left; padding:10px; background:#2d2d2d; margin-right:10px; height:24px;}
	.sub_inf .contact_title h3 {margin:0;}
	.sub_inf ul {padding:5px;}
	.sub_inf li.sub_inf_city {float:none; font-weight:bold;}
	.sub_inf li { float:left; margin-right:10px;}
	.arrow_inf {display:none;}
	.three_inf .num_inf, .four_inf .num_inf {float:right; padding:5px !important; color:#fff;}


	#contactform input {width:468px;}
	#contactform textarea {height:250px; width:468px;}
	.contact_text{width:220px; margin-left:21px; padding-left:22px;}

	/* ------------------ GALLERY --------------------- */
	ul.ourHolderGallery {width:756px;}
	ul.ourHolderGallery .item img,
	ul.ourHolderGallery .image_roll_info,
	ul.ourHolderGallery .image_roll_glass, 
	ul.ourHolderGallery .image_roll_zoom {max-width:748px;}


	/* ------------------ OUR TEAM --------------------- */
	.team {width:746px; height:200px;}
	.team_content {width:536px;}
	.team h2 {padding:0 20px;}
	.team_contact{display:block;width:495px;padding:0px 20px;}
	.team_about {width:495px; padding:10px 20px 0px 20px;}
	.img_team {margin:45px 15px 38px 15px;}
	.team.team1-2 {width:368px;}
	
	.team_content1-2{float:left; width:231px;}
	.team_content1-2 .team_contact{width:191px;padding:0 20px;}
	.team_content1-2.team_content1-2b {width:160px;}
	.team_content1-2.team_content1-2b .team_contact{width:120px;}

	.team.team1-3{float:left; width:213px;}
	.team.team1-3 .img_team {margin:20px 53px;}
	
	.team.team1-4 {width:151px;}
	.team.team1-4 .img_team {margin:15px 22px;}
	.team_content1-4 {height:150px;}
	.team1-4 .social_icon {width:120px; margin:15px;}
	.team1-4 .social_icon .fadehover {margin:2px;}
	.team1-4 h2 {margin-top:10px;}
}




/* -------------------------------------------------------------- */
/* --- REPSONSE 440px ------------------------------------------- */
/* -------------------------------------------------------------- */
@media screen and (max-width:768px) {
	#content {width:420px;}
	.res440hide {display:none !important; }
	
	.sti-menu { padding-left:16px; width:452px;}
	.sti-menu li {width: 226px; height:300px;}
	
	.column, .column36, .column48, .column60
	 {margin-right:0px; !important; width:100% !important}
	.column img, .column36 img, .column48 img, .column60 img
	 {max-width:100% !important}
	 .column .nivoSlider img, .column36 .nivoSlider img, .column48 .nivoSlider img, .column60 .nivoSlider img
	 {max-width:none !important;}
	

	/* --------------------- MENU --------------------- */
	
	.header_silverbackground{height:auto; padding-bottom:10px;}
	div.menu{width:420px}
	a.logo {float:none;display:block; margin:auto; text-align:center;}
	
	.blockeasing-wrapp {position:relative; width:280px; margin: 10px auto; background:#fff url(../images/menu-arrow.png) no-repeat 255px 10px; cursor:pointer;}
	.blockeasing-header {display:block; margin:0; padding:4px 10px;}
	ul.blockeasing {width:280px;  margin:0 0 0 -1px; float:none; overflow-x:hidden; overflow-y:visible; background:#fff; position:absolute; top:27px; left:0; z-index:999; border:1px solid #353535; border-bottom:0; display:none;}
	ul.blockeasing li {width:100%; border-bottom:1px solid #353535;}
	ul.blockeasing li ul {width:100%; position:static; display:block;border-left:5px solid #fff; box-shadow: 0px 0px 0 #333333; -moz-box-shadow: 0px 0px 0 #333333; -webkit-box-shadow: 0px 0px 0 #333333;}
	ul.blockeasing li li {display:block; position:static; border:0;}
	ul.blockeasing li li a,
	ul.blockeasing li a,
	ul.blockeasing li.current a {width:100%; padding:5px 10px; display:inline-block;  background:#fff; text-align:left; color:#353535; text-shadow:none; font-size:14px;height:14px;}
	
	
	/* -------------------- FOOTER -------------------- */
	
	#footer-wrapper {width:420px}
	.footer-column {width:420px; margin:0 0 22px 0; padding:0 0 21px 0; border-bottom:1px #fff dashed; border-right:0;}
	
	.footer-column .fadehover {width:54px; height:54px;}
	.footer-column .fadehover img {max-width:54px; max-height:54px;}
	.footer-column.last {margin-bottom:22px;}
	.footer-info-text {margin:22px 0 0 -20px; width:100%;}
	.footer-info-picks {margin:22px 0 0 -10px; width:100%;}
	
	.footer-menu {text-align:center; margin-bottom:10px;}
	.footer-menu li {float:none; display:inline-block; padding:0 7px 0 7px;}
	.footer-copyright {text-align:center; float:none;}
	
	
	/* --------------------- BLOG --------------------- */
	
	
	.blog_left {border:0; padding:0; width:420px;}
	.border{width:420px;}
	.blog_right {display:none;}
	
	.blog_left .blog_content_info {width:79px;}
	
	.blog_left_content {width:420px;}
	.blog_content_inner {width:330px;}
	ul.filterOptionsblog {width:420px;}
	.social_icon_blog .fadehover {width:45px; height:45px;}
	.social_icon_blog .fadehover img {max-width:45px; max-height:45px;}
	
	
	.bott_post {width:115px; padding-left:18px; margin-left:18px;}
	.bott_post img {width:115px;}
	
	.comment_cont {width:420px;}
	.comment_cont_reply1 {width:385px; margin-left:35px;}
	.comment_cont_reply2 {width:350px; margin-left:70px;}
	.comment_cont_reply3 {width:315px; margin-left:105px;}
	
	#commentform input {width:130px;}
	#commentform textarea {width:246px;}


	/* ----------------- SERVICES --------------------- */
	
	
	.services_container {width:420px;}
	ul.ourHolder {width: 460px;overflow: hidden;}
	ul.ourHolder li.item  {width:420px; margin-right:40px;}
	ul.ourHolder li.item img {max-width:420px;}

	
	
	
	/* ------------------ CONTACT --------------------- */
	
	.three_inf, .four_inf {height:64px;}
	.sub_inf .contact_title {padding:20px 10px;}
	.sub_inf li { float:none;}


	#contactform input {width:404px;}
	#contactform textarea {height:138px; width:404px;}
	.contact_text{width:100%; margin-left:0; padding-left:0; border:0;}

	/* ------------------ GALLERY --------------------- */
	ul.ourHolderGallery {width:428px;}
	ul.ourHolderGallery .item img,
	ul.ourHolderGallery .image_roll_info,
	ul.ourHolderGallery .image_roll_glass,
	ul.ourHolderGallery .image_roll_zoom {max-width:420px;}


	/* ------------------ OUR TEAM --------------------- */
	.team, .team.team1-2, .team.team1-3, .team.team1-4 
		{width:420px; height:180px;padding:10px 0; margin:0 0 10px 0;}
	.team_about {display:none;}
	.team.team1-3 .team_content1-3, .team.team1-4 .team_content1-4, .team_content 
		{float:left; width:212px; text-align:left;}
	.team1-3 .team_content1-3 .team_contact, .team1-4 .team_content1-4 .team_contact 
		{text-align:left; padding:0 20px;}
	.team1-3 .social_icon, .team1-4 .social_icon 
		{float:left; width:70px; clear:none; margin:0;}
	.team1-3 .social_icon .fadehover, .team1-4 .social_icon .fadehover
		{margin:0;}
	
	.team_contact{display:block; width:210px; padding:0px 20px;}
	.team.team1-3 .img_team, .team.team1-4 .img_team, .img_team 
		{margin:45px 15px 38px 15px;}
	
	.team_border2{border-left:#fff 1px dashed; border-bottom:0; width:0px;height:100%;float:left;}
	
	.team_content1-2{width:282px; float:left;}
	.team_content1-2 .team_contact{width:241px;}
	.team_content1-2.team_content1-2b {width:212px;}
	.team_content1-2.team_content1-2b .team_contact{width:171px;}

}

/* -------------------------------------------------------------- */
/* --- REPSONSE 300px ------------------------------------------- */
/* -------------------------------------------------------------- */

@media screen and (max-width:440px) {
	#content {width:280px;}
	.res300hide {display:none !important; }
	
	.middle_silver_background {height: 50px;}
	.sti-menu { display:none;}
	

	/* -------------------- FOOTER -------------------- */

	
	#footer-wrapper {width:280px}
	.footer-column {width:280px;}
	
	.footer-info-map {max-width:280px;}
	.footer-column .fadehover {width:70px; height:70px;}
	.footer-column .fadehover img {max-width:70px; max-height:70px;}
	

	/* --------------------- MENU --------------------- */

	div.menu{width:280px}
	
	

	/* --------------------- BLOG --------------------- */

	.blog_left {width:280px;}
	.border {width:280px;}
	
	.blog_left .blog_content_info {width:280px; float:none; border-bottom:1px #353535 dashed; padding-bottom:5px;  margin-bottom:10px;}
	.blog_left .blog_content_info a.comment_number {float:left; margin:10px;}
	.blog_left .blog_content_date {float:left;}
	
	.blog_left .blog_content_author,
	.blog_left .blog_content_category {padding-right:0;}
	.blog_content_quote {display:none;}
	
	.blog_left_content {width:280px;}
	.blog_content_inner {width:280px;}
	ul.filterOptionsblog {width:280px;}
	.social_icon_blog .fadehover {width:40px; height:40px;}
	.social_icon_blog .fadehover img {max-width:40px; max-height:40px;}
	
	
	.bott_post {width:280px; padding-left:0; margin-left:0; margin-bottom:20px; border-left:0;}
	.bott_post img {width:195px;}
	
	.comment_cont {width:280px;}
	.comment_cont_reply1 {width:260px; margin-left:20px;}
	.comment_cont_reply2 {width:240px; margin-left:40px;}
	.comment_cont_reply3 {width:220px; margin-left:60px;}
	
	#commentform input {width:264px;}
	#commentform .padd-left {padding-left:0;}
	#commentform textarea {width:272px;}
	

	/* ----------------- SERVICES --------------------- */
	
	.services_container {width:280px;}
	ul.ourHolder {width: 340px;overflow: hidden;}
	ul.ourHolder li.item  {width:280px; margin-right:40px;}
	ul.ourHolder li.item img {max-width:280px;}

	
	/* ------------------ CONTACT --------------------- */
	
	.arrow_inf{display:block;}

	.three_inf, .four_inf{width:100%; background:none; height:auto;}
	.three_inf ul,.four_inf ul {margin: 0 auto; padding:5px 0;}

	.sub_inf{position:relative; background:url('../images/background-gray.png'); color:#fff; padding:10px 20px; }
	.three_inf ul.num_inf, .four_inf ul.num_inf{float:none; padding:10px 20px 20px 20px !important; color:#353535;}

	
	.sub_inf .contact_title {float:none; padding:0; background:none; margin:0; height:24px;}
	.contact_title h3{margin:5px 0 10px; padding:0; color:#fff;}
	.four_inf.last {width:195px;}


	#contactform input {width:264px;}
	#contactform textarea {width:264px;}
	
	/* ------------------ GALLERY --------------------- */
	ul.ourHolderGallery {width:288px;}
	ul.ourHolderGallery .item img,
	ul.ourHolderGallery .image_roll_info,
	ul.ourHolderGallery .image_roll_glass,
	ul.ourHolderGallery .image_roll_zoom {max-width:280px;}


	/* ------------------ OUR TEAM --------------------- */
	.team, .team.team1-2, .team.team1-3, .team.team1-4 
		{width:260px; height:auto;padding:0 10px; margin:0 0 10px 0;}
	.team h2 {margin-top:0;}
	.team .team_content, .team.team1-2 .team_content1-2, .team.team1-2 .team_content1-2.team_content1-2b,  .team.team1-3 .team_content1-3, .team.team1-4 .team_content1-4 
		{width:260px; text-align:center; padding:20px 0 30px; height:auto; float:none;}
	.team .team_content .team_contact, .team1-2 .team_content1-2 .team_contact, .team1-2 .team_content1-2.team_content1-2b .team_contact, .team1-3 .team_content1-3 .team_contact, .team1-4 .team_content1-4 .team_contact 
		{text-align:center; padding:0 20px; width:220px; float:none;}
	.team .social_icon, .team1-2 .social_icon, .team1-3 .social_icon, .team1-4 .social_icon 
		{text-align:center; width:260px; clear:both; margin:15px 0; float:none;}
	.team .social_icon .fadehover, .team1-2 .social_icon .fadehover, .team1-3 .social_icon .fadehover, .team1-4 .social_icon .fadehover
		{margin:0; float:none; display:inline-block;}
	
	.team_contact{display:block; width:210px; padding:0px 20px;}
	.team .img_team, .team.team1-2 .img_team, .team.team1-3 .img_team, .team.team1-4 .img_team, .img_team 
		{margin:20px 77px 20px 77px; float:none;}
	
	
	.team_border, .team_border2 {border-bottom:#fff 1px dashed;width:100%;height:0px;float:none;}
	
	.team_content1-2{width:282px; float:left;}
	.team_content1-2 .team_contact{width:241px;}
	.team_content1-2.team_content1-2b {width:212px;}
	.team_content1-2.team_content1-2b .team_contact{width:171px;}

}