*{
    margin:0;
    padding:0;
}

body{
    width: 100%;
}

.viewport-flip {
    -webkit-perspective: 1000;
    perspective: 1000;
    position: absolute;
}
.flip {
    -webkit-backface-visibility: hidden;
    -webkit-transform: translateX(0); /* Needed to work around an iOS 3.1 bug that causes listview thumbs to disappear when -webkit-visibility:hidden is used. */
    backface-visibility: hidden;
    transform: translateX(0);
}
.flip.out {
    -webkit-transform: rotateY(-90deg);
    -webkit-animation-name: flipouttoleft;
    -webkit-animation-duration: 175ms;
    transform: rotateY(-90deg);
    animation-name: flipouttoleft;
    animation-duration: 175ms;
}
.flip.in {
    -webkit-animation-name: flipintoright;
    -webkit-animation-duration: 225ms;
    animation-name: flipintoright;
    animation-duration: 225ms;
}

@-webkit-keyframes flipouttoleft {
    from { -webkit-transform: rotateY(0); }
    to { -webkit-transform: rotateY(-90deg); }
}
@keyframes flipouttoleft {
    from { transform: rotateY(0); }
    to { transform: rotateY(-90deg); }
}
@-webkit-keyframes flipouttoright {
    from { -webkit-transform: rotateY(0) ; }
    to { -webkit-transform: rotateY(90deg); }
}
@keyframes flipouttoright {
    from { transform: rotateY(0); }
    to { transform: rotateY(90deg); }
}
@-webkit-keyframes flipintoleft {
    from { -webkit-transform: rotateY(-90deg); }
    to { -webkit-transform: rotateY(0); }
}
@keyframes flipintoleft {
    from { transform: rotateY(-90deg); }
    to { transform: rotateY(0); }
}
@-webkit-keyframes flipintoright {
    from { -webkit-transform: rotateY(90deg); }
    to { -webkit-transform: rotateY(0); }
}
@keyframes flipintoright {
    from { transform: rotateY(90deg); }
    to { transform: rotateY(0); }
}

#container{
    width: 100%;
}
.content{
    position: absolute;
    left: 32%;
    width: 70%;
    margin:10px auto;
    margin-left: -374px;
    background-color: #F8F8F8;
    border:1px solid #ccc;
    box-shadow:0 0 10px #999;
    padding:2em;
    line-height:1.4em;
    font:13.34px helvetica,arial,freesans,clean,sans-serif;
    color:black;
}
#text-container{
    white-space: pre-wrap;
    line-height: 150%;
    font-size: 14px;
}
#markdown-container table{
    font:13.34px helvetica,arial,freesans,clean,sans-serif;
    color:black;
}
p {
    margin:1em 0;
    line-height:1.5em;
}

input[type=text],input[type=password],input[type=image],textarea{font:99% helvetica,arial,freesans,sans-serif;}
select,option{padding:0 .25em;}
optgroup{margin-top:.5em;}

/*img{border:0;max-width:100%;}*/
img {
    border: 1px solid #ddd; /* Gray border */
    border-radius: 8px;  /* Rounded border */
    padding: 5px; /* Some padding */
    width: 150px; /* Set a small width */
}

/* Add a hover effect (blue shadow) */
img:hover {
    box-shadow: 0 0 2px 1px rgba(0, 140, 186, 0.5);
}

.img_wider {
    border: 1px solid #ddd; /* Gray border */
    border-radius: 8px;  /* Rounded border */
    padding: 5px; /* Some padding */
    width: 250px; /* Set a small width */
}
.img_2Dseas {
    border: 1px solid #ddd; /* Gray border */
    border-radius: 8px;  /* Rounded border */
    padding: 5px; /* Some padding */
    width: 100px; /* Set a small width */
}

abbr{border-bottom:none;}
a{color:#4183c4;text-decoration:none;}
a:hover{text-decoration:underline;}
a code,a:link code,a:visited code{color:#4183c4;}
h2,h3{margin:1em 0;}
h1,h2,h3,h4,h5,h6{border:0;}
h1{font-size:200%;padding-bottom:.25em;margin-top:1.5em;}
h1:first-child{margin-top:0;padding-top:.25em;border-top:none;}
h2{font-size:160%;margin-top:0.5em;padding-bottom:.25em;}
h3{font-size:120%;margin-top:1em;}
hr{border:1px solid #ddd;margin: 10px 0;}
ul{margin:1em 0 1em 2em;}
ol{margin:1em 0 1em 2em;}
ul li,ol li{margin-top:.5em;margin-bottom:.5em;}
ul ul,ul ol,ol ol,ol ul{margin-top:0;margin-bottom:0;}
blockquote{margin:1em 0;border-left:5px solid #ddd;padding-left:.6em;color:#555;}
dt{font-weight:bold;margin-left:1em;}
dd{margin-left:2em;margin-bottom:1em;}
h1 {
    /*color: #7F007F;*/
  color: #800000;
}
h2 {
    color: #DE6A10;
}
h3 {
  color: #1aa5cb;
}
h4 {
  color: #00882B;
}
h5 {
  color: #DCBD23;
}

#markdown-outline{
    display:none;
    position:fixed;
    top:10px;
    left:-999px;
    border:1px solid #ccc;
    box-shadow:5px 5px 2px #ccc;
    padding: 5px 10px;
    background-color: #fff;
    overflow-y: auto;
}
#markdown-outline ol{
    display: block;
    list-style-type: decimal;
    margin-top: 0.5em;
    margin-bottom: 1em;
    margin-left: 10px;
    margin-right: 0;
    padding-left: 3px;
}
#markdown-outline ul{
    margin:5px 0 5px 0;
    padding-left:15px;
    font-size:12px;
    /*border-left:1px dotted #ccc;*/
    list-style-type:disc
}
#markdown-outline ul:first-child{
    border:none;
}
#markdown-outline li{
    /*list-style-type:decimal;*/
    margin:3px 0;
}

#markdown-backTop{
    position: fixed;
    right:5px;
    bottom:5px;
    padding:5px;
    width:50px;
    height:20px;
    background:url(./backtop.gif) no-repeat 5px 5px #fff;
    border:1px solid #ccc;
    cursor:pointer;
}

/*table style*/

table {
    border-collapse:collapse !important;
}

table th, table td{
    border:1px solid #ddd !important;
    padding: 5px;
    line-height: 1.5;
    vertical-align: top;
    border-top: 1px solid #dddddd;
    text-align: center
}
table th{
    background: #EEE;
}
table p{
    margin: 0;
}

table tr:nth-child(odd){background:#FFF;}
table tr:nth-child(even){background:#FAFAFA;}
.katex-inline{
    padding: 0 5px;
}
.katex-block{
    margin: 20px 0;
    text-align: center;
    font-size: 16px;
}

pre{
    padding:5px 0;
}

code.inline {
    padding: 1px 3px;
    font-size: .72rem;
    line-height: .72rem;
    color: #c25;
    background-color: #f7f7f9;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
    font-family: Menlo,Monaco,Consolas,"Courier New",monospace;
    border: 1px solid #e1e2e8;
}

@media only print{
    #markdown-outline, #markdown-backTop {
        display: none !important;
    }
    .content {
        left: 0 !important;
        width: auto !important;
        margin-left: auto !important;
        background-color: white !important;
        border: 0 !important;
        box-shadow: 0 !important;
    }
}