/* --------------- zauber101.css created by demenece | damian@zauber-com-ar --------------- */


/* -------------------------------------------------------
GENERAL STYLES
------------------------------------------------------- */

/* body styles & initial typography styles */
body{
    font-size:62.5%;
    font-family:Helvetica, Arial, sans-serif;
    line-height:1.9em;
    color:#013d4a;
}
#container{
    font-size:1.2em;
}

/* links */
.main101.overview a{
    color:#1A426A;
    text-decoration:none;
    border-bottom:1px solid;
}
.main101 a.top{
    color:#999999;
    font-size:x-small;
    text-transform:uppercase;
}
.main101 a:hover{
    color:#1A42AA;
}
/* headings */
div#content div#main.main101 h1{
    font-family:Helvetica,Arial,sans-serif;
    letter-spacing:1pt;
}
div#content div#main.main101 h2{
    margin-top:20px;
	font-family:mic;
	font-size:38px;
	font-weight:bold;
	margin-bottom:20px;
}

/* -------------------------------------------------------
PAGE STRUCTURE
------------------------------------------------------- */
/*skeleton including page furniture */
div#content div#main.main101{
    width:900px;
    font-family:Helvetica,Arial,serif;
}

/* ----- SLIDER ----- */
#slider {
    width: 900px;
    margin: 0 auto;
    position: relative;
}
.scroll {
    height: 420px;
    overflow: auto;
    position: relative; /* fix for IE to respect overflow */
    clear: left;
}
.scrollContainer div.panel {
    padding: 20px;
    height: 320px;
    width: 900px; /* change to 560px if not using JS to remove rh.scroll */
}

/* -------------------------------------------------------
HELPER STYLES
------------------------------------------------------- */
/* forms */
/* notifications and errors */
/* consistant items with normally just one class*/
div#content div#main .intro p{
    color:#222222;
    font-size:1.25em;
}
.clearfix{
    clear:both;
    margin:0;
    padding:0;
}

/* -------------------------------------------------------
PAGE COMPONENTS
------------------------------------------------------- */
/* ------- SUBNAV & PROCESSNAV ------- */
.subnav,
.processnav{
	height:5em;
    margin:2em 0 0;
	padding:0;
}
.subnav li,
.processnav li{
    display:block;
    float:left;
}
.subnav li a,
.processnav li a{
    color:#333333;
    display:block;
    font-size:11pt;
    font-weight:bold;
    text-decoration:none;
}
.subnav{
    border-top:2px solid #cccccc;
	font-family:Helvetica,Arial,sans-serif;
}
.subnav li{
    width:448px;
    margin:0 2px 2px 0;
}
.subnav li a{
    border-bottom:1px solid #cccccc;
    padding:0.5em 0.4em 0.4em;
}
.subnav li a span{
    color:#999999;
    display:block;
    font-size:x-small;
    font-weight:normal;
    text-transform:uppercase;
    letter-spacing:1px;
    margin-top:2px;
}
.subnav li a:hover{
    border-bottom-color:#333;
    background-color:#666;
    color:white;
}
.subnav li a.selected{
    background-color:#EEEEEE;
    color:#333333;
    border-bottom-color:#aaaaaa;
}
.subnav li a.selected span,
.subnav li a.selected:hover span{
    color:#666666;
}
.subnav li a:hover span{
    color:white;
}
.processnav li a{
    text-indent:-9999px;
    height:41px;
    background:transparent url(../images/en/processnav.gif) no-repeat scroll left top;
    border:none;
}
/* Elimina el borde de focus en firefox */
.processnav li a:focus{  -moz-outline-style: none; }

.processnav li a.selected{
    cursor:default;
}
	.processnav li a.kickoff{
		width:262px;
	}
	.processnav li a.kickoff:hover{
	    background-position:left -44px;
	}
	.processnav li a.kickoff.selected{
	    background-position:left -88px;
	}
	.processnav li a.development{
	    background-position:left -138px;
	    width:330px;
	    margin-left:-8px;
	}
	.processnav li a.development:hover{
	    background-position:left -182px;
	}
	.processnav li a.development.selected{
	    background-position:left -226px;
	}
	.processnav li a.delivery{
	    background-position:left -276px;
	    width:314px;
	    margin-left:-8px;
	}
	.processnav li a.delivery:hover{
	    background-position:left -320px;
	}
	.processnav li a.delivery.selected{
	    background-position:left -364px;
	}

