/* ---------------------------
----- Table of Contents -----
 
 	1. General Classes
	2. Header
		2-1 Menu
	3. Content
		3-1. Main Banner 
		3-2. Main Content
		3-3. Tooltip
		3-4. Inside
		3-5. Blog
		3-6. portfolio
	4. Footer

---------------------------- */
/* General Classes
 ============================================================ */
.clearfix:after { 
  content:"."; 
  display:block; 
  height:0; 
  clear:both; 
  visibility:hidden; 
}
.clearfix { 
  display:inline-block; 
}
/* Hides from IE-mac \*/
* html .clearfix {
  height:1%; 
}
.clearfix { 
  display:block; 
}
.fleft{
	float:left;
}
.fright{
	float:right;
}
.separator{
	width:100%;
	height:10px;
	clear:both;
}
body{
	background: #282650 url(../images/backgrounds/site-bg.png) repeat;
	color:#2a2855;
	font-family:Georgia, "Times New Roman", Times, serif;
}
h1{
	font-family:Arial, Helvetica, sans-serif;
	font-size:3em;
	font-weight:bold;
}
#wrapper {
	margin: 0 auto;
	background: #dddddd url(../images/backgrounds/wrapper-bg.png) repeat-y 0 0;
	width:980px;
}
#content-holder{
	margin:0 auto;
	width:960px;
}
/* header
 ============================================================ */
#header {
	background: #dddddd url(../images/backgrounds/header-bg.png) repeat 0 0;
	border-bottom:1px solid #CCCCCC;
	height:104px;
	width:960px;
	margin:0 auto;
}
#header h1 {
	background:transparent url(../images/logos/logo2.png) no-repeat scroll 0 0;
	float:left;
	margin:7px 0 0 15px;
}
#header h1 a {
	display:block;
	height:90px;
	text-indent:-999px;
	width:249px;
}
#header p {
	color:#FFFFFF;
	font-family:georgia;
	font-size:1.1em;
	font-style:italic;
	font-weight:bold;
}
#header .search input {
	background:url(../images/backgrounds/search-bk.png) no-repeat scroll 0 0;
	border:none;
	height:19px;
	margin:0 5px;
	width:133px;
	color:#000;
	padding:3px 5px 0px 22px;
}
#header .search label {
	padding-top:5px;
}
#header .search {
	color:#FFFFFF;
	font-family:georgia;
	font-size:1.1em;
	font-style:italic;
	font-weight:bold;
	margin-top:22px;
	width:385px;
	height:27px;
}

#header .rss-icon {
	background:transparent url(../images/icons/header-icon-rss.gif) no-repeat scroll 0 0;
	display:block;
	margin:0 25px 0 5px;
	overflow:hidden;
	text-indent:-9999px;
	width:32px;
	height:27px;
}
/* Menu
 ============================================================ */
#menu {
	height:46px;
	width:619px;
	padding:10px 0 0 10px;
}
.menubk {
	background:transparent url(../images/backgrounds/menu-bg.gif) no-repeat scroll right bottom;
	height:104px;
	width:958px;
	overflow:hidden;
}
#menu ul li a {
	background:url(../images/menu/menu_sprite.png) no-repeat scroll 0 0 transparent;
	display:block;
	overflow:hidden;
	text-indent:-5000px;
	height:35px;
}
#menu li {
	background:transparent url(../images/menu-items-separator.png) no-repeat 100% 7px;
	float:left;
	font-size:2.2em;
	padding:0;
	height:40px;
	margin-left:5px;
}
#menu ul li a#item1 {
	background-position:0 0px;
	width:90px;
}
#menu ul li a:hover#item1 {
	background-position:0 -36px;
}
#menu ul li a#item2 {
	background-position:-108px 0px;
	width:147px;
}
#menu ul li a:hover#item2 {
	background-position:-108px -36px;
}
#menu ul li a#item3 {
	background-position:-262px 0px;
	width:107px;
}
#menu ul li a:hover#item3 {
	background-position:-262px -36px;
}
#menu ul li a#item4 {
	background-position:-381px 0px;
	width:75px;
}
#menu ul li a:hover#item4 {
	background-position:-381px -36px;
}
#menu ul li a#item5 {
	background-position:-465px 0px;
	width:90px;
}
#menu ul li a:hover#item5 {
	background-position:-465px -36px;
}
#menu ul li a#item6 {
	background-position:-564px 0px;
	width:50px;
}
#menu ul li a:hover#item6 {
	background-position:-564px -36px;
}
#menu ul li.last {
	background:transparent none no-repeat 0 0;
}
/* content
 ============================================================ */
