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;}



/* ==== Base */

html {overflow-y:scroll;}

body, input, textarea {color:#8e8f94; 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:url(images/bgbody.gif) repeat-x;}   

/* ==== 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;}






/* ==== 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() 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:170px; bottom:13px; width:245px;}

#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:273px; 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;}





/* 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*/








/* ==== 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/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/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/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 */x