/* PROCESS */
.overview{
	color:#222222;
	font-size:12pt;
	line-height:1.35em;
	margin:1em 0;
}
.process_desc{
    background:transparent url(../images/process-desc_bg.png) no-repeat top left;
    color:#FFFFFF;
	margin-left:-34px;
	margin-top:0;
	padding:15px 30px;
	position:absolute;
	width:195px;
	z-index:999;
}
div#content div#main .process_desc h3,
div#content div#main .process_desc p{
    color:#FFFFFF;
    font-family:Helvetica, Arial, sans-serif;
    text-align:left;
    line-height:1.25;
}
div#content div#main .process_desc h3{
    font-size:13pt;
    line-height:1em;
    margin-top:0;
}
/* --- TIMELINE --- */
ul.events {
        height:210px;
        list-style-type: none;
        margin: 0;
        padding: 0 0 20px 0;
    }
    
    ul.events li {
        background-color:#DEF3F9;
        border:1px solid #CEE3E9;
        font-size: 1.2em;
        font-weight: bold;
        float:left;
        margin:5px;
        padding: 3px 0;
        position: relative;
    }
    ul.events li.downside{
        top:100%;
    }
    ul.events li h5{
        margin:0 4px;
        padding:3px 7px 3px 20px;
        border-bottom:1px solid #CEE3E9;
        background:url(../images/process-icons.png) no-repeat left top;
    }
        ul.events li.kickoff h5{background-position:left -21px}
        ul.events li.backlog h5{background-position:left -42px}
        ul.events li.projectplan h5{background-position:left -63px}
        ul.events li.planning h5{background-position:left -84px}
        ul.events li.testdriven h5{background-position:left -105px}
        ul.events li.integration h5{background-position:left -126px}
        ul.events li.deliverable h5{background-position:left -150px}
        ul.events li.acceptance h5{background-position:left -171px}
        ul.events li.tuning h5{background-position:left -192px}
        ul.events li.deployment h5{background-position:left -213px}
        ul.events li.retrospective h5{background-position:left -234px}
    
    div#content div#main  ul.events li p{
        color:#666666;
		font-size:0.9em;
		font-weight:normal;
		margin:0;
		padding:5px 10px;
		text-align:left;
    }
    
/*TIMELINE BACKGROUNDS*/
#kickoff,
#development,
#delivery{
    background:transparent url(../images/timelines.png) no-repeat -33px -39px;
}
#development{
    background-position:-980px -35px;
}
#delivery{
    background-position:-1930px -35px;
}

/* --- TOOLS LIST --- */
.main101 a.top{
    border:none;
}
.intro, .tools{
    width:570px;
}
.intro{
    border-bottom:1px solid #cccccc;
}
.tools{
    list-style-type:none;
    margin:0;
    padding:0;
}
.tools h2{
	font-family:Helvetica,Arial,sans-serif;
	font-size:16pt;
	font-weight:normal;
	line-height:0.6em;
}
.tools h2 a{
    border-bottom:medium none;
    color:#AA0000;
}
div#content div#main.main101 h1.subtitle{
    color:#222222;
    font-weight:normal;
    font-size:16pt;
    margin-top:3.5em;
    text-transform:uppercase;
}
.tools img{
    float:left;
    margin:10px 10px 5px 0;
}



/*Side bar list*/
div#content .main101 div#side_bar .menu li{
    border:medium none;
    padding:0;
}
div#content .main101 .menu a{
    border-bottom:1px solid #CCCCCC;
    border-top:1px solid #FFFFFF;
    color: #333333;
    display:block;
	text-decoration:none;
    padding:7px 2px 7px 8px;
}
div#content .main101 .menu a:hover{
    background-color:#ddd;
	border-bottom-color:#AAAAAA;
	text-decoration:none;
	color:#333;
}
div#content .main101 div#side_bar{
    width:260px;
    margin:15px 0 30px 30px;
}
div#content .main101 div#side_bar ul.menu{
    margin-bottom:40px;
	margin-top:0;
}

div#content .main101 div#side_bar ul.menu li:first{
    padding-top:8px;
}
div#content .main101 div#side_bar h3{
    font-family:Helvetica,Arial,sans-serif;
	font-size:18px;
	font-weight:normal;
	line-height:25px;
	margin-top:0.5em;
	padding-bottom:0.8em;
}

.contenedorTextosTools{
	margin:0;
	clear:left;
}


/* ------- FOOTER ------- */

/* -----------------------------------------------------------------------------------
Do you like my code? questions? comments? suggestions? damian[at]zauber-com-ar
 ----------------------------------------------------------------------------------- */