/* *************************************** Main Banner **************************************** */
.main-banner {
	background:#fff url(../images/backgrounds/main-banner-bg.png) repeat scroll 0 0;
	height:358px;
	position:relative;
}
.main-banner .banner-logo {
	float:left;
	margin:20px 0 0;
}
.smart-people-bubble {
	background:transparent url(../images/misc/smart-people-banner.png) no-repeat scroll 0 0;
	float:left;
	margin:20px 10px 0;
	padding-top:95px;
	padding-left:10px;
	height:90px;
	width:552px;
}
.smart-people-bubble a{
	cursor:pointer;
}
.we-create-software {
	background:transparent url(../images/misc/we-create-software.png) no-repeat scroll 0 0;
	left:13px;
	position:absolute;
	text-indent:-999px;
	top:275px;
}
.we-create-software a{
	display:block;
	height:75px;
	overflow:hidden;
	text-indent:-999px;
	width:550px;
}
/* ******************************************* Main Content *************************************** */
#main-content {
	background:#dcdcdc url(../images/backgrounds/main-content-bg.jpg) repeat-x scroll 0 0;
	overflow:hidden;	
	width:100%;
}
.column {
	float:left;	
}

.column h2 {
	color:#000;
	font-family:Tahoma, Geneva, sans-serif;
	font-size:3em;
	letter-spacing:-0.2em;
	margin:12px 0;
	text-transform:uppercase;
}
.column p {
	font-size:1.4em;
	line-height:2em;
	margin-bottom:20px;
}
.column h3 {
	color:#9a0a61;
	font-family:Georgia, "Times New Roman", Times, serif;
	font-size:2em;
	font-weight:bold;
	margin:0px 0px 10px 28px;
}
.column-content  {
	margin:10px;
}

.content-field {
	background:transparent url(../images/backgrounds/content-field-bg.png) no-repeat scroll 0 0;
	height:362px;
	width:385px;
	padding:20px 0 10px;
}
.content-field.small {
	background:transparent url(../images/backgrounds/content-field-small-bg.png) no-repeat scroll 0 0;
	height:356px;
	width:140px;
	padding:10px 0 10px;
	text-align:center;
}
.columns-3 .column {
	width:395px;
}
.columns-3 .column.small {
	width:130px;
}
/* Image Gallery */
.image-gallery-holder {
	margin:15px;
	width:300px;
}
.image-gallery-holder .gallery-image{
	display:block;
	margin:0 auto 30px;
}
.image-gallery-holder .arrow {
	float:left;
	margin-top:105px;
}
.image-gallery-holder .arrow.next {
	float:right;
}
.image-gallery-holder .image-caption{
	margin: 5px 20px 0px 20px;
}
/* links List */
.links-list {
	margin-left:22px;
	
}
.links-list li {
	background:transparent url(../images/backgrounds/links-list-item-bg.png) no-repeat scroll 0 0;
	list-style-type:none;
	margin:0 0 16px;
}
.links-list li a {
	color:#2a2855;
	font-size:1.8em;
	line-height:50px;
	padding:0 0 0 50px;
	text-decoration:none;
}
.social-media-links-list li{
	margin:15px 0;
}
.social-media-links-list img{
	cursor:pointer;
}
/* sort by seccion */
.sortby-container {
	position: relative;
	top:10px;
	left:30px;
}
.sortby-container span{
	color: #797979;
	text-decoration: none;
	font-size: 1.1em;
	font-weight:bold;
	float:left;
}
.sortby li{
	color: #797979;
	list-style-type:disc;
	text-decoration: none;
	font-weight:bold;
	float:left;
	margin:0 15px 0 10px;
	padding:0 0 0 5px;
}
.sortby li.first{
	list-style-type:none;
	margin:0 15px 0 10px;
}
.sortby li a{
	color: #9a0a61;
	text-decoration: none;
	font-size: 1.1em;
	font-weight:bold;
}
/* TOOLTIP*/ 
#dynatip { 
	font-family:"Lucida Grande","Lucida Sans Unicode","bitstream vera sans","trebuchet ms",verdana;
	display:none;
	background:transparent url(../images/backgrounds/black_arrow.png);
	font-size:14px;
	height:40px;
	width:160px;
	padding:25px;
	color:#fff;
}
/* TOOLTIP override the arrow image of the tooltip */
#dynatip.bottom { 
    background:url(../images/backgrounds/black_arrow_bottom.png);     
    padding-top:40px; 
    height:30px; 
} 
#dynatip.bottom { 
    background:url(../images/backgrounds/black_arrow_bottom.png); 
}
/* 
    root element for the scrollable. 
    when scrolling occurs this element stays still. 
*/ 
div.scrollable { 
 
    /* required settings */ 
    position:relative; 
    overflow:hidden; 
    height:330px; 
	float:left;
	width:300px;
} 
 
