html,body{
width:100%;
margin:0;
background-color:#fff;
}
div.contents{
width:980px;
margin:0 auto;
}
div#wrap1{
width:100%;
min-width:1000px;
background-color:#69d7d7
}
div#welcome{
float:left;
font-family:'oxygenlight',sans-serif;
font-size:90px;
color:#2a6373;
}
div#logo{
float:right;
margin-top:40px;
}
div#logo div{
font-family:'oxygenlight',sans-serif;
font-size:35px;
color:#FFF;
margin-top:10px;
}
div#welcomeMsg{
clear:both;
text-align:left;
font-family:'oxygenlight',sans-serif;
font-size:28px;
color:#d5512f;
padding-top:20px;
padding-bottom:20px;
margin-bottom:0px;
border-top-color:#f4f4f4;
border-top-style:solid;
border-top-width:1px;
}
span.ok{
color:#2a6374;
}
span.ko{
color:#d5512f;
}
div#wrap2{
width:100%;
height:230px;
min-width:1000px;
background-color:#30b2b2;
padding-top:15px;
padding-bottom:45px;
}
div.buttonContainer{
width:100%;
text-align:right;
margin-top:35px;
}
div#exampleIntro{
font-family:'oxygenregular',sans-serif;
font-size:16px;
color:#f4f4f4;
width:100%;
text-align:center;
margin-bottom:10px;
}
div.examplesRow{
display:flex;
justify-content:space-between;
width:90%;
height:100%;
margin-left:5%;
margin-right:5%;
}
div.exampleBox{
width:250px;
height:180px;
text-align:center;
}
img.screenshot{
width:250px;
height:188px;
border-radius:6px;
border-style:solid;
border-width:1px;
border-color:#a9bbc2;
overflow:hidden
}
div.exampleBox .header{
margin-top:5px;
margin-bottom:2px;
font-family:'oxygenlight',sans-serif;
font-weight:bold;
font-size:13px;
color:#f4f4f4;
}
a.exampleLink{
text-decoration:none;
}
a.exampleLink:visited{
text-decoration:none;
}
div.examples::after{
content:'';
width:100%;;
display:inline-block
}
a.button{
text-decoration:none;
text-align:center;
}
div#wrap3{
width:100%;
min-width:1000px;
background-color:#006666;
padding-top:30px;
padding-bottom:30px;
}
div#monitorIntro{
font-family:'oxygenregular',sans-serif;
font-size:16px;
color:#f4f4f4;
width:100%;
text-align:center;
margin-bottom:30px;
}
div#monitorImgContainer{
width:729px;
height:310px;
margin:0 auto;
position:relative;
margin-bottom:30px;
}
img#monitorBack{
position:absolute;
top:0;
left:0;
z-index:10;
border:0;
}
img#monitorFront{
position:absolute;
top:0;
left:0;
z-index:5;
border:0;
}
.launchButton{
font-family:'oxygenregular',sans-serif;
font-size:25px;
color:#fff;
height:70px;
width:412px;
padding:1px 0 1px 0;
border:0;
text-align:center;
background-color:#69d7d7;
padding-left:20px;
padding-right:20px;
cursor:pointer;
}
.launchButton:hover{
background-color:#cccc24;
}