нужна помощь по шаблону "IT Cinema2" - Joomla 2.5: Шаблоны, разметка и макеты вывода

/*---------------------------------------------------------------- 
  Copyright:
  Copyright (C) 2008 - 2011 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 the 960px width which is the easiest way to separate the 
content because of its ability to be splited in many ways. 
Please be careful when you decide to change the value because 
some of the images used for decoration are meant to be used with
this width so you need to change them to.
---------------------------------------------------------------- */
.wrapper  { width:960px; margin:0 auto;}
	
	
/* 
General Styles
--------------
Below you will find the styles that are need to correctly separete 
modules. We dont reccomend that you changes the values. 
---------------------------------------------------------------- */
.floatleft { float:left; }
.floatright { float:right;}

.width20  { width: 17.9%; } 
.width25  { width: 23%;}
.width33  { width: 31.5%;}
.width50  { width: 48.6%;} 
.width75  { width: 74.5%;} 
.width100 { width: 99.99%;} 
	
		
	#showcase .width25,	#footer .width25  { width: 23%;}
	#showcase .width33, #footer .width33  { width: 31.1%;}
	#showcase .width50, #footer .width50  { width: 48.3%;}



/* Main Site Boxes
used to make the box layout on promo, bottom and content,
some of the properties are from CSS3 but we have made sure 
that it will display fine on older browser as well like
IE7 and IE8 */
.box-layout {
	border-radius:15px;
	position:relative;
	border-bottom:none;
	background:#1A1A1A;
	border:1px solid #000;
	padding:0 10px;
	min-height:120px}
	
	.box-layout:before {
		content:"";
		border-radius:15px;
		width:100%;
		height:100%;
		padding-right:2px;
		padding-bottom:2px;
		position:absolute;
		left:-2px;
		top:-2px;
		border:1px solid #2B2B2B;}
	
	.box-layout:after {
		content:"";
		z-index:9;
		border-radius:15px;
		background: -moz-linear-gradient(100% 100% 90deg, rgba(255,255,255,0), rgba(255,255,255,.05));
  		background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(rgba(255,255,255,.05)), to(rgba(255,255,255,0)));
		width:100%;
		height:90px;
		position:absolute;
		left:0;
		top:0px;}
	
	.box-layout_header {
		border-top-left-radius:15px;
		border-top-right-radius:15px;
		border-bottom:1px solid #444;
		background:#292929;
		background: -moz-linear-gradient(100% 100% 90deg, #292929, #414141);
  		background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#414141), to(#292929));
		height:45px;
		margin:-2px 0 0 -12px;
		padding:2px 10px 0 14px;
		width:100%;}
		
		.box-layout_header:before {
			content:"";
			width:100%;
			height:10px;
			position:absolute;
			top:46px;
			left:-1px;
			padding-right:1px;
			background: -moz-linear-gradient(100% 100% 90deg, rgba(0,0,0,0), rgba(0,0,0,.4));
  			background: -webkit-gradient(linear, 0% 0%, 0% 100%, from( rgba(0,0,0,.4)), to(rgba(0,0,0,0)));}




/* TopBar
------------*/	
#topbar {
	position:relative;
	overflow:hidden;}
	
	

/* Header
------------*/	
#header {
	background: url(../images/header.png) no-repeat center bottom;
	height:240px;
	position:relative;}
	
	#header .wrapper {
		position:relative;}
	

	

/* Logo
------------*/
#logo {
	margin:78px 0 0 8px;
	float:left}
	
	#logo img {
		float:none;
		margin:0; }





/* -- Content --
Contain the CSS for the main and important part of the template
------------*/
#content {
	background:url(../images/content.png) repeat-y center top;
	margin:0px auto 0;
	position:relative;
	padding:0;}
	
	#content .wrapper {
		width:930px;
		margin-bottom:-22px;}
		
	
	#content_inside {
		float:left;
		width:930px;
		margin-top:-23px;}	
	
	#content_b {
		height:112px;
		margin:0 auto -45px;
		background:url(../images/content_b.png) no-repeat center center;}
		


	
			

/* 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;
		z-index:99;
		border-style:solid;
		border-color:transparent;
		margin:15px 0;
		min-height:300px;
		margin-left:-3px;
		margin-right:-1px}
		
		#inner-column-container{
			width: 100%;
			border-right:1px solid transparent;
			border-left:1px solid transparent;}
									   
			#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; padding:0; }
						
								
	
	
/* Promo & Bottom Modules
contain the CSS for the promo & bottom module positions
------------*/		
#promo,
#bottom {
	clear:both;
	position:relative;
	margin:0 0 16px;}


