/*
project: 		Solucion Factible Website
file:				main.css
last update:	08-06-2009
who:				Solucion Factible Consultores
					www.solucionfactible.com

Esta hoja CSS elimina los estilos por defecto del navegador.
Haciendo esto, nuestro código CSS se comporte / trabaje 
de la misma forma para todos los navegadores.

This CSS sheet removes the default browser styling. 
By doing this, our CSS code behaves / works the same
for all same for all browsers.
*/

/* Navigation */

.goToOne, .goToTwo, .goToThree, .goToFour, .goToFive, .goToSix, .goToEight, .goToNine {
    cursor: pointer;
}

/* Body */
html {
    overflow: hidden
}

body {
    background-color:	#050505;
    font-family: Arial, Helvetica, sans-serif;
    margin: 0;
    overflow: hidden;
    padding: 0;
    height: 100%;
    width: 100%
}

#container {
    height: 300%;
    width: 300%
}

.positioner {
    position: absolute;
    height: 100%;
    width: 100%
}


/* Common */
a.noDec {
    text-decoration: none
}

.white {
    color: #fff
}

.black {
    color: #000
}

.goToTextOne {
    color: #fff;
    cursor: pointer;
    font-size: 14px;
    left: 65px;
    position: absolute;
    top: 25px
}

.goToTextTwo {
    color: #000;
    font-size: 14px;
    left: 66px;
    position: absolute;
    top: 26px
}

.wMtitle {
    position: absolute;
    right: 5%;
    top: 5%;
}

.icon {
    bottom: 8%;
    position: absolute;
    right: 3%
}

.backgrounds {
    height: 1024px;
    left: 0%;
    position: absolute;
    top: 0%;
    width: 1280px
}

/* Square 1 */
#one {
    background-color: #373534;
    left: 0px;
    top: 0px
}

#one .one {	
    height: 322px;
    width: 350px
}

#one #bigLogo {
    height: 759px;
    left: 5%;
    position: absolute;
    top: 0px;
    width: 449px
}

#one .links {
    height: 60px;
    left: 30%;
    position: absolute;
    top: 60%;
    width: 400px;
    z-index: 101;
}

#one .links .button {
    cursor: pointer;
    height: 60px;
    left: 0px;
    position: absolute;
    top: 0px;
    width: 57px
}

/* Square 2 */
#two {
    background-color: #f93f17;
    left: 100%;
    top: 0px
}

#two .bigNumber {
    height: 266px;
    left: 0px;
    position: absolute;
    top: 50px;
    width: 176px
}

#two .two {
    height: 322px;
    width: 350px
}

#two .links {
    height: 60px;
    right: 0%;
    position: absolute;
    top: 10%;
    width: 300px;
    z-index: 101;
}

#two .links .button {
    cursor: pointer;
    height: 60px;
    left: 0px;
    position: absolute;
    top: 0px;
    width: 57px
}

#two .titleText {
    left: 115px;
    position: absolute;
    top: 45px;
}

#two .titleText span.white {
    font-size: 40px;
    color: #fff
}

#two .titleText span.black {
    font-size: 40px;
    color: #000
}

#two .titleText span.yellow, #two #portfolio .desc span.title {
    font-size: 21px;
    color: #ffd600
}

a.aqua {
    color: #18a3c7
}


#two .sqr {
    height: 60px;
    width: 461px
}

#two #portfolio {
    height: 800px;
    left: 15%;
    overflow: hidden;
    position: absolute;
    top: 20%;
    width: 700px
}

#two #portfolio #edge {
    height: 90px;
    position: absolute;
    top: 0px;
    right: 0px;
    width: 50px
}

#two #portfolio #next {
    color: #fff;
    font-size: 11px;
    height: 45px;
    left: 55px;
    line-height: 45px;
    position: absolute;
    text-align: right;
    top: 80px;
    width: 90px;
    z-index: 6000
}