/* 
    root element for scrollable items. Must be absolutely positioned 
    and it should have a extremely large width to accomodate scrollable items. 
    it's enough that you set width and height for the root element and 
    not for this element. 
*/ 
div.scrollable div.items { 
    /* this cannot be too large */ 
    width:20000em; 
    position:absolute; 
} 
 
/* 
    a single item. must be floated in horizontal scrolling. 
    typically, this element is the one that *you* will style 
    the most. 
*/ 
div.scrollable div.items div { 
    float:left; 
} 
 
/* you may want to setup some decorations to active the item */ 
div.items div.active { 
    border:1px inset #ccc; 
    background-color:#fff; 
}
a.browse {
	background:url(../images/arrows/hori_large.png) no-repeat scroll 0 0 transparent;
	cursor:pointer;
	display:block;
	float:left;
	font-size:1px;
	height:50px;
	margin:140px 10px 0px 10px;
	width:30px;
}
/* right */
a.right { 
	background-position: 0 -50px; 
	clear:right; 
	margin-right: 0px;
}
a.right:hover { 
	background-position:-29px -50px; 
}
a.right:active 	{ 
	background-position:-60px -50px; 
} 

/* left */
a.left { 
	margin-left: 0px; 
} 
a.left:hover { 
	background-position:-29px 0; 
}
a.left:active { 
	background-position:-60px 0; 
}
/* disabled navigational button */
a.disabled {
	visibility:hidden !important;		
} 	
.checkout{
	width:300px;
}
/* Buttons */
.button a {
	text-indent:-999px;
}
.know-more {
	background:transparent url(../images/buttons/button-knowmore.png) no-repeat scroll 0 0;
	left:270px;
	width:189px;
}
.know-more a {
	display:block;
	height:49px;
}

/*  Paginator */

.paginator {
	margin:0 auto;
	position:relative;
	text-align:center;
	top:-10px;
	width:90px;
}
.paginator li {
	background:#BB739E none repeat scroll 0 0;
	border:1px solid #FFFFFF;
	float:left;
	height:18px;
	list-style-type:none;
	margin:5px;
	width:18px;
}
.paginator li.selected {
	background:#838298 none repeat scroll 0 0;
}
.paginator li a {
	color:#FFFFFF;
	font-family:Arial, Helvetica, sans-serif;
	font-size:1.1em;
	position:relative;
	text-decoration:none;
	top:2px;
}
/* inside
 ============================================================ */
