add extjs 6.0.1 sources

[extjs.git] / extjs / examples / main.css

body {\r
    font: 300 15px/19px klavika,helvetica,arial,sans-serif;\r
    margin: 0;\r
    -webkit-font-smoothing: antialiased;\r
    -moz-osx-font-smoothing: grayscale;\r
}\r
\r
* {\r
    -moz-box-sizing: border-box;\r
    -ms-box-sizing: border-box;\r
    -webkit-box-sizing: border-box;\r
    box-sizing: border-box;\r
}\r
\r
a {\r
    text-decoration: none;\r
    color: inherit;\r
}\r
\r
#title {\r
    height: 60px;\r
    width: 100%;\r
    background: #fff;\r
    border-bottom: 5px solid #c8c8c8;\r
}\r
\r
#title > .wrap {\r
    height: 100%;\r
}\r
\r
.wrap {\r
    width: 1000px;\r
    padding: 0 20px 10px 20px;\r
    margin: auto;\r
    position: relative;\r
    overflow: hidden;\r
}\r
\r
#sencha-logo,\r
#title-text {\r
    height: 50px;\r
    line-height: 50px;\r
    position: absolute;\r
    top: 50%;\r
}\r
\r
#sencha-logo {\r
    background-image: url(../welcome/img/logo-sencha-sm.png);\r
    width: 120px;\r
    left: 20px;\r
    margin-top: -27px;\r
}\r
\r
#ext-logo {\r
    background-image: url(../welcome/img/ext-cube.png);\r
    width: 200px;\r
    height : 86px;\r
    line-height: 86px;\r
}\r
\r
#title-text {\r
    right: 20px;\r
    font-weight: 400;\r
    font-size: 17px;\r
    margin-top: -21px;\r
    color: #888;\r
}\r
\r
#header {\r
    background: url(resources/images/header-bg.jpg);\r
    width: 100%;\r
}\r
\r
#header > .wrap {\r
    display: table;\r
    table-layout: fixed;\r
    height: 100px;\r
}\r
\r
.header-item {\r
    display: table-cell;\r
    vertical-align: middle;\r
}\r
\r
#header-title {\r
    width: 370px;\r
    font-size: 36px;\r
    color: #1c5a7d;\r
}\r
\r
.header-link {\r
    text-align: right;\r
}\r
.header-link > a {\r
    font-weight: 500;\r
    color: #888;\r
}\r
\r
.header-link > a:hover {\r
    color: #444;\r
}\r
\r
.group-header {\r
    border-top: 1px solid #c8c8c8;\r
    height: 80px;\r
    font-size: 24px;\r
    text-transform: uppercase;\r
    color: #1c5a7d;\r
    cursor: pointer;\r
}\r
\r
.group-header > .wrap {\r
    display: table;\r
    table-layout: fixed;\r
    height: 80px;\r
}\r
\r
.group-title,\r
.group-action {\r
    display: table-cell;\r
    vertical-align: middle;\r
}\r
\r
.group-action {\r
    width: 48px;\r
}\r
\r
.group-action-icon {\r
    height: 24px;\r
    width: 24px;\r
    font-size: 24px;\r
    line-height: 24px;\r
    font-family: Sencha-Examples;\r
    background: center no-repeat;\r
}\r
\r
.collapsed + .group {\r
    display: none;\r
}\r
\r
.group {\r
    border-top: 5px solid #25657b;\r
    background-color: #2f7d9c;\r
    padding-bottom: 30px;\r
}\r
\r
.example {\r
    float: left;\r
    padding-left: 85px;\r
    position: relative;\r
    color: #fff;\r
    width: 300px;\r
    height: 100px;\r
    margin: 30px 20px 0 0\r
}\r
\r
.example-icon-wrap {\r
    height: 74px;\r
    width: 84px;\r
    font-size: 72px;\r
    line-height: 72px;\r
    position: absolute;\r
    top: 50%;\r
    left: 0;\r
    margin-top: -36px;\r
    color: #1c5a7d;\r
    font-family: Sencha-Examples;\r
}\r
\r
/* tag name added to this selector to override line-height in font icon stylesheet */\r
div.example-icon {\r
    color: #fff;\r
    position: absolute;\r
    top: 0;\r
    left: 0;\r
    height: 100%;\r
    width: 100%;\r
    font-size: 36px;\r
    line-height: 72px;\r
    text-align: center;\r
}\r
\r
.example-text-wrap {\r
    display: table;\r
    height: 100%;\r
}\r
.example-text-wrap-inner {\r
    padding-left: 15px;\r
    display: table-cell;\r
    vertical-align: middle;\r
}\r
\r
.example-title {\r
    font-size: 17px;\r
    font-weight: bold;\r
}\r
\r
#footer {\r
    padding: 24px 0;\r
    border-top: 1px solid #c8c8c8;\r
    color: #888;\r
}\r
\r
\r
@media screen and (max-width: 1000px) {\r
    #header > .wrap {\r
        padding: 0 10px 10px 10px;\r
    }\r
    \r
    .wrap {\r
        width: 100%;\r
    }\r
\r
    #header-title {\r
        width: 100%;\r
        display: block;\r
        padding-bottom: 8px;\r
    }\r
\r
    #ext-logo {\r
        margin: auto;\r
    }\r
\r
    .header-item {\r
        display: inline-block;\r
        width: 33%;\r
    }\r
    \r
    .header-link {\r
        text-align: center;\r
    }\r
}\r
\r
@media screen and (max-width: 480px) {\r
    .header-item {\r
        font-size: .75em;\r
    }\r
}\r
\r
@media screen and (max-width: 320px) {\r
    .header-item {\r
        font-size: .6em;\r
    }\r
}