/*---------------------------------------------------------------- 
  Copyright:
  Copyright (C) 2008 - 2012 IceTheme. All Rights Reserved
  
  License:
  Copyrighted Commercial Software 
  
  Author:
  IceTheme - http://wwww.icetheme.com
  
---------------------------------------------------------------- */


/* ---------------------- layout.css --------------------------
This CSS file contains the stylesheets that are needed to 
style the layout and the overwall design of the template.
You will find here all the styles to edit the header, columns,
etc. 
* This is the file that you need mostly to edit to change the look
of your website.
* Also, notice that to make different colors variations for the 
template a part of the styles found here need be changed 
through the styleX.css file (where "X" is the style number that 
you have chossen through the teplate paramters.


/* Note 
--------
Also remember you dont need to worry about the size of this 
CSS file when you see all this comments. The IceSpeed plugin 
that we provide inside the template package will strip all 
of this comments plus it will comprees all the CSS in you
site. For more information on how to use IceSpeed please view 
the Installation Guide in PDF inside the template package.
---------------------------------------------------------------- */



/* 
Accessibility Feature
----------------------
Used in case if the user hase disabled the stylesheets and wants
to skip to the main parts of the website
---------------------------------------------------------------- */
#accessibility{
	display:none;}
	
	
	
/* 
Site Main Wrapping
------------------
We use media queries technology to make your website looks great 
on almost all screen resolutions. Below its the widest width 
(1200px).
Please notice that the queries.css stylesheet the width for the 
wrapper changes according to the screen resolution of your users.

PLEASE BE CAREFUL WHEN WORKING WITH THE .wrapper property.
---------------------------------------------------------------- */
.wrapper  { width:960px; margin:0 auto;position:relative;}



/* Top Bar 
-----------------*/
#topbar {
	border-bottom:1px dashed #9FDFF7;
	height:40px;}
	
	
	#topbar #date {
		float:left}
		
		#topbar #date ul {
			margin:0;
			padding:0;
			list-style-type:none}
			
			#topbar #date ul li {
				padding:0;
				line-height:40px;
				color:#888;
				margin:0}
				



	
/* Header 
----------------*/
#header {
	position:relative;
	background:#fff;
	background: -webkit-linear-gradient(top, #fff, rgba(255,255,255,.75));
	background: -moz-linear-gradient(top, #fff, rgba(255,255,255,.75));
	background: -ms-linear-gradient(top, #fff, rgba(255,255,255,.75));
	background: -o-linear-gradient(top,#fff, rgba(255,255,255,.75));
	background: linear-gradient(top, #fff, rgba(255,255,255,.75));
	clear:both}


	
/* Logo
------------*/	
#logo {
	margin:25px 0 25px 15px;
	float:left}
	
	#logo p {
		margin-bottom:0}	
	
	#logo img {}



		
/* Promo
contain the CSS for the promo module positions
------------*/	
#promo{
	border-bottom:1px dashed #9FDFF7;
	padding-bottom:0;
	margin:0 0 25px;
	clear:both;}
	

/* Bottom
contain the CSS for the bottom module positions
------------*/	
#bottom {
	border-top:1px dashed #9FDFF7;
	padding-top:20px;
	margin:0;
	clear:both;}



		
/* IceNewsblock 
----------------*/
#icenewsblock {
	position:relative}

	#icenewsblock .bannergroup {
		position:absolute;
		top:102px;
		right:0;}
	
	#icenewsblock h3.mod-title {
		color:#39bff1;
		margin-bottom:22px;
		font-size:1.75em;
		line-height:60px;
		padding:10px 0;
		margin:0 -60px;
		height:79px;
		background:url(../images/icenewsblock.png) no-repeat center;}