#two #portfolio #prev {
    color: #fff;
    font-size: 11px;
    height: 45px;
    left: -20px;
    line-height: 45px;
    overflow: hidden;
    position: absolute;
    text-align: right;
    top: 80px;
    width: 90px;
    z-index: 6000
}

#two #portfolio #slideWrapper {
    height: 140px;
    width: 1000px;
    position: relative;
    overflow: hidden
}

#two #portfolio #slide {
    height: 180px;
    position: relative;
    width: 2200px
}

#two #portfolio #slide div.thumbnail {
    cursor: pointer;
    float: left;
    height: 90px;
    width: 155px
}

#two #portfolio #next, #two #portfolio #prev {
    cursor: pointer
}

#two #portfolio .desc {
    color: #fff;
    font-size: 12px;
    height: 450px;
}

#two #portfolio .desc .text {
    float: left;
}

#two #portfolio .desc .image {
    float: right;
    height: 299px;
    width: 301px
}


/* Square 3 */
#three {
    background-color: #bed601;
    left: 200%;
    top: 0px
}

#three .bigNumber {
    height: 266px;
    left: 0px;
    position: absolute;
    top: 50px;
    width: 192px
}

#three .three {
    height: 418px;
    width: 350px
}

#three .infoText {
    left: 17%;
    position: absolute;
    top: 0%;
}

#three .infoText span.blue {
    font-size: 35px;
    color: #00c4d9
}

#three .infoText span.black {
    font-size: 35px;
    color: #000
}

#three .infoText p {
    font-size: 11px;
    color: #000;
    text-align: justify;
    width: 50%
}

#three .infoText p span {
    color: #ff8745;
    font-size: 13px;
    font-weight: bold
}

#three .infoText p span.punchline {
    font-size: 12px;
    font-weight: bold;
    color: #ff8745;
    text-align: justify;
}

#three .sqr {
    height: 60px;
    width: 461px
}

#three .links {
    height: 60px;
    right: 1%;
    position: absolute;
    top: 14%;
    width: 230px;
    z-index: 101;
}

#three .links .button {
    cursor: pointer;
    height: 60px;
    left: 0px;
    position: absolute;
    top: 0px;
    width: 57px;
    z-index: 101;
}

/* Square 4 */
#four {
    background-color: #004ebc;
    left: 0px;
    top: 100%
}

#four .sqr {
    height: 60px;
    width: 260px
}

#four .box {
    height: 295px;
    left: 0px;
    position: absolute;
    top: 10%;
    width: 672px
}

#four .box .bigNumber {
    height: 273px;
    left: 0px;
    position: absolute;
    top: 22px;
    width: 177px
}

#four .box #loginTitle {
    color: #fff;
    font-size: 24px;
    position: absolute;
    right: 25px;
    top: 0px
}

#four .box #loginTitle span {
    color: #ffd600
}

#four .box #login {
    height: 66px;
    left: 0px;
    position: absolute;
    top: 22px;
    width: 672px
}

#four .box #login .bg {
    height: 66px;
    left: 0px;
    position: absolute;
    top: 0px;
    width: 672px
}

#four .box #login .text {
    color: #bed600;
    font-size: 13px;
    left: 25px;
    position: absolute;
    text-align: left;
    top: 10px;
    width: 260px
}

div.formUser input {
    font-family: Courier;
    height: 15px;
    width: 160px
}

div.formPass {
    left: 470px;
    position: absolute;
    top: 10px
}

div.formPass input {
    height: 15px;
    width: 100px
}

div.formSubmit {
    left: 585px;
    position: absolute;
    top: 25px
}

#four .box #admin {
    color: #fff;
    height: 66px;
    left: 0px;
    position: absolute;
    top: 125px;
    width: 672px
}

#four .box #admin .bg {
    height: 66px;
    left: 0px;
    position: absolute;
    top: 0px;
    width: 672px
}

#four .box #admin .text {
    color: #fff;
    font-size: 13px;
    left: 25px;
    position: absolute;
    text-align: left;
    top: 10px;
    width: 250px
}