#bottom {
	margin-top:16px;
	overflow:hidden;
	margin-bottom:0;}			
	
	
	

/* -- IceTabs --
 contain the CSS to wrap the IceTabs module.
------------*/	
#icetabs {
	margin:0 0 15px;
	width:640px;
	position:relative;
	overflow:hidden;
	border:1px solid #2B2B2B;
	border-radius:10px;
	float:left;
	padding:0;}
	


/* -- Login  --
 contain the CSS to wrap the Login module
------------*/	
#login {
	margin:0;
	width:274px;
	margin-bottom:15px;
	float:right;
	padding:0;}
	
	#login .box-layout {
		min-height:316px}
		
	#login .ice-module {
		z-index:99;
		position:relative;
		margin-top:10px;} 
			
		#login .ice-module h3.mod-title {
			margin-bottom:0;
			padding-bottom:5px;
			border-bottom:1px dotted #333333}
		
			#login .ice-module h3.mod-title span {} 
				
	

	
	
/* -- Footer --
this wrap the footer module position plus the copyright and 
other elements that you may find on the footer
------------*/
#footer {
	clear:both;
	margin:-45px 0 0;}
	
	#footer a {
		color:#D6AB2B}
	
	#footer img {
		float:left;
		padding:5px;
		background:#580000;
		border:1px solid #770000;
		margin:5px 12px 5px 0}
		
	#footer strong { color:#fff; font-size:1.1em;}



/*  -- Copyright -- 
this contains the codes for the footer module position and 
icetheme copyright logo or also the "go to top" link 
---------------*/
#copyright {
	clear:both;
	margin:0;
	color:rgba(255,255,255,.2);
	padding:10px 0 25px;}
	
	#copyright .wrapper {
		position:relative; 
		overflow:hidden}

	
	div#copytext { float:left; padding-top:15px;}
	
		div#copytext .footer2 { display:none; }
	
		

	div#icelogo { float:left; padding:14px 20px 0 0;}
		div#icelogo p { margin:0;}
			div#icelogo p a {
				display:block;
				float:left;
				background:url(../images/icetheme.png) no-repeat;
				width:120px;
				height:20px;
				margin:0 auto;
				opacity:.4;
				-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:1;}
					div#icelogo p a span { display:none}



	/* Go to Top */
	a#go2top {
		background: url(../images/go2top.png) no-repeat;
		top: 20px;
		height: 16px;
		width: 16px;
		position: absolute;
		right: 0;
		opacity:.4;
		-webkit-transition:all .5s ease-out;
		-moz-transition:all .5s ease-out;
		-o-transition:all .5s ease-out; 
		transition:all .5s ease-out;}
		a#go2top:hover {
			opacity:1;}
			
		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 */
ul.ice-template-style {
	margin:0;
	padding:0;
	float:left}
	ul.ice-template-style li {
		float:left;
		margin:0 .95em 1em!important;
		padding:0!important;
		list-style-type:none;}
		
	ul.ice-template-style li span {
		display:block;
		padding:0 0 .3em;
		font-size:1.4em}	


			
/* Social Links */
div#social {
	clear:both;
	background:url(../images/social.png) no-repeat center center;
	height:50px;
	padding:0;
	position:relative;
	margin:0;}
	
	div#social ul {
		margin:0;
		text-align:center;
		padding:0;}
		
		div#social ul li {
			display:inline-block;
			font-size:2.25em;
			list-style-type:none;
			padding:5px 3px 0}
			div#social ul li:last-child {
				border:none}
			
				div#social ul li a {
					color:#3A9293;
					opacity:0.2;
					width:40px;
					height:40px;
					display:inline-block;
					text-decoration:none;
					padding:0;
					font-family:'Walter Turncoat', Arial, "Times New Roman", Times, serif;
					-moz-transition: all .3s ease-out;
					-o-transition: all .3s ease-out;
					-webkit-transition: all .3s ease-out;
					transition: all .3s ease-out;
					background-image:url(../images/social_icons.png);
					background-repeat:no-repeat;
					background-position:center; }
					div#social ul li a:hover {
						opacity:1;
						color:#fff;}
						
						div#social ul li a span {
							display:none} 


					div#social ul li#social_facebook a {
						background-position:0 0}
					div#social ul li#social_twitter a {
						background-position:0 -40px}
					div#social ul li#social_youtube a {
						background-position:0 -120px}
					div#social ul li#social_myspace a {
						background-position:0 -180px}
					div#social ul li#social_flickr a {
						background-position:0 -240px}	
			

			