/* Blockquote 
---------------*/
#blockquote {
	margin:0;
	padding:25px 0 0;
	border-top:1px dashed #9FDFF7;
	border-bottom:1px dashed #9FDFF7;}
	
	#blockquote blockquote:before,
	#blockquote blockquote:after {
		font-size:100px;}
		
		#blockquote blockquote:before {
			 content: open-quote;
			 top:35px;
			 left:0; }
	 
		#blockquote blockquote:after { 
			 content: close-quote;
			 right:0;
			 bottom:-5px}
		 
	#blockquote blockquote p {
		font-size:1.8em;
		text-align:center;
		line-height:1.85em;}


/* Info Zone 
---------------*/
#infozone {
	padding:25px 0 0}
	
	#infozone {}
	
	#infozone a.button {
		box-shadow:none;
		border-radius:5px;
		font-size:1.75em;
		border-color:#fff;
		text-align:center;
		text-shadow:none;
		margin:10px 6px 0;
		padding:7px 16px 5px;
		display:inline-block;}
		
			
		#infozone a.button span {
			text-shadow:none;
			color:#B0DEF7;
			display:block;
			font-size:12px;}
		
		#infozone a.button:hover {
			box-shadow:0 0 25px #8DDCF5}
				
		
		#infozone a.greenbutton span {
			color:#D8FCB4!important;}
			
			#infozone a.greenbutton:hover {
				box-shadow:0 0 25px #C8FB6F!important}	


	#infozone p.large {
		text-align:center;
		color:#777;
		padding-top:5px;
		margin-bottom:10px;
		font-size:1.3em;}


/* Login Position
------------------*/
#login {
	float:right;
	clear:right;
	padding: 20px 0 0 0;
	margin:0}
	
	#login div.pretext {}
		#login div.pretext p{
			margin-bottom:0}

	#login form#login-form fieldset {
		margin-bottom:0}
	
	#login form#login-form fieldset p {
		display:inline-block;
		padding:0 3px}
		
		#login form#login-form p .inputbox {
			width:145px;
			border:3px solid #cbe7ee;
			border-radius:8px;
			background:#fff;
			padding:3px 9px 4px;
			margin:0;}
			#login form#login-form p .inputbox:hover,
			#login form#login-form p .inputbox:focus {
				box-shadow:0 0 12px #BBEAF9}
			
			#login form#login-form p#form-login-remember {
				padding:3px 0 0;
				display:none;}
				
				form#login-form p#form-login-remember .inputbox {
					width:auto}
	
	
	#login form#login-form input.button {
		position:relative;
		top:-1px;}
				
		
		
	#login form#login-form ul {
		float:left;
		clear:none}
		
		#login form#login-form ul li {
			display:inline;
			padding-right:18px}
		
			
			#login div#login-logout {
				margin: -20px 20px 0 0;}
			
			#login div.login-greeting {
				margin-top:14px;
				float:left} 
			
			#login div.logout-button {
				padding-left:10px;
				margin-top:13px;
				margin-right:25px;
				float:left}
				
				
				
					
			
		
/* IceCarousel 
---------------*/
#icecarousel {
	position:relative;
	background:url(../images/icecarousel.png) no-repeat center top;
	padding-top:23px;
	margin:-5px 0 10px;}
	
	


/* -- Content --
Contain the CSS for the main and important part of the template
------------*/
#content {
	background:rgba(255,255,255,.75);
	border-radius:10px;
	padding:10px;
	clear:both;}
	
	#content_inside {
		border-radius:10px;
		padding:20px;
		min-height:400px;
		background:#fff;}	

		
		/* Main Column Separator 
		This code separate the "left" and "right" module position from the content. */	
		#columns-container {
			clear:both;
			position:relative;
			margin:0;}
			
			#outer-column-container {
				position:relative;
				padding-bottom:5px;
				border-style:solid;
				border-color:transparent;
				margin:0;}
				
				#inner-column-container{
					width: 100%;
					position:relative;
					border-right:1px solid transparent;
					border-left:1px solid transparent;
					margin-left:-1px;}
											   
					#source-order-container{
						float: left;
						margin:0;
						width: 100%;}
		
		
							#middle-column{
								float: right;
								width: 100%;}			   
								
							#left-column{
								float: left;}
								
							#right-column{
								float: left;}
								
								.clear-columns { clear: both;}
								
								.inside { margin:0;  }
							
							
								#middle-column .inside {}	
								
		   
			