#four .box #adminTitle {
    color: #fff;
    font-size: 24px;
    position: absolute;
    right: 25px;
    top: 103px
}

#four .box #adminTitle span {
    color: #bed600;
}

#four .box #mail {
    bottom: 0px;
    color: #000;
    height: 66px;
    left: 0px;
    position: absolute;
    width: 672px
}

#four .box #mail .bg {
    height: 66px;
    left: 0px;
    position: absolute;
    top: 0px;
    width: 672px
}

#four .box #mail .text {
    color: #000;
    font-size: 13px;
    left: 25px;
    position: absolute;
    text-align: left;
    top: 10px;
    width: 250px
}

#four .box #mailTitle {
    bottom: 60px;
    color: #fff;
    font-size: 24px;
    position: absolute;
    right: 25px
}

#four .box #mailTitle span {
    color: #34B6E4
}

#four .links {
    height: 60px;
    left: 300px;
    position: absolute;
    top: 400px;
    width: 400px;
    z-index: 101;
}

#four .links .button {
    cursor: pointer;
    height: 60px;
    left: 0px;
    position: absolute;
    top: 0px;
    width: 57px;
    z-index: 101;
}

#four .four {
    height: 322px;
    width: 350px
}

div.formUser {
    left: 300px;
    position: absolute;
    top: 10px
}

span.black {
    color: #000;
    font-size: 12px
}

span.green {
    color: #bed600;
    font-size: 12px
}

span.white {
    color: #fff;
    font-size: 12px
}

/* Square 5 */
#five {
    background-color: #ffbd01;
    left: 100%;
    top:  100%
}

#five .five {
    height: 322px;
    width: 350px
}

#five .sqr {
    height: 60px;
    width: 431px
}

#five .box {
    left: 0px;
    position: absolute;
    top: 10%;
}

#five .textTitle {
    color: #fff;
    font-size: 45px;
    left: 160px;
    position: absolute;
    top: 0px;
    width: 160px
}

#five .box .bigNumber {
    height: 274px;
    position: absolute;
    top: 0px;
    left: 0px;
    width: 180px
}

#five .box .phrase {
    background: transparent url('../images/five_phrase_bg.png') scroll no-repeat top left;
    font-size: 21px;
    height: 84px;
    left: 0px;
    position: absolute;
    top: 0px;
    width: 512px
}

#five .box .phrase .text {
    color: #ff532e;
    float: right;
    font-size: 21px;
    width: 355px
}

#five .box .phrase .text span {
    color: #4EB6D1;
    font-weight: bold;
}

#five .box #contact {
    height: 334px;
    color: #009BBD;
    font-size: 11px;
    position: absolute;
    top: 84px;
    left: 152px;
    width: 324px
}

#five .box #contact .bg {
    height: 334px;
    position: absolute;
    top: 0px;
    left: 0px;
    width: 324px
}


#five .box #contact .text {
    clear: both;
    color: #009bbd;
    font-size: 11px;
    height: 200px;
    left: 29px;
    position: relative;
    width: 265px
}

#five .box #contact .text input,
#five .box #contact .text textarea {
    border-left: solid 1px #668080;
    border-top: solid 1px #668080;
    font-family: Courier;
    width: 260px
}

#five .box #contact .text textarea {
    height: 80px
}

#five .box #contact .text input {
    height: 15px;
}

#five .box #contact #notice {
    position: relative;
    top: 10px;
    left: 30px;
    width: 80%
}

#five .box #contact .button {
    height: 26px;
    position: absolute;
    top: 285px;
    left: 215px;
    width: 63px
}

#five .links {
    height: 60px;
    left: 700px;
    position: absolute;
    top: 300px;
    width: 400px;
    z-index: 101;
}

#five .links .button {
    cursor: pointer;
    height: 60px;
    left: 0px;
    position: absolute;
    top: 0px;
    width: 57px;
    z-index: 101;
}

/* Square 6 */
#six {
    background-color: #bfd6ce;
    left: 200%;
    top:  100%
}

#six .sqr {
    height: 60px;
    width: 328px
}