#breadcrumb {
	background: #fff url(../images/backgrounds/breadcrumb-bg.gif) repeat 0 0;
	height:39px;
	width:100%;
	font-family: Georgia, "Times New Roman", Times, serif;
}
#breadcrumb .breads a{
	background:url(../images/arrows/arrow_breadcrumb.png) no-repeat right 17px;
	color: #9a0a61;
	text-decoration: none;
	font-size: 11px;
	font-weight:bold;
	padding:13px 15px 0px 10px;
	float:left;
}
#breadcrumb .breads span{
	font-size: 11px;
	font-weight:bold;
	padding:13px 10px 0px 10px;
	float:left;
}
.socialsites{
	width:270px;
	padding-top:4px;
}
.socialsites img{
	padding-right:5px;
}
.socialsites h3{
	width:100px;
	float:left;
	color:#000000;
	font-family:Tahoma,Geneva,sans-serif;
	font-size:3em;
	letter-spacing:-0.2em;
	text-transform:uppercase;
}
.columns-2 .column {
	width:320px;
	margin-right:10px;
}
.columns-2 .column.large {
	width:540px;
}
.columns-2 .column.port {
	width:390px;
	padding:0;
}
.column a, .column a:visited{
	color:#9a0a61;
	font-style:italic;
}
.column a:hover{
	color:#9a0a61;
	font-style:italic;
	text-decoration:none;
}
.columns-2 .col1 {
	padding-top:92px;
}
.columns-2 .col2 {
	padding-top:22px;
}
.columns-1-2 .title-column {
	margin-left:10px;
	width:940px;
}
.columns-2 h2 {
	background:url(../images/backgrounds/hspacer.gif) repeat-x bottom left;
}
.title-column h2 {
	background:none repeat-x bottom left;
	margin:20px 10px 10px;
}
.columns-2.learn-more-banner .col1 {
	padding-top:25px;
}
.columns-2.learn-more-banner .col1 p {
	margin:0 55px;
}
.columns-2.learn-more-banner .col2 {
	margin:0;
}
.learn-more-body-banner {
	background:#d2d2d2 url(../images/backgrounds/main-banner-portfolio-bg.jpg) repeat-x left top;
	border-bottom:#FFF 1px solid;
	min-height:490px;
	overflow:hidden;
	margin-left:10px;
	width:940px;
	padding:25px 0px;
}
.portfolio-gallery .content {
	padding-top:20px;
	width:960px;
}
.portfolio-gallery .item {
	float:left;
}
.portfolio-gallery .item img {
	margin:0 10px;
}
.portfolio-gallery .item p {
	color:#9a0a61;
	font-size:1.5em;
	font-style:italic;
	margin:5px 12px 30px;
}
.portfolio-gallery .item p span {
	color:#2a2854;
}
#highlighted {
	background:url(../images/misc/highlighted_middle.gif) repeat-y top left;
	width:98%;
	margin:10px 10px 30px 10px;
}
#highlighted .top {
	background:url(../images/misc/highlighted_top.gif) no-repeat top left;
	height:10px;
	width:100%;
}
#highlighted .bottom {
	background:url(../images/misc/highlighted_bottom.gif) no-repeat top left;
	height:10px;
	width:100%;
}
#highlighted .content {
	padding:10px;
}
#highlighted h3{
	color:#000000;
	font-family:Tahoma,Geneva,sans-serif;
	font-size:2.4em;
	letter-spacing:-0.2em;
	text-transform:uppercase;
}
#highlighted p {
	font-size:1.5em;
	line-height:2em;
	margin:20px 0px 20px 0px;
	font-style:italic;
	padding-left:70px;
}
#highlighted ul {
	float:left;
	padding-left:70px;
	margin-bottom:10px;
	width:40%
}
#highlighted li {
	background:transparent url(../images/bullets/content-bullet.png) no-repeat scroll 0 3px;
	list-style-type:none;
	padding:0 0 5px 25px;
	font-size:1.4em;
	line-height:2em;
}
/* blog
 ============================================================ */
.blog .sidebar {
	padding-top:18px;
	margin-right:80px;
}
.blog .col2 {
	padding-top:22px;
}
.blog .column {
	width:250px;
}
.blog .column.large {
	width:540px;
}
.blog .sidebar .top {
	background:url(../images/misc/sidebar_top.gif) no-repeat top left;
	height:10px;
	width:100%;
}
.blog .sidebar .content {
	background:url(../images/misc/sidebar_middle.gif) repeat-y top left;
	width:98%;
	padding:0px 10px;
	width:230px;
}
.blog .sidebar h2 {
	margin:0px 0px 10px 0px;
	width:128px;
}
.blog .recentposts, .blog .quotelist {
	font-size:1.2em;
	list-style:none outside none;
	margin:0;
	padding:0px 10px;
	line-height:1.5em;
}
.blog .sidebar ul {
	padding-bottom:30px;
}
.blog .sidebar li {
	margin-bottom:10px;
}
.blog .recentposts em {
	color:#464646;
	text-transform:uppercase;
}
.twitter{
	position:relative;
	font-size:1.1em;
	padding-top:9px;
}
.twitter a, .twitter a:visited{
	color:#8c8c8c;
	font-style:normal;
	text-decoration:none;
}
.twitter a:hover{
	color:#8c8c8c;
	font-style:normal;
	text-decoration:underline;
}
.quotelist {
	background:#FFF;
}
.quotelist em {
	color:#807667;
	display:block;
	font:italic 100% "Times New Roman",Times,serif;
	text-align:right;
}
.twitterbk{
	background:url(../images/misc/twitter_top.gif) no-repeat top left;
	padding-top:5px;
}
.blog .sidebar .bottom {
	background:url(../images/misc/twitter_bottom.gif) no-repeat top left;
	height:173px;
	width:100%;
}
.post {
	margin-bottom:35px;
}
.post h2{
	background:url(../images/misc/post_separator.gif) no-repeat bottom left;
	margin:12px 0px 5px 0px;
}
.post .meta {
	margin-bottom:10px;
	font-family:Arial, Helvetica, sans-serif;
	color:#464646;
}
.meta dt {
	clear:left;
	color:#979797;
	float:left;
	font-size:10px;
	line-height:24px;
	width:48px;
	text-transform:uppercase
}
.meta dd {
	font-size:11px;
	line-height:16px;
	padding:4px 0 4px 60px;
}
.meta a, .meta a:visited{
	color:#8c8c8c;
	font-style:normal;
	text-decoration:none;
}
.meta a:hover{
	color:#8c8c8c;
	font-style:normal;
	text-decoration:underline;
}
.post span{
	font-size:11px;
	padding-top:5px;
	font-family:Arial, Helvetica, sans-serif;
}
.post span a, .post span a:visited{
	color:#8c8c8c;
	font-style:normal;
	text-decoration:none;
}
.post span a:hover{
	color:#8c8c8c;
	font-style:normal;
	text-decoration:underline;
}
.post img {
	margin-bottom:10px;
}
.post_nav {
	background:url(../images/backgrounds/post-nav-rule.png) no-repeat scroll center 7px transparent;
	margin:50px 0 45px;
	overflow:hidden;
	width:540px;
}
.post_nav a {
	background: #dcdcdc url(../images/arrows/blog_nav_sprite.png) no-repeat scroll 0 0;
	display:block;
}
.post_nav .previous a{
	background-position:left 0;
	width:84px;
	height:24px;
	text-indent:-1000px;
}
/* PORTFOLIO */
/* define background image for the expose mask */
#mask {
	background:#123 url(../images/backgrounds/mask_gradient_1800.png) no-repeat;
	background-position:50% -200px;
}

