/***Core layout**/
.bgTop{ background-color: #FFFFFF }
.marginTopHeader{ margin-top:0}
#logo h1, #logo a{ padding:0; line-height:0; font-size:1em; margin-bottom:0;}
div.menu{ text-align:right}
.bgMiddle{background: #48CECF url(../uploads/images/layout/bgMiddle.jpg) repeat-x; border-bottom:4px solid #226666}
.bgMiddle h1, .bgMiddle h2, .bgMiddle h3{ color:#004444; line-height:1.2em; margin-bottom:.2em;}
#content{ /*background:#FFFFFF url(../uploads/images/layout/bgContentBottom.jpg) no-repeat left bottom*/}
h1:first-letter
{
font-size:1.8em;
line-height:.4em;
letter-spacing:-4px;
}

.bgMiddle h3{ color:#FFFFFF; margin-bottom:0; line-height:1em}
.bgMiddle p{ color:#FFFFFF; margin-bottom:0; font-size:1.4em; font-family:'EnigmaticRegular', Arial, sans-serif;}
.bgTopContent{background: transparent url(../uploads/images/layout/bgContent.jpg) no-repeat; padding-bottom:0.8em; padding-top:1.2em}
.bgTopContent ul { margin:0 0 .5em 1.5em}
.bgTopContent strong {
color:#004444;
/*background-color:#FFFFFF;
   -moz-border-radius: 3px;
	-webkit-border-radius: 3px;
	padding:0 3px;
*/
}
.bgTopContent a:link, .bgTopContent strong a:link{ color:#004444 !important; text-decoration:underline}
.bgTopContent a:visited,  .bgTopContent strong a:visited{ color:#004444 !important}
.bgTopContent a:hover,  .bgTopContent strong a:hover{ color:#FFFFFF !important;}
.bgContent{background-color:#FFFFFF}
div.footer{color:#BBBBBB; border-top:4px solid #AAAAAA}
div.footer p{ margin-bottom:.4em !important;}
div.footer h4, div.footer h3,  div.footer h2{ color:#FFFFFF}
div.footer a:link{color:#36C8C8;}
div.footer a:visited{ color:#36C8C8;}
div.footer a:hover{ color:#FFFFFF;}
.lightBlue, .lightBlue a{ color:#FFFFFF !important}
.white{ color:#FFFFFF}

.noMarginBottom{ margin-bottom:0 !important}
.minMarginBottom{ margin-bottom:.4em !important}
.maxMarginBottom{ margin-bottom:1.4em !important}
.maxMarginTop { margin-top:1em !important}
.maxPadding { padding:1em !important}
.noMargin{ margin:0 !important}
.maxPaddingBottom { padding-bottom:1em !important}
.maxPaddingTop { padding-top:1em !important}
.minPadding{ padding:.4em !important}
.minPaddingTop{ padding-top:.4em !important}
.topBorder{border-top:1px dashed #eee; margin-top:1em;}
.textRight{ text-align:right}

#banner h1{ clear:both}
#menu{ clear:both}
/****secondary menu****/
div#cmsmstMenuSec { float:right; clear:both; margin-top:.6em}

div#cmsmstMenuSec .currentpage {}
div#cmsmstMenuSec ul {}
div#cmsmstMenuSec ul li { list-style-type:none; display:block; float:left; padding-right:.4em; margin-right:.4em; border-right:1px dashed #069}
/*div#cmsmstMenuSec ul li:last-child{ border-right:none}*/
div#cmsmstMenuSec ul li a, div#cmsmstMenuSec ul li a:visited { color:#3E3228}
/*div#cmsmstMenuSec ul li a:hover { color:#09C}*/

/*div#cmsmstMenuSec .bullet_sectionheader - To style section header*/
/*hr.separator - To style the ruler for the separator*/

/* Horizontal menu for the CMS CSS Menu Module */
/* by Alexander Endresen */

/* The wrapper clears the floating elements of the menu */

/* Fix for Opera 8 */
.clearb { clear: both; }
#menuwrapper { 
   /* Fix for Opera 8 */ 
   /*   overflow: hidden;  */
   float:right;
   margin-top:3.4em;
}

/* Set the width of the menu elements at second level. Leaving first level flexible. */
#primary-nav li li { 
   width: 200px; 
}


/* Unless you know what you do, do not touch this */ 
#primary-nav, #primary-nav ul { 
   list-style: none; 
   margin: 0px; 
   padding: 0px;
   font-size:1.1em; 
}
#primary-nav ul { 
   position: absolute; 
   top: auto; 
   display: none; 
}
#primary-nav ul ul { 
   margin-top: 1px;
   margin-left: -1px;
   left: 100%; 
   top: 0px; 
}
	
#primary-nav li { 
   float: left; 
}
#primary-nav li li { 
   margin-left: 0px;
   margin-top: -1px;
   float: none; 
   position: relative; 
}

/* Styling the basic apperance of the menu elements */
#primary-nav a { 
   display: block; 
   margin: 0px; 
   padding: 2px 10px; 
   text-decoration: none; 
   color: #333333;
}
#primary-nav li a { 
   border-right: 1px solid #FFF;
   border-left: 1px solid #FFF;
   font-size:1.2em
}
/*#primary-nav li:last-child a { 
   border-right: none;
}
#primary-nav li:first-child a { 
   border-left: none;
}*/
#primary-nav li li a { 
   /*border: 1px solid #FFF;*/
}	
#primary-nav li, #primary-nav li.menuparent { 
   background-color: #efefef;
   -moz-border-radius-topright: 6px;
   -webkit-border-top-right-radius: 6px;
   -moz-border-radius-topleft: 6px;
   -webkit-border-top-left-radius: 6px;

}

/* Styling the basic apperance of the active page elements (shows what page in the menu is being displayed) */

#primary-nav li.menuactive { 
   background: #48CECF url(../uploads/images/layout/bg_menu.jpg) repeat-x; 
}
#primary-nav li.menuactive a{
	color:#FFF;
}

/* Styling the basic apperance of the menuparents - here styled the same on hover (fixes IE bug) */
#primary-nav ul li.menuparent, 
#primary-nav ul li.menuparent:hover, 
#primary-nav ul li.menuparenth { 
/* arrow for menuparents */
  /* background-image: url(images/cms/arrow.gif); 
   background-position: center right; 
   background-repeat: no-repeat; */

}


/* Styling the apperance of menu items on hover */
#primary-nav li a:hover, #primary-nav li li a:hover { color:#FFF }
#primary-nav li:hover, 
#primary-nav li.menuh, 
#primary-nav li.menuparenth, 
#primary-nav li.menuactiveh { 
   background: #48CECF url(../uploads/images/layout/bg_menu.jpg) repeat-x; 
      color:#FFF !important
}


/* The magic - set to work for up to a 3 level menu, but can be increased unlimited */

/* 
just add 
#primary-nav li:hover ul ul, 
#primary-nav li.menuparenth ul ul ul,
for fourth level 
*/
#primary-nav ul, 
#primary-nav li:hover ul, 
#primary-nav li:hover ul ul, 
#primary-nav li.menuparenth ul, 
#primary-nav li.menuparenth ul ul { 
   display: none; 
}

/* add 
#primary-nav ul ul ul li:hover ul, 
#primary-nav ul ul ul li.menuparenth ul,
for fourth level
*/
#primary-nav li:hover ul, 
#primary-nav ul li:hover ul, 
#primary-nav ul ul li:hover ul, 
#primary-nav li.menuparenth ul, 
#primary-nav ul li.menuparenth ul, 
#primary-nav ul ul li.menuparenth ul { 
   display: block; 
}