#six #titleTwo {
    height: 60px;
    position: absolute;
    right: 615px;
    top: 440px;
    width: 328px
}

#six .six {
    height: 393px;
    width: 350px
}

#six .box {
    left: 0px;
    position: absolute;
    top: 50px
}

#six .box .bigNumber {
    height: 266px;
    left: 0px;
    position: absolute;
    top: 0px;
    width: 177px
}

#six .box .text {
    color: #758D8D;
    font-size: 12px;
    height: 440px;
    left: 155px;
    line-height: 20px;
    position: absolute;
    text-align: justify;
    top: 93px;
    width: 525px

}

#six .box .text .title {
    color: #4db4c5;
    font-size: 45px;
}

#six .box .text .hilite {
    background-color: #74C1CE;
    color: black;
    font-weight: bold
}

#six .box .text span.hiliteTwo {
    background-color: #668080;
    color: #A2D2D8;
    font-size: 20px;
    height: 25px;
    line-height: 25px;
    text-indent: 10px;
}

#six .box .text span.hiliteTwo span {
    color: #EEECE0
}

#six .box .phrase {
    background: url('../images/six_phrase_bg.png') scroll no-repeat top left;
    height: 83px;
    left: 0px;
    position: absolute;
    top: 0px;
    width: 570px
}

#six .box .phrase .text {
    color: #e0dbc8;
    font-size: 21px;
    left: 155px;
    position: absolute;
    top: 12px
}

#six .box .phrase .text span {
    color: #ffbd00
}

#six .links {
    height: 60px;
    left: 695px;
    position: absolute;
    top: 165px;
    width: 400px;
    z-index: 101;
}

#six .links .button {
    cursor: pointer;
    height: 60px;
    left: 0px;
    position: absolute;
    top: 0px;
    width: 57px;
    z-index: 101;
}

/* Square 7 */
#seven {
    background-color: #000006;
    left: 0px;
    top:  200%
}	

/* Square 8*/
#eight {
    background-color: #668080;
    left: 100%;
    top:  200%
}

#eight .sqr {
    height: 72px;
    width: 460px
}

#eight .box {
    left: 0px;
    position: absolute;
    top: 50px
}

#eight .box .bigNumber {
    height: 237px;
    position: absolute;
    top: 0px;
    left: 0px;
    width: 104px
}

#eight .eight {
    height: 322px;
    width: 350px
}

#eight .box .text {
    color: #fff;
    height: 235px;
    position: absolute;
    font-size: 12px;
    top: -14px;
    left: 150px;
    line-height: 23px;
    text-align: justify;
    width: 530px
}

#eight .box .text span#title {
    color: #333;
    font-size: 45px;
    line-height: 45px;
}

#eight .box .text span#subtitle {
    color: #a2d2d8;
    font-size: 21px;
}

#eight .box .text span#subtitle span {
    color: #fff
}

#eight .box .text span.hilite {
    background-color: #333334;
    color: #ffbd00;
    font-weight: bold
}

#eight .links {
    height: 60px;
    left: 460px;
    position: absolute;
    top: 265px;
    width: 400px;
    z-index: 101;
}

#eight .links .button {
    cursor: pointer;
    height: 60px;
    left: 0px;
    position: absolute;
    top: 0px;
    width: 57px;
    z-index: 101;
}

/* Square 9 */
#nine {
    background-color: #009bbc;
    left: 200%;
    top:  200%
}

#nine .sqr {
    height: 60px;
    width: 490px
}

#nine .nine {
    height: 297px;
    width: 350px
}

#nine .box {
    left: 0px;
    position: absolute;
    top: 50px
}

#nine .box .bigNumber{
    height: 272px;
    left: 0px;
    position: absolute;
    top: 0px;
    width: 176px
}

#nine .box .text span.title {
    color: #333;
    font-size: 45px
}

#nine .box .phrase {
    background: transparent url('../images/nine_phrase_bg.png') scroll no-repeat top left;
    height: 85px;
    left: 0px;
    position: absolute;
    top: 0px;
    width: 440px
}

