@charset "utf-8";
/* Main CSS Document for Lucido Professional Vcard - Author: Andrei Bejan */

/* ==== Eric Meyer CSS Reset */
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li,
fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {
	margin:0;
	padding:0;
	border:0;
	outline:0;
	font-size:100%;
	vertical-align:baseline;
	background:transparent;
}
ol, ul {list-style:none;}

/* Remove focus outline from link's */
:focus {outline:0;}
/* ==== Eric Meyer CSS Reset */

/* ==== Base */
html {overflow-y:scroll;}
body, input, textarea {
	color:#000;
	line-height:1;
	font-size:12px;
	font-family:Arial, Helvetica, sans-serif;
}

a {text-decoration:none;}
a:hover {text-decoration:underline;}

.page h1 {font-size:20px;}
.page h2 {font-size:16px;}
.page h3 {font-size:13px;}
.page h4 {font-size:12px;}
.page h5 {font-size:11px;}
.page h6 {font-size:10px;}

.page p {font-size:12px; line-height:20px; margin-bottom:10px;}
.page small {font-size:11px;}

.page ul li {background:none no-repeat left 0.7em; padding-left:10px; line-height:20px;}
.page ol li {line-height:20px;}

.page h1, .page h2, .page h3,
.page h4, .page h5, .page h6 {color:#676972; font-weight:bold; text-shadow:0 1px 0 #fff; line-height:20px; margin-bottom:10px;}

.page h1 a, .page h2 a, .page h3 a, 
.page h4 a, .page h5 a, .page h6 a {color:#676972; text-decoration:none;}

.page h1 a:hover, .page h2 a:hover, .page h3 a:hover, 
.page h4 a:hover, .page h5 a:hover, .page h6 a:hover {text-decoration:none;}
/* ==== Base */

/* ==== Background Colors */
body.dark {background:#212529 url(images/bg/darkBg.png) repeat-x center fixed;}
body.light {background:#e5e4e4 url(images/bg/lightBg.png) repeat-x center fixed;}
/* ==== Background Colors */

/* ==== Misc */
img.centered {display:block; margin-left:auto; margin-right:auto;}
img.alignright {margin:3px 0 3px 15px; display:inline;}
img.alignleft {margin:3px 15px 3px 0; display:inline;}

.alignright {float:right;}
.alignleft {float:left;}

.clear {clear:both;}

.page .block {float:left; width:47%; margin-right:2%;}
.page .block1 {float:left; width:80px;}
.page .block2 {float:left; width:160px;}
.page .block3 {float:left; width:240px;}

.page .marginBottom {margin-bottom:30px;}
.page .noMargin {margin:0;}

#pages .address, 
#pages .phone, 
#pages .fax, 
#pages .email, 
#pages .link {background:none no-repeat -24px top;}

#pages .page .skype {background:url(images/icons/skypeContact.png) no-repeat left top;}
#pages .page .yahoo {background:url(images/icons/yahooContact.png) no-repeat left top;}
#pages .page .gtalk {background:url(images/icons/gtalkContact.png) no-repeat left top;}
#pages .page .aol {background:url(images/icons/aolContact.png) no-repeat left top;}
#pages .page .msn {background:url(images/icons/msnContact.png) no-repeat left top;}
#pages .page .twitter {background:url(images/icons/twitterContact.png) no-repeat left top;}
/* ==== Misc */

/* ==== Buttons */
.button {background:none no-repeat left top; display:block; padding-left:15px; position:relative;}
.button span, .button input {
	background:none no-repeat right top; 
	border:none;
	font-size:11px;
	padding:0 15px 0 0; 
	display:block; 
	cursor:pointer;
	line-height:24px;
	height:24px; 
	text-align:center; 
	color:#fff; 
}

.button:hover {background:none no-repeat left bottom; text-decoration:none;}
.button:hover span, .button:hover input {background:none no-repeat right bottom;}

.button.download {margin-top:7px;}

.smallThumbnail {
	background:url(images/thumbShadow100.png) no-repeat center bottom; 
	position:relative; 
	display:block; 
	width:110px; 
	padding-bottom:4px; 
	margin-bottom:10px;
}
.smallThumbnail img {background-color:#fff; padding:5px;}
.smallThumbnail span {
	display:none; 
	position:absolute; 
	left:5px; 
	top:5px; 
	width:100px; 
	height:49px; 
	background:url(images/zoom.png) no-repeat center;
	background-color:rgb(33, 37, 41);
	background-color:rgba(33, 37, 41, 0.5);
}

.bigThumbnail {
	background:url(images/thumbShadow138.png) no-repeat center bottom; 
	position:relative; 
	display:block; 
	width:148px; 
	padding-bottom:2px; 
	margin-bottom:10px;
}
.bigThumbnail img {background-color:#fff; padding:5px;}
.bigThumbnail span {
	display:none; 
	position:absolute; 
	left:5px; 
	top:5px; 
	width:138px; 
	height:65px; 
	background:url(images/zoom.png) no-repeat center;
	background-color:rgb(33, 37, 41);
	background-color:rgba(33, 37, 41, 0.5);
}

.smallThumbnail.last {margin-bottom:15px;}
/* ==== Buttons */

/* ==== Container */
#wrap {
	width:532px;
	margin:0 auto;
	padding-top:55px;
	position:relative;
}

#container {background:url(images/container.png) repeat-y center top; position:relative;}
#containerTop {
	background:url(images/containerTop.png) no-repeat center top; 
	position:absolute; 
	top:-15px; 
	left:0; 
	width:532px; 
	height:190px; 
	z-index:1;
}
#containerBottom {
	background:url(images/containerBottom.png) no-repeat center bottom;
	position:absolute; 
	bottom:-15px; 
	left:0; 
	width:532px; 
	height:190px; 
	z-index:1;
}
#innerContainer {position:relative; z-index:2; padding-bottom:10px;}
/* ==== Container */

/* ==== Header */
#header {padding:10px 20px 20px 22px; background:url(images/headerBottom.png) no-repeat left bottom;}
#logo {background:none no-repeat left top; text-indent:-9999px; color:#676972; width:160px; height:37px; float:left;}
/* ==== Header */

/* ==== Menu */
#menu {background:url(images/menu.png) no-repeat left top; padding-left:15px; height:35px; width:307px; float:right; position:relative;}
#menu li {float:left; cursor:pointer;}
#menu li a {text-decoration:none; padding:0 13px; line-height:35px; color:#676972; font-size:14px; text-shadow:0 1px 0 #ffffff;}

#menu .current {background:url(images/menuCurrent.png) no-repeat center bottom; padding-bottom:18px; cursor:text;}
#menu .current a {cursor:text;}

#menu #hoverColor {display:none;}
#menu #arrow {
	background:url(images/menuCurrent.png) no-repeat center bottom; 
	display:none; 
	width:12px; 
	height:6px; 
	position:absolute; 
	bottom:-18px; 
	left:0;
	cursor:default;
}
/* ==== Menu */

/* ==== Tagline */
#tagline {background:none no-repeat left bottom; color:#fff; width:490px; min-height:110px; margin:9px auto 0 auto; position:relative;}
#tagline h1 {color:#fff; font-size:24px; font-weight:bold;}
#tagline p {font-size:15px; line-height:20px;}
#tagline .text {
	position:absolute;
	left:111px;
	bottom:5px;
	width:364px;
}
#tagline .portrait {display:block; padding-bottom:1px;}
#taglineButton {
	background:none no-repeat left top; 
	width:41px; 
	height:24px; 
	display:block; 
	position:absolute;
	right:0;
	bottom:43px;
	text-indent:-999px; 
	font-size:0; 
	line-height:0;
}
#taglineButton span {background:none no-repeat right top; display:none; height:42px; width:174px; position:absolute; top:-9px; left:40px;}
#taglineButton:hover span {display:block;}
/* ==== Tagline */

