/**
 * 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}body{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:before,blockquote:after,q:before,q:after{content:'';content:none}:focus{outline:0}ins{text-decoration:none}del{text-decoration:line-through}table{border-collapse:collapse;border-spacing:0}

/**
 * Style
 */
html,body
{background: #969696;}

body
{font: 62.5% "Lucida Grande", Verdana, Arial, sans-serif;}

#bg
{overflow: hidden; position: absolute; top: 0; left: 0;}

#wrapper
{width: 100%; z-index: 5; position: absolute; top: 0; left: 0; overflow: hidden;}

#persons
{width: 100%; z-index: 10; position: absolute; top: 0; left: 0;}

/**
 * Persons
 */
.person
{display: block; z-index: 15; position: absolute; text-indent: -10000px; background: #fff; opacity: 0; filter: alpha(opacity = 0);}

/**
 * Layout 1
 */

#wrapper.layout_1 .person.one
{height: 36%; width: 7%; top: 41.5%; left: 13.5%;}

#wrapper.layout_1 .person.two
{height: 35.5%; width: 7%; top: 42.4%; left: 20.5%;}

#wrapper.layout_1 .person.three
{height: 36%; width: 6.5%; top: 41.5%; left: 27.5%;}

#wrapper.layout_1 .person.four
{height: 35%; width: 5.5%; top: 42.5%; left: 34%;}

#wrapper.layout_1 .person.five
{height: 40.5%; width: 6.6%; top: 37.5%; left: 39.5%;}

#wrapper.layout_1 .person.six
{height: 40%; width: 6.5%; top: 38%; left: 46.1%;}

#wrapper.layout_1 .person.seven
{height: 33.5%; width: 5.7%; top: 44%; left: 52.6%;}

#wrapper.layout_1 .person.eight
{height: 37%; width: 6.7%; top: 42%; left: 58.4%;}

#wrapper.layout_1 .person.nine
{height: 37%; width: 7.7%; top: 42%; left: 66.6%;}

#wrapper.layout_1 .person.ten
{height: 37%; width: 6.5%; top: 42%; left: 74.3%;}

#wrapper.layout_1 .person.eleven
{height: 35%; width: 5.5%; top: 44%; left: 80.8%;}

/**
 * Layout 2
 */
#wrapper.layout_2
{margin-top: -75px;}

#wrapper.layout_2 .person.one
{height: 41%; width: 8.5%; top: 40.5%; left: 5%;}

#wrapper.layout_2 .person.two
{height: 40%; width: 8%; top: 41.5%; left: 13.5%;}

#wrapper.layout_2 .person.three
{height: 39.5%; width: 9%; top: 41.5%; left: 21.5%;}

#wrapper.layout_2 .person.four
{height: 39.5%; width: 6.5%; top: 41%; left: 30.5%;}

#wrapper.layout_2 .person.five
{height: 45.5%; width: 9%; top: 35.5%; left: 37%;}

#wrapper.layout_2 .person.six
{height: 43.5%; width: 8%; top: 36.8%; left: 46.1%;}

#wrapper.layout_2 .person.seven
{height: 38%; width: 8.4%; top: 42%; left: 54.1%;}

#wrapper.layout_2 .person.eight
{height: 40.1%; width: 9%; top: 40%; left: 62.5%;}

#wrapper.layout_2 .person.nine
{height: 40.1%; width: 9.4%; top: 40.1%; left: 71.5%;}

#wrapper.layout_2 .person.ten
{height: 40.5%; width: 8.2%; top: 40%; left: 81.3%;}

#wrapper.layout_2 .person.eleven
{height: 38.2%; width: 7.9%; top: 42%; left: 89.5%;}

/**
 * Tooltip
 */
.tooltip
{position: absolute; background: #222222; color: #fff; z-index: 20; padding: 10px; -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px; opacity: 0.9; line-height: 1.4;}

.tooltip strong
{display: block; text-align: center;}

.tooltip p
{padding-top: 2px;}