/* general settings for both scrollables */
div.items {	
	width:20000em;	
	position:absolute;
	clear:both;
}

/* next/prev buttons */
div.navi {
	background: url(../images/arrows/hori_large_port.png);
	width:30px;
	height:30px;
	float:left;
	margin-top:90px;
}

div.navi:hover  		{ background-position:-30px 0; }
div.navi:active  		{ background-position:-60px 0; }
div.nextPage 			{ background-position: 0 -30px; clear:right; }
div.nextPage:hover 		{ background-position:-30px -30px; }
div.nextPage:active 	{ background-position:-60px -30px; } 


div.navi.disabled {
	visibility:hidden;		
}


/* the thumbnail scrollable */
#thumbnails {
	position:relative;
	overflow:hidden;	 		
	height:320px;
	width:320px;
	float:left;
}
#thumbnails div.items div {
	float:left;
	padding:5px;
}

/* box styling */
#box {
	background-image:url(../images/backgrounds/black.png);
	width:656px;
	height:524px;
	position:absolute;
	display:none;
}

/* 
	image is contained on the overlay background image. 
	the closing button is thus just a transparent container. 
*/
#box .close {
	position:absolute;
	left:8px;
	top:8px;
	cursor:pointer;
	height:35px;
	width:35px;
	text-decoration:none;
}

/* overlay scrollable */
#images {	
	position:absolute;
	overflow:hidden;
	margin:50px;
	width:557px;
	height:400px;	
}

/* single image */
#images div.items div {
	float:left;
	width:557px;
	height:400px;
	margin-right:30px;
}

/* the tooltip */
#images div.items div.info {
	float:none;
	background:#333;
	color:#fff;
	margin-top:-137px;
	padding:5px 35px 5px 20px;
	height:175px;
	display:none;
	width:545px;
}
#images div.items div.info p{
	margin-bottom:5px;
	font-size:1.2em;
	line-height:1.5em;
}
#images div.items div.info h3 {
	color:#cde;
	margin:0px 0px 5px 0px;
	font-size:1.6em;
}
#images div.items div.info a{
	color:#fff;
	text-decoration:underline;
}
#images div.items div.info a:hover{
	text-decoration:underline;
}
#images div.items div.info a:visited{
	text-decoration:underline;
	color:#fff;
}
/* override button style on the overlay */
#box div.navi {
	position:absolute;
	bottom:33px;
	left:50px;
}

#box div.nextPage {
	left:580px;
}
/* ***************************************** Footer ******************************************* */
#footer {
	background:url(../images/backgrounds/footer_bg.gif) repeat-x left top;
}
#footer p {
	color:#FFFFFF;
	font-size:1.4em;
	margin:0 auto;
	padding:14px;
	text-align:center;
	width:50%;
}
#footer span {
	display:block;
	line-height:35px;
	text-decoration:underline;
}