/* ==== Main */
#pages {padding:20px 20px 0 20px;}
#pages .page {margin-bottom:30px;}

#pages .contentS {
	width:492px;
	float:left;
	padding-top:10px;
}
#pages .contentM {width:325px; float:left; padding-top:10px;}
#pages .contentL {width:492px; float:left; padding-top:10px;}

/* Projects List */
#pages .projectsList h4 {margin-bottom:0;}

/* Clients List */
#pages .clientsList li {background-position:left 0.7em;}
#pages .clientsList h4 {margin-bottom:0;}

/* Awards List */
#pages .awardsList li {background:none no-repeat -23px top; padding:0; margin:5px 0; font-size:11px; position:relative; cursor:pointer;}
#pages .awardsList li a {color:#8E8F94; padding:2px 0 4px 33px; display:block;}
#pages .awardsList li span {background:none no-repeat left top; height:23px; width:23px; display:block; position:absolute; left:0; top:0; display:none;}

/* Contact List */
#pages .contactList li {padding-left:33px; padding-bottom:10px;}
#pages .contactList li:last-child {padding-bottom:3px;}
#pages .contactList li a {color:#8E8F94;}
/* ==== Main */

/* ==== Sidebar */
.sidebar {float:right; margin:10px 0 10px 15px; padding:0px 20px 5px 20px; position:relative;}
.sidebar .top {height:10px; position:absolute; left:0; top:-10px;}
.sidebar .bottom {height:10px; position:absolute; left:0; bottom:-10px;}

