/* Blogger Default Css Elements*/

/***********************************/

/*block Layout*/

.block-1{
	width:100%;
} 

.block-2{
	width:50%   
}

.block-3{
	width:33.33333%;
} 

.block-4{
	width:25%   
}

.block-5{
	width:20%;
} 

.block-6{
	width:16.6%   
}

.block-7{
	width:14.2%;
} 

.block-8{
	width:12.5%   
}

/*border radius*/

.border-top-1-1{
-webkit-border-top-left-radius: 10px;
-webkit-border-top-right-radius: 10px;
-moz-border-radius-topleft: 10px;
-moz-border-radius-topright: 10px;
border-top-left-radius: 10px;
border-top-right-radius: 10px;
}

.border-top-5-5{
-webkit-border-top-left-radius: 50px;
-webkit-border-top-right-radius: 50px;
-moz-border-radius-topleft: 50px;
-moz-border-radius-topright: 50px;
border-top-left-radius: 50px;
border-top-right-radius: 50px;
}

.border-top-10-10{
-webkit-border-top-left-radius: 100px;
-webkit-border-top-right-radius: 100px;
-moz-border-radius-topleft: 100px;
-moz-border-radius-topright: 100px;
border-top-left-radius: 100px;
border-top-right-radius: 100px;
}

.border-top-20-20{
-webkit-border-top-left-radius: 200px;
-webkit-border-top-right-radius: 200px;
-moz-border-radius-topleft: 200px;
-moz-border-radius-topright: 200px;
border-top-left-radius: 200px;
border-top-right-radius: 200px;
}

.border{
-webkit-border-radius: 50px;
-moz-border-radius: 50px;
border-radius: 50px;
}
/* add this classes to content if fullwidth,center, left or right sidebar*/
/*adjust the percentage along with the #sidebar width*/
.content-fullwidth{
	width:100%;
}

.content-left{
	float:left;
	width:70%;
}

.content-right{
	float:right;
	width:70%;
}

/*add this class if #sidebar is left or right*/
.sidebar-right{
float:right;	
}

.sidebar-left{
	float:left;
}

/*add this class if #sidebar width percentage*/
/*adjust the percentage along with the #content width*/
.sidebar-width{
	width:32%;
}
.sidebar-width-left{
	width:20%;
}

.sidebar-width-right{
	width:20%;
}

/*if add iframe in certain "div" just add its class in the
 media query below to make it responsive.

	eg. iframe in header,footer etc.
	
		add the ".footer-sidebar iframe" in those media querry below.
		
		.content-container iframe, .footer-sidebar iframe

*/
@media only screen and (max-width: 750px)
{
.content-container iframe, .content-container-3-column iframe{ /*this is responsive iframe in page content*/
	height:80%;
    min-height:400px !important;
    }
}

@media only screen and (max-width: 500px)
{
.content-container iframe, .content-container-3-column iframe {
	height:50%;
    min-height:300px !important;
    }
}

@media only screen and (max-width: 400px)
{
.content-container iframe, .content-container-3-column iframe {
	height:40%;
    min-height:200px !important;
    }
}

.content-container iframe, .content-container-3-column iframe {
	position: relative;
	top: 0;
	left: 0;
	width: 100%;
	height:auto;
    min-height:400px;
}

/*iframe in sidebars or sidebar footer etc.*/
@media only screen and (max-width: 700px)
{
.sidebar iframe { 
	height:80%;
    min-height:350px !important;
    }
}
@media only screen and (max-width: 500px)
{
.sidebar iframe { 
	height:50%;
    min-height:300px !important;
    }
}

@media only screen and (max-width: 400px)
{
.sidebar iframe { 
	height:40%;
    min-height:200px !important;
    }
}

.sidebar iframe {
	position: relative;
	top: 0;
	left: 0;
	width: 100%;
	height:auto;
    min-height:150px;
}

/******************************************/

/*position*/

.fixed{
	position:fixed;
}

.absolute{
	position:absolute;
}

.relative{
	position:relative;
}

@media only screen and (max-width: 700px)
{
.fixed700, .absolute700, .relative700 {
	position:none;
}

}

/*font weight*/
.bold{
	font-weight:bold;
}

.lighter{
	font-weight:lighter;
}

/*font style*/
.normal{
	font-style:normal;
	font-weight:normal;
}
.italic{
	font-style:italic;
}

.oblique{
	font-style:oblique;
}

/*font size*/
.font-size-11{
	font-size:12px;
}

.font-size-12{
	font-size:12px;
}

.font-size-13{
	font-size:13px;
}

.font-size-14{
	font-size:14px;
}

.font-size-15{
	font-size:15px;
}

.font-size-16{
	font-size:16px;
}

