main {
    width: 100%;
/*    background: #f7f7f7; */
}

div.tips {
    width: 100%;
    display: flex;
}

div.tips-main {
    max-width: 100%;
    flex: 3;
}

div.tips-nav {
    flex: 1;
}

@media screen and (max-width:480px) {
    div.tips-nav {
	display: none;
    }
}


/* index */

a.tips-index-summary {
    text-decoration: none;
    color: #222;
}

div.tips-index-summary-box {
    box-shadow: 0px 0px 5px #aaa;
    margin: 20px;
    overflow: hidden;
}

div.tips-index-summary-box h3 {
    margin: 10px 20px;
    border-bottom: solid 1px #ddd;
}

div.tips-index-summary-box article {
    margin: 10px 30px;
}

/* article */

div.tips-article {
    width: 100%;
}

h2.tips-article-title {
    border-bottom: solid 1px #ddd;
    width: 100%;
}

article.tips-article-summary {
    color: #555;
    margin: 5px 20px;
    padding: 5px 30px;
    max-width: 100%;
}

article.tips-article-summary ul {
    margin: 0;
}

article.tips-article-article {
    margin: 100px 20px 20px 20px;
    max-width: 100%;
}

article.tips-article-article h2 {
    margin-top: 80px;
    border-left: solid 25px #ddd;
}

code {
    display:block;
    font-size:0.8em;
    font-family: Consolas, "Courier New", Courier, Monaco, monospace;
    background-color: #F7F7F7;
    padding: 20px;
    overflow-x: scroll;
}

/* nav */

div.tips-nav {
    margin: 0 20px 40px 20px;
}

div.tips-nav-list-item {
    margin: 10px 20px;
}

a.tips-nav-link {
    text-decoration:none;
    color:#333;
}