/* IE Hacks */
#primary-nav li li { 
   float: left; 
   clear: both; 
}
#primary-nav li li a { 
   height: 1%; 
}

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

a.external span
{
position: absolute;
left: -5000px;
width: 4000px;
}

a.external:link
{
background: url(/uploads/images/layout/externalLink.gif) no-repeat 100% 0;
padding: 0 20px 0 0;
}

a.external:visited
{
color: purple;
background: url(/uploads/images/layout/externalLink.gif) no-repeat 100% -100px;
padding: 0 20px 0 0;
}

a.external:hover
{
color: red;
background: url(/uploads/images/layout/externalLink.gif) no-repeat 100% -200px;
padding: 0 20px 0 0;
}

/*******/
pre, code, tt { display:block; float:left; background-color:#F0F8FF; border:1px dashed #D7EBFF; padding:0 .6em}

/****TOC****/
div.toc {
background:#EFEFEF none repeat scroll 0 0;
border:1px dashed #CCCCCC;
float:right;
margin:0.4em;
padding:0.4em;
text-align:left;
width:340px;
}
/*********/
div.overlay {
	
	/* growing background image */
	background-image:url(/uploads/images/layout/white.png);

	/* dimensions after the growing animation finishes  */
	width:650px;
	height:470px;		
	
	/* initially overlay is hidden */
	display:none;
	
	/* some padding to layout nested elements nicely  */
	padding:55px;
}

/* default close button positioned on upper right corner */
div.overlay div.close {
	background-image:url(/uploads/images/layout/close.png);
	position:absolute;
	right:60px;
	top:5px;
	cursor:pointer;
	height:35px;
	width:35px;
}

div.category_item{ float:left; margin:0 1em 1em 0; width:88px; height:50px; overflow:hidden; border:1px solid #CCCCCC}
/*div.category_item:over{ border-color:#00CCFF}*/

input.fbsubmit {
background-color:#0099CC;
border:1px solid #5B4A3C;
font-size:1.2em;
margin-left:14.8em;
padding:0.4em;
color:#FFF
}
.captcha {
clear:both;
}
.span-8 form fieldset{
width:235px
}
bold{ font-weight:bold}
noMargin{ margin:0 !important}
.carousel{ width:300px}
.carouselFooter{ width:230px}
.carousel ul li p{
margin:2em 0 0 0;
}
.carouselFooterul li p{
margin:0;
}
.carousel ul li .carouselImg{
height:50px;
padding:6.4em 0.2em 0;
width:280px;
border:2px solid #EFEFEF;
background-color:#FFFFFF;
float:left; margin-right:.8em;
}
.carousel ul li span.itemInfo{ font-weight:700; background-color:#226666; position:relative; padding:.2em .4em; margin:0 0 .2em .4em; color:#FFFFFF}
.carousel ul li img{ margin:0 0 0 0;}
.carousel ul li a:link{ color:#FFFFFF; text-decoration:none}
.carousel ul li a:visited{ color:#FFFFFF; text-decoration:none}
.carousel ul li a:hover{ color:#00FFFF;}
.floatLeft{ float:left}
.first{ margin:0 1em 0 0;}
div.bord{ border:1px solid #CCCCCC}

/**TABS**/
@media projection, screen { /* Use class for showing/hiding tab content, so that visibility can be better controlled in different media types... */
    .tabs-hide {
        display: none;
    }
}

/* Hide useless elements in print layouts... */
@media print {
    .tabs-nav {
        display: none;
    }
}

/* Skin */
#content ul.tabs-nav {
    list-style: none;
    margin: 0 0 0 1em;
}
.tabs-nav:after { /* clearing without presentational markup, IE gets extra treatment */
    display: block;
    clear: both;
    content: " ";
}
#content ul.tabs-nav li {
    float: left;
    margin: 0 0 0 1px;
    min-width: 84px; /* be nice to Opera */
    list-style: none;
}
.tabs-nav a, .tabs-nav a span {
    display: block;
    padding: 0 10px;
    background: url("../uploads/images/tab.png") no-repeat;
}
.tabs-nav a {
    position: relative;
    top: 1px;
    z-index: 2;
    padding-left: 0;
    color: #27537a;
    font-size: 12px;
    font-weight: bold;
    line-height: 1.2;
    text-align: center;
    text-decoration: none;
    white-space: nowrap; /* required in IE 6 */    
}
.tabs-nav .tabs-selected a {
    color: #000;
}
.tabs-nav .tabs-selected a, .tabs-nav a:hover, .tabs-nav a:focus, .tabs-nav a:active {
    background-position: 100% -150px;
    outline: 0; /* prevent dotted border in Firefox */
}
.tabs-nav a, .tabs-nav .tabs-disabled a:hover, .tabs-nav .tabs-disabled a:focus, .tabs-nav .tabs-disabled a:active {
    background-position: 100% -100px;
}
.tabs-nav a span {
    width: 64px; /* IE 6 treats width as min-width */
    min-width: 64px;
    height: 18px; /* IE 6 treats height as min-height */
    min-height: 18px;
    padding-top: 6px;
    padding-right: 0;
}
*>.tabs-nav a span { /* hide from IE 6 */
    width: auto;
    height: auto;
}
.tabs-nav .tabs-selected a span {
    padding-top: 7px;
}
.tabs-nav .tabs-selected a span, .tabs-nav a:hover span, .tabs-nav a:focus span, .tabs-nav a:active span {
    background-position: 0 -50px;
}
.tabs-nav a span, .tabs-nav .tabs-disabled a:hover span, .tabs-nav .tabs-disabled a:focus span, .tabs-nav .tabs-disabled a:active span {
    background-position: 0 0;
}
.tabs-nav .tabs-selected a:link, .tabs-nav .tabs-selected a:visited, .tabs-nav .tabs-disabled a:link, .tabs-nav .tabs-disabled a:visited { /* @ Opera, use pseudo classes otherwise it confuses cursor... */
    cursor: text;
}
.tabs-nav a:hover, .tabs-nav a:focus, .tabs-nav a:active { /* @ Opera, we need to be explicit again here now... */
    cursor: pointer;
}
.tabs-nav .tabs-disabled {
    /*opacity: .4;*/
}
.tabs-container {
    border: 1px solid #97a5b0;
-moz-border-radius:5px;
-webkit-border-radius:5px;
    padding: 1em 8px;
    background: #F7FBFE; /* declare background color for container to avoid distorted fonts in IE while fading */
}
.tabs-loading em {
    padding: 0 0 0 20px;
    background: url("../uploads/images/loading.gif") no-repeat 0 50%;
}
div#containerTabs{margin-top:2em;}
div#containerTabs ul.list li{margin-left:1.4em; padding-left:0}
div#containerTabs ul#list li{list-style-type:circle}

.left{ float:left; margin:0 .8em 0 0}
.right{ float:right; margin:0 0 0 .8em}
.bottomBorder{ padding:1.4em 0 0 0}
.portfolioImg{ border:1px solid #CCCCCC; border-bottom:4px solid #226666; margin:0; width:300px; height:170px; overflow:hidden}
div.portf h2{
font-size:1.8em;
margin:0.4em 0 0;
}
p.link{
text-align:right;
}
p.link a{
 background: url("../uploads/images/arrowRight.png") no-repeat scroll right 0 #FFFFFF;
padding-right: 2em;
text-align: right;
}
.greyBox{ border:1px solid #CCC; background-color:#F2F2F2; border-bottom: 4px solid #226666}
.darkBox{background-color:#226666}
.grey{ color:#333333}
.contacts{}
.alt{ font-style:italic}
div.bgMiddle div.colborder {border-right:1px dashed #FFFFFF;}

.design, .development, .seo, .openSource{ padding:0 0 .6em 2.2em;}
.design{ background:#FFFFFF url(../uploads/images/layout/icons/design.jpg) no-repeat 0 0}
.development{ background:#FFFFFF url(../uploads/images/layout/icons/development.jpg) no-repeat 0 0}
.seo{ background:#FFFFFF url(../uploads/images/layout/icons/seo.jpg) no-repeat 0 0}
.openSource{ background:#FFFFFF url(../uploads/images/layout/icons/openSource.jpg) no-repeat 0 0}
.heading{cursor: pointer; text-decoration:underline}
.heading:hover{ color:#000000}
.content {
background-color:#F2F2F2;
border:1px solid #E2E2E2;
margin-bottom:1em;
padding:5px 10px 35px;
}
.noPaddingBottom{ padding-bottom:0 !important}
.close{cursor: pointer; text-decoration:underline}
h2 strong{ font-weight:400; color:#333333}
.big{
font-size:2em;
line-height:0.5em;
}
ul.open-source{
margin:0 0 .8em;
background-color:#FFFFFF;
display:table;
margin:0;
padding:0.8em 0 0 0.8em;
border:1px solid #E2E2E2
}
ul.open-source li{ display:block; width:100px; list-style-type:none; float:left}
blockquote {
display: block;
padding: 0 10px;
width: 400px;
}
blockquote:before, blockquote:after {
color: #CCC;
display: block;
font-size: 600%;
width: 50px;
}
blockquote:before {
content: open-quote;
height: 0;
margin-left: -0.55em;
}
blockquote:after {
content: close-quote;
height: 50px;
margin-top: -70px;
margin-left: 360px;
}

#langMenu{
color:#333333;
float:right;
margin-right:2.6em;
padding:0 0 5px;
text-align:left;
height:20px;
}

.en{background: url(../uploads/images/layout/pt.jpg) no-repeat scroll 9.3em .3em #FFFFFF}
.pt{background: url(../uploads/images/layout/en.jpg) no-repeat scroll 7.4em .3em #FFFFFF}

#langMenu a{}
#langMenu a:link{ color:#238383;}
#langMenu a:visited{ color:#238383;}
#langMenu a:hover{color:#333333}

.peekaboo{ height:270px; margin-bottom:-1em; /*background: url(../uploads/images/layout/peekaboo.jpg) no-repeat scroll 0 bottom #FFFFFF*/}
fieldset.search{ width:420px; background-color:#F4F4F4;}
fieldset.search p.title input{ float:left}
fieldset.search input.fbsubmit{ width:auto; float:left; margin: 0.4em 0 0 1em;}