/*
 * This is a simple CSS typography adopted to embedded views in GUI App
 * It contains styles for:
 *  > h1 - header 1 
 *  > h2 - header 2
 *  > img.center - cented image for better look of screenshots
 *  > div.note - notice field
 *  > div.warn - warning field
 *  > div.info - information field
 * 
 * 
 * @author Nikolay Zamosenchuk <nikolazius@gmail.com>
 */

    body {
    font-size:13px;
	font-family: Segoe UI, Ubuntu, Lucida Grande, Geneva, Arial, Helvetica, sans-serif;
	color: black;
    margin: 0;
	padding: 0;
	height:100%;
	background: url('img/bg.png') fixed no-repeat right bottom;
    }
    a:hover, a:visited, a:link, a:active {
        text-decoration: none;
    }
    /* Remove border in IE and FF */
    a img
    {
        border:none;
    }
    img.center {
        display: block;
        margin-left: auto;
        margin-right: auto
    }
    img {
    height: auto;
    max-width: 100%;
    }



    h1 {
	background-color: #E0E0E0;
	width: 100%;
	padding: 7px 0px;
	font-size:16px;
	margin:0px;
    }
    h1 img {
    margin: 0px 3px;
	vertical-align: middle;
    }
    h2 {
	background-color: #EEEEEE;
	width: 100%;
	padding: 5px 0px;
	font-size:14px;
    margin:0px;
    }
    h3 {
	font-size:14px;
    }
    h4 {
	font-size:13px;
    }
    pre {
    overflow: auto;
	color: black;
	padding: 10px;
	margin: 10px;
	border-radius: 3px;
    border: 1px dashed #999;
	background-color: #DDD;
    }
    div.note, div.info, div.warn {
    position: relative;
    text-align: left;
    padding: 10px 10px 10px 28px;
    margin: 10px;
    border-radius: 3px;
    }
    div.note {
    color: black;
    border: 1px solid #DDCC66;
	background-color: #FFFF99;
    }
    div.info {
    color: white;
    border: 1px solid #005588;
	background-color: #006699;
    }
    div.warn {
	color: white;
    border: 1px solid #700000;
	background-color: #990000;
    }

/*<================================ CUSTOM ================================>*/
    .inline-button {
        font-family: monospace;
    	display: inline-block;
    	padding: 1px 4px;
    	border: 1px solid #ccc;
        border-bottom-width: 2px;
    	border-radius: 3px;
    	background-color: #f7f7f7;
    }
    .inline-image {
        display: inline-block;
        height: 1.2em;
    }
    .inline-button.inline-image {
        padding: 1px;
        margin-bottom: -0.2em;
    }
    div.note::before, div.info::before, div.warn::before{
        content: "!";
        height:100%;
        line-height: 100%;
        text-align: center;
        font-size: 2em;
        font-weight: bold;
        position: absolute;
        top: 0;
        left: 0;
        border-radius: 3px;
        border-right: 1px dashed;
        padding: 0 5px 0 5px;
    }
    div.note::before {
        border-right-color: #DDCC66;
        background-color: #FFEE88;
        color: #CCBB55;
    }
    div.info::before {
        border-right-color: #077DB2;
        background-color: #0076AA;
        color: #1BA6DA;
    }
    div.warn::before {
        border-right-color: #B01717;
        background-color: #A91010;
        color: #E04747;
    }
    abbr {
        cursor: help;
        border-bottom: 1px dotted #aaa;
    }
    ul, ol {
        padding-left: 2em;
    }