@import url(reset.css);

@font-face {
    font-family: 'noto_sansregular';
    src: url('../font/notosans-regular-webfont.eot');
    src: url('../font/notosans-regular-webfont.eot?#iefix') format('embedded-opentype'),
         url('../font/notosans-regular-webfont.woff2') format('woff2'),
         url('../font/notosans-regular-webfont.woff') format('woff'),
         url('../font/notosans-regular-webfont.ttf') format('truetype'),
         url('../font/notosans-regular-webfont.svg#noto_sansregular') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'noto_sansbold';
    src: url('../font/notosans-bold-webfont.eot');
    src: url('../font/notosans-bold-webfont.eot?#iefix') format('embedded-opentype'),
         url('../font/notosans-bold-webfont.woff2') format('woff2'),
         url('../font/notosans-bold-webfont.woff') format('woff'),
         url('../font/notosans-bold-webfont.ttf') format('truetype'),
         url('../font/notosans-bold-webfont.svg#noto_sansbold') format('svg');
    font-weight: normal;
    font-style: normal;
}
  
body {
    font-family: 'noto_sansregular', sans-serif;
    font-size: 1.09062em;
    line-height: 1.5;
}

body .skip-links {
	display: none;
}

#header-wrapper div, #header-wrapper a, #header-wrapper button, #search { 
    display: none;
}

#header-wrapper h1 {
    text-align: center;
    margin-bottom: 80px;
    background-color: #fff;
}


/*
    change position
*/

#right-col-wrapper {
    display: table-footer-group;
}

#sidebar {    
    display: table-header-group;
}

/*
    table of contents
*/

#sidebar button {
    display: none;
}
    
#sidebar li li { 
    margin-left: 50px; 
}

/*
    content
*/

#right-col-wrapper ol, #right-col-wrapper ul { list-style-position: inside; }

#right-col-wrapper ol { list-style-type: decimal; }            
#right-col-wrapper ul { list-style-type: disc; }

    .subsection h2, .subsection h3, .subsection h4 {
        font-family: 'noto_sansbold', sans-serif;
    }
    
    .subsection h2 { font-size: 1.40909em; }
    .subsection h3 { font-size: 1.27272em; }
    .subsection h4 { font-size: 1.13563em; }

    .subsection h2 {
        margin: 45px 0 40px;    
    }
    
    .subsection h3, .subsection h4 {
        margin: 37px 0 40px;        
    }
    
    /*#right-col-wrapper { page-break-before: always; }    */
    .subsection h2:first-child { page-break-before: always; }
    
    /*.subsection { page-break-inside: avoid; }*/
    /*
    @-moz-document url-prefix() {    
        .subsection:first-child { page-break-inside: auto; }
    }
    */
    
        .subsection-content span.subfield { color: #6560e5; }		
        .subsection-content strong { font-family: 'noto_sansbold', sans-serif; }

        .subsection-content ul, .subsection-content ol { 
            padding-left: 40px;            
            list-style-position: inside; 
        }
        
        .subsection-content ul { list-style-type: disc; }
        .subsection-content ol { list-style-type: decimal; }
        
        .subsection-content .pattern, .subsection-content .anti-pattern {                
            padding: 15px 40px;
            margin: 23px 0 20px;
            page-break-inside: avoid;
        }

        .subsection-content .pattern {
            background-color: #e6e6e6;
        }

        .subsection-content .anti-pattern {
            background-color: #faaaaa;
            text-decoration: line-through;
        }

/*
    table
*/

.subsection-content table {
    text-align: center;
    line-height: 1.33333;
}    

.subsection-content table[align=left] {
    margin-right: auto;
    float: none;
}

.subsection-content table[align=center] {
    margin: 0 auto;
}

.subsection-content table[align=right] {
    margin-left: auto;    
    float: none;
}

    .subsection-content table tr {
        border-bottom: 1px solid #e6e6e6;
    }

    .subsection-content table tr:first-child {
        font-family: 'noto_sansbold', sans-serif;
    }

    .subsection-content table tr:last-child {
        border-bottom: none;
    }


    .subsection-content table td {
        padding: 5px 15px;
    }