.sidebarS {background:url(images/sidebar152.png) repeat-y left top; width:112px;}
.sidebarS .top {background:url(images/sidebarTop152.png) no-repeat left top; width:152px;}
.sidebarS .bottom {background:url(images/sidebarBottom152.png) no-repeat left bottom; width:152px;}

.sidebarM {background:url(images/sidebar204.png) repeat-y left top; width:164px;}
.sidebarM .top {background:url(images/sidebarTop204.png) no-repeat left top; width:204px;}
.sidebarM .bottom {background:url(images/sidebarBottom204.png) no-repeat left bottom; width:204px;}

.sidebarL {background:url(images/sidebar492.png) repeat-y left top; width:452px; margin-left:0;}
.sidebarL .top {background:url(images/sidebarTop492.png) no-repeat left top; width:492px;}
.sidebarL .bottom {background:url(images/sidebarBottom492.png) no-repeat left bottom; width:492px;}
/* ==== Sidebar */

/* ==== Contact Form */
#pages .textInput {
	background:url(images/inputText.png) no-repeat left top; 
	color:#8e8f94; 
	border:none; 
	line-height:20px; 
	height:19px; 
	width:250px; 
	padding:6px 10px;
}
#pages .textInput:focus {background-position:left -33px;}
#pages .textInput.error {background-position:left -66px; color:#e34b4b;}

#pages .textarea {
	background:url(images/inputTextarea.png) no-repeat left top; 
	color:#8e8f94; 
	border:none; 
	height:125px; 
	width:250px; 
	line-height:20px;
	padding:6px 10px;
	overflow:auto;
	resize:none;
}
#pages .textarea:focus {background-position:left -139px;}
#pages .textarea.error {background-position:left -279px; color:#e34b4b;}

#pages #contactForm {padding-top:15px;}
#pages #contactForm p {margin-bottom:9px;}
#pages #contactForm #response {text-align:center; margin-bottom:0;}
#pages #contactForm .errorText {display:none; color:#c22c2c;}

#pages #contactForm .contactFooter {text-align:right; padding-top:8px; line-height:24px; height:24px; margin-bottom:0;}
#pages #contactForm .contactFooter .requierd {float:left;}
#pages #contactForm .contactFooter #loading {margin-right:4px; margin-top:4px; display:none;}
#pages #contactForm .contactFooter #submit {float:right;}
#pages #contactForm .contactFooter #submit input {width:95px;}
/* ==== Contact Form */

/* ==== Projects */
#projectsTitle {float:left; margin-bottom:16px;}

#projectsNavigation {float:right;}
#projectsNavigation li {background:none; padding-left:0; line-height:normal; float:left; margin-left:10px;}
#projectsNavigation li a {font-size:11px; color:#8e8f94; line-height:11px;}
#projectsNavigation li a:hover {text-decoration:underline;}
#projectsNavigation .current a {text-decoration:underline;}

#projectsWrapper {overflow:hidden; position:relative; margin-bottom:35px;}

#projectsSliderBg {display:none; position:absolute; left:0; top:0;}
#projectsSliderBg li {
	background:url(images/thumbShadow138.png) no-repeat center bottom; 
	position:relative; 
	float:left;
	display:block; 
	padding-bottom:5px;
	padding-left:0; 
	margin:10px 8px 0 8px;
}
#projectsSliderBg span {background-color:#ccc; border:5px solid #fff; display:block; width:138px; height:65px;}

#projectsSlider li {background:none; padding-left:0; line-height:normal; float:left; margin:10px 8px 0 8px; position:relative;}
#projectsSlider a {margin-bottom:0;}
/* ==== Projects*/

/* ==== Networks */
#networks .sidebarL .bottom {padding-bottom:0; padding-top:0;}

#networks .block {margin-right:20px; width:215px;}
#networks .last {margin-right:0;}

#networks .networksList li {background:none no-repeat left top; padding-left:0; float:left; margin:5px 0 15px 0;}
#networks .networksList li:last-child {margin-bottom:0;}
#networks .networksList img {float:left; margin-right:17px;}
#networks .networksList a {color:#8e8f94; display:block;}
#networks .networksList a:hover {text-decoration:none;}
#networks .networksList strong {color:#676972; text-shadow:0 1px 0 #ffffff; line-height:22px; margin-bottom:0;}
/* ==== Networks*/