/* Miscellaneous CSS
------------------------------
List of CSS codes that can not be categorized above but they may
be need by Joomla to operate normally. This codes may be used 
rarely but we reccomend to keep them and to be careful when you
try to change them
---------------------------------------------------------------- */
		
/* Template Styles custom code */
ul.ice-template-style {
	margin:0;
	padding:0;
	float:left}
	ul.ice-template-style li {
		float:left;
		margin:0 .5em .5em!important;
		padding:0!important;
		list-style-type:none;}
		
	ul.ice-template-style li span {
		display:block;
		padding:0 0 .3em;
		font-size:1.4em}	


/* Banners
-----------*/
#banner {
	overflow:hidden;
	margin:0}
	


/* -- IceSlideshow --
 contain the CSS to wrap the IceSlideshow module.
------------*/	
#iceslideshow {
	padding: 0 0 40px;
	margin:0;}


/* Image Gallery on hoempage */

#img-gallery {
	position:relative;
	margin-bottom:10px;}
	
	#img-gallery h3.mod-title {
		color:#fff;
		text-shadow:1px 1px 1px rgba(0,0,0,.6);
		font-size:2em;
		background:#128aaf;
		background: -webkit-linear-gradient(right, #37A9C9, #128aaf 25%);
		background: -moz-linear-gradient(right, #37A9C9, #128aaf 25%));
		background: -ms-linear-gradient(right, #37A9C9, #128aaf 25%));
		background: -o-linear-gradient(right, #37A9C9, #128aaf 25%));
		background: linear-gradient(right, #37A9C9, #128aaf 25%));
		border-top-left-radius:7px; 
		position:relative;
		float:right;
		margin:0 -31px 15px 0;
		padding:2px 31px 4px 15px}

		#img-gallery h3.mod-title:before {
			content:"";
			position:absolute;
			bottom:-10px;
			right:0;
			height:10px;
			width:100%;
			background:url(../images/col-module.png) no-repeat top right;}
				
		
		#img-gallery p {
			position:absolute;
			top:12px;
			left:0;
			font-size:1.3em;
			font-style:italic;}		

			#img-gallery ul {
				margin:0 -8px!important}
			
			#img-gallery div.sigplus-gallery ul li {
				padding:5px!important;
				margin:8px!important;
				border:1px dotted #C8EDFA!important;}
			
				#img-gallery div.sigplus-gallery ul li img {
					margin:0!important;
					padding:0!important;
					background:#fff!important;
					-webkit-transition:all .5s ease-out;
					-moz-transition:all .5s ease-out;
					-o-transition:all .5s ease-out; 
					transition:all .5s ease-out;}
					
					#img-gallery div.sigplus-gallery ul li img:hover {
						-webkit-filter: contrast(150%);
						-moz-filter: contrast(150%);
						-o-filter: contrast(150%);
						-ms-filter: contrast(150%);
						filter: contrast(150%);}
						



/* -- IceScroller --
 contain the CSS to wrap the icescroller module.
------------*/	
#icescroller {
	border-bottom: 1px solid #000;
	box-shadow: 0 1px 0 #444;
	margin:0 0 0 -4px;}



/* -- Footer --
this wrap the footer module position plus the copyright and 
other elements that you may find on the footer
------------*/
#footer {
	background:#0a546b url(../images/footer.jpg) repeat-x top center;
	padding:80px 0 0;
	clear:both;
	margin:-50px 0 0;
	overflow:hidden;
	min-width:960px;
	color:#fff;}
		
			
		#footer a {
			color:#408EDA}
	
		
		#footer .moduletable img {
			float:left;
			margin:0 20px 10px 0}
	
	

