Ajuste de Colunas

rafaelcrvs · Abril 23, 2012

Ola,

Bom, eu dividi minha pagina em duas colunas, como mostra na imagem abaixo:

O css da coluna vertical esta assim:

.coluna {
width: 250px;
margin: 0 auto;
padding: 10px 0 10px;
margin-left: 0px;
display: block;
}

Da coluna do meio esta assim:

.coluna1 {
width: 690px;
margin: 0 auto;
padding: 10px 0 10px;
margin-right: 0px;
display: block;
height: 500px;
}

Acontece que as imagens da coluna do meio nao estao ficando no topo :S ja tentei de tudo e elas nao mudam de posicao nunca, alguem pode me ajudar?

Diéssica · Abril 23, 2012

Faz do jeito certo! :)

Primeira coluna:

float:left;

Segunda coluna (meio):

float:right;

rafaelcrvs · Abril 23, 2012

Oi diessica,

elas estao do lado certo, o problema e que eu quero alinhar as imagens da coluna do meio com a coluna lateral, entendeu?

obrigado.

Diéssica · Abril 23, 2012

Sim, eu entendi. Mas tu utilizou float pra posicionar as duas colunas?

rafaelcrvs · Abril 23, 2012

nao utilizei, e agora quando coloquei elas ficaram desocnfiguradas, mas como eu tiro aquele espaco em branco la de cima? como eu alinho a image das duas colunas?

Diéssica · Abril 23, 2012

nao utilizei, e agora quando coloquei elas ficaram desocnfiguradas