/* box office CSS */
ol.box-office {
	margin-bottom:0;
	padding-left:2em;}
	
	ol.box-office li {
		padding-bottom:1em}
		 
		ol.box-office li span {
			display:block;
			font-style:italic;
			color:#777;}			
			

/* 
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 */ 
.TDB-header {
	font-size:.9em!important;
	background:#111!important;
	background:rgba(0,0,0,.3)!important;
	border-color:#333!important;
	border-radius:0!important;}
	
	.TDB-header-user {
		font-size:1.1em!important;
		background:#222!important;
		background:rgba(255,255,255,.2)!important;
		margin:-2px -10px 10px!important;
		padding:2px 0!important;}
		
	span.TDB-header-avatar-left {
		margin-top:5px!important;
		padding-right:10px!important;}	
		
	.TDB-header-location {
		border-top:1px dotted rgba(255,255,255,.15);
		padding-top:5px;
		margin-top:15px;}
	
	.TDB-header-web {
		font-size:1em!important;
		padding-top:0!important;
		padding-bottom:5px!important;}	
			
	
.TDB-tweet-left {
	font-size:.9em!important;
	background:#111!important;
	background:rgba(0,0,0,.3)!important;
	border-color:#333!important;
	border-radius:0!important;
	margin-bottom:10px!important;
	padding:5px 10px!important;
	margin-left:55px!important;}
	.TDB-tweet-left:before {
		border-top-color: #333!important;
		border-color: transparent #333!important;}
	.TDB-tweet-left:after {
		border-top-color: #111!important;
		border-color: transparent #111!important;}
	
	
	.TDB-tweet-left .TDB-tweet-time {
		font-size:.9em!important;
		border-top:1px dotted rgba(255,255,255,.15);
		margin-top:10px;
		padding-top:1px}


.TDB-tweet-left-noavatar {
	background:none!important;
	border:none!important;
	padding-left:0!important;
	padding-right:0!important;
	border-radius:none!important;}
	



/* IceAccordion Module */ 
.iceaccordion-theme-black {
   color:inherit!important}

.iceaccordion h4.toggler {
	background-color:transparent!important;
	background-image: url(../images/iceaccordion_arrow_closed.png)!important;
	padding:.5em 0 .7em!important;}
	.iceaccordion h4.open {
		background-image: url(../images/iceaccordion_arrow_open.png)!important;}
	
.iceaccordion div.accordion_content {
	background-color:transparent!important;
	color:inherit!important}
	
.iceaccordion-loading {
    background-image: url(../images/loading.gif)!important;}

.iceaccordion div.accordion_content img {
	padding:4px;
	margin-top:0!important;
	margin-bottom:0.5em!important;
	background:#333;
	border:1px solid #444;}
	
.iceaccordion div.accordion_content p.readmore {
	padding-top:20px}
	
.iceaccordion-paging .iceaccordion-prev,
.iceaccordion-paging .iceaccordion-next {
    background-image: url(../images/iceaccordion_arrows.png)!important;
	opacity:.25!important;
	top:13px!important;
	-webkit-transition:all .5s ease-out;
	-moz-transition:all .5s ease-out;
	-o-transition:all .5s ease-out;
	transition:all .5s ease-out;}
	.iceaccordion-paging .iceaccordion-prev:hover,
	.iceaccordion-paging .iceaccordion-next:hover {
		opacity:.8!important;}





/* IceShare Plugin */ 
#ice-sharing {
	background-color: #1A1A1A;
	background-image:url(../images/content.png);
	background-repeat:repeat-y;
	background-position:center center;
	border:1px solid #4F0000;
	border-right:none;
	border-radius:10px 0 0 10px;
	padding:15px 10px 10px 15px;
	z-index:999}
	
		.stButton .chicklets {
			color:#fff!important;}
	
	.ice-sharingbutton {
		border-bottom:1px dotted #444;
		padding-bottom:12px;
		margin-bottom:13px}
	



/* Experimental Feature 
used currently to display a nice effect in webkit based browsers for the logo.
You may remove it if you wish */
body.homepage #site_wrapper { -webkit-animation: effect 5s ease-out 1;}
body.homepage #logo { -webkit-animation: logo 5s ease-out 1;}

@-webkit-keyframes effect {
	0%		{ opacity:0}
	50%		{ opacity:0}
	100%	{ opacity:1}
}

@-webkit-keyframes logo {
	25%		{ -webkit-transform: rotate(-360deg);
				-moz-transform: rotate(-360deg);
				transform: rotate(-360deg);}
	100%	{ }
}

/* fix on lower screen */
#header, #content {min-width:-960px}