www.gusucode.com > 200套html5精品模板1_50 > 200套html5精品模板1_50/040/css/style.css

    img {margin-bottom:10px;}
a{text-decoration:none; color:#e44b3d;}
p{margin-bottom:10px;}
h1,h2,h3,h4,h5,h6{font-family:'Share','Droid Sans' 'Georgia','Arial';line-height:20px;margin-bottom:10px;}

h1{font-size:32px;}
h2{font-size:30px;}
h3{font-size:28px;}
h4{font-size:26px;}
h5{font-size:18px;}
h6{font-size: 16px;}

h1,h1 a{color:#e64d3f;}
h2,h2 a{color:#e64d3f;}
h3,h3 a{color:#e64d3f;}
h4,h4 a{color:#e64d3f;}
h5,h5 a{color:#e64d3f;}
h6,h6 a{color:#e64d3f;}


blockquote{font-size:28px;color:#e44b3d;line-height:30px;padding-left:55px;}
blockquote.red {background:url(../img/quotes-red.png)no-repeat left top}
blockquote.green {color:#63a69f;background:url(../img/quotes-green.png)no-repeat left top;}


/*
Alerts messages
-----------------------------------*/
.alert_success, .alert_error, .alert_warning, .alert_info {
    border-radius: 3px;
   -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
    margin: 15px 0;
    padding: 10px 20px 10px 30px;
}
.alert_success {
    background: url(../img/success.png) no-repeat scroll 8px center #E5FFCC;
    border: 1px solid #BBDD99;
    color: #557733;
}

.alert_warning {
    background: url(../img/warning.png) no-repeat scroll 8px center #FFFFDD;
    border: 1px solid #DDDDCC;
    color: #666644;
}

.alert_info {
    background: url(../img/info.png) no-repeat scroll 8px center #E5EFFF;
    border: 1px solid #BBDDEE;
    color: #446677;
}

.alert_error {
    background: url(../img/error.png) no-repeat scroll 8px center #FFCCCC;
    border: 1px solid #DDAAAA;
    color: #774444;
}



/*Global Classes */

.align-center{margin-left:auto; margin-right:auto;text-align:center;}

.align-left{float:left;}

img.align-left  {margin-bottom:10px;margin-right:10px;}

.align-right{float:right;}

img.align-right{margin-bottom:10px; margin-left:10px;}

.upper{text-transform:uppercase;}

.green {color:#63a69f;}

img.green{border:3px solid #63a69f;}

a.green{color:#63a69f;}

img.green{border:3px solid #63a69f;}

a.red {color:#e44b3d;}

img.red{border:2px solid #e44b3d;margin-right:13px;}


.clear{clear:both;}

.clearfix:after { content: "."; display: block;clear: both;visibility: hidden;line-height: 0;height: 0;}

html[xmlns] .clearfix {display: block;}

* html .clearfix {height: 1%;}



/*
Toggles
--------------------------------*/

a.toggle_trigger {
float:left;
width:93%;
border:1px solid #ddd;
border-radius:3px;
-moz-border-radius:3px;
-webkit-border-radius:3px;
padding:7px 7px 7px 20px;
text-decoration:none;
color:#353535;
clear:both;
margin-bottom:10px;
}

.toggle_trigger {
padding:6px;
}

.toggle_trigger {
background:url(../img/arrow-right.png) no-repeat 3px 50%;
}

.toggle_active{
background:url(../img/arrow.png) no-repeat 3px 50%;
}

.toggle_container{
width:100%;
float:left;
margin-left:5px;
margin-top:10px;
}




 /* Tabs */

 ul.tabs {
float:left;
border:1px solid #ddd;
height:39px;
border-right-width:0;
}

ul.tabs li{
float:left;
display:inline;
width:70px;
height:30px;
text-align:center;
border-right:1px solid #ddd;
border-left:1px solid #fff;
padding-top:10px;
}


ul.tabs li.active{
color:#e44b3d;
width:70px;
height:30px;
}

ul.tabs li.active a{
color:#e44b3d;
}

ul.tabs li a{ 
color:#666;
font-size:12px;
text-decoration:none;
}

.tab_container {
  float: left;
  margin-top: 15px;
  position: relative;
  width: 100%;
}

.tab_container p{
line-height:23px;
}


/* Drop cap */

span.dropcap { float:left; font-size:58px; color:#e44b3d;padding:0 5px 5px 0; margin-top:20px}
 
 

/* lists styles */

.check li ,.star li ,.bullet li ,.green-star li,.green-check li ,.green-bullet li{list-style:none;margin:0; padding-left:20px;margin-bottom:6px;}

.check li {background:url(../img/red-check.png) no-repeat left;}
.green-check li{background:url(../img/green-check.png) no-repeat left;}
.star li{background:url(http://www.transforms.web2treat.com/abelo/img/red-start.png) no-repeat left;}
.green-star li{background:url(../img/green-star.png) no-repeat left;}
.bullet li{background:url(../img/red-bullet.png) no-repeat left;}
.green-bullet li{background:url(../img/green-bullet.png) no-repeat left;}


/* dividers */
.divider-5{ width:100%; height:1px; background:#c2c2c2;margin-top:5px;margin-bottom:5px}
.divider-5-blank{ float:left;width:100%; height:1px; background:transparent;margin-top:5px;margin-bottom:5px}
.divider-10{ float:left;width:100%; height:1px; background:#c2c2c2;margin-top:10px;margin-bottom:10px}
.divider-10-blank{ float:left;width:100%; height:1px; background:transparent;margin-top:10px;margin-bottom:10px}
.divider-center{ float:left;width:100%; height:10px; background:url(../img/divider2.png) no-repeat center;margin-top:5px;}





/* progress bar */

.meter { 
height: 15px;  /* Can be anything */
position: relative;
background: #f2f2f2;
-moz-border-radius: 5px;
-webkit-border-radius:5px;
border-radius: 5px;
padding:7px;
border:1px solid #ddd;
-webkit-box-shadow: inset 0 -1px 1px rgba(255,255,255,0.3);
-moz-box-shadow   : inset 0 -1px 1px rgba(255,255,255,0.3);
box-shadow        : inset 0 -1px 1px rgba(255,255,255,0.3);
}

.meter > span {
display: block;
height: 100%;
   -webkit-border-top-right-radius: 1px;
-webkit-border-bottom-right-radius: 1px;
       -moz-border-radius-topright: 1px;
    -moz-border-radius-bottomright: 1px;
           border-top-right-radius: 1px;
        border-bottom-right-radius: 1px;
    -webkit-border-top-left-radius: 5px;
 -webkit-border-bottom-left-radius: 5px;
        -moz-border-radius-topleft: 5px;
     -moz-border-radius-bottomleft: 5px;
            border-top-left-radius: 5px;
         border-bottom-left-radius: 5px;
background-color: rgb(43,194,83);
position: relative;
overflow: hidden;
}

.meter > span:after, .animate > span > span {
content: "";
position: absolute;
top: 0; left: 0; bottom: 0; right: 0;
background-image: 
   -webkit-gradient(linear, 0 0, 100% 100%, 
      color-stop(.25, rgba(255, 255, 255, .2)), 
      color-stop(.25, transparent), color-stop(.5, transparent), 
      color-stop(.5, rgba(255, 255, 255, .2)), 
      color-stop(.75, rgba(255, 255, 255, .2)), 
      color-stop(.75, transparent), to(transparent)
   );
background-image: 
	-moz-linear-gradient(
	  -45deg, 
      rgba(255, 255, 255, .2) 25%, 
      transparent 25%, 
      transparent 50%, 
      rgba(255, 255, 255, .2) 50%, 
      rgba(255, 255, 255, .2) 75%, 
      transparent 75%, 
      transparent
   );
z-index: 1;
-webkit-background-size: 50px 50px;
-moz-background-size: 50px 50px;
background-size: 50px 50px;
-webkit-animation: move 2s linear infinite;
-moz-animation: move 2s linear infinite;
   -webkit-border-top-right-radius: 8px;
-webkit-border-bottom-right-radius: 8px;
       -moz-border-radius-topright: 8px;
    -moz-border-radius-bottomright: 8px;
           border-top-right-radius: 8px;
        border-bottom-right-radius: 8px;
    -webkit-border-top-left-radius: 20px;
 -webkit-border-bottom-left-radius: 20px;
        -moz-border-radius-topleft: 20px;
     -moz-border-radius-bottomleft: 20px;
            border-top-left-radius: 20px;
         border-bottom-left-radius: 20px;
overflow: hidden;
		}
		
.animate > span:after {
	display: none;
}

@-webkit-keyframes move {
    0% {
       background-position: 0 0;
    }
    100% {
       background-position: 50px 50px;
    }
}

@-moz-keyframes move {
    0% {
       background-position: 0 0;
    }
    100% {
       background-position: 50px 50px;
    }
}
		
	
.nostripes > span > span, .nostripes > span:after {
	-webkit-animation: none;
	-moz-animation: none;
	background-image: none;
}

.green > span {
	background-color:#63a69f;
	
}

.red > span {
	background-color: #e54c3e;
}

.blue > span{background-color:#276f99;}

.nostripes > span > span, .nostripes > span:after {
	-webkit-animation: none;
	background-image: none;
}


/******************* Hover effects  ******************/

.hover{position:relative;z-index:2;}
.hover a{display:block;position:relative;z-index:9999;}
.zoom-image {
  background: url("../img/plus.png") no-repeat left;
  height: 100%;
  position: absolute;
  width: 100%;
  z-index:4;
  left:0;
  top:0;
  opacity:0;
  -moz-transition: all .5s ease-in-out;
  -webkit-transition:all .5s ease-in-out;
  -ms-transition: all .5s ease-in-out;
			 -o-transition: all .5s ease-in-out;
				transition: all .5s ease-in-out;
		    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(opacity=0)"; /* this works in IE8 only */
	
}
.video-image {
  background: url("../img/video.png") no-repeat left;
  height: 100%;
  position: absolute;
  width: 100%;
  z-index:4;
  left:0;
  top:0;
  opacity:0;
  -moz-transition: all .5s ease-in-out;
  -webkit-transition: all .5s ease-in-out;
			-ms-transition: all .5s ease-in-out;
			 -o-transition: all .5s ease-in-out;
				transition: all .5s ease-in-out;
			    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(opacity=0)"; /* this works in IE8 only */
}

.zoom-text {
  height: 100%;
  position: absolute;
  width: 100%;
  z-index:4;
  left:0;
  top:40%;
  opacity:0;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(opacity=0)"; /* this works in IE8 only */
  -moz-transition: all .5s ease-in-out;
  -webkit-transition:all .5s ease-in-out;
	-ms-transition: all .5s ease-in-out;
	-o-transition: all .5s ease-in-out;
	transition: all .5s ease-in-out;
			
}

.video-text {
  height: 100%;
  position: absolute;
  width: 100%;
  z-index:4;
  left:0;
  top:40%;
  opacity:0;
  -moz-transition: all .5s ease-in-out;
  -webkit-transition:all .5s ease-in-out;
  -ms-transition: all .5s ease-in-out;
   -o-transition: all .5s ease-in-out;
  transition: all .5s ease-in-out;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(opacity=0)"; /* this works in IE8 only */			
}

.hover:hover img{opacity:0.8;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(opacity=80)"; /* this works in IE8 only */
}
.hover:hover .zoom-text{opacity:1;font-size:25px;color:#fff;text-align:center;
 -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(opacity=100)"; /* this works in IE8 only */
}
.hover:hover .video-text{opacity:1;text-align:center;font-size:25px;color:#fff;
 -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(opacity=100)"; /* this works in IE8 only */
}
.hover:hover .zoom-image{background-position:center;
opacity:1;
 -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(opacity=100)"; /* this works in IE8 only */

}
.hover:hover .video-image{background-position:center;
opacity:1;
 -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(opacity=100)"; /* this works in IE8 only */
}



/* Buttons */

.read_thing {
background:url(../img/read_more.png) no-repeat right;
padding-right:20px;
margin-top:5px;
color:#e64d3f;
}

.read_thing-green {
background:url(../img/read_more-green.png) no-repeat right;
padding-right:20px;
color:#63a69f;
}



body {
background:url(../img/bg.png);
font-family: 'Droid Sans';
font-size:14px;
color:#333333;
line-height:21px;
}


/* header styling */

header{border-bottom:2px solid #63a69f;background:url(../img/header_bg.png); }
header section.social {padding-top:10px;}
header section.social ul{float:right;height:10px;}
header .social ul li {display:inline;}
header .logo{float:left;height:113px;}


#main_nav {float:right;margin-top:36px;}
#main_nav ul li {display:inline;float:left;margin:0; position:relative;bottom:0;}
#main_nav li a { font-family:'share';font-size: 22px;font-weight: 500;display: block;letter-spacing: -0.08px;padding:20px;position: relative;text-align: center;text-transform: uppercase;z-index: 98;}
#main_nav li.current a {background:#58978c url(../img/menu-bg-righ.png) no-repeat right; color:#fff;}
#main_nav a:after { color:#333; content:attr(data-description);font-size:12px;display:block;text-align:right;margin-top:2px;}
#main_nav li a:hover{color:#fff;}
#main_nav li a.selected{ /*CSS class that's dynamically added to the currently active menu items' LI A element*/
background:#58978c url(../img/menu-bg-righ.png) no-repeat right; color:#fff;
}

/*Top level list items*/
.ddsmoothmenu ul li{
position: relative;
display: inline;
float: left;
}

* html .ddsmoothmenu ul li a{ /*IE6 hack to get sub menu links to behave correctly*/
display: inline-block;
}

.ddsmoothmenu ul li a.selected{ /*CSS class that's dynamically added to the currently active menu items' LI A element*/
background:#58978c url(../img/menu-bg-righ.png) no-repeat right; color:#fff;
}

.ddsmoothmenu ul li a:hover{
background:#58978c url(../img/menu-bg-righ.png) no-repeat right; 
color:#fff;
}
	
/*1st sub level menu*/
.ddsmoothmenu ul li ul{
position: absolute;
left: 0;
display: none; /*collapse all sub menus to begin with*/
visibility: hidden;
}

/*Sub level menu list items (undo style from Top level List Items)*/
.ddsmoothmenu ul li ul li{
display: list-item;
float: none;
background:#58978c url(../img/menu-bg-righ.png) no-repeat right; 
border-top:1px solid #63a69f;
}

#menu_nav.ddsmoothmenu ul li ul li a {
color:#fff;
}

/*All subsequent sub menu levels vertical offset after 1st level sub menu */
.ddsmoothmenu ul li ul li ul{
}

/* Sub level menu links style */
.ddsmoothmenu ul li ul li a{
font: normal 13px Verdana;
width: 160px; /*width of sub menus*/
padding: 5px;
margin: 0;
border-top-width: 0;
color:#fff;
border-bottom: 1px solid gray;
}
/* Holly Hack for IE \*/
* html .ddsmoothmenu{height: 1%;} /*Holly Hack for IE7 and below*/
 
 
 
 
/* Content area */

.content{
padding-top:50px;
padding-bottom:30px;
}




/* Home page blocks */

section.blocks{margin-top:20px;}
.blocks section  figure { float:left;width:100%; text-align:center;margin-bottom:12px; } 
.blocks h3 { text-align:center;top:10px;}
.blocks h3  a {color:#e64d3f;}
.blocks p { width:250px;margin-left:40px; margin-top:5px;float:left;}



/*Home page carusol styling */

.carusol{
float:right;
}

.carusol h3{
margin-left:40px;
margin-top:20px;
}



#mycarousel li  img, #widget-carusol li  img{
position:relative;
width: 163px;
height:130px
}



/* Home page - Portfoli presents */

.portfolio_present {
background:#e64d3f url(../img/decorate.png) no-repeat -90px 0;
margin-top:50px;
font-family:'share';
height:268px;
margin-bottom:25px;
}

.portfolio_present article { float:left;margin-left:70px;margin-top:23px;}

.portfolio_present h1, .portfolio_present h3{
color:#fff;
}

.portfolio_present ul.check_list{
float:left;
margin-top:20px;
}
.portfolio_present .check_list li {
list-style:none;
background:url(../img/white-check.png) no-repeat left;
display:block;
padding-left:17px;
color:#fff;
font-size:18px;
line-height:29px;
}


/********************Portfolio page- Filetrble portfolio ***********************/
.portfolio-description{width:100%;height:50px;float:left;margin-bottom:35px;}
.port-head{float:left;}
.port-head h4{float:left;margin-bottom:4px;}
.port-head span{float:left;clear:both;color:#e54c3e;}

/*Filter link styling */

.sorting{float:right;}
.sort{margin-top:10px;}
.sort a:after {content:"/"; color:#e54c3e;margin-left:5px;}
.sort a:last-child:after{content:" ";}
.sort a {margin-right:5px;}



/*Portfolio content styling */
#portfolio{position:relative;z-index:3;}
#portfolio-sorting{width:940px;clear:both;}
#portfolio-sorting li {clear: both;float: left;height: 348px;width: 940px;margin-bottom:20px;}
#portfolio-sorting li img {width:940px;height:348px;}
.p-info{font-size:13px;color:#4a4a4a;font-style:italic;margin-top:20px;}
ul#portfolio-sorting>li>.port>article.port-content>.pcontent>ul.p-info li {height:20px;}
.p-info span{color:#e54c3e;margin-left:10px;}

/*Portfolio hover effects */

.port-text{position:absolute;left:0; color:#fff;font-size:18px;top:40%;opacity:0;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(opacity=0)"; /* this works in IE8 only */
-webkit-transition: all .5s ease-in-out;
-moz-transition: all .5s ease-in-out;
			-ms-transition: all .5s ease-in-out;
			 -o-transition: all .5s ease-in-out;
				transition: all .5s ease-in-out;
				margin-top:35px;
				font-size:13px;
				padding-right:20px;
}

.port-video{position:absolute;left:0; color:#fff;font-size:18px;top:40%;opacity:0;
-webkit-transition: all .5s ease-in-out;
-moz-transition: all .5s ease-in-out;
			-ms-transition: all .5s ease-in-out;
			 -o-transition: all .5s ease-in-out;
				transition: all .5s ease-in-out;
				margin-top:35px;
				font-size:13px;
				padding-right:20px;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(opacity=0)"; /* this works in IE8 only */
}


/*portfolio caption styling */

.port-caption{width:94%;height:35px;background:url(../img/caption_bg.png) repeat-x;font-size:20px;position:absolute;float:left;left:0;color:#fff;}
.port-caption {
		padding-top:13px;bottom:0;padding-left:50px;
		-webkit-transition: all .5s ease;
		   -moz-transition: all .5s ease-in-out;
			-ms-transition: all .5s ease-in-out;
			 -o-transition: all .5s ease-in-out;
				transition: all .5s ease-in-out;
				
}




.port-content{position:absolute;right:0;top:0;width:215px;height:348px;background:url(../img/pcontent-bg.png) no-repeat left;overflow:hidden;
		  -webkit-transition: all .5s ease;
		   -moz-transition: all .5s ease-in-out;
			-ms-transition: all .5s ease-in-out;
			 -o-transition: all .5s ease-in-out;
				transition: all .5s ease-in-out;
	
                         
}


.pcontent{opacity:0;margin-left:100%;
-moz-transition: all .5s ease-in-out;
-webkit-transition: all .5s ease-in-out;
			-ms-transition: all .5s ease-in-out;
			 -o-transition: all .5s ease-in-out;
				transition: all .5s ease-in-out;
				MARGIN-TOP:35px;
				font-size:13px;
				padding-right:20px;

}


.port{position:relative;width:940px;height:348px;z-index:5;}

.port img{
-webkit-transition: all .7s ease-in-out;
  -moz-transition: all .7s ease-in-out;
-ms-transition: all .7s ease-in-out;
 -o-transition: all .7s ease-in-out;
transition: all .7s ease-in-out;
}
			
.port:hover img{opacity:0.8;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(opacity=80)"; /* this works in IE8 only */

}
.port:hover .port-content{width:50%;}
.port:hover .pcontent{opacity:1;margin-left:29%;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(opacity=100)"; /* this works in IE8 only */

}
.port:hover .port-caption{opacity:0;height:3px;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(opacity=0)"; /* this works in IE8 only */
}
.port:hover .port-text{opacity:1;left:25%;font-size:34px;color:#f2594b;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(opacity=100)"; /* this works in IE8 only */
}
.port:hover .port-video{opacity:1;left:25%;font-size:34px;color:#f2594b;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(opacity=100)"; /* this works in IE8 only */
}



/*Blog articles  of home page */

.blog_articles article {clear:both;margin-bottom:40px;float:left;}
.blog_articles  figure{float:left;}
.blog_articles  figure img{ float:left;margin-right:15px;margin-top:5px;width:267px;height:182px;}
.blog_articles .post_content{float:left;width:640px;}
.blog_articles .post_content h4 {float:left}
.red_post span.postinfo{float:right; font-size:12px; color:#e54c3e;margin-top:10px;}
.green_post span.postinfo{float:right; font-size:12px; color:#63a69f;margin-top:10px;}
.post_content p {float:left;width:100%;margin-top:5px;line-height:20px;}

/* Red article */
article.red_post a.read_arrow{float:right;position:absolute;background:url(../img/home_post_link.png) no-repeat; width:44px;height:150px;text-indent:-999999px;
margin-top:30px;margin-left:20px;}
.red_post img{border:2px solid #e54c3e;}

/* Green article */
article.green_post a.read_arrow{float:right;position:absolute;background:url(../img/home_post_link_green.png) no-repeat; width:44px;height:150px;text-indent:-999999px;
margin-top:30px;margin-left:20px;}

.green_post img{border:2px solid #63a69f;}
.green_post h4 {color:#63a69f;}



/* footer styling */
#footer{
background:url(../img/footer_bg.png) repeat-x;
width:100%;
overflow:hidden;
z-index:6;
}
#footer a {color:#c69c6d;}
#footer p{ margin-bottom:1px;color:#fff;}
#footer h3 {
-webkit-transform:rotate(90deg);
-moz-transform:rotate(90deg);
-o-transform: rotate(90deg);
transform: rotate(90deg);
white-space:nowrap;
display:block;
top:85px;
writing-mode:tb-rl;
position:relative;
float:left;
color:#fff;
}

/*footer latest news widget */

.latest_news { margin-top:10px;}
.latest_news article {
  float: left;
  margin-bottom: 20px;
  margin-left: 50px;
  position: relative;
  top: -13px;
  width: 233px;
}

.latest_news h3 {margin-left:-60px;}


/*Contact form footet */

#footer section.footer_contact{padding-left:44px;width:260px;height:253px;}
.footer_contact iframe{width:320px;height:253px;overflow:hidden;margin-top:-30px;}
.footer_contact h3 {margin-left:-75px; margin-top:20px;}


/*Address widget in footer */
.contact_footer article {
  float: right;
  left: 50px;
  position: relative;
  top: -40px;
  width:200px;
}


#footer section.contact_footer h3 {margin-top:37px;left:-80px;float:right;font-size:23px;}
#footer section.social {padding-top:10px;}
#footer section.social ul {float: left;height: 10px; margin-top: 18px;}
#footer section.social ul li {display:inline;}
.c_link {float: left;margin-top: 15px;}
.footer_end{width:100%;height:30px;background:url(../img/footer_end.png) repeat-x; }
.footer_end p{text-align:center;padding-top:7px;}





/* Contact page Form*/


.contact_form{
float:left;
margin-top:60px;
}

.contact_form label {
float:left;
width:100%;
margin-bottom:5px;
}

.contact_form input{
width:548px;
padding:12px 6px 12px 6px;
border:1px solid #ddd;
}
.contact_form textarea {width:560px;height:171px;border:1px solid #ddd;}
.contact_form input.submit_button{width:80px;float:left;background:url(../img/send-red.png) no-repeat right;color:#e54c3e;border:none; margin-top:10px;clear:both;
margin-left:0;
}

/*Form errors Styling */

#name_error,#email_error,#message_error{display:none;font-style:italic;color:#333;font-size:12px;margin-bottom:4px;}
#errors{background:#f9e5e6 url(../img/error.png) no-repeat 10px 20px;width:500px;padding:20px 15px 10px 45px;
	margin-top:20px;
    border-radius: 3px;
   -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
    margin: 15px 0;
	border: 1px solid #DDAAAA;
    color: #774444;
	border-left-width:4px;
	border-left-color: #e54c3e;
	clear:both;
}

#mail_sucess{     background: url(../img/success.png) no-repeat 10px #E5FFCC;
    border: 1px solid #BBDD99;
    color: #557733;
	margin-top:20px;
    border-radius: 3px;
   -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
	border-left-width:4px;
	border-left-color: #BBDD99;
	clear:both;
	float:left;
	width:500px;
	padding:15px 15px 10px 30px;
	}

	
#mail_fail{background:#f9e5e6;width:500px;padding:10px 15px 10px 45px;
	margin-top:20px;
    border-radius: 3px;
   -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
	border: 1px solid #DDAAAA;
    color: #774444;
	border-left-width:4px;
	border-left-color: #e54c3e;
	clear:both;
	float:left;
	width:500px;
	
}

/*Google map styling */

#google_map {float:left;width:100%;margin:20px 0 20px 0}
#google_map h4 {
margin-left:5px;
}
#map{
float:left;
overflow:hidden;
position:relative;
margin-bottom:20px;
border:3px solid #e54c3e;
z-index:888;
width:100%;
height:302px;
background:#fff url(http://www.transforms.web2treat.com/abelo/css/images/loading.gif) 50% 50% no-repeat;
}

#map_canvas{
overflow:hidden;
position:absolute;
z-index:888;
width:100%;
height:302px;
}

/*contact page sidebar*/

#contact_sidebar{float:right;margin-left:9px;}

/* address widget in contact page */
.address_info{
margin-top:15px;
}

.address_info span{
margin-right:10px;
color:#000;
}


/* Blog post */

.post-info ul {float:left;}
.post-info li{display:inline;}
.post-info li:after{
content: "/";
color:#e54c3e;
margin-left:5px;
}
.post-info li a {color:#333;}
.post-info li:last-child a{color:#e54c3e; background:url(../img/read_more.png) no-repeat right;padding-right:16px;}
.post-info li:last-child:after{content: " ";}

.date-arrow{float:left;position:absolute;z-index:8;color:#e54c3e;
background:url(../img/post-arrow.png) no-repeat top left;width:250px;height:300px;
margin-top:9px;
}

.date-arrow h3 {
writing-mode:tb-rl;
-webkit-transform:rotate(90deg);
-moz-transform:rotate(90deg);
-o-transform: rotate(90deg);
transform: rotate(90deg);
font-size: 25px;
height: 100%;
left: -230px;
position: relative;
top:15px;
font-size:23px;
z-index:8;
}

.blog-post figure img{float:left;position:relative;z-index:6;width:666px; height:247px;margin-top:10px;}
.blog-post article {
float:left;
background:url(../img/divider-3.png) no-repeat bottom;
margin-bottom:20px;
padding-bottom:30px;
}

.blog-post article p{width:98%;margin-top:7px;float:left;}

/*sidebar widget */

.widget h5{margin-bottom:15px;}
.blog-post{float:left;width:89%;position:relative;}
.sidebar {float:right; margin-top:10px;}
.widget{width:250px; clear:both;margin-left:10px;margin-bottom:20px;clear:both;float:left;}
.latest-post li{float:left;width:250px;margin-top:10px;}
.latest-post h6{margin-bottom:2px;}
.latest-post li img {width:56px;height:56px;float:left;margin-right:10px;margin-bottom:3px;border:2px solid #e54c3e;}


/*sidebar tags */

.tab_container>.tags_tab{
width:270px;
}

.tags_tab a{
float:left;
 border: 1px solid #EDEDED;
border-radius: 2px 2px 2px 2px;
-moz-border-radius: 2px 2px 2px 2px;
-webkit-border-radius: 2px 2px 2px 2px;
color: #999999;
display: inline-table;
font-weight: normal;
margin: 2px;
padding: 4px 10px;
text-decoration: none;
background:#fbfafc;
transition:1s;
-moz-transition:1s; /* Firefox 4 */
-webkit-transition: 1s; /* Safari and Chrome */
-o-transition: 1s; /* Opera */
}

.tags_tab a:hover{
border-right:1px solid #e54c3e;
background:#fff;
color:#e54c3e;;
}


		
@media screen and (max-width: 1024px){

.nivoSlider{height:100%;}
.nivo-caption p {font-size:20px;top:-25px;}

.portfolio_present {
background:#e64d3f url(../img/decorate.png) no-repeat -190px 0;

}

.portfolio_present article {

  margin-left:115px;
  margin-top: 23px;
}


.blog_articles .post_content {
  width: 600px;
}

article.red_post a.read_arrow {

  margin-left:15px;

}


#footer section.contact_footer h3 {
  left: -110px;
}

.contact_footer article {
  left: 10px;

}

}