Rafael, eu entendi o problema da margem em cima das imagens, mas é importante estruturar da forma correta. Seria gambiarra achar uma solução para o que foi feito. Portanto, sugiro que, após revisar o código e repensar a usabilidade do mesmo, reestruture suas colunas utilizando a propriedade float (como sugeri no post #2). Se não conseguir ou não souber como fazer isso, volte a postar.

Exemplo — coluna meio:

.coluna1 {
       width: 690px;
       padding: 10px 0 10px;
       height: 500px;
       float:right;
}

Obs.: há um conflito no uso de margin:

       margin: 0 auto;
       [...]
       margin-right: 0px;

:bye:

rafaelcrvs · Abril 23, 2012

Realmente eu nao consegui Diessica.

Bom, na verdade eu so queria adicionar uma coluna lateral para colocar fotos na mesma, atualmente a minha pagina tem apenas uma coluna, aonde e inserido todo o conteudo. Ao inves de ter apenas essa coluna "principal", dentro dela eu queria uma lateral, conforme mostra na imagem a seguir. Vou postar o codigo abaixo SEM aquelas modificacoes ali em cima, o codigo abaixo e o ORIGINAL:

			<div id="content" class="container_24">

				<!-- BEGIN .columns -->
				<div class="columns">
				                <!-- BEGIN .team-member-wrap -->
								<div class="team-member-wrap dark">

									<div class="team-member-thumb"><img class="image left border" src="./images/team-member.jpg"/></div>
									<div class="team-member-thumb"><img class="image left border" src="./images/team-member.jpg"/></div>
									<div class="team-member-thumb"><img class="image right border" src="./images/team-member.jpg"/></div>
									<div class="team-member-thumb"><img class="image right border" src="./images/team-member.jpg"/></div>

								</div>
								<!-- END .team-member-wrap -->
														<div class="group">

						<div class="full_width">

							<h3 class="section-header"><span></span></h3>

							</div>

					</div>



					<!-- BEGIN .latest-from-gallery -->
						<div class="portfolio portfolio-4-col">

							<div class="portfolio-item light">
								<div class="fancycaption link-overlay portfolio-photo">
									<a class="fancybox-photo" href="#" title="Your title for the image">
										<img class="fade" src="../photos/200x140/1.jpg" alt="Photo" />
									</a>
								</div>
								<div class="portfolio-description">
									<a href="#"><h3>nome</h3></a>
								</div>
							</div>
							<div class="portfolio-item light">
								<div class="fancycaption link-overlay portfolio-photo">
									<a class="fancybox-photo" href="#" title="Your title for the image">
										<img class="fade" src="../photos/200x140/2.jpg" alt="Photo" />
									</a>
								</div>
								<div class="portfolio-description">
									<a href="#"><h3>nome</h3></a>
                                     </div>
							</div>
							<div class="portfolio-item light">
								<div class="fancycaption link-overlay portfolio-photo">
									<a class="fancybox-photo" href="#" title="Your title for the image">
										<img class="fade" src="../photos/200x140/3.jpg" alt="Photo" />
									</a>
								</div>
								<div class="portfolio-description">
									<a href="#"><h3>nome</h3></a>
								</div>
							</div>
							<div class="portfolio-item light">
								<div class="fancycaption link-overlay portfolio-photo">
									<a class="fancybox-photo" href="#" title="Your title for the image">
										<img class="fade" src="../photos/200x140/4.jpg" alt="Photo" />
									</a>
								</div>
								<div class="portfolio-description">
									<a href="#"><h3>nome</h3></a>
								</div>
							</div>
							<div class="portfolio-item light">
								<div class="fancycaption link-overlay portfolio-photo">
									<a class="fancybox-photo" href="#" title="Your title for the image">
										<img class="fade" src="../photos/200x140/5.jpg" alt="Photo" />
									</a>
								</div>
								<div class="portfolio-description">
									<a href="#"><h3>nome</h3></a>
								</div>
							</div>
							<div class="portfolio-item light">
								<div class="fancycaption link-overlay portfolio-photo">
									<a class="fancybox-photo" href="#" title="Your title for the image">
										<img class="fade" src="../photos/200x140/6.jpg" alt="Photo" />
									</a>
								</div>
								<div class="portfolio-description">
									<a href="#"><h3>nome</h3></a>
								</div>
							</div>
							<div class="portfolio-item light">
								<div class="fancycaption link-overlay portfolio-photo">
									<a class="fancybox-photo" href="#" title="Your title for the image">
										<img class="fade" src="../photos/200x140/7.jpg" alt="Photo" />
									</a>
								</div>
								<div class="portfolio-description">
									<a href="#"><h3>nome</h3></a>
								</div>
							</div>
							<div class="portfolio-item light">
								<div class="fancycaption link-overlay portfolio-photo">
									<a class="fancybox-photo" href="#" title="Your title for the image">
										<img class="fade" src="../photos/200x140/8.jpg" alt="Photo" />
									</a>
								</div>
								<div class="portfolio-description">
									<a href="#"><h3>nome</h3></a>
								</div>
							</div>

						</div>
					<!-- END .latest-from-gallery -->

					<div class="divider"></div>

				</div>
				<!-- END .columns -->

			</div>

Thiago Moraes · Abril 23, 2012

Trabalhe com float, como a Diéssica já postou...coluna esquerda = float: left, coluna direita = float: right, simples.

Quanto a posição da imagem, teria que analisar o seu código...tentei ver o que você postou mas tá com rolagem, aí fica difícil de te ajudar.

rafaelcrvs · Abril 23, 2012

Olá, sim, eu usei float quando ela falou, até aí, OK, elas ficam dos lados certos, mas meu grande problema é colocar as imagens da coluna do meio em cima do site, naquele espaço em branco lá em cima, entende?

Bom, eu colei ali em cima o código da única coluna que eu tenho no site, aonde está inserido TODO o conteúdo do mesmo.

Abraços,

Rafael

rafaelcrvs · Abril 23, 2012

to meio desesperado com essa situação =/

Se alguem puder me ajudar ou me explicar melhor as situações de cima..por que eu fiz e não deu certo ainda =/

Diéssica · Abril 23, 2012

Tá ok.

Posta todo o CSS e o HTML, de preferência sem margens de bloco.

rafaelcrvs · Abril 23, 2012

Codigo da pagina principal:

<!DOCTYPE HTML>
<html lang="en">
<head>


<!-- STYLESHEETS -->
   <link rel="stylesheet" type="text/css" href="./css/960.css" media="all" />
   <link rel="stylesheet" type="text/css" href="./css/style.css" media="all" />
<link rel="stylesheet" type="text/css" href="./fancybox/jquery.fancybox-1.3.4.css" media="all" />

<!-- STANDARD SCRIPTS -->
   <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript" src="./js/jquery.packed.js"></script>
<script type="text/javascript" src="./js/custom.js"></script>

<!-- PAGE SPECIFIC SCRIPTS -->
<script type="text/javascript" src="./js/nivo.slider.js"></script>

<script type="text/javascript">

	$(window).load(function() {
        $('#slider-nivo').nivoSlider();
    });

</script>

<title>Silence - Homepage Nivo Slider</title>
<meta charset="UTF-8"></head>
<body>

<!-- BEGIN #header-wrapper -->
<div id="header-wrapper">

	<!-- BEGIN .header-bg -->
	<div class="header-bg">

		<!-- BEGIN .glow -->
		<div class="glow">

			<!-- BEGIN #header -->
			<div id="header">

				<!-- BEGIN #top -->
				<div id="top">

					<!-- BEGIN #top-inner -->
					<div id="top-inner">

						<!-- BEGIN #logo -->
						<div id="logo">

							<a href="#"><img src="./images/logo.png" alt="Logo" /></a>

						</div>
						<!-- END #logo -->

						<!-- BEGIN #nav-wrapper -->
						<div id="nav-wrapper">

							<!-- BEGIN #nav -->
							<ul id="nav">
								<li class="home-page"><a href="./index-nivo.html">Home</a>
								<li><a href="./index-nivo.html">nome</a>
									<ul>
										<li><a href="./index-alternate.html">nome</a></li>
										<li><a href="./index-gallery-306.html">nome</a></li>
										<li><a href="./index-gallery-230.html">nome</a></li>
										<li><a href="./index-gallery-184.html">nome</a></li>
									</ul>
								</li>
								<li><a href="#">nome</a>
									<ul>
										<li><a href="./index.html">nome</a></li>
										<li><a href="./index-nivo.html">Nivo Slider</a></li>
										<li><a href="./index-roundabout.html">Roundabout Slider</a></li>
										<li><a href="./index-zaccordion.html">zAccordion Slider</a></li>
										<li><a href="./index-static-big.html">Big Static Image</a></li>
									</ul>
								</li>
								<li><a href="#">Pages</a>
									<ul>
										<li><a href="./about-us.html">About Us</a></li>
										<li><a href="./columns.html">Columns</a></li>
										<li><a href="./faq.html">FAQ</a></li>
										<li><a href="./galleries.html">Galleries</a></li>
										<li><a href="./leftnav.html">LeftNav</a></li>
										<li><a href="./rightnav.html">RightNav</a></li>
										<li><a href="#">Services</a>
											<ul>
												<li><a href="./services-dark.html">Dark Version</a></li>
												<li><a href="./services-light.html">Light Version</a></li>
											</ul>
										</li>
										<li><a href="./typography.html">Typography</a></li>
									</ul>
								</li>
								<li><a href="#">Elements</a>
									<ul>
										<li><a href="./acc-togl-tabs.html">Accordion, Toggles, Tabs</a></li>
										<li><a href="./images.html">Images</a></li>
										<li><a href="./messages.html">Messages</a></li>
										<li><a href="./pricing-table.html">Pricing Tables</a></li>
										<li><a href="./tables.html">Tables</a></li>
										<li><a href="#">Testimonials</a>
											<ul>
												<li><a href="./testimonial-dark.html">Dark Version</a></li>
												<li><a href="./testimonial-light.html">Light Version</a></li>
											</ul>
										</li>
									</ul>
								</li>
								<li><a href="#">Portfolios</a>
									<ul>
										<li><a href="./portfolio-2-col.html">Standard 2 Columns</a></li>
										<li><a href="./portfolio-3-col.html">Standard 3 Columns</a></li>
										<li><a href="./portfolio-4-col.html">Standard 4 Columns</a></li>
										<li><a href="./portfolio-filterable-2-col.html">Filterable 2 Columns</a></li>
										<li><a href="./portfolio-filterable-3-col.html">Filterable 3 Columns</a></li>
										<li><a href="./portfolio-filterable-4-col.html">Filterable 4 Columns</a></li>
										<li><a href="./portfolio-single-standard.html">Single Standard</a></li>
										<li><a href="./portfolio-single-slider.html">Single with Image Slider</a></li>
										<li><a href="./portfolio-single-video.html">Single with Video</a></li>
									</ul>
								</li>
								<li><a href="./blog.html">Blog</a>
									<ul>
										<li><a href="./blog-single.html">Blog Single</a></li>
									</ul>
								</li>
								<li><a href="./contact-us.html">Contato</a></li>
							</ul>
							<!-- END ul#nav -->

						</div>
						<!-- END ul#nav-wrapper -->

					</div>
					<!-- END #top-inner -->

				</div>
				<!-- END #top -->

				<!-- BEGIN #slider-wrapper -->
				<div id="slider-wrapper">

					<div id="slider-bg">

						<div id="slider-photos">

							<div id="slider-nivo" class="nivoSlider">
								<img src="../photos/900x360/1.jpg" alt="photo" />
								<a href="http://dev7studios.com"><img src="../photos/900x360/2.jpg" alt="photo" title="This is an example of a caption" /></a>
								<img src="../photos/900x360/3.jpg" alt="photo" />
								<img src="../photos/900x360/4.jpg" alt="photo" title="#htmlcaption" />
							</div>

						</div>

					</div>

				</div>
				<!-- END #slider-wrapper -->

			</div>
			<!-- END #header -->

		</div>
		<!-- END .glow -->

	</div>
	<!-- END .header-bg -->

</div>
<!-- END #header-wrapper -->

		<div class="lines-bg">

			<!-- BEGIN #content -->
			<div id="content" class="container_24">

				<!-- BEGIN .columns -->
				<div class="columns">
				                <!-- BEGIN .team-member-wrap -->
								<div class="team-member-wrap dark">

									<div class="team-member-thumb"><img class="image left border" src="./images/team-member.jpg"/></div>
									<div class="team-member-thumb"><img class="image left border" src="./images/team-member.jpg"/></div>
									<div class="team-member-thumb"><img class="image right border" src="./images/team-member.jpg"/></div>
									<div class="team-member-thumb"><img class="image right border" src="./images/team-member.jpg"/></div>

								</div>
								<!-- END .team-member-wrap -->
														<div class="group">

						<div class="full_width">

							<h3 class="section-header"><span></span></h3>

							</div>

					</div>



					<!-- BEGIN .latest-from-gallery -->
						<div class="portfolio portfolio-4-col">

							<div class="portfolio-item light">
								<div class="fancycaption link-overlay portfolio-photo">
									<a class="fancybox-photo" href="#" title="Your title for the image">
										<img class="fade" src="../photos/200x140/1.jpg" alt="Photo" />
									</a>
								</div>
								<div class="portfolio-description">
									<a href="#"><h3>nome</h3></a>
								</div>
							</div>
							<div class="portfolio-item light">
								<div class="fancycaption link-overlay portfolio-photo">
									<a class="fancybox-photo" href="#" title="Your title for the image">
										<img class="fade" src="../photos/200x140/2.jpg" alt="Photo" />
									</a>
								</div>
								<div class="portfolio-description">
									<a href="#"><h3>nome</h3></a>
                                     </div>
							</div>
							<div class="portfolio-item light">
								<div class="fancycaption link-overlay portfolio-photo">
									<a class="fancybox-photo" href="#" title="Your title for the image">
										<img class="fade" src="../photos/200x140/3.jpg" alt="Photo" />
									</a>
								</div>
								<div class="portfolio-description">
									<a href="#"><h3>nome</h3></a>
								</div>
							</div>
							<div class="portfolio-item light">
								<div class="fancycaption link-overlay portfolio-photo">
									<a class="fancybox-photo" href="#" title="Your title for the image">
										<img class="fade" src="../photos/200x140/4.jpg" alt="Photo" />
									</a>
								</div>
								<div class="portfolio-description">
									<a href="#"><h3>nome</h3></a>
								</div>
							</div>
							<div class="portfolio-item light">
								<div class="fancycaption link-overlay portfolio-photo">
									<a class="fancybox-photo" href="#" title="Your title for the image">
										<img class="fade" src="../photos/200x140/5.jpg" alt="Photo" />
									</a>
								</div>
								<div class="portfolio-description">
									<a href="#"><h3>nome</h3></a>
								</div>
							</div>
							<div class="portfolio-item light">
								<div class="fancycaption link-overlay portfolio-photo">
									<a class="fancybox-photo" href="#" title="Your title for the image">
										<img class="fade" src="../photos/200x140/6.jpg" alt="Photo" />
									</a>
								</div>
								<div class="portfolio-description">
									<a href="#"><h3>nome</h3></a>
								</div>
							</div>
							<div class="portfolio-item light">
								<div class="fancycaption link-overlay portfolio-photo">
									<a class="fancybox-photo" href="#" title="Your title for the image">
										<img class="fade" src="../photos/200x140/7.jpg" alt="Photo" />
									</a>
								</div>
								<div class="portfolio-description">
									<a href="#"><h3>nome</h3></a>
								</div>
							</div>
							<div class="portfolio-item light">
								<div class="fancycaption link-overlay portfolio-photo">
									<a class="fancybox-photo" href="#" title="Your title for the image">
										<img class="fade" src="../photos/200x140/8.jpg" alt="Photo" />
									</a>
								</div>
								<div class="portfolio-description">
									<a href="#"><h3>nome</h3></a>
								</div>
							</div>

						</div>
					<!-- END .latest-from-gallery -->

					<div class="divider"></div>

				</div>
				<!-- END .columns -->

			</div>
			<!-- END #content -->

		</div>

		<!-- BEGIN #footer-wrapper -->
		<div id="footer-wrapper">

			<!-- BEGIN #footer-bg -->
			<div id="footer-bg">

				<!-- BEGIN .footer-glow -->
				<div class="footer-glow">			

					<!-- BEGIN #footer -->
					<div id="footer" class="container_24">

						<div class="columns">

							<div class="one_fourth">

								<h4>From Our Flickr</h4>

								<div id="flickr-feed">

									<ul></ul>

								</div>

							</div>

							<div class="one_half">

								<h4>Recent Tweet</h4>

								<div id="tweets"></div>

								<p class="twitter-feed"><a href="#">Follow Us on Twitter</a> <img src="./images/twitter-icon.png" alt="twitter icon" /></p>

							</div>

							<div class="one_fourth last_column">

								<h4>Subscribe</h4>

								<ul class="subscribe">
									<li><a class="subscribe-fb" href="#"></a></li>
									<li><a class="subscribe-rss" href="#"></a></li>
									<li><a class="subscribe-tw" href="#"></a></li>
									<li><a class="subscribe-fl" href="#"></a></li>
									<li><a class="subscribe-in" href="#"></a></li>
									<li><a class="subscribe-yt" href="#"></a></li>
								</ul>

								<h5>Sign Up for Newsletter</h5>

								<div class="newsletter">
									<form class="newsletter-form" action="#" method="post">
										<fieldset>
											<input type="text" value="enter Your email here" size="30" id="newsletter-email" name="email">
											<input type="submit" class="newsletter-submit" value="">
										</fieldset>
									</form>
								</div>

							</div>

							<div class="clear"></div>

						</div>

						<div class="clear"></div>

					</div>
					<!-- END #footer -->


				</div>
				<!-- END .footer-glow -->

			</div>
			<!-- END #footer-bg -->

		</div>
		<!-- END #footer-wrapper -->

</body>
</html>

Codigo do CSS:

@import url(http://fonts.googleapis.com/css?family=Droid+Sans:400,700);
@import url(http://fonts.googleapis.com/css?family=Yanone+Kaffeesatz);

body {
font-size: 14px;
color: #444444;
font-family: 'Rockwell', Helvetica, sans-serif;
background: #eeeeee url(../images/main-bg.jpg);
}

.divider {
width: 100%;
height: 1px;
background: #e3e3e3;
clear: both;
display: block;
overflow: hidden;
margin-top: 30px;
margin-bottom: 50px;
}

.margin-bottom {
margin-bottom: 50px;
}

/* --------------------------- */
/*       	TYPOGRAPHY         
/* --------------------------- */

input, textarea {
font-family: 'Droid Sans', Helvetica, sans-serif;
}

h1, h2, h3, h4, h5, h6, #nav a, ul.tabs li a, .widget ul.tabs li a, .services ul.tabs li a {
font-family: 'Yanone Kaffeesatz', sans-serif;
}

h1, h2, h3, h4 {
margin-bottom: 0.8em;
text-shadow: 0 1px 1px rgba(0,0,0,0.2);
}

h5, h6 {
margin-bottom: 0.8em;
text-shadow: 0 1px 1px rgba(0,0,0,0.1);
}

h1 {
font-size: 28px;

}

h2 {
font-weight: normal;
font-size: 24px;
}

h3 {
font-size: 20px;	
font-weight: normal;
}

h4 {
font-size: 16px;	
font-weight: normal;
}

h5 {
font-size: 14px;	
font-weight: normal;
}

h6 {
font-size: 12px;	
font-weight: normal;
}

h1.section-header,
h2.section-header,
h3.section-header,
h4.section-header,
h5.section-header,
h6.section-header {
background: url(../images/headers-bg.jpg);
margin-bottom: 1.2em;
}

h1.section-header span,
h2.section-header span,
h3.section-header span,
h4.section-header span,
h5.section-header span,
h6.section-header span {
background: url(../images/main-bg.jpg);
padding: 0.1em 0.8em 0.1em 0;
}

a {
text-decoration: none;
color: #eb1212;
-webkit-transition: color .2s ease-in;
-moz-transition: color .2s ease-in;
-o-transition: color .2s ease-in;
transition: color .2s ease-in;
}

a:hover {
color: #000;
}

p {
line-height: 1.5em;	
padding-bottom: 1em;
}

ul {
margin-bottom: 30px;
margin-top: 5px;
list-style: none;
}

ul ul {
margin-bottom: 10px;
}

ul li {
padding: 5px 0;	
}

.dropcap1:first-letter, .dropcap2:first-letter, .dropcap3:first-letter {
margin-right: 10px;
width: 1em;
display: block;
float: left;
line-height: 1em; 
}

.dropcap1:first-letter {
   padding: 0.15em 0.2em;
color: #444;
   font-size: 380%;
}

.dropcap2:first-letter {
   padding: 0.3em 0.34em;
color: #eee;
   font-size: 320%;
text-align: center;
background: #444;
-webkit-border-radius: 0.3em;
-moz-border-radius: 0.3em;
border-radius: 0.3em;   
}

.dropcap3:first-letter {
   padding: 0.3em 0.34em;
color: #eee;
   font-size: 320%;
text-align: center;
background: #444;
-webkit-border-radius: 2.6em;
-moz-border-radius: 2.6em;
border-radius: 2.6em;   
}

blockquote {
margin-bottom: 12px;
}

blockquote.quoteleft {
padding-left: 40px;
font-style: italic;
line-height: 1.5em;	
background: url(../images/quote.png) no-repeat top left;
}

blockquote.quoteright {
padding-right: 40px;
font-style: italic;
line-height: 1.5em;	
background: url(../images/quote.png) no-repeat top right;
}

code, pre {
background: #fcfcfc;
color: #777;
padding: 15px;
border-left: 3px solid #bbb;
border-top: 1px dotted #bbb;
border-right: 1px dotted #bbb;
border-bottom: 1px dotted #bbb;
margin-bottom: 15px;
}

code {
display: inline-block;
}

:focus {-moz-outline-style: none; outline: none;}
a:focus {outline:none;}
a:active {outline:none;}

::-moz-selection {background-color:#eb1212;}
::-webkit-selection {background-color:#eb1212;}
::selection {background-color:#eb1212;}
::-moz-selection {color:#fff;}
::-webkit-selection {color:#fff;}
::selection {color:#fff;}

/* --------------------------- */
/*       	LIST STYLES         
/* --------------------------- */

ul.arrow li, ul.arrow2 li, ul.dot li, ul.minus li, ul.plus li, ul.triangle li {
padding-left: 14px;
}

ul.arrow li {background: url(../images/li-arrow.png) no-repeat left center;}
ul.arrow2 li {background: url(../images/li-arrow2.png) no-repeat left center;}
ul.dot li {background: url(../images/li-dot.png) no-repeat left center;}
ul.minus li {background: url(../images/li-minus.png) no-repeat left center;}
ul.plus li {background: url(../images/li-plus.png) no-repeat left center;}
ul.triangle li {background: url(../images/li-triangle.png) no-repeat left center;}

/* --------------------------- */
/*       	BUTTONS         
/* --------------------------- */

.button {
color: #eeeeee;
font-weight: bold;
text-align: center;
text-shadow: 0px -1px 1px rgba(0, 0, 0, .3);
background: #b8b8b8;
background-image: -webkit-gradient(linear, left top, left bottom, from(#b8b8b8), to(#929292));
background: -webkit-linear-gradient(top, #b8b8b8, #929292);
background: -moz-linear-gradient(top, #b8b8b8, #929292);
background: -o-linear-gradient(top, #b8b8b8, #929292);
background: -ms-linear-gradient(top, #b8b8b8, #929292);
background: linear-gradient(top, #b8b8b8, #929292);
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
border-radius: 2px;
-webkit-box-shadow: 0px 1px 1px 0px rgba(0, 0, 0, .3), inset 0px 1px 0px 0px rgba(255, 255, 255, .5);
-moz-box-shadow: 0px 1px 1px 0px rgba(0, 0, 0, .3), inset 0px 1px 0px 0px rgba(255, 255, 255, .5);
box-shadow: 0px 1px 1px 0px rgba(0, 0, 0, .3), inset 0px 1px 0px 0px rgba(255, 255, 255, .5);
position: relative;
display: inline-block;
margin-top: 5px;
margin-bottom: 5px;
}

.button.small {
font-size: 12px;
padding: 6px 15px;
}

.button.medium {
font-size: 12px;
padding: 8px 18px;
}

.button.large {
font-size: 14px;
padding: 12px 20px;
}

.button:hover {
background: #c52832;
background-image: -webkit-gradient(linear, left top, left bottom, from(#c52832), to(#a61c24));
background: -webkit-linear-gradient(top, #c52832, #a61c24);
background: -moz-linear-gradient(top, #c52832, #a61c24);
background: -o-linear-gradient(top, #c52832, #a61c24);
background: -ms-linear-gradient(top, #c52832, #a61c24);
background: linear-gradient(top, #c52832, #a61c24);
text-decoration: none;
color: #fff;
}

.button.yellow:hover {
background: #F49F0D;
background-image: -webkit-gradient(linear, left top, left bottom, from(#F9C52B), to(#F49F0D));
background: -webkit-linear-gradient(top, #F9C52B, #F49F0D);
background: -moz-linear-gradient(top, #F9C52B, #F49F0D);
background: -o-linear-gradient(top, #F9C52B, #F49F0D);
background: -ms-linear-gradient(top, #F9C52B, #F49F0D);
background: linear-gradient(top, #F9C52B, #F49F0D);
}

.button.green:hover {
background: #82B21E;
background-image: -webkit-gradient(linear, left top, left bottom, from(#C8DD4B), to(#82B21E));
background: -webkit-linear-gradient(top, #C8DD4B, #82B21E);
background: -moz-linear-gradient(top, #C8DD4B, #82B21E);
background: -o-linear-gradient(top, #C8DD4B, #82B21E);
background: -ms-linear-gradient(top, #C8DD4B, #82B21E);
background: linear-gradient(top, #C8DD4B, #82B21E);
}

.button.blue1:hover {
background: #046795;
background-image: -webkit-gradient(linear, left top, left bottom, from(#089AB8), to(#046795));
background: -webkit-linear-gradient(top, #089AB8, #046795);
background: -moz-linear-gradient(top, #089AB8, #046795);
background: -o-linear-gradient(top, #089AB8, #046795);
background: -ms-linear-gradient(top, #089AB8, #046795);
background: linear-gradient(top, #089AB8, #046795);
}

.button.blue2:hover {
background: #0096E2;
background-image: -webkit-gradient(linear, left top, left bottom, from(#00B7F3), to(#0096E2));
background: -webkit-linear-gradient(top, #00B7F3, #0096E2);
background: -moz-linear-gradient(top, #00B7F3, #0096E2);
background: -o-linear-gradient(top, #00B7F3, #0096E2);
background: -ms-linear-gradient(top, #00B7F3, #0096E2);
background: linear-gradient(top, #00B7F3, #0096E2);
}

.button.black:hover {
background: #222;
background-image: -webkit-gradient(linear, left top, left bottom, from(#444), to(#222));
background: -webkit-linear-gradient(top, #444, #222);
background: -moz-linear-gradient(top, #444, #222);
background: -o-linear-gradient(top, #444, #222);
background: -ms-linear-gradient(top, #444, #222);
background: linear-gradient(top, #444, #222);
}

.button.orange1:hover {
background: #C95C48;
background-image: -webkit-gradient(linear, left top, left bottom, from(#E27056), to(#C95C48));
background: -webkit-linear-gradient(top, #E27056, #C95C48);
background: -moz-linear-gradient(top, #E27056, #C95C48);
background: -o-linear-gradient(top, #E27056, #C95C48);
background: -ms-linear-gradient(top, #E27056, #C95C48);
background: linear-gradient(top, #E27056, #C95C48);
}

.button.orange2:hover {
background: #FE7727;
background-image: -webkit-gradient(linear, left top, left bottom, from(#FB9948), to(#FE7727));
background: -webkit-linear-gradient(top, #FB9948, #FE7727);
background: -moz-linear-gradient(top, #FB9948, #FE7727);
background: -o-linear-gradient(top, #FB9948, #FE7727);
background: -ms-linear-gradient(top, #FB9948, #FE7727);
background: linear-gradient(top, #FB9948, #FE7727);
}

.button.brown:hover {
background: #DFA86D;
background-image: -webkit-gradient(linear, left top, left bottom, from(#EDBB85), to(#DFA86D));
background: -webkit-linear-gradient(top, #EDBB85, #DFA86D);
background: -moz-linear-gradient(top, #EDBB85, #DFA86D);
background: -o-linear-gradient(top, #EDBB85, #DFA86D);
background: -ms-linear-gradient(top, #EDBB85, #DFA86D);
background: linear-gradient(top, #EDBB85, #DFA86D);
}

.button.violet:hover {
background: #495AA8;
background-image: -webkit-gradient(linear, left top, left bottom, from(#A497CF), to(#495AA8));
background: -webkit-linear-gradient(top, #A497CF, #495AA8);
background: -moz-linear-gradient(top, #A497CF, #495AA8);
background: -o-linear-gradient(top, #A497CF, #495AA8);
background: -ms-linear-gradient(top, #A497CF, #495AA8);
background: linear-gradient(top, #A497CF, #495AA8);
}

/* --------------------------- */
/*       	TABLES      
/* --------------------------- */

/* light version */

table {
border-collapse: collapse;
margin-bottom: 40px;
margin-top: 5px;
border-top: 1px solid #ccc;
border-right: 1px solid #ccc;
-webkit-box-shadow: 0px 0px 1px 1px rgba(150, 150, 150, 0.1);
-moz-box-shadow: 0px 0px 1px 1px rgba(150, 150, 150, 0.1);
box-shadow: 0px 0px 1px 1px rgba(150, 150, 150, 0.1); 
}

td, th {
border-bottom: 1px solid #ccc;
text-align: center;
}

td {
border-left: 1px solid #ccc;
background: #fafafa;
color: #777;
padding: 1em 2.2em;
font-size: 12px;
}

tr.even td {
background: #f6f6f6;
}

th {
background: #ebebed;
color: #666;
padding: 1.6em 1.9em;
text-shadow: 0 1px 1px rgba(255,255,255,0.8);
font-size: 12px;
}

th.first-th {
border-left: 1px solid #ccc;
}

/* dark version */

.table-dark td, .table-dark th {
border-bottom: 1px solid #333;
text-align: center;
}

.table-dark td {
border-left: 1px solid #333;
background: #5a5a5a;
color: #ddd;
}

.table-dark tr.even td {
background: #555555;
}

.table-dark th {
background: #454545;
background-image: -webkit-gradient(linear, left top, left bottom, from(#565656), to(#454545));
background: -webkit-linear-gradient(top, #565656, #454545);
background: -moz-linear-gradient(top, #565656, #454545);
background: -o-linear-gradient(top, #565656, #454545);
background: -ms-linear-gradient(top, #565656, #454545);
background: linear-gradient(top, #565656, #454545);
color: #eee;
text-shadow: 0 1px 1px rgba(0,0,0,0.4);
}

.table-dark th.first-th {
border-left: 1px solid #333;
}

tr td:hover, tr.even td:hover, tr.odd td:hover {
background: #c52832;
background-image: -webkit-gradient(linear, left top, left bottom, from(#c52832), to(#a61c24));
background: -webkit-linear-gradient(top, #c52832, #a61c24);
background: -moz-linear-gradient(top, #c52832, #a61c24);
background: -o-linear-gradient(top, #c52832, #a61c24);
background: -ms-linear-gradient(top, #c52832, #a61c24);
background: linear-gradient(top, #c52832, #a61c24);
color: #fff;
}

/* --------------------------- */
/*       	IMAGES STYLES      
/* --------------------------- */

.image.left {
float: left;
margin: 5px 25px 5px 0;	
}

.image.right {
float: right;
margin: 5px 0 5px 25px;	
}

.image.left.border {
float: left;
margin: 5px 25px 5px 0;	
border: 5px solid #ddd;
}

.image.right.border {
float: right;
margin: 5px 0 5px 25px;	
border: 5px solid #ddd;
}

.image-caption {
background: #ddd;
color: #666;
padding: 5px;
text-align: center;
width: 250px;
}

.image-caption p {
padding-bottom: 0;
}

.image-caption.left {
float: left;
margin: 5px 25px 5px 0;	
}

.image-caption.right {
float: right;
margin: 5px 0 5px 25px;	
}

/* --------------------------- */
/*       	HIGHLIGHTS         
/* --------------------------- */

.highlight1 {
color: #eee;
background: #222;
padding: 2px 4px;
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
border-radius: 2px; 
}

.highlight2 {
color: #eee;
background: #c42732;
padding: 2px 4px;
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
border-radius: 2px; 
}

/* --------------------------- */
/*         TESTIMONIALS         
/* --------------------------- */

.testimonials-wrap {
background: #fff;
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
border-radius: 2px; 
-webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
-moz-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
margin: 10px 0 20px;
}

.testimonials-wrap.light {
background: #fff;
background: -moz-linear-gradient(top, #fafafa 0%, #fff 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#fafafa), color-stop(100%,#fff));
background: -webkit-linear-gradient(top, #fafafa 0%,#fff 100%);
background: -o-linear-gradient(top, #fafafa 0%,#fff 100%);
background: -ms-linear-gradient(top, #fafafa 0%,#fff 100%);
background: linear-gradient(top, #fafafa 0%,#fff 100%);
}

.testimonials-wrap.dark {
background: #222;
background: -moz-linear-gradient(top, #444 0%, #222 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#444), color-stop(100%,#222));
background: -webkit-linear-gradient(top, #444 0%,#222 100%);
background: -o-linear-gradient(top, #444 0%,#222 100%);
background: -ms-linear-gradient(top, #444 0%,#222 100%);
background: linear-gradient(top, #444 0%,#222 100%);
color: #eee;
}

#quote_wrap {
padding: 20px 20px 20px 60px;
}

.testimonials-wrap.light #quote_wrap {
background: url(../images/quote.png) no-repeat 15px 25px;
}

.testimonials-wrap.dark #quote_wrap {
background: url(../images/quote-light.png) no-repeat 15px 25px;
}

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

/* --------------------------- */
/*       OVERLAYS STYLES       
/* --------------------------- */

.fancycaption {
position: relative;
overflow: hidden;
}

.photo-overlay {
background: url(../images/overlay-photo.png) center center;
}

.video-overlay {
background: url(../images/overlay-video.png) center center;
}

.audio-overlay {
background: url(../images/overlay-audio.png) center center;
}

.link-overlay {
background: url(../images/overlay-link.png) center center;
}

/* --------------------------- */
/*       	MESSAGES         
/* --------------------------- */

.message {
background: #444;
color: #d4d4d4;
padding: 20px;
-webkit-box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, .3);
-moz-box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, .3);
box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, .3); 
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
border-radius: 2px; 
margin: 10px 0 20px;
}

.message a {
color: #ddd;
border-bottom: transparent;
-webkit-transition: all .2s ease-in;
-moz-transition: all .2s ease-in;
-o-transition: all .2s ease-in;
transition: all .2s ease-in;
}

.message a:hover {
color: #fff;
border-bottom: 1px solid #fff;
}

.message p {
padding: 0 0 0 70px;
color: #fff;
text-shadow: 0 -1px 0 rgba(0,0,0,0.3);
}

.success {
background: #6E9E30;
background: -moz-linear-gradient(top, #7DB037 0%, #6E9E30 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#7DB037), color-stop(100%,#6E9E30));
background: -webkit-linear-gradient(top, #7DB037 0%,#6E9E30 100%);
background: -o-linear-gradient(top, #7DB037 0%,#6E9E30 100%);
background: -ms-linear-gradient(top, #7DB037 0%,#6E9E30 100%);
background: linear-gradient(top, #7DB037 0%,#6E9E30 100%);
}

.error {
background: #be282d;
background: -moz-linear-gradient(top, #d43e42 0%, #be282d 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#d43e42), color-stop(100%,#be282d));
background: -webkit-linear-gradient(top, #d43e42 0%,#be282d 100%);
background: -o-linear-gradient(top, #d43e42 0%,#be282d 100%);
background: -ms-linear-gradient(top, #d43e42 0%,#be282d 100%);
background: linear-gradient(top, #d43e42 0%,#be282d 100%);
}

.help {
background: #EA8C00;
background: -moz-linear-gradient(top, #F7990C 0%, #EA8C00 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#F7990C), color-stop(100%,#EA8C00));
background: -webkit-linear-gradient(top, #F7990C 0%,#EA8C00 100%);
background: -o-linear-gradient(top, #F7990C 0%,#EA8C00 100%);
background: -ms-linear-gradient(top, #F7990C 0%,#EA8C00 100%);
background: linear-gradient(top, #F7990C 0%,#EA8C00 100%);
}

.info {
background: #dff6fc;
background: -moz-linear-gradient(top, #e9f7fb 0%, #dff6fc 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#e9f7fb), color-stop(100%,#dff6fc));
background: -webkit-linear-gradient(top, #e9f7fb 0%,#dff6fc 100%);
background: -o-linear-gradient(top, #e9f7fb 0%,#dff6fc 100%);
background: -ms-linear-gradient(top, #e9f7fb 0%,#dff6fc 100%);
background: linear-gradient(top, #e9f7fb 0%,#dff6fc 100%);
}

.locked {
background: #ccc;
background: -moz-linear-gradient(top, #ddd 0%, #ccc 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ddd), color-stop(100%,#ccc));
background: -webkit-linear-gradient(top, #ddd 0%,#ccc 100%);
background: -o-linear-gradient(top, #ddd 0%,#ccc 100%);
background: -ms-linear-gradient(top, #ddd 0%,#ccc 100%);
background: linear-gradient(top, #ddd 0%,#ccc 100%);
}

.question {
background: #00578C;
background: -moz-linear-gradient(top, #018DB7 0%, #00578C 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#018DB7), color-stop(100%,#00578C));
background: -webkit-linear-gradient(top, #018DB7 0%,#00578C 100%);
background: -o-linear-gradient(top, #018DB7 0%,#00578C 100%);
background: -ms-linear-gradient(top, #018DB7 0%,#00578C 100%);
background: linear-gradient(top, #018DB7 0%,#00578C 100%);
}

.warning {
background: #EE9B2F;
background: -moz-linear-gradient(top, #FFC857 0%, #EE9B2F 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#FFC857), color-stop(100%,#EE9B2F));
background: -webkit-linear-gradient(top, #FFC857 0%,#EE9B2F 100%);
background: -o-linear-gradient(top, #FFC857 0%,#EE9B2F 100%);
background: -ms-linear-gradient(top, #FFC857 0%,#EE9B2F 100%);
background: linear-gradient(top, #FFC857 0%,#EE9B2F 100%);
}

.success .icon {background: url(../images/message-success.png) no-repeat 10px center;}
.error .icon {background: url(../images/message-error.png) no-repeat 10px center;}
.help .icon {background: url(../images/message-help.png) no-repeat 10px center;}
.info .icon {background: url(../images/message-info.png) no-repeat 10px center;}
.locked .icon {background: url(../images/message-locked.png) no-repeat 10px center;}
.question .icon {background: url(../images/message-question.png) no-repeat 10px center;}
.warning .icon {background: url(../images/message-warning.png) no-repeat 10px center;}

.info p, .locked p { color: #888; text-shadow: 0 -1px 0 rgba(255,255,255,0.3); }
.info a, .locked a { color: #666; }
.info a:hover, .locked a:hover { color: #000; border-bottom: 1px solid #000; }

/* --------------------------- */
/*       	CONTENT BOX         
/* --------------------------- */

.content-box {
padding: 20px 20px 5px;
margin-bottom: 20px;
}

.light-box, .dark-box {
-webkit-box-shadow: 0px 0px 1px 1px rgba(150, 150, 150, 0.1);
-moz-box-shadow: 0px 0px 1px 1px rgba(150, 150, 150, 0.1);
box-shadow: 0px 0px 1px 1px rgba(150, 150, 150, 0.1);
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
border-radius: 2px; 
}

.light-box {
background: #fafafa;
color: #666;
}

.light-box a {
border-bottom: transparent;
-webkit-transition: all .2s ease-in;
-moz-transition: all .2s ease-in;
-o-transition: all .2s ease-in;
transition: all .2s ease-in;
}

.light-box a:hover {
border-bottom: 1px solid #000;
}

.dark-box {
background: #444;
color: #eee;
}

.dark-box a {
color: #aaa;
border-bottom: transparent;
-webkit-transition: all .2s ease-in;
-moz-transition: all .2s ease-in;
-o-transition: all .2s ease-in;
transition: all .2s ease-in;
}

.dark-box a:hover {
color: #fff;
border-bottom: 1px solid #fff;
}

/* --------------------------- */
/*      TOTOP JQUERY PLUGIN       
/* --------------------------- */

#toTop {
display:none;
text-decoration:none;
position:fixed;
bottom:10px;
right:10px;
overflow:hidden;
width:51px;
height:51px;
border:none;
text-indent:-999px;
background:url(../images/ui.totop.png) no-repeat left top;
}

#toTopHover {
background:url(../images/ui.totop.png) no-repeat left -51px;
width:51px;
height:51px;
display:block;
overflow:hidden;
float:left;
opacity: 0;
-moz-opacity: 0;
filter:alpha(opacity=0);
}

#toTop:active, #toTop:focus {
outline: none;
}

/* --------------------------- */
/*        HEADER SECTION       
/* --------------------------- */

#header-wrapper {
background: #111;
}

.header-bg {
background: url(../images/carbon-bg.png);
}

.glow {
background: url(../images/glow1.png) top center no-repeat;
}

#header {
height: 570px;
}

#header-static {
height: 580px;
background: url(../images/big-photo-bg.jpg) top center no-repeat;
}

#header-small {
height: 220px;
}

#page-title {
width: 920px;
margin: 40px auto 0;
line-height: 80px;
-moz-border-radius-topleft: 2px;
-moz-border-radius-topright: 2px;
-webkit-border-radius: 2px 2px 0px 0px;
border-radius: 2px 2px 0px 0px; 
background: url(../images/top-bg.png);
}

#page-title h1 {
color: #fafafa;
font-weight: normal;
padding: 0 20px;
text-shadow: 0 1px 1px rgba(0, 0, 0, 0.4);
}

/* --------------------------- */
/*        TOP SECTION       
/* --------------------------- */

#top {
height: 100px;
}

#top-inner {
margin: 0 auto;
width: 920px;
}

/* --------------------------- */
/*        LOGO AND NAV       
/* --------------------------- */

#logo {
margin-top: 42px;
float: left;
}

#nav-wrapper {
float: right;
margin-top: 20px;
}

#nav {
float: right;
margin-top: 24px;
-webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
-moz-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
}

#nav,
#nav ul {
   list-style-type:none;
   list-style-position:outside;
   position:relative;
   line-height:18px;
z-index: 600;
}

#nav ul {
margin-top: 0;
}

#nav a {
   display:block;
height: 20px;
   padding: 10px 18px;
   color:#bbb;
   text-decoration:none;
border-bottom: none;
font-size: 20px;
text-shadow: 0px 1px 0 rgba(0,0,0,1);
text-transform: uppercase;
background: url(../images/subnav-bg.png);
}

#nav a:hover {
   color:#fff;

}

#nav li.home-page {
background: url(../images/subnav-bg.png);
padding-left: 8px;
} 

#nav li.home-page a {
text-indent: -9999px;
background: url(../images/home-page.png) no-repeat;
}

#nav li.home-page a:hover {
text-indent: -9999px;
background: url(../images/home-page.png) no-repeat 0 -40px;
}

#nav li {
   float:left;
   position:relative;
padding: 0;
}

#nav ul {
   position:absolute;
   width:200px;
padding:0;
   display:none;
background: url(../images/subnav-bg.png);
}

#nav li ul a {
   width:180px;
   float:left;
padding: 9px 0 10px 15px;
background: none;
}

#nav ul ul {
top:auto;
}

#nav li ul ul {
   left:195px;
   margin:0;
}

#nav li:hover ul ul,
#nav li:hover ul ul ul,
#nav li:hover ul ul ul ul {
   display:none;
}
#nav li:hover ul,
#nav li li:hover ul,
#nav li li li:hover ul,
#nav li li li li:hover ul {
   display:block;
-webkit-box-shadow: 0px 3px 3px 0px rgba(0,0,0,0.3);
-moz-box-shadow: 0px 3px 3px 0px rgba(0,0,0,0.3);
box-shadow: 0px 3px 3px 0px rgba(0,0,0,0.3); 
}

#nav ul li,
#nav ul ul li,
#nav ul ul ul li {
border-left: 5px solid transparent;
-webkit-transition: border-color .1s ease-in;
-moz-transition: border-color .1s ease-in;
-o-transition: border-color .1s ease-in;
transition: border-color .1s ease-in;
}

#nav ul li:hover,
#nav ul ul li:hover,
#nav ul ul ul li:hover {
background: url(../images/top-bg.png);
border-left: 5px solid #D10A0A;
}

#nav li.first-child {
-moz-border-radius-topleft: 2px;
-moz-border-radius-bottomleft: 2px;
-webkit-border-radius: 2px 0px 0px 2px;
border-radius: 2px 0px 0px 2px; 
}

#nav li.last-child a {
-moz-border-radius-topright: 2px;
-moz-border-radius-bottomright: 2px;
-webkit-border-radius: 0px 2px 2px 0px; 
border-radius: 0px 2px 2px 0px; 
}

/* --------------------------- */
/*        SLIDER      
/* --------------------------- */

#slider-wrapper {
margin: 40px auto;
width: 920px;
position: relative;
}

#slider-bg {
background: url(../images/top-bg.png);
width: 920px;
height: 380px;
} 

#slider-photos {
width: 900px;
height: 360px;
margin: 10px;
position: absolute;
}

/* --------------------------- */
/*   SLIDES, SLIDESHOW PLUGIN      
/* --------------------------- */

#slides {
position:absolute;
top:0;
left:0;
z-index:100;
}

.slides_container {
width:900px;
overflow:hidden;
position:relative;
display:none;
}

.slides_container div.slide {
width:900px;
height:380px;
display:block;
}

#slides .next, #slides .prev {
position:absolute;
top:146px;
left:0px;
width:30px;
height:70px;
display:block;
z-index:101;
}

#slides .next {
left:870px;
}

.pagination {
margin:0 auto;
width:120px; /* (14 * 6) + (6 * [3 * 2]) */
}

.pagination li {
float:left;
margin:0 3px;
list-style:none;
padding: 0;
}

.pagination li a {
display:block;
width:14px;
height:0;
padding-top:14px;
background:url(../images/slider-pagination.png) 0 -14px;
float:left;
overflow:hidden;
}

.pagination li.current a {
background:url(../images/slider-pagination.png) 0 0;
}

.caption {
z-index:500;
color:#fff;
text-shadow: 0 1px 1px rgba(0,0,0,0.3);
position:absolute;
bottom:0;
right:70px;
-webkit-box-shadow: 0px 0 2px 2px rgba(0,0,0,0.1);
-moz-box-shadow: 0px 0 2px 2px rgba(0,0,0,0.1);
box-shadow: 0px 0 2px 2px rgba(0,0,0,0.1);
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
border-radius: 2px; 
}

.caption h1 {
margin: 0;
padding: 10px 20px;
font-size: 20px;
text-transform: uppercase;
background: url(../images/caption-title-bg.png);
font-weight: normal;
}

.caption p {
background:#000;
background:rgba(0,0,0,.5);
padding: 10px 20px;
width: 280px;
}

.caption p a {
color: #ddd;
border-bottom: 1px solid transparent;
-webkit-transition: all .2s ease-in;
-moz-transition: all .2s ease-in;
-o-transition: all .2s ease-in;
transition: all .2s ease-in;
}

.caption p a:hover {
color: #fff;
border-bottom: 1px solid #fff;
}

/* --------------------------- */
/*        NIVO SLIDER      
/* --------------------------- */

#slider-nivo {
margin: 0 auto;
   width:900px; /* Make sure your images are the same size */
   height:360px; /* Make sure your images are the same size */
}

.nivoSlider {
position:relative;
background:#fff url(../images/nivo-loading.gif) no-repeat 50% 50%;
}

.nivoSlider img {
position:absolute;
top:0px;
left:0px;
display:none;
}

.nivoSlider a.nivo-imageLink {
position:absolute;
top:0px;
left:0px;
width:100%;
height:100%;
border:0;
padding:0;
margin:0;
z-index:6;
display:none;
}

.nivo-slice {
display:block;
position:absolute;
z-index:5;
height:100%;
}
.nivo-box {
display:block;
position:absolute;
z-index:5;
}

.nivo-caption {
position:absolute;
left:0px;
bottom:0px;
background:#000;
color:#ccc;
opacity:0.7; /* Overridden by captionOpacity setting */
width:100%;
z-index:8;
}

.nivo-caption p {
padding:15px;
margin:0;
}

.nivo-caption a {
display:inline !important;
color:#fff;
text-decoration: none;
border-bottom: 1px solid transparent;
-webkit-transition: border-color .2s ease-in;
-moz-transition: border-color .2s ease-in;
-o-transition: border-color .2s ease-in;
transition: border-color .2s ease-in;
}

.nivo-caption a:hover {
   color:#fff;
border-bottom: 1px solid #fff;
}

.nivo-html-caption {
   display:none;
}

.nivo-directionNav a {
position:absolute;
top:40%;
z-index:99;
cursor:pointer;
display:block;
text-indent:-9999px;
border:0;
}

.nivo-directionNav .nivo-prevNav {
background: url(../images/arrow-prev.png) no-repeat;
width:30px;
height:70px;
position:absolute;
left: 0;
}

.nivo-directionNav .nivo-nextNav {
background: url(../images/arrow-next.png) no-repeat;
width:30px;
height:70px;
position:absolute;
right:0;
}

.nivo-controlNav {
position:absolute;
left:50%;
bottom:-42px;
   margin-left:-38px; /* Tweak this to center bullets */
}

.nivo-controlNav a {
position:relative;
z-index:9;
cursor:pointer;
display:block;
width:14px;
height:14px;
background:url(../images/slider-pagination.png) no-repeat;
text-indent:-9999px;
border:0;
margin-right:6px;
float:left;
}
.nivo-controlNav a.active {
font-weight:bold;
background-position:0 -14px;
}

/* --------------------------- */
/*      ROUNDABOUT SLIDER       
/* --------------------------- */

#roundabout {
margin-top: 50px;
position: relative;
}

.roundabout-holder {
list-style: none;
width: 760px;
height: 370px;
margin: 1em auto;
}

.roundabout-moveable-item {
height: 350px;
width: 600px;
cursor: pointer;
margin: 0;
padding: 0;
-webkit-box-shadow: 0px 5px 10px 0px rgba(0, 0, 0, 0.3);
-moz-box-shadow: 0px 5px 10px 0px rgba(0, 0, 0, 0.3);
box-shadow: 0px 5px 10px 0px rgba(0, 0, 0, 0.3); 
}

.roundabout-moveable-item img {
width: 100%;
}

.roundabout-in-focus {
cursor: auto;
}

#roundabout-prev, #roundabout-next {
position: absolute;
width:35px;
height:35px;
top: 165px;
z-index: 1000;
cursor: pointer;
}

#roundabout-prev {
background:url(../images/arrow-prev2.png) no-repeat;
left: 0;
}

#roundabout-next {
background:url(../images/arrow-next2.png) no-repeat;
right: 0;
}

/* --------------------------- */
/*       ZACCORDION SLIDER       
/* --------------------------- */

ul#zaccordion {
margin: 0;
}

#zaccordion li {
overflow: visible !important;
-webkit-box-shadow: -2px 0px 5px 0px rgba(0, 0, 0, 0.2);
-moz-box-shadow: -2px 0px 5px 0px rgba(0, 0, 0, 0.2);
box-shadow: -2px 0px 5px 0px rgba(0, 0, 0, 0.2); 
}

#zaccordion .splash-bg {
background: url(../images/top-bg.png);
-webkit-box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.3);
-moz-box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.3);
box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.3); 
bottom: 20px;
height: 80px;
left: 25px;
position: absolute;
width: 650px;
z-index: 10;
}

#zaccordion .splash-info {
bottom: 30px;
height: 55px;
left: 40px;
position: absolute;
width: 620px;
z-index: 15;
}

#zaccordion .splash-info h2 {
font-size: 14px;
margin-bottom: 5px;
color: #eee;
}

#zaccordion .splash-info p {
font-size: 11px;
line-height: 1.3em;
text-shadow: none;
color: #eee;
margin: 0 !important;
}

#zaccordion .splash-info a {
color: #bbb;
border-bottom: 1px solid transparent;
-webkit-transition: all .2s ease-in;
-moz-transition: all .2s ease-in;
-o-transition: all .2s ease-in;
transition: all .2s ease-in;
}

#zaccordion .splash-info a:hover {
color: #fff;
border-bottom: 1px solid #fff;
}

/* --------------------------- */
/*        CONTENT SECTION       
/* --------------------------- */

#content a img {
border: 5px solid #fafafa;
-webkit-transition: border-color .2s ease-in;
-moz-transition: border-color .2s ease-in;
-o-transition: border-color .2s ease-in;
transition: border-color .2s ease-in;
}

#content a:hover img {
border: 5px solid #222;
}

.columns {
width: 920px;
margin: 0 auto;
padding: 50px 0 20px;
}

.lines-bg {
background: url(../images/bg-lines.png) top center;
}

/* --------------------------- */
/*     CONTENT HOME SECTIONS       
/* --------------------------- */

.latest-from-gallery p, .recent-projects p, .latest-from-blog p {
font-size: 12px;
}

.latest-from-gallery div div, .recent-projects div div, .latest-from-blog-thumb {
height: 148px;
width: 198px;
-webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
-moz-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
}

.latest-from-blog div div {
height: 98px;
width: 198px;
}

.latest-from-blog-desc h5 {
margin-top: 10px;
}

.latest-from-blog-desc p {
font-size: 11px;
}

.latest-from-blog-desc a {
font-style: italic;
}

/* --------------------------- */
/*        HOME GALLERY      
/* --------------------------- */

.home-gallery {
margin-bottom: 40px;
}

#content .home-gallery-item a img, #content .home-gallery-item a:hover img {
border: none;
}

.home-gallery-item {
float: left;
display: inline;
}

/* 3 photos inline */

.home-gallery-306 div {
width: 306px;
height: 180px;
}

/* 4 photos inline */

.home-gallery-230 div {
width: 230px;
height: 140px;
}

/* 5 photos inline */

.home-gallery-184 div { 
width: 184px;
height: 110px;
}

/* --------------------------- */
/*        HOME STANDARD      
/* --------------------------- */

.home-slogan {
background: url(../images/slogan-shadow.png) no-repeat center bottom;
height: 80px;
margin-bottom: 40px;
}

.home-slogan h1 {
font-size: 32px;
text-align: left;
font-weight: normal;
}

.home-box {
padding: 15px;
margin-bottom: 20px;
-webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
-moz-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
}

.home-box a h4 {
margin-bottom: 1em;
color: #888;
-webkit-transition: color .2s ease-in;
-moz-transition: color .2s ease-in;
-o-transition: color .2s ease-in;
transition: color .2s ease-in;
}

.home-box-photo {
height: 110px;
margin-bottom: 15px;
}

.home-box p {
padding: 0;
font-size: 12px;
}

a.home-box-more {
display: block;
margin-top: 10px;
font-style: italic;
color: #888;
}

a.home-box-more:hover, .home-box a:hover h4 {
color: #eb1212;
}

/* colors */

.home-box.light {
background: #fff;
background: -moz-linear-gradient(top, #fefefe 0%, #fff 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#fefefe), color-stop(100%,#fff));
background: -webkit-linear-gradient(top, #fefefe 0%,#fff 100%);
background: -o-linear-gradient(top, #fefefe 0%,#fff 100%);
background: -ms-linear-gradient(top, #fefefe 0%,#fff 100%);
background: linear-gradient(top, #fefefe 0%,#fff 100%);
}

.home-box.dark {
background: #222;
background: -moz-linear-gradient(top, #444 0%, #222 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#444), color-stop(100%,#222));
background: -webkit-linear-gradient(top, #444 0%,#222 100%);
background: -o-linear-gradient(top, #444 0%,#222 100%);
background: -ms-linear-gradient(top, #444 0%,#222 100%);
background: linear-gradient(top, #444 0%,#222 100%);
color: #eee;
}

.home-box.dark a h4, .home-box.dark a.home-box-more {
color: #bbb;
}

.home-box.light a:hover h4, .home-box.light a.home-box-more:hover {
color: #000;
}

.home-box.dark a:hover h4, .home-box.dark a.home-box-more:hover {
color: #fff;
}

/* --------------------------- */
/*        HOME CAROUSEL      
/* --------------------------- */

.carousel {
width: 920px;
margin-bottom: 30px;
}

.jcarousel-container {
width: 840px;
margin: 0 auto;
}

.carousel ul li {
padding: 0;	
position: relative;
overflow: hidden;
float: left;	
width: 126px;
height: 206px;
}

.jcarousel-skin-tango .jcarousel-direction-rtl {
direction: rtl;
}

.jcarousel-skin-tango .jcarousel-container-horizontal {
   padding: 0 40px;
margin-bottom: 5px;
}

.jcarousel-skin-tango .jcarousel-clip {
   overflow: hidden;
}

.jcarousel-skin-tango .jcarousel-clip-horizontal {
   height: 206px;
}

.jcarousel-skin-tango .jcarousel-item {
   width: 126px;
   height: 206px;
}

.jcarousel-clip {
margin: 0 auto;
}

#content .carousel a img {
border: 3px solid #fff;
-webkit-transition: border-color .2s ease-in;
-moz-transition: border-color .2s ease-in;
-o-transition: border-color .2s ease-in;
transition: border-color .2s ease-in;
}

#content .carousel a:hover img {
border: 3px solid #222;
}

.jcarousel-skin-tango .jcarousel-item-horizontal {
margin: 0 7px;
}

.jcarousel-skin-tango .jcarousel-direction-rtl .jcarousel-item-horizontal {
margin-left: 10px;
   margin-right: 0;
}

.jcarousel-skin-tango .jcarousel-item-placeholder {
   background: #fff;
   color: #000;
}


.jcarousel-skin-tango .jcarousel-next-horizontal, .jcarousel-skin-tango .jcarousel-prev-horizontal {
position: absolute;
   top: 87px;
width: 18px;
   height: 37px;
   cursor: pointer;
}

.jcarousel-skin-tango .jcarousel-next-horizontal {
   right: 0;
   background: url(../images/carousel-arrow-right.png) no-repeat 0 0;
}

.jcarousel-skin-tango .jcarousel-direction-rtl .jcarousel-next-horizontal {
   left: 0;
   right: auto;
   background-image: url(../images/carousel-arrow-left.png);
}

.jcarousel-skin-tango .jcarousel-next-horizontal:hover,
.jcarousel-skin-tango .jcarousel-next-horizontal:focus {
   background-position: 0 -37px;
}

.jcarousel-skin-tango .jcarousel-prev-horizontal {
   left: 0;
   background: transparent url(../images/carousel-arrow-left.png) no-repeat 0 0;
}

.jcarousel-skin-tango .jcarousel-direction-rtl .jcarousel-prev-horizontal {
   left: auto;
   right: 0;
   background-image: url(../images/carousel-arrow-right.png);
}

.jcarousel-skin-tango .jcarousel-prev-horizontal:hover, 
.jcarousel-skin-tango .jcarousel-prev-horizontal:focus {
   background-position: 0 -37px;
}

/* --------------------------- */
/*     ACCORDIONS AND TOGGLE         
/* --------------------------- */

.accordion, .toggle {
margin-bottom: 40px;
margin-top: 10px;
}

.accordion h4, .toggle h4 {
margin: 0;
background: #555;
background: -moz-linear-gradient(top, #888 0%, #555 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#888), color-stop(100%,#555));
background: -webkit-linear-gradient(top, #888 0%,#555 100%);
background: -o-linear-gradient(top, #888 0%,#555 100%);
background: -ms-linear-gradient(top, #888 0%,#555 100%);
background: linear-gradient(top, #888 0%,#555 100%);
border: 1px solid #555;
-webkit-box-shadow: inset 0px 2px 1px 0px rgba(255, 255, 255, 0.1);
-moz-box-shadow: inset 0px 2px 1px 0px rgba(255, 255, 255, 0.1);
box-shadow: inset 0px 2px 1px 0px rgba(255, 255, 255, 0.1); 
}

.accordion h4 a, .toggle h4 a {
display: block;
height: 15px;
line-height: 15px;
padding: 10px 10px 10px 40px;
color: #fff;
text-shadow: 0 1px 0 rgba(0,0,0,0.8);
font-size: 16px;
}

.accordion h4.acc-style-1 a, .toggle h4.acc-style-1 a {
background: url(../images/accordion-closed.png) 20px 13px no-repeat;
}

.accordion h4.acc-style-2 a, .toggle h4.acc-style-2 a {
background: url(../images/accordion-closed2.png) 12px 8px no-repeat;
}

.toggle h4.acc-style-faq a {
background: url(../images/accordion-closed3.png) 15px 12px no-repeat;
}

.accordion h4.ui-state-active, .toggle h4.active {
background: #222;
background: -moz-linear-gradient(top, #444 0%, #222 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#444), color-stop(100%,#222));
background: -webkit-linear-gradient(top, #444 0%,#222 100%);
background: -o-linear-gradient(top, #444 0%,#222 100%);
background: -ms-linear-gradient(top, #444 0%,#222 100%);
background: linear-gradient(top, #444 0%,#222 100%);
border: 1px solid #222;
}

.accordion h4.acc-style-1.ui-state-active a, .toggle h4.acc-style-1.active a {
background: url(../images/accordion-open.png) 18px 13px no-repeat;
}

.accordion h4.acc-style-2.ui-state-active a, .toggle h4.acc-style-2.active a {
background: url(../images/accordion-open2.png) 12px 8px no-repeat;
}

.toggle h4.acc-style-faq.active a {
background: url(../images/accordion-open3.png) 15px 12px no-repeat;
}

.accordion h4:hover, .accordion h4.ui-state-active:hover, .toggle h4:hover, .toggle h4.active:hover {
background: #c52832;
background-image: -webkit-gradient(linear, left top, left bottom, from(#c52832), to(#a61c24));
background: -webkit-linear-gradient(top, #c52832, #a61c24);
background: -moz-linear-gradient(top, #c52832, #a61c24);
background: -o-linear-gradient(top, #c52832, #a61c24);
background: -ms-linear-gradient(top, #c52832, #a61c24);
background: linear-gradient(top, #c52832, #a61c24);
border: 1px solid #a61c24;
}

.accordion div, .toggle div {
background: #fff;
padding: 20px;
font-size: 12px;
}

/* --------------------------- */
/*           TABS         
/* --------------------------- */

.tabs-wrapper {
margin-bottom: 35px;
-webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
-moz-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
}

ul.tabs {
margin: 0;
padding: 0;
float: left;
list-style: none;
width: 100%;
}

ul.tabs li {
float: left;
margin: 0;
padding: 8px 0;
border-left: none;
overflow: hidden;
position: relative;
text-align: center;
background: #555;
background: -moz-linear-gradient(top, #888 0%, #555 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#888), color-stop(100%,#555));
background: -webkit-linear-gradient(top, #888 0%,#555 100%);
background: -o-linear-gradient(top, #888 0%,#555 100%);
background: -ms-linear-gradient(top, #888 0%,#555 100%);
background: linear-gradient(top, #888 0%,#555 100%);
border-right: 1px solid #888;
border-left: 1px solid #555;
}

ul.tabs li.first-child {
border-left: none;
}

ul.tabs li.last-child {
border-right: none;
}

ul.tabs li a, .widget ul.tabs li a {
text-decoration: none;
display: block;
padding: 0;
outline: none;
color: #bbb;
font-size: 16px;
}

/*
tabs li widths (optional) in the demo width of the tabs is 440px, so:
440px - 4px (borders) = 436px
now spread 436px to 3 tab headers
*/

ul.tabs li.tab-li-1 {
width: 110px;
}

ul.tabs li.tab-li-2 {
width: 146px;
}

ul.tabs li.tab-li-3 {
width: 180px;
}

.widget ul.tabs li.tab-li-1 {
width: 92px;
}

.widget ul.tabs li {
border-bottom: none;
border-top: none;
}

.widget ul.tabs li.tab-li-2 {
width: 92px;
}

.widget ul.tabs li.tab-li-3 {
width: 92px;
}

ul.tabs li a:hover, .widget ul.tabs li a:hover {
color: #fff;
}

.tabs-inner {
border-top: none;
overflow: hidden;
clear: both;
float: left; width: 100%;
background: #fff;
}

.tabs-inner a {
color: #888;
}

.tab-content {
padding: 20px;
font-size: 12px;
}

ul.tabs li.active, ul.tabs li.active a {
background: #fff;
background: -moz-linear-gradient(top, #fafafa 0%, #fff 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#fafafa), color-stop(100%,#fff));
background: -webkit-linear-gradient(top, #fafafa 0%,#fff 100%);
background: -o-linear-gradient(top, #fafafa 0%,#fff 100%);
background: -ms-linear-gradient(top, #fafafa 0%,#fff 100%);
background: linear-gradient(top, #fafafa 0%,#fff 100%);
color: #444;
}

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

/* --------------------------- */
/*       	SERVICES      
/* --------------------------- */

.tabs-wrapper.services {
padding: 30px;
margin-top: 20px;
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
border-radius: 2px;
-webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
-moz-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
}

.tabs-wrapper.services.light {
background: #ddd;
background-image: -webkit-gradient(linear, left top, right top, from(#eee), to(#ddd));
background: -webkit-linear-gradient(left, #eee, #ddd);
background: -moz-linear-gradient(left, #eee, #ddd);
background: -o-linear-gradient(left, #eee, #ddd);
background: -ms-linear-gradient(left, #eee, #ddd);
background: linear-gradient(left, #eee, #ddd);
}

.tabs-wrapper.services.dark {
background: #444;
background-image: -webkit-gradient(linear, left top, right top, from(#444), to(#222));
background: -webkit-linear-gradient(left, #444, #222);
background: -moz-linear-gradient(left, #444, #222);
background: -o-linear-gradient(left, #444, #222);
background: -ms-linear-gradient(left, #444, #222);
background: linear-gradient(left, #444, #222);
}

.services ul.tabs {
margin: 0;
padding: 0;
list-style: none;
width: 200px;
}

.services ul.tabs li {
display: block;
width: 162px;
margin: 0;
padding: 12px 20px;
border: none;
overflow: hidden;
position: relative;
text-align: left;
background: none;
-moz-border-radius-topleft: 2px;
-moz-border-radius-bottomleft: 2px;
-webkit-border-radius: 2px 0px 0px 2px;
border-radius: 2px 0px 0px 2px; 
}

.services ul.tabs li a {
text-decoration: none;
display: block;
padding: 0;
outline: none;
color: #999;
font-size: 14px;
}

.services ul.tabs li a:hover {
color: #666;
}

.services .tabs-inner {
border-top: none;
overflow: hidden;
clear: right;
float: left;
width: 660px;
height: 100%;
background: #fff;
-webkit-box-shadow: -2px 2px 2px 0px rgba(0, 0, 0, 0.1);
-moz-box-shadow: -2px 2px 2px 0px rgba(0, 0, 0, 0.1);
box-shadow: -2px 2px 2px 0px rgba(0, 0, 0, 0.1);
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
border-radius: 2px;
}

.services .tab-content {
padding: 20px;
font-size: 12px;
}
.services ul.tabs li.active {
-webkit-box-shadow: -2px 2px 2px 0px rgba(0, 0, 0, 0.1);
-moz-box-shadow: -2px 2px 2px 0px rgba(0, 0, 0, 0.1);
box-shadow: -2px 2px 2px 0px rgba(0, 0, 0, 0.1);
z-index: 20;
}

.services ul.tabs li.active, .services ul.tabs li.active a {
background: #fff;
color: #444;
}

.services ul.tabs li.active a:hover {
color: #000;
}

#content .services a img, #content .services a:hover img {
border: none;
}

/* --------------------------- */
/*        PRICING TABLES       
/* --------------------------- */

.pricing-table {
width: 906px;
margin: 20px auto;
font-size: 14px;
color: #777777;
text-align: center;
}

.pt-column {
position: relative;
background: #fafafa;
color: #777777;
border: 1px solid #ddd;
margin: 10px 0;
z-index: 2;
}

.last_pt_column {
clear: right;
}

.pt-column h3 {
text-align: center;
height: 50px;
line-height: 50px;
font-size: 24px;
margin-bottom: 0;
background: #c52832;
background-image: -webkit-gradient(linear, left top, left bottom, from(#c52832), to(#a61c24));
background: -webkit-linear-gradient(top, #c52832, #a61c24);
background: -moz-linear-gradient(top, #c52832, #a61c24);
background: -o-linear-gradient(top, #c52832, #a61c24);
background: -ms-linear-gradient(top, #c52832, #a61c24);
background: linear-gradient(top, #c52832, #a61c24);
color: #fafafa;
}

.pt-column.pt-recommended {
-webkit-box-shadow: 0px 0px 15px 0px rgba(0, 0, 0, 0.2);
-moz-box-shadow: 0px 0px 15px 0px rgba(0, 0, 0, 0.2);
box-shadow: 0px 0px 15px 0px rgba(0, 0, 0, 0.2); 
margin-top: 0;
z-index: 10;
}

.pt-dark .pt-column.pt-recommended {
-webkit-box-shadow: 0px 0px 15px 0px rgba(0, 0, 0, 0.4);
-moz-box-shadow: 0px 0px 15px 0px rgba(0, 0, 0, 0.4);
box-shadow: 0px 0px 15px 0px rgba(0, 0, 0, 0.4); 
}

.pt-column.pt-recommended h3 {
padding: 5px 0;
position: relative;
}

.pt-column.pt-recommended h3 span.recommended, .pt-column.pt-recommended h3 span.bestvalue {
width: 95px;
height: 80px;
position: absolute;
top: -4px;
left: -5px;
z-index: 20;
}

.pt-column.pt-recommended h3 span.recommended {
background: url(../images/pt-recommended.png) no-repeat top left;
}

.pt-column.pt-recommended h3 span.bestvalue {
background: url(../images/pt-bestvalue.png) no-repeat top left;
}

.pt-cost {
height: 100px;
}

.pt-cost p {
line-height: 100px;
color: #eee;
font-size: 36px;
text-shadow: 0px 1px 1px #777;
}

.pt-cost p span {
font-size: 14px;
}

.pt-features ul {
list-style: none;
margin-bottom: 0;
margin-top: 0;
}

.pt-features ul li {
padding: 18px 20px;
border-bottom: 1px solid #f2f2f2;
background: green;
font-size: 12px;
}

.pt-buynow {
height: 50px;
padding: 15px 0;
}

.pt-light .pt-buynow, .pt-light .pt-cost {
background: #aaa;
background-image: -webkit-gradient(linear, left top, left bottom, from(#ddd), to(#aaa));
background: -webkit-linear-gradient(top, #ddd, #aaa);
background: -moz-linear-gradient(top, #ddd, #aaa);
background: -o-linear-gradient(top, #ddd, #aaa);
background: -ms-linear-gradient(top, #ddd, #aaa);
background: linear-gradient(top, #ddd, #aaa);	
}

.pt-dark .pt-buynow, .pt-dark .pt-cost {
background: #222;
background-image: -webkit-gradient(linear, left top, left bottom, from(#444), to(#222));
background: -webkit-linear-gradient(top, #444, #222);
background: -moz-linear-gradient(top, #444, #222);
background: -o-linear-gradient(top, #444, #222);
background: -ms-linear-gradient(top, #444, #222);
background: linear-gradient(top, #444, #222);	
}

.pt-light .pt-features ul li {
background: #f2f2f2;
background-image: -webkit-gradient(linear, left top, left bottom, from(#fafafa), to(#f2f2f2));
background: -webkit-linear-gradient(top, #fafafa, #f2f2f2);
background: -moz-linear-gradient(top, #fafafa, #f2f2f2);
background: -o-linear-gradient(top, #fafafa, #f2f2f2);
background: -ms-linear-gradient(top, #fafafa, #f2f2f2);
background: linear-gradient(top, #fafafa, #f2f2f2);
}

.pt-dark .pt-features ul li {
background: #333;
background-image: -webkit-gradient(linear, left top, left bottom, from(#3b3b3b), to(#333));
background: -webkit-linear-gradient(top, #3b3b3b, #333);
background: -moz-linear-gradient(top, #3b3b3b, #333);
background: -o-linear-gradient(top, #3b3b3b, #333);
background: -ms-linear-gradient(top, #3b3b3b, #333);
background: linear-gradient(top, #3b3b3b, #333);
color: #bbb;
}

.pt-dark .pt-column, .pt-dark .pt-features ul li {
border: 1px solid #444;
}

.pt-recommended .pt-buynow {
padding: 20px 0;
}

.pt-buynow a {
font-size: 18px;
text-transform: uppercase;
padding: 7px 14px;
}

.pricing-3-col {
width: 300px;
float: left;
}

.pricing-4-col {
width: 224px;
float: left;
}

/* --------------------------- */
/*         GALLERIES       
/* --------------------------- */

.gallery {
overflow: hidden;
}

.gallery ul li {
padding: 0;
float: left;
}

.gallery-2-col li, .gallery-3-col li, .gallery-4-col li, .gallery-6-col li, .gallery-8-col li {
display: inline-block;
}

.gallery-2-col li {
height: 260px;
margin: 10px;
}

.gallery-3-col li {
height: 180px;
margin: 13px;
}

.gallery-4-col li {
height: 150px;
margin: 10px;	
}

.gallery-6-col li {
height: 110px;
margin: 11px;	
}

/* --------------------------- */
/*        PORTFOLIO STATIC     
/* --------------------------- */

.portfolio {
overflow: hidden;
}

.portfolio-item {
padding: 0;
float: left;
margin-bottom: 10px;
}

.portfolio-item:hover {
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
border-radius: 2px;
-webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
-moz-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
}

.portfolio-2-col .portfolio-photo, .portfolio-3-col .portfolio-photo, .portfolio-4-col .portfolio-photo {
display: inline-block;
}

/* PORTFOLIO 2 COLUMNS */

.portfolio-2-col .portfolio-photo {
height: 200px;
margin: 15px 15px 0;
}

.portfolio-2-col .portfolio-description {
width: 400px;
margin: 15px;
padding: 10px;
font-size: 12px;
}

/* PORTFOLIO 3 COLUMNS */

.portfolio-3-col .portfolio-photo {
height: 180px;
margin: 13px 13px 0;
}

.portfolio-3-col .portfolio-description {
width: 250px;
margin: 15px;
padding: 10px;
font-size: 12px;
}

/* PORTFOLIO 4 COLUMNS */

.portfolio-4-col .portfolio-photo {
height: 150px;
margin: 10px 10px 0;	
}

.portfolio-4-col .portfolio-description {
width: 180px;
margin: -5px;
padding: 10px;
font-size: 12px;
text-align: center;
}

/* PORTFOLIO ITEM STYLES */

.portfolio-item:hover.light {
background: #fff;
background-image: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#fafafa));
background: -webkit-linear-gradient(top, #fff, #fafafa);
background: -moz-linear-gradient(top, #fff, #fafafa);
background: -o-linear-gradient(top, #fff, #fafafa);
background: -ms-linear-gradient(top, #fff, #fafafa);
background: linear-gradient(top, #fff, #fafafa);
}

#content .portfolio-item:hover.light img {
border: 5px solid #888;
}

#content .portfolio-item:hover.dark img {
border: 5px solid #222;
}

.portfolio-item:hover.dark {
background: #222;
background-image: -webkit-gradient(linear, left top, left bottom, from(#444), to(#222));
background: -webkit-linear-gradient(top, #444, #222);
background: -moz-linear-gradient(top, #444, #222);
background: -o-linear-gradient(top, #444, #222);
background: -ms-linear-gradient(top, #444, #222);
background: linear-gradient(top, #444, #222);	
color: #eee;
}

.light .portfolio-description a, .dark .portfolio-description a {
color: #8B0000;
}

.light .portfolio-description a:hover {
color: #222;
}

.dark .portfolio-description a:hover {
color: #eee;
}

/* --------------------------- */
/*     PORTFOLIO FILTERABLE       
/* --------------------------- */

ul.filter {
display: block;
width: 902px;
margin-top: -10px;
list-style: none;
margin-bottom: 0;
}

.filter li {
display: inline;
}

.filter li.filter-name {
margin-right: 20px;
}

.filter a {
font-size: 12px;
color: #aaa;
padding: 4px 15px;
background: #fff;
background: -moz-linear-gradient(top, #fcfcfc 0%, #fff 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#fcfcfc), color-stop(100%,#fff));
background: -webkit-linear-gradient(top, #fcfcfc 0%,#fff 100%);
background: -o-linear-gradient(top, #fcfcfc 0%,#fff 100%);
background: -ms-linear-gradient(top, #fcfcfc 0%,#fff 100%);
background: linear-gradient(top, #fcfcfc 0%,#fff 100%);
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
border-radius: 2px;
-webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
-moz-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
margin: 7px;
display: inline-block;
text-decoration: none;
}

.filter a:hover {
color: #222;
}

.filter li.current a {
color: #bbb;
background: #444;
background: -moz-linear-gradient(top, #444 0%, #222 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#444), color-stop(100%,#222));
background: -webkit-linear-gradient(top, #444 0%,#222 100%);
background: -o-linear-gradient(top, #444 0%,#222 100%);
background: -ms-linear-gradient(top, #444 0%,#222 100%);
background: linear-gradient(top, #444 0%,#222 100%);
}

.filter li.current a:hover {
color: #fff;
}

#portfolio-filterable-wrapper {
display:block;
overflow:hidden;
}

#portfolio-filterable-wrapper ul {
overflow:hidden;
margin-bottom: 0;
list-style: none outside none;
}

#portfolio-filterable-wrapper ul.hidden {
display:none;
}

#portfolio-filterable-wrapper.portfolio-filterable-2-col, #portfolio-filterable-wrapper.portfolio-filterable-3-col, #portfolio-filterable-wrapper.portfolio-filterable-4-col {
margin-bottom: 15px;
}

#portfolio-filterable-wrapper.portfolio-filterable-2-col li {
float: left;
height: 260px;
list-style: none outside none;
margin: 10px;
padding: 0;
position: relative;
width: 440px;
-webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
-moz-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
}

#portfolio-filterable-wrapper.portfolio-filterable-3-col li {
float: left;
height: 190px;
list-style: none outside none;
margin: 10px;
padding: 0;
position: relative;
width: 285px;
-webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
-moz-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
}

#portfolio-filterable-wrapper.portfolio-filterable-4-col li {
float: left;
height: 160px;
list-style: none outside none;
margin: 15px 10px;
padding: 0;
position: relative;
width: 210px;
-webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
-moz-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
}

/* --------------------------- */
/*        PORTFOLIO SINGLE     
/* --------------------------- */

.portfolio-single-photo {
border: 5px solid #fff;
-webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
-moz-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
}

.portfolio-single-meta {
font-size: 12px;
margin-bottom: 15px;
padding-bottom: 15px;
border-bottom: 1px solid #ddd;
line-height: 1.5em;
}

.portfolio-single-meta span {
font-weight: bold;
}

.portfolio-single-meta ul {
margin-bottom: 5px;
}

.portfolio-single-meta ul li a {
color: #888;
border-bottom: 1px solid transparent;
-webkit-transition: all .2s ease-in;
-moz-transition: all .2s ease-in;
-o-transition: all .2s ease-in;
transition: all .2s ease-in;
}

.portfolio-single-meta ul li a:hover {
color: #000;
border-bottom: 1px solid #000;
}

.portfolio-single .see-online-btn {

}

/* SLIDES */

.slides-portfolio-wrapper {
height: 280px;
width: 600px;
position: relative;
display: block;
}

#slides-portfolio-single {
position:absolute;
top:0;
left:0;
z-index:100;
}

#slides-portfolio-single .slides_container {
width:600px;
overflow:hidden;
position:relative;
display:none;
}

#slides-portfolio-single .slides_container div.slide {
width:600px;
height:280px;
display:block;
}

#slides-portfolio-single a img, #slides-portfolio-single a:hover img {
border: none;
}

#slides-portfolio-single .next, #slides-portfolio-single .prev {
position:absolute;
top:110px;
left:0px;
width:30px;
height:70px;
display:block;
z-index:101;
}

#slides-portfolio-single .next {
left:570px;
}

/* --------------------------- */
/*          ABOUT US       
/* --------------------------- */

.team-member-wrap {
background: #ddd;
padding: 20px;
-webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
-moz-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
border-radius: 10px;
margin-bottom: 25px;
overflow: hidden;
}

.team-member-wrap.light {
background: #fafafa;
background-image: -webkit-gradient(linear, left top, right top, from(#fdfdfd), to(#fafafa));
background: -webkit-linear-gradient(left, #fdfdfd, #fafafa);
background: -moz-linear-gradient(left, #fdfdfd, #fafafa);
background: -o-linear-gradient(left, #fdfdfd, #fafafa);
background: -ms-linear-gradient(left, #fdfdfd, #fafafa);
background: linear-gradient(left, #fdfdfd, #fafafa);
}

.team-member-wrap.dark {
background: #444;
background-image: -webkit-gradient(linear, left top, right top, from(#444), to(#222));
background: -webkit-linear-gradient(left, #444, #222);
background: -moz-linear-gradient(left, #444, #222);
background: -o-linear-gradient(left, #444, #222);
background: -ms-linear-gradient(left, #444, #222);
background: linear-gradient(left, #444, #222);
}

.team-member-description p {
font-size: 11px;
}

.team-member-description a {
border-bottom: 1px solid transparent;
-webkit-transition: all .2s ease-in;
-moz-transition: all .2s ease-in;
-o-transition: all .2s ease-in;
transition: all .2s ease-in;
color: #888;
}

.team-member-wrap.dark .team-member-description a:hover {
border-bottom: 1px solid #fff;
color: #fff;
}

.team-member-wrap.light .team-member-description a:hover {
border-bottom: 1px solid #000;
color: #000;
}

.team-member-wrap.dark .team-member-description h5, .team-member-wrap.dark .team-member-description p {
color: #ddd;
}

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

.post {
margin-bottom: 16px;
}

.post h2, .post-small h2 {
margin-bottom: 15px;
}

.post h2 a {
color: #666;
}

.post h2 a:hover {
color: #eb1212;
}

.post-small {
margin-bottom: 10px;
}

.meta {
font-size: 11px;
line-height: 1.3em;
padding: 0 10px;
margin-bottom: 5px;
width: 140px;
border-left: 2px solid #222;
float: left;
}

.meta span {
padding: 5px 0 5px 24px;
display: block;
}

.meta span.meta-author {
background: url(../images/meta-author.png) no-repeat center left;
}

.meta span.meta-date {
background: url(../images/meta-date.png) no-repeat center left;
}

.meta span.meta-category {
background: url(../images/meta-category.png) no-repeat center left;
}

.meta span.meta-comments {
background: url(../images/meta-comments.png) no-repeat center left;
}

.meta a {
color: #999;
}

.meta a:hover {
color: #222;
}

.post-image-wrapper {
position: relative;
margin-bottom: 20px;
-webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
-moz-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
}

.post-single .post-image-wrapper-single img {
border: 5px solid #fafafa;
-webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
-moz-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
margin-bottom: 20px;
}

.post-image-wrapper div {
height: 160px;
}

.entry {
position: relative; 
}

.post-share {
display: block;
}

.share {
list-style: none;
position: absolute;
bottom: 0;
left: 0;
padding: 0;
margin-bottom: 0;
width: 200px;
float: left;
}

.share li {
padding: 0 20px 0 0;
float: left;
}

.share li a {
display: block;
width: 20px;
height: 20px;
float: left;
text-indent: -9999px;
}

.share-single li {
float: left;
padding-right: 15px;
}

.share-single li a {
display: block;
width: 20px;
height: 20px;
float: left;
text-indent: -9999px;
}

.post-share a.button {
margin-bottom: 0;
}

.share li.share-digg a, .share-single li.share-digg a {background: url(../images/share-btn.png) no-repeat 0 0;}
.share li.share-twitter a, .share-single li.share-twitter a {background: url(../images/share-btn.png) no-repeat -20px 0;}
.share li.share-facebook a, .share-single li.share-facebook a {background: url(../images/share-btn.png) no-repeat -40px 0;}

.share li.share-digg a:hover, .share-single li.share-digg a:hover {background: url(../images/share-btn.png) no-repeat 0 -20px;}
.share li.share-twitter a:hover, .share-single li.share-twitter a:hover {background: url(../images/share-btn.png) no-repeat -20px -20px;}
.share li.share-facebook a:hover, .share-single li.share-facebook a:hover {background: url(../images/share-btn.png) no-repeat -40px -20px;}

a.post-more {
float: right;
}

/* --------------------------- */
/*       	WP PAGE NAVI       
/* --------------------------- */

.wp-pagenavi {
padding: 4px 0;
margin-top: -20px;
clear:both;
color:#ddd;
}

.wp-pagenavi a, .wp-pagenavi span {
text-decoration:none;
color:#222;
background: #fff;
background: -moz-linear-gradient(top, #fff 0%, #fdfdfd 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#fff), color-stop(100%,#fdfdfd));
background: -webkit-linear-gradient(top, #fff 0%,#fdfdfd 100%);
background: -o-linear-gradient(top, #fff 0%,#fdfdfd 100%);
background: -ms-linear-gradient(top, #fff 0%,#fdfdfd 100%);
background: linear-gradient(top, #fff 0%,#fdfdfd 100%);
padding:7px 11px 6px;
margin:2px;
font-size:12px;
-webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
-moz-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
border-radius: 2px;
}

.wp-pagenavi a:hover, .wp-pagenavi span.current {
color:#fff;
background: #444;
background: -moz-linear-gradient(top, #444 0%, #222 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#444), color-stop(100%,#222));
background: -webkit-linear-gradient(top, #444 0%,#222 100%);
background: -o-linear-gradient(top, #444 0%,#222 100%);
background: -ms-linear-gradient(top, #444 0%,#222 100%);
background: linear-gradient(top, #444 0%,#222 100%);
}

.wp-pagenavi span.current {font-weight: bold;}


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


#commentlist li {
list-style: none;
margin-top: 20px;	
}

#commentlist .child li {
padding-left: 60px;
}

.vcard {
margin-bottom: 20px;	
}

.vcard .avatar {
float: left;
   height: 60px;
   margin-right: 20px;
   overflow: hidden;
   width: 60px;
border: 2px solid #fafafa;
-webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
-moz-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
}

.vcard .comment-author {
color: #222;
   display: block;
   font-weight: bold;
   padding: 4px 0;	
}

.vcard .comment-date {
color: #888;
   display: block;
   font-size: 11px;
   font-style: italic;	
}

.comment-content {
background: #fafafa;
   padding: 10px 14px;
   position: relative;	
line-height: 1.5em;
-webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
-moz-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
border-radius: 2px; 
}

.comment-connector {
background: url(../images/comment-connector.png) no-repeat;
height: 40px;
width: 50px;
   overflow: hidden;
   position: absolute;
   top: -40px;
left: 64px;
}

ul#commentlist {margin-bottom: 20px;}

#commentlist a.comment-reply-link {
margin: 10px 0 0;
padding: 3px 20px 1px;
font-size: 11px;
-webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
-moz-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
}

.cf-label {
width: 170px;
display: block;
float: left;
}

.cf-message {
margin-top: 10px;
display: block;
}

.top-labels {
clear: both;
overflow: hidden;
margin-bottom: 5px;
}

.name-label, .email-label {
margin-right: 35px;
}

#commentform label {
font-size: 12px;
}

#commentform input, #commentform textarea {
padding: 10px;
border: none;
margin: 5px 0;	
-webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
-moz-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
border-radius: 2px;
color: #444;
font-size: 12px;
}

#commentform input {
width: 170px;
}

#commentform input:hover, #commentform textarea:hover {
-webkit-box-shadow: 0px 0px 5px 0px rgba(150, 150, 150, 0.2);
-moz-box-shadow: 0px 0px 5px 0px rgba(150, 150, 150, 0.2);
box-shadow: 0px 0px 5px 0px rgba(150, 150, 150, 0.2);
}

#commentform textarea {
width: 580px;
height: 150px;
}

#commentform input[type="submit"] {
color: #eeeeee;
font-weight: bold;
text-align: center;
text-shadow: 0px -1px 1px rgba(0, 0, 0, .3);
background: #b8b8b8;
background-image: -webkit-gradient(linear, left top, left bottom, from(#b8b8b8), to(#929292));
background: -webkit-linear-gradient(top, #b8b8b8, #929292);
background: -moz-linear-gradient(top, #b8b8b8, #929292);
background: -o-linear-gradient(top, #b8b8b8, #929292);
background: -ms-linear-gradient(top, #b8b8b8, #929292);
background: linear-gradient(top, #b8b8b8, #929292);
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
border-radius: 2px;
position: relative;
display: inline-block;
margin-top: 5px;
margin-bottom: 5px;
-webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
-moz-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
cursor: pointer;
font-size: 12px;
padding: 5px;
}

#commentform input[type="submit"]:hover {
background: #c52832;
background-image: -webkit-gradient(linear, left top, left bottom, from(#c52832), to(#a61c24));
background: -webkit-linear-gradient(top, #c52832, #a61c24);
background: -moz-linear-gradient(top, #c52832, #a61c24);
background: -o-linear-gradient(top, #c52832, #a61c24);
background: -ms-linear-gradient(top, #c52832, #a61c24);
background: linear-gradient(top, #c52832, #a61c24);
text-decoration: none;
color: #fff;
}

/* --------------------------- */
/*          SIDEBAR         
/* --------------------------- */

.sidebar-nav {
-webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
-moz-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
}

.sidebar-nav ul {
margin: 0;
border: 1px solid #ccc;
}

.sidebar-nav h4 {
background: #444;
background: -moz-linear-gradient(top, #444 0%, #222 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#444), color-stop(100%,#222));
background: -webkit-linear-gradient(top, #444 0%,#222 100%);
background: -o-linear-gradient(top, #444 0%,#222 100%);
background: -ms-linear-gradient(top, #444 0%,#222 100%);
background: linear-gradient(top, #444 0%,#222 100%);
border-bottom: 1px solid #222;
color: #eee;
width: 240px;
padding: 10px 20px;
-webkit-border-top-left-radius: 2px;
-webkit-border-top-right-radius: 2px;
-moz-border-radius-topleft: 2px;
-moz-border-radius-topright: 2px;
border-top-left-radius: 2px;
border-top-right-radius: 2px;
margin-bottom: 0;
}

.sidebar-nav ul li {
padding: 0;
}

.sidebar-nav ul li a {
display: block;
padding: 10px 20px;
background: #fafafa url(../images/sidenav-normal.jpg) repeat-y left center;
border-bottom: 1px solid #ccc;
color: #888;
-webkit-box-shadow: inset 0px 1px 0px 1px rgba(255, 255, 255, 0.1);
-moz-box-shadow: inset 0px 1px 0px 1px rgba(255, 255, 255, 0.1);
box-shadow: inset 0px 1px 0px 1px rgba(255, 255, 255, 0.1); 
font-size: 11px;
font-weight: bold;
text-shadow: 0 1px 0 rgba(255,255,255,1);
}

.sidebar-nav ul li a:hover, .sidebar-nav ul li.active a:hover {
display: block;
padding: 10px 16px 10px 20px;
background: #f4f4f4 url(../images/sidenav-hover.png) no-repeat right center;
color: #000;
text-shadow: none;
border-bottom: 1px solid #ccc;
}

.sidebar-nav ul li.active a {
background: #c52832 url(../images/sidenav-active.jpg) repeat-y left center;
border-bottom: 1px solid #a61c24;
color: #eee;
text-shadow: 0 1px 1px rgba(0,0,0,0.4);
}

.sidebar-nav ul li.last-child a {
border-bottom: none;
}

.sidebar-nav ul li.first-child a {
border-top: none;
}

.sidebar-nav ul ul {
display: block;
padding: 10px 20px;
background: #d3d3d3 url(../images/sidenav-sub-bg.jpg) repeat-y left center;
color: #888;
-webkit-box-shadow: inset 0px 1px 0px 1px rgba(255, 255, 255, 0.1);
-moz-box-shadow: inset 0px 1px 0px 1px rgba(255, 255, 255, 0.1);
box-shadow: inset 0px 1px 0px 1px rgba(255, 255, 255, 0.1); 
font-size: 11px;
font-weight: bold;
text-shadow: 0 1px 1px rgba(255,255,255,1);
}

.sidebar-nav ul ul li a {
background: none;
border-bottom: 1px solid #ccc;
border-top: 1px solid #ddd;
-webkit-box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.1);
-moz-box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.1);
box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.1);
text-shadow: 0 1px 0 rgba(255,255,255,0.1);
color: #888;
}

.sidebar-nav ul ul li a:hover {
background: #d3d3d3 url(../images/sidenav-hover.png) no-repeat 0 center;
}

/* --------------------------- */
/*       SIDEBAR WIDGETS         
/* --------------------------- */

.widget {
margin-bottom: 40px;
}

.widget ul {
margin-top: 0;
margin-bottom: 0;
}

.widget ul li {
border-bottom: 1px solid #fff;
border-top: 1px solid #ddd;
padding: 10px 0;
}

.widget ul li.first-child {
border-top: none;
margin-top: 0;
}

.widget ul li.last-child {
border-bottom: none;
}

.widget ul li a {
display: block;
color: #999;
}

.widget ul li a:hover {
color: #222;
}

.sidebar-search {
position: relative;
}

input#search {
font-size: 10px;
color: #929292;
padding: 10px;
width: 260px;
background: #fff;
border: none;
-webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
-moz-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
border-radius: 2px;
}

.search-submit {
background: url(../images/newsletter-icon.png) no-repeat;
border: none;
position: absolute;
top: 5px;
right: 9px;
cursor: pointer;
width: 15px;
height: 21px;
}

input#search.focusfield {
-webkit-box-shadow: inset 0px 0px 1px 1px rgba(0, 0, 0, .2);
-moz-box-shadow: inset 0px 0px 1px 1px rgba(0, 0, 0, .2);
box-shadow: inset 0px 0px 1px 1px rgba(0, 0, 0, .2);
}

.widget .tags a {
background: #fcfcfc;
padding: 4px 10px;
-webkit-transition: all .2s ease-in;
-moz-transition: all .2s ease-in;
-o-transition: all .2s ease-in;
transition: all .2s ease-in;
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
border-radius: 2px;
display: inline-block;
position: relative;
margin: 4px 2px;
color: #888;
font-size: 11px;
font-weight: bold;
-webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
-moz-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
text-shadow: 0 1px 0 rgba(255,255,255,0.4);
}

.widget .tags a:hover {
color: #eee;
background: #444;
text-shadow: 0 1px 0 rgba(0,0,0,0.4);
}

.widget .tabs-wrapper .tabs-inner a {
border-bottom: 1px solid transparent;
-webkit-transition: all .2s ease-in;
-moz-transition: all .2s ease-in;
-o-transition: all .2s ease-in;
transition: all .2s ease-in;
}

.widget .tabs-wrapper .tabs-inner a:hover {
border-bottom: 1px solid #000;
color: #000;
}

/* --------------------------- */
/*   SIDEBAR LATEST PROJECTS   
/* --------------------------- */

.widget ul.latest-projects li {
padding: 15px 0 10px;
clear: both;
display: block;
overflow: hidden;
}

.widget ul.latest-projects li.first-child {
padding-top: 10px;
}

.widget ul.latest-projects li.last-child {
padding-bottom: 0;
}

#content .latest-project-image a {
width: 90px;
height: 90px;
float: left;	
-webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
-moz-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
}

#content .latest-project-image a:hover img {
border: 5px solid #888;
}

.latest-project-description {
padding-left: 110px;
}

.latest-project-description p {
font-size: 11px;
color: #999;
}

/* --------------------------- */
/*          CONTACT   
/* --------------------------- */

.contact-map {
margin-bottom: 30px;
}

.contact-map iframe {
border: 5px solid #fefefe;
-webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
-moz-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
}


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

#footer-wrapper {
background: #111;
}

#footer-bg {
background: url(../images/carbon-bg.png);
}

.footer-glow {
background: url(../images/footer-glow.png) no-repeat center center;
}

#footer, #footer-bottom {
color: #fff;
font-size: 12px;
}

#footer a, #footer-bottom a {
color: #bbb;
}

#footer a:hover, #footer-bottom a:hover {
color: #fff;
text-decoration: none;
}

#footer-bottom {
width: 920px;
margin: 0 auto;
}

#footer-bottom a {
border-bottom: 1px solid transparent;
}

#footer-bottom a:hover {
border-bottom: 1px solid #fff;
-webkit-transition: border-color .2s ease-in;
-moz-transition: border-color .2s ease-in;
-o-transition: border-color .2s ease-in;
transition: border-color .2s ease-in;
}

.copyright {
width: 280px;
float: left;
}

.copyright p {
padding-bottom: 10px;
}

.footer-nav {
width: 600px;
float: right;
}

.footer-nav ul {
float: right;
}

.footer-nav ul li {
float: left;
display: inline;
padding: 0;
margin: 0;
}

.footer-nav ul li a {
margin-left: 25px;
}

/* --------------------------- */
/*       FLICKR FEED       
/* --------------------------- */

#flickr-feed a {
height: 42px;
width: 42px;
display: block;
padding: 8px 8px 0 0;
float: left;	
}

#flickr-feed a img {
border: 2px solid #bbb;
-webkit-transition: border-color .2s ease-in;
-moz-transition: border-color .2s ease-in;
-o-transition: border-color .2s ease-in;
transition: border-color .2s ease-in;
}

#flickr-feed a img:hover {
 	border: 2px solid #fff;
}

#flickr-feed ul {
margin: 0;
}

#flickr-feed ul li {
border: none;	
padding: 0;
display: block;
float: left;
}

/* --------------------------- */
/*       TWITTER FEED       
/* --------------------------- */

ul.tweetList {
margin-bottom: 5px;
}

.tweetList li {
font-size: 12px;
padding: 0;
}

li.tweet_content_0 {
/* border-bottom: 1px solid #222; */
padding-bottom: 10px;
padding-top: 3px;
}

li.tweet_content_1 {
padding-top: 10px;
}

.tweetList p {
padding: 10px;
background: url(../images/top-bg.png);
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
border-radius: 2px;
border-top: #262626;
border-left: #262626;
border-bottom: #333;
border-right: #333;
}

.tweetList a {
border-bottom: 1px solid transparent;
-webkit-transition: all .2s ease-in;
-moz-transition: all .2s ease-in;
-o-transition: all .2s ease-in;
transition: all .2s ease-in;
}

.tweetList a:hover {
border-bottom: 1px solid #fff;
}

.tweetList small {
font-size: 11px;
display: block;
margin-top: 5px;
}

.twitter-feed {
float: right;
}

/* --------------------------- */
/*       SUBSCRIBE       
/* --------------------------- */

ul.subscribe {
margin-bottom: 20px;
margin-top: 0;
}

.subscribe li {
padding: 0;
position: relative;
display: inline-block;
margin: 0 2px;
}

.subscribe li.first-child {
margin-left: 0;
}

.subscribe li.last-child {
margin-right: 0;
}

.subscribe li a {
display: block;
width: 26px;
height: 26px;

}

li a.subscribe-fb,
li a.subscribe-rss,
li a.subscribe-tw,
li a.subscribe-fl,
li a.subscribe-in,
li a.subscribe-yt,
li a.subscribe-vi {
background-image: url(../images/social-buttons.png);
}

li a.subscribe-fb {background-position: 0 0;}
li a.subscribe-rss {background-position: -26px 0;}
li a.subscribe-tw {background-position: -52px 0;}
li a.subscribe-fl {background-position: -78px 0;}
li a.subscribe-in {background-position: -104px 0;}
li a.subscribe-yt {background-position: -130px 0;}
li a.subscribe-vi {background-position: -156px 0;}

li a.subscribe-fb:hover {background-position: 0 -26px;}
li a.subscribe-rss:hover {background-position: -26px -26px;}
li a.subscribe-tw:hover {background-position: -52px -26px;}
li a.subscribe-fl:hover {background-position: -78px -26px;}
li a.subscribe-in:hover {background-position: -104px -26px;}
li a.subscribe-yt:hover {background-position: -130px -26px;}
li a.subscribe-vi:hover {background-position: -156px -26px;}

.newsletter {
position: relative;
margin-top: 15px;
}

input#newsletter-email {
font-size: 10px;
color: #929292;
font-style: italic;
padding: 10px;
width: 180px;
background: #eee;
border: none;
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
border-radius: 2px;
-webkit-box-shadow: 0px 1px 1px 0px rgba(0, 0, 0, .3), inset 0px 1px 0px 0px rgba(255, 255, 255, .5);
-moz-box-shadow: 0px 1px 1px 0px rgba(0, 0, 0, .3), inset 0px 1px 0px 0px rgba(255, 255, 255, .5);
box-shadow: 0px 1px 1px 0px rgba(0, 0, 0, .3), inset 0px 1px 0px 0px rgba(255, 255, 255, .5);
}

.newsletter-submit {
background: url(../images/newsletter-icon.png) no-repeat;
border: none;
position: absolute;
top: 6px;
right: 9px;
cursor: pointer;
width: 15px;
height: 21px;
}

input#newsletter-email.focusfield {
-webkit-box-shadow: inset 0px 0px 2px 1px rgba(0, 0, 0, .3);
-moz-box-shadow: inset 0px 0px 2px 1px rgba(0, 0, 0, .3);
box-shadow: inset 0px 0px 2px 1px rgba(0, 0, 0, .3);
}

Obrigado diessica.

Arquivado

Ajuste de Colunas

Recommended Posts

rafaelcrvs 3

Compartilhar este post

Link para o post

Compartilhar em outros sites

Diéssica 140

Compartilhar este post

Link para o post

Compartilhar em outros sites

rafaelcrvs 3

Compartilhar este post

Link para o post

Compartilhar em outros sites

Diéssica 140

Compartilhar este post

Link para o post

Compartilhar em outros sites

rafaelcrvs 3

Compartilhar este post

Link para o post

Compartilhar em outros sites

Diéssica 140

Compartilhar este post

Link para o post

Compartilhar em outros sites

rafaelcrvs 3

Compartilhar este post

Link para o post

Compartilhar em outros sites

Thiago Moraes 32

Compartilhar este post

Link para o post

Compartilhar em outros sites

rafaelcrvs 3

Compartilhar este post

Link para o post

Compartilhar em outros sites

rafaelcrvs 3

Compartilhar este post

Link para o post

Compartilhar em outros sites

Diéssica 140

Compartilhar este post

Link para o post

Compartilhar em outros sites

rafaelcrvs 3

Compartilhar este post

Link para o post

Compartilhar em outros sites

printf iniciante básico

JAVA - Orientação para Invalidar Sessão

JAVA - Ajuda em Paginação

Fóruns

Tempo Real

Informação importante