.font-size-17{
	font-size:17px;
}

.font-size-18{
	font-size:18px;
}

.font-size-19{
	font-size:19px;
}

.font-size-20{
	font-size:20px;
}

/*text alignment*/
.text-align-left{
	text-align:left;
}
.text-align-right{
	text-align:right;
}
.text-align-center{
	text-align:center;
}

/*float*/
.float-left{
	float:left;
}

.float-right{
	float:right;
}

.float-none{
	float:none;
}

/*media query default classes for width*/
@media only screen and (max-width: 700px)
{
.float-right-700{
	float:none;
}
	
.float-left-700{
	float:none;
}
	
.float-none-700{
	float:none;
}
	
}

/*width*/
.quarter-width{
	width:25%;
}

.one-third-width{
	width:33.33333%;
}
.half-width{
	width:50%;
}

.half-quarter-width{
	width:75%;
}

.width-70{
	width:67%;
}

.full-width{
	width:100%;
}

/*media query default classes for width*/
@media only screen and (max-width: 700px)
{
	.half-width-left-700{
		width:50%;
		
	}
	
	.half-width-right-700{
		width:50%;
		
	}
	
}

@media only screen and (max-width: 500px)
{
	.full-width-500{
		width:100%;
		float:none;
		text-align:center;
	}
}

@media only screen and (max-width: 500px)
{
.full-width iframe { 
	height:50%;
    min-height:300px !important;
    }
}

@media only screen and (max-width: 400px)
{
.full-width iframe { 
	height:40%;
    min-height:200px !important;
    }
}

.full-width iframe {
	position: relative;
	top: 0;
	left: 0;
	width: 100%;
	height:auto;
    min-height:400px;
}

/*padding*/
.padding-3{
	padding:.3em;
}

.padding-5{
	padding:.5em;
}

.padding-10{
	padding:1em;
}

.padding-15{
	padding:1.5em;
}

.padding-20{
	padding:2em;
}

.padding-5-5{
	padding-left:.5em;
	padding-right:.5em;
}

.padding-10-10{
	padding-left:1em;
	padding-right:1em;
}

.padding-15-15{
	padding-left:1.5em;
	padding-right:1.5em;
}

.padding-20-20{
	padding-left:2em;
	padding-right:2em;
}


.padding-t5-b5{
	padding-top:.5em;
	padding-bottom:.5em;
}

.padding-t10-b10{
	padding-top:1em;
	padding-bottom:1em;
}

.padding-t15-b15{
	padding-top:1.5em;
	padding-bottom:1.5em;
}

.padding-t20-b20{
	padding-top:2em;
	padding-bottom:2em;
}


/*margin*/
.margin-3{
	margin:.3em;
}

.margin-5{
	margin:.5em;
}

.margin-10{
	margin:1em;
}

.margin-15{
	margin:1.5em;
}

.margin-20{
	margin:2em;
}

.margin-3-3{
	margin-left:.3em;
	margin-right:.3em;
}

.margin-5-5{
	margin-left:.5em;
	margin-right:.5em;
}

.margin-10-10{
	margin-left:1em;
	margin-right:1em;
}

.margin-15-15{
	margin-left:1.5em;
	margin-right:1.5em;
}

.margin-20-20{
	margin-left:2em;
	margin-right:2em;
}

/*reset padding or margin at 700*/
@media only screen and (max-width: 700px)
{
	.margin-0-0-700,.margin-0-700{
		margin-left:0em;
		margin-right:0em;
	}
	
	.padding-0-0-700,.padding-0-700{
		padding-left:0em;
		padding-right:0em;
	}
}

 /*display*/
 .inline-block{
 display:inline-block;
 }
 
 .block{
	 display:block;
 }
 
/*separator*/

.separator-5,.separator-10,.separator-15,
.separator-20,.separator-25,.separator-30{
	width:100%;
	background:transparent;
	padding:0px;
	margin:0px;
}
.separator-5{
	height:5px;
}

.separator-10{
	height:10px;
}

.separator-15{
	height:15px;
}

.separator-20{
	height:20px;
}

.separator-25{
	height:25px;
}

.separator-30{
	height:30px;
}

/*left,right,bottom,top*/

.left50{
	left:50%;
}

.right50{
	right:50%;
}

.top50{
	top:50%;
}

.bottom50{
	bottom:50%;
}

.left-50{
	left:-50%;
}

.right-50{
	right:-50%;
}

.top-50{
	top:-50%;
}

.bottom{
	bottom:-50%;
}

@media only screen and (max-width: 700px)
{
.left0700{
	left:0;
}

.right0700{
	right:0;
}

.top0700{
	top:0;
}

.bottom0700{
	bottom:0;
}

}