#nine .box .phrase .text {
    color: #fff;
    font-size: 21px;
    left: 155px;
    line-height: 21px;
    position: absolute;
    top: 20px
}

#nine .box .phrase .text span {
    color: #ffbd00;
    font-size: 30px
}

#nine .box .text9 {
    height: 270px;
    left: 157px;
    line-height: 20px;
    font-size: 12px;
    position: absolute;
    top: 110px;
    width: 600px
}

#nine .box .text9 .wrap9 {
    /*overflow: auto;*/
    height: 260px;
    position: relative;
    width: 600px
}

#nine .box .text9 .wrap9 .rewrap9 {
    height: 230px;
    position: relative;
    width: 580px
}


#nine .links {
    height: 60px;
    left: 36%;
    position: absolute;
    bottom: 15%;
    width: 400px;
    z-index: 101;
}

#nine .links .button {
    cursor: pointer;
    height: 60px;
    left: 0px;
    position: absolute;
    top: 0px;
    width: 57px
}

/* Footer */
div.footer {
    bottom: 1%;
    height: 161px;
    left: 0px;
    position: absolute;
    width: 100%;
    z-index: 100;
}

div.footer div.wrapper {
    height: 161px;
    left: 52px;
    position: relative;
    width: 100%
}

div.footer div.wrapper div.menu {
    bottom: 0px;
    height: 35px;
    left: 0px;
    position: absolute;
    width: 96%
}

div.footer div.wrapper div.menu div.options {
    bottom: 36px;
    height: 17px;
    left: 0px;
    position: absolute;
    width: 100%
}

div.footer div.wrapper div.menu div.options div.option {
    float: left;
    height: 17px;
    text-align: center;
    width: 78px
}

div.footer div.wrapper div.menu div.options div.optionBig {
    float: left;
    height: 17px;
    text-align: center;
    width: 135px
}

div.footer div.wrapper div.menu div.options div.spacer {
    float: left;
    height: 17px;
    width: 5px
}
div.footer div.wrapper div.menu div.address {
    bottom: 0px;
    height: 35px;
    left: 0px;
    position: absolute;
    width: 100%
}

div.footer div.wrapper div.menu div.address div.text {
    float: left;
    font-size: 13px;
    height: 35px;
    line-height: 35px;
}

div.footer div.wrapper div.menu div.address div.image {
    height: 35px;
    float: left;
    width: 40px
}

div.optionBgColorOne {
    background-color: #00aedb;
    color: #fffffd;
    font-size: 13px
}

div.optionBgColorOneB {
    background-color: #fffffd;
    font-size: 13px
}

div.optionBgColorOneB a {
    color: #00aedb;
    font-size: 13px
}

div.optionBgColorTwo {
    background-color: #18a3c7;
    color: #c9dd0a;
    font-size: 13px
}

div.optionBgColorTwoB {
    background-color: #c9dd0a;
    font-size: 13px
}

div.optionBgColorTwoB a {
    color:  #18a3c7;
}

div.optionBgColorThree {
    background-color: #eca63c;
    color: #333;
    font-size: 13px
}

div.optionBgColorThreeB {
    background-color: #333;
    font-size: 13px
}

div.optionBgColorThreeB a {
    color: #eca63c;
    font-size: 13px
}

div.optionBgColorFour {
    background-color: #00aeda;
    color: #fff;
    font-size: 13px
}

div.optionBgColorFourB {
    background-color: #fff;
}

div.optionBgColorFourB a {
    color: #00aeda;
    font-size: 13px
}

div.optionBgColorFive {
    background-color: #ff6e01;
    color: #333;
    font-size: 13px
}

div.optionBgColorFiveB {
    background-color: #333
}

div.optionBgColorFiveB a {
    color: #ff6e01;
    font-size: 13px
}

div.optionBgColorSix {
    background-color: #8aa2a0;
    color: #333;
    font-size: 13px
}