/*  -- Copyright -- 
this contains the codes for the footer module position and 
icetheme copyright logo or also the "go to top" link 
---------------*/
#copyright {
	border-top: 1px solid #1a798e;
	box-shadow: 0 -1px 0 #022739;
	position:relative;
    clear: both;
	padding:0 0 10px;
    margin:0;}

			
	div#copytext {
		float:left;
		padding-top:15px;
		font-size:.9em; }
		
		div#copytext .footer2 { display:none; }
	
	
		
	div#icelogo {
		float:left;
		padding:5px 18px 0 0;}
		div#icelogo p { margin:0;}
			div#icelogo p a {
				display:block;
				background:url(../images/icetheme.png) no-repeat center center;
				width:122px;
				opacity:0.4;
				height:40px;
				margin:0 auto;
				-webkit-transition:all .5s ease-out;
				-moz-transition:all .5s ease-out;
				-o-transition:all .5s ease-out; 
				transition:all .5s ease-out;}
				
				div#icelogo p a:hover {
					opacity:.9;
					-webkit-transform: rotate(360deg);}
					
					div#icelogo p a span { display:none}



	/* Go to Top */
	a#go2top {
		background:url(../images/go2top.png) no-repeat top;
		bottom: 10px;
		right: 10px;
		width: 41px;
		height: 24px;
		padding:0;
		position: fixed;
		display: none;
		-webkit-transition:all .2s ease-out;
		-moz-transition:all .2s ease-out;
		-o-transition:all .2s ease-out; 
		transition:all .2s ease-out;}
	
	a#go2top:hover {
		background-position:bottom;}
	
	a#go2top span {
		display:none}




/* Miscellaneous CSS
------------------------------
List of CSS codes that can not be categorized above but they may
be need by Joomla to operate normally. This codes may be used 
rarely but we reccomend to keep them and to be careful when you
try to change them
---------------------------------------------------------------- */
		
/* Template Styles custom code */
div.ice-template-style {
	margin:0;
	padding:0;}
	div.ice-template-style p {
		float:left;
		width:185px;
		margin:0 0 25px;
		text-align:center;
		position:relative;
		padding:0;}
		
		div.ice-template-style p:nth-child(5),
		div.ice-template-style p:nth-child(6) {
			margin-bottom:8px}
		
	div.ice-template-style p span {
		display:block;
		color:#fff;
		position:absolute;
		top:40px;
		left:55px;
		background:rgba(0,0,0,.75);
		border:1px solid #fff;
		box-shadow:0 0 12px rgba(0,0,0,.5);
		padding:3px 10px;
		opacity:0;
		font-size:1.4em;
		-webkit-transition:all .3s ease-out;
		-moz-transition:all .5s ease-out;
		-o-transition:all .5s ease-out; 
		transition:all .5s ease-out;}
		
		div.ice-template-style p:hover span {
			opacity:1}
		
	div.ice-template-style img {
		float:none!important;
		margin:0!important}	

	#columns-container div.ice-template-style li img {
		width:218px}