/* ==== Twitter Updates */
#twitterUpdates {background:url(images/twitterUpdatesBg.png) no-repeat left bottom; width:492px; height:35px; margin:0 auto; font-size:11px;}

#twitterUpdates ul {background:url(images/icons/twitterContact.png) no-repeat left center; height:35px; padding-left:32px; margin-left:6px;}
#twitterUpdates ul li {line-height:35px; padding-right:12px; }

#twitterUpdates .rrt-meta {float:right;}
#twitterUpdates .rrt-content {display:block; width:340px; height:35px; float:left; overflow:hidden;}
/* ==== Twitter Updates */

/* ==== Copyright */
#copyright {
	margin-top:25px; 
	background:url(images/shadow.png) no-repeat center bottom; 
	height:60px; 
	margin-bottom:20px; 
	text-align:center; 
	font-size:11px; 
	color:#424345;
}
/* ==== Copyright */

/* ==== Style Changer */
#styleChanger.on {display:block;}
#styleChanger.off {display:none;}

#styleChanger {position:fixed; left:0; top:40px;}
#styleChangerContent {
	background-color:#000;
	background-color:rgba(0, 0, 0, 0.85);
	overflow:hidden;
	color:#fff;
	width:130px;
	padding:20px 0 20px 30px;
	
	-webkit-border-top-left-radius: 0px;
	-webkit-border-top-right-radius: 4px;
	-webkit-border-bottom-right-radius: 4px;
	-webkit-border-bottom-left-radius: 0px;
	-moz-border-radius-topleft: 0px;
	-moz-border-radius-topright: 4px;
	-moz-border-radius-bottomright: 4px;
	-moz-border-radius-bottomleft: 0px;
	border-top-left-radius: 0px;
	border-top-right-radius: 4px;
	border-bottom-right-radius: 4px;
	border-bottom-left-radius: 0px; 
}

#styleChanger .title {line-height:29px; margin-bottom:10px;}
#styleChanger .text {line-height:16px; font-size:11px; padding-right:20px;}
#styleChanger .text a {text-decoration:underline;}

#styleChanger .min,
#styleChanger .close {
	background:url(images/styleChanger/buttons.png) no-repeat left top;
	color:#fff; 
	cursor:pointer;
	width:29px;
	height:29px;
	position:absolute; 
	top:20px;
}
#styleChanger .min {
	left:0; 
	display:none;
	z-index:100;
	
	-webkit-border-top-left-radius: 0px;
	-webkit-border-top-right-radius: 4px;
	-webkit-border-bottom-right-radius: 4px;
	-webkit-border-bottom-left-radius: 0px;
	-moz-border-radius-topleft: 0px;
	-moz-border-radius-topright: 4px;
	-moz-border-radius-bottomright: 4px;
	-moz-border-radius-bottomleft: 0px;
	border-top-left-radius: 0px;
	border-top-right-radius: 4px;
	border-bottom-right-radius: 4px;
	border-bottom-left-radius: 0px;
}
#styleChanger .close {
	right:-29px; 
	width:39px; 
	background-position:right top;
	
	-webkit-border-radius:4px;
	-moz-border-radius:4px;
	border-radius:4px; 
}
#styleChanger .min:hover,
#styleChanger .close:hover {}

#styleChanger p {color:#666; font-size:12px;}
#styleChanger a {color:#ccc;}

#styleChanger ul {margin-bottom:40px; margin-top:10px;}
#styleChanger ul li {margin-bottom:10px;}

#styleChanger ul a {line-height:20px;}
#styleChanger ul a span {
	width:58px; 
	height:20px; 
	display:block; 
	float:right;
	margin-right:-10px;
}

#styleChanger #backgroundStyle a span {background:url(images/styleChanger/bg.png) no-repeat left top;}
#styleChanger #backgroundStyle a[href="dark"] span {}
#styleChanger #backgroundStyle a[href="light"] span {background-position:left bottom;}

#styleChanger #colorStyle a span {background:url(images/styleChanger/colors.png) no-repeat left top;}
#styleChanger #colorStyle a[href="blue"] span {}
#styleChanger #colorStyle a[href="green"] span{background-position:left -20px;}
#styleChanger #colorStyle a[href="purple"] span {background-position:left bottom;}
/* ==== Style Changer */
.right {
	width: 518px;
	top: 45px;
	visibility: inherit;
	margin-left: 10px;
	overflow: visible;
	position: absolute;
}
.left {
	text-align: left;
}
.right script {
	text-align: left;
}