
#header { margin: -12px 0 40px; text-align: center; border-bottom: 1px solid #f7f7f7; }
#header h2 { font-size: 3em; margin-bottom: 7px; }


#content { padding-left:70px; padding-right:70px; }
#content .gridbox .column.wide { width:53%; }
#content .gridbox .column.narrow { width:40%; }
#content .gridbox .column.last .flushright { float:right; margin-left: -10px; }
#content .gridbox .column a.more { line-height: 2.5em; }
#content .gridbox#bigbox .column.first h1 { margin-top: 15px; margin-bottom: 6px; }
#content .gridbox#bigbox .column.first p.intro { font-size: 16px; line-height: 1.5em; }
#content .gridbox#bigbox .column.first p.intro a.more { font-size: 12px; }


a.swap { width:140px; margin-top: 10px; margin-left: 10px; position: relative; float:right; cursor:pointer; text-align:center; text-decoration:none; font-size: 11px; line-height: 2em; }
a.swap img { display:block; width:97px; height:71px; margin:0 auto 5px; padding:5px; background:#fff; }
a.swap .more { padding-right:10px; background:url(../images/more.gif) no-repeat 100% 60%; }
a.swap:hover .more { text-decoration:underline; }
a.swap .enlarge { position:absolute; top:-10px; left:7px; width:23px; height:24px; z-index:10; }



#content .stepbox { margin-left: -70px; margin-right: -70px; *margin-left: -69px; *margin-right: -69px; }
#content .stepbox img { padding: 0; border: none; background: none; margin-left: 4px; margin-bottom: 2px; }
#content .flushleft { margin-left: -70px; *margin-left: -69px; position: relative }
#content .flushright { margin-right: -70px; *margin-right: -69px; position: relative }



#generator #bigbox .column.first h1 img { margin-right: -167px; position: relative }
#generator #bigbox .column.first p.intro { padding-right: 25px; }
#generator #bigbox .column.last img { margin: -51px -50px -78px -72px; _margin-right: -83px; float: none; }

#generator .gridbox.categorize .column.first img.flushleft { margin-bottom: -30px; margin-left: -71px; _margin-right: -100px; }
#generator .gridbox.categorize .column.last { padding-top:93px; }
#generator .gridbox.categorize .column.last img.right { margin-left: 20px; }

#generator .gridbox.location .column.first { padding-top:40px; }
#generator .gridbox.location .column.first img.right { margin-top: -8px; margin-right: -32px; _margin-right: 0; }
#generator .gridbox.location .column.last img.right { margin-right: -40px; position: relative; }

#generator .gridbox.attachment .column.last { min-height:400px; _height:400px; padding-right: 70px; margin-right: -70px; *padding-right: 69px; *margin-right: -69px; padding-top:5px; position: relative; }
#generator .gridbox.attachment .column.last img.right { margin-left: 40px; }
#generator .gridbox.attachment .column.last h2.earbuds { padding-top: 10px; padding-right: 140px; }
#generator .gridbox.attachment .column.last p.earbuds { padding-right: 140px; }



/* viewer */
#viewer #bigbox .column.first h1 img { margin-right: -85px; position: relative; }
#viewer #bigbox .column.first p.intro { padding-right: 80px; }
#viewer #bigbox .column.last img { margin: 78px -88px -50px -95px; float: none; }

#viewer .gridbox.mapview .column.first img { margin-bottom: -15px; }
#viewer .gridbox.mapview .column.last { padding-top: 50px; }
#viewer .gridbox.mapview .column.last h2 { padding-top: 5px; }
#viewer .gridbox.mapview .column.last p { width: 380px; }
#viewer .gridbox.mapview .column.last img.clear { margin-right: 350px; }

#viewer .gridbox.filters .column.first { padding-top: 35px; }
#viewer .gridbox.filters .column.first h2 { padding-right:100px; }
#viewer .gridbox.filters .column.last img.flushright { *margin-right: -69px; *margin-left: -70px; }


/* router */
#router #bigbox { min-height: 433px; _height: 433px; padding-right: 70px; margin-right: -70px; *padding-right: 69px; *margin-right: -69px; position: relative; background: url(../img/caprouter_distribuzione_scambio_dati.png) no-repeat right top; } 
#router .gridbox.recipients { padding-top: 0px; }
#router .gridbox.recipients .column.last { padding-top: 135px; }
#router .gridbox.recipients .column.last img.left { margin-right: 40px; }
#router .gridbox.recipients .column.last p.recipients { padding-bottom: 20px; }

#router .gridbox.feed .column.first { padding-top: 20px; }
#router .gridbox.feed .column.last { margin-top:-50px; }

#router .gridbox.feed .column.first img.right { margin-left: 40px;  }

#router .gridbox.security .column.first img { margin-top: -40px; margin-bottom: -75px; margin-right:-38px; }


/* tutorial scenario 1 */
#scenario_1 #bigbox .column.first h1 img { margin-right: -167px; position: relative }
#scenario_1 #bigbox .column.first p.intro { padding-right: 25px; }
#scenario_1 #bigbox .column.last img { margin: -51px -50px -78px -72px; _margin-right: -83px; float: none; }

/* tutorial scenario 2 */
#scenario_2 #bigbox .column.first h1 img { margin-right: -167px; position: relative }
#scenario_2 #bigbox .column.first p.intro { padding-right: 25px; }
#scenario_2 #bigbox .column.last img { margin: -51px -50px -78px -72px; _margin-right: -83px; float: none; }

/* tutorial scenario 3 */
#scenario_3 #bigbox .column.first h1 img { margin-right: -167px; position: relative }
#scenario_3 #bigbox .column.first p.intro { padding-right: 25px; }
#scenario_3 #bigbox .column.last img { margin: -51px -50px -78px -72px; _margin-right: -83px; float: none; }

/* tutorial scenario 4 */
#scenario_4 #bigbox .column.first h1 img { margin-right: -167px; position: relative }
#scenario_4 #bigbox .column.first p.intro { padding-right: 25px; }
#scenario_4 #bigbox .column.last img { margin: -51px -50px -78px -72px; _margin-right: -83px; float: none; }