/* 
Extensions Overwrites
----------------------
Below you will find the CSS codes for the extensions that we
provide along with this template. Note that almost all the
extensions found here have their own CSS file on their 
respective folders. Also note that all the CSS codes here
overwrite the CSS code on the module folders. That's why we have
userd the !important feature many times below.
---------------------------------------------------------------- */

		
/* Tweet Display Back Module */
.twtr-widget .twtr-tweet {
	border-color:#666!important}	
	
		
/* Ace Poll */
div.ace-poll {}	
	
	div.ace-poll h4 {
		font-size:1.25em;
		margin:8px 0}	
		
	div.ace-poll .button {
		margin:5px 0 0}
		
	div.ace-poll a.poll_result_link {
		float:right;
		font-size:.9em;
		color:#999}
		
	
	
	
/* Social Icons */
#social {
	z-index:999;
    position: absolute;
    top: 200px;}
	
	#social > div {
		background:#fff;
		min-height:220px;
		float: left !important;}

	#facebook_live_comment {
		float: left;
		width: 470px;}


	div#social ul {
		list-style:none;
		margin:0;
		background: rgba(255, 255, 255, .75);
		padding:6px;
		width: auto;
		float: left;}
		
		div#social ul li {
			padding:0;
			margin:0}

			div#social ul li a {
				height:22px;
				width:22px;
				display:block;
				margin-bottom:8px;
				background:url(../images/social.png) no-repeat;
				text-indent:-9999em;}

				
				div#social ul li:last-child a {
					margin-bottom:0}

	
						div#social ul li.social-twitter a {
							background-position:0 0}
						
						div#social ul li.social-facebook a {
							background-position:0 -22px}
						
						div#social ul li.social-youtube a {
							background-position:0 -44px}
						
						div#social ul li.social-linkedin a {
							background-position:0 -66px}
						
						div#social ul li.social-google a {
							background-position:0 -88px}
							
						div#social ul li.social-pinterest a {
							background-position:0 -110px}


					div#social ul li.social-livecomments {
						background:url(../images/social.png) no-repeat;
						background-position:center bottom;
						cursor: pointer;
						margin-bottom:7px}


		div#social .tooltip {
			width:22px;
			height:22px;
			border:none;
			display:block;
			text-indent:-9999em;
			cursor:pointer;}
		
		
		div#social .tooltip span {
			bottom:-50%;
			left:auto;
			right:40px;
			border:3px solid #CBE7EE;
			width: 280px;
			color:#666;
			height:auto;
			background-color: #fff;
			opacity:0;
			text-indent: 0;
			box-shadow:none!important;
			margin-right:30px;
			-webkit-transition:all .2s ease-out;
			-moz-transition:all .4s ease-out;
			-o-transition:all .4s ease-out; 
			transition:all .4s ease-out;
			cursor:default}
			
				div#social .tooltip:hover span {
					margin-right:0;
					opacity:1;}
			
			div#social .tooltip span::before {
				content: "";
				position: absolute;
				left: auto;
				right: -9px;
				z-index: 1000;
				bottom: auto;
				top: 50%;
				border:none;
				border-top: 8px solid transparent;
				border-bottom: 8px solid transparent;
				border-left: 8px solid #CBE7EE;
				margin-top: -7px;}

				.tooltip span::after { display:none}

			/* aligned left */
			div.social-left .tooltip span {
				right:0!important;
				left:40px!important;
				margin-right:0!important;
				margin-left:30px!important;}
				
					div.social-left .tooltip:hover span {
						margin-left:0!important}
				
				div.social-left .tooltip span::before {
					right:auto!important;
					left: -3px!important;
					border-left:none!important;
					border-right: 8px solid #CBE7EE!important;}
				
				
				


#logo img {}

#logo p > a {
    color: #f1f1f1;
    font-size: 20px;
    text-shadow: 1px 1px 1px #000;  
}
#logo span {
    font-size: 0.8em;
    font-style: italic;
    color: #555;
}



/* Share Feature
on articles and blog layout */
ul#sharebuttons {
    float: left;
    list-style: none outside none;
    margin: 0;
    padding: 0 0 10px;
	width: 100%;}
	
	ul.sharebuttons-bottom {
		padding:10px 0 0!important}
	
	ul#sharebuttons li {
		float: left;
		margin: 0;
		width: 120px;}
		
		#iceShareFackebook {
			width: 103px !important;
			position: relative;}
			
		#iceShareFackebook a {
			position: absolute;
			top: 4px;
			left: 0;}
			
		#iceSharePinterest {
			width: 75px !important;}

		#iceShareGoogle {
			width:200px!important}


/* Social icons */