/* Reset */
* {
    -webkit-box-sizing:border-box;
    -moz-box-sizing:border-box;
    box-sizing:border-box;
    margin:0;
    padding:0;
}

/* HTML5 elements */
header, article, section, footer {
    display:block;
}

/* Typography */
body {
    font-family:'Helvetica Neue', 'Free Sans', 'Deja Vu Sans', Arial, Helvetica, 'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro', Osaka, 'メイリオ', Meiryo, 'ＭＳ Ｐゴシック', 'MS PGothic', 'Droid Sans', sans-serif;
    line-height:1.5;
}
h1, h2, h3, h4 {
    font-family:georgia, 'Times New Roman', times, serif;
    font-weight: normal;
    line-height:1.1;
}
h1 {
    font-size: 218%;
}
h2 {
    font-size: 164%;
}
footer {
    font-size:0.9em;
}

/* General */
body {
    background:#444;
    background-image:-webkit-linear-gradient(top, #222, #444);
    background-image:-moz-linear-gradient(top, #222, #444);
    background-image:-ms-linear-gradient(top, #222, #444);
    background-image:-o-linear-gradient(top, #222, #444);
    background-image:linear-gradient(top, #222, #444);
    background-repeat:no-repeat;
    color:#fff;
}

/* Links */
a {
    color:#dadaff;
}
a:hover, a:focus, a:active {
    border-radius:3px;
    box-decoration-break:clone;
    box-shadow:0 0 1px 1px #f90;
    color:#fff;
}
footer a {
    color:#5a5aff;
}
footer a:hover, footer a:focus, footer a:active {
    color:#00f;
}

.icons a:hover, .icons a:focus, .icons a:active {
    box-shadow:none;
}
a:active {
    text-decoration:none;
}
a img:hover {
    border-color:#f90;
    opacity:1;
}
/* End of links */

/* Headings */
h1, h2 {
    margin:10px 0;
    text-shadow:0 1px 2px #000;
}
h1 {
    margin-bottom:5px;
    text-align:center;
}
h2 {
    height:32px;
    xline-height:32px;
    padding-left:36px;
}
.contents h2 {
    text-align:right;
}
#css3 h2 {
    background:url(images/css3.png) top left no-repeat;
}
#html5 h2 {
    background:url(images/html5.png) top left no-repeat;
}
#svg h2 {
    background:url(images/svg.png) top left no-repeat;
}
#utils h2 {
    background:url(images/utils.png) top left no-repeat;
}
#pres h2 {
    background:url(images/pres.png) top left no-repeat;
}
#music h2 {
    background:url(images/music.png) top left no-repeat;
}
/* End of headings */

article {
    margin:0 auto;
    width:960px;
}
section {
    margin:1em auto;
    width:47%;
}
section:nth-child(2n+1) { /* Odd sections */
    clear:both;
    float:left;
}
section:nth-child(2n) { /* Even sections */
    float:right;
}
section ul {
    border:solid 1px #f90;
    -webkit-border-radius:10px;
    -moz-border-radius:10px;
    border-radius:10px;
    -webkit-box-shadow:0 2px 5px 2px #222;
    -moz-box-shadow:0 2px 5px 2px #222;
    box-shadow:0 2px 5px 2px #222;
    list-style:none;
    margin-top:5px;
    padding:10px;
}
p {
    margin:10px;
}
.icons li {
    display:inline;
}
.icons img {
    border:solid 1px #000;
    height:75px;
    margin-right:3px;
    opacity:0.8;
    width:75px;
    -webkit-transition:0.3s;
    -moz-transition:0.3s;
    -ms-transition:0.3s;
    -o-transition:0.3s;
    transition:0.3s;
}
em {
    font-size:0.9em;
}
footer {
    background:#fff;
    border:solid 1px #f90;
    -webkit-border-radius:10px;
    -moz-border-radius:10px;
    border-radius:10px;
    -webkit-box-shadow:0 2px 5px 2px #333 inset;
    -moz-box-shadow:0 2px 5px 2px #333 inset;
    box-shadow:0 2px 5px 2px #333 inset;
    clear:left;
    color:#444;
    padding:10px 0px;
    margin:10px;
    text-align:center;
}
footer img {
    vertical-align:middle;
}
#cc {
    border:none;
    margin:5px;
}

/* 
 * Media Queries for smaller devices
 */
@media screen and (max-width: 960px), screen and (max-device-width: 960px)  {
    article {
        width:96%;
    }
    section {
        width:96%;
    }
    section:nth-child(2n+1) { /* Odd sections */
        float:none;
    }
    section:nth-child(2n) { /* Even sections */
        float:none;
    }
}

/* 
 * Media Queries for TVs
 */
@media tv,
(width: 3840px) and (height: 2160px), /* For 4k TVs */
(width: 1920px) and (height: 1080px),
(width: 1824px) and (height: 1026px), /* For PS3 */
(width: 1692px) and (height: 952px), /* For Google TV (no scrollbar) */
(width: 1677px) and (height: 952px), /* For Google TV (with scrollbar) */
(width: 1280px) and (height: 720px) {
    body {
        font-size:2em;
    }
    article {
        width:90%;
    }
    section {
        width:90%;
    }
    section:nth-child(2n+1) { /* Odd sections */
        float:none;
    }
    section:nth-child(2n) { /* Even sections */
        float:none;
    }
}

/* 
 * Media Queries for minimized state, e.g. Opera's Speed Dial
 */
@media screen and (view-mode: minimized){
    html {
        margin:2px;
    }
    body{
        background:
            url(images/html5.png) top left no-repeat,
            url(images/utils.png) top right no-repeat,
            url(images/svg.png) bottom left no-repeat,
            url(images/music.png) bottom right no-repeat;
        background-color:#444;
        line-height:1.2;
        padding:30px;
    }
    article {
        display:none;
    }
    footer {
        display:none;
    }
}