div.optionBgColorSixB {
    background-color: #333
}

div.optionBgColorSixB a {
    color: #8aa2a0;
    font-size: 13px
}

div.optionBgColorEight {
    background-color: #9cb4af;
    color: #333;
    font-size: 13px
}

div.optionBgColorEightB {
    background-color: #333
}

div.optionBgColorEightB a {
    color: #9cb4af;
    font-size: 13px
}


div.optionBgColorNine {
    background-color: #5dbacb;
    color: #fcfbfb;
    font-size: 13px
}

div.optionBgColorNineB {
    background-color: #fcfbfb
}

div.optionBgColorNineB a {
    color: #5dbacb;
    font-size: 13px
}

div.footer div.wrapper div.menu div.optionsBorderOne {
    border-bottom: 1px solid #61605e
}

div.footer div.wrapper div.menu div.addressBorderOne {
    border-top: 1px solid #61605e
}

div.footer div.wrapper div.menu div.optionsBorderTwo {
    border-bottom: 1px solid #9b270e
}

div.footer div.wrapper div.menu div.addressBorderTwo {
    border-top: 1px solid #da3714
}

div.footer div.wrapper div.menu div.optionsBorderThree {
    border-bottom: 1px solid #78861d
}

div.footer div.wrapper div.menu div.addressBorderThree {
    border-top: 1px solid #a9bc28
}

div.footer div.wrapper div.menu div.optionsBorderFour {
    border-bottom: 1px solid #003175
}

div.footer div.wrapper div.menu div.addressBorderFour {
    border-top: 1px solid #0044a4
}

div.footer div.wrapper div.menu div.addressBorderFive {
    border-top: 1px solid #dfa707
}

div.footer div.wrapper div.menu div.optionsBorderFive {
    border-bottom: 1px solid #9f7705
}

div.footer div.wrapper div.menu div.addressBorderSix {
    border-top: 1px solid #a8bcb5
}

div.footer div.wrapper div.menu div.optionsBorderSix {
    border-bottom: 1px solid #788681
}

div.footer div.wrapper div.menu div.addressBorderEight {
    border-top: 1px solid #54696a
}

div.footer div.wrapper div.menu div.optionsBorderEight {
    border-bottom: 1px solid #48595a
}

div.footer div.wrapper div.menu div.addressBorderNine {
    border-top: 1px solid #118faa
}

div.footer div.wrapper div.menu div.optionsBorderNine {
    border-bottom: 1px solid #0c6679
}

div.footer div.wrapper div.menu div.address div.textTwo {
    color: #eeece0
}

div.footer div.wrapper div.menu div.address div.textThree,
div.footer div.wrapper div.menu div.address div.textFive {
    color: #333
}

div.footer div.wrapper div.menu div.address div.textFour {
    color: #fff
}

div.footer div.wrapper div.menu div.address div.textSix {
    color: #5d7474
}

div.footer div.wrapper div.menu div.address div.textEight {
    color: #fafafa
}

div.footer div.wrapper div.menu div.address div.textNine {
    color: #fdfefe
}

div.logoTwo, div.logoFour, div.logoEight, div.logoNine {
    background: transparent url('../images/footer_two_logo.png') scroll no-repeat top left
}

div.logoThree, div.logoFive, div.logoSix {
    background: transparent url('../images/footer_three_logo.png') scroll no-repeat top left
}

div.phoneOne, div.phoneTwo, div.phoneFour, div.phoneEight, div.phoneNine {
    background: transparent url('../images/footer_phone.png') scroll no-repeat top right
}

div.phoneThree {
    background: transparent url('../images/footer_three_phone.jpg') scroll no-repeat top right
}

div.phoneFive {
    background: transparent url('../images/footer_five_phone.jpg') scroll no-repeat top right
}

div.phoneSix {
    background: transparent url('../images/footer_six_phone.jpg') scroll no-repeat top right
}

div.footer div.wrapper div.logo {
    height: 91px;
    left: 0px;
    position: absolute;
    top: 0px;
    width: 148px
}