c9-core/plugins/c9.ide.welcome/style.css

.welcome {
    background: @welcome-background top left no-repeat;
    left: 0;
    right: 0;
    position: absolute;
    top: 0;
    bottom: 0;
    overflow: auto;
    display: flex;
    font-smoothing: @welcome-font-smoothing;
    background-attachment: local;
    color: @welcome-color;
}

.welcome-logo {
    position: absolute;
    .image-2x(@welcome-logo-image, @welcome-logo-image-width, @welcome-logo-image-height);
    background-position: top left;
    width: 155px;
    height: 103px;
    left: 32px;
    top: 34px;
}

.welcome a {
    text-decoration: none;
    color: @welcome-highlight-color;
}

.main {
    flex: 1;
    min-width: 460px;
    overflow: auto;
    position: relative;
}

.sidepanel {
    max-width: 250px;
    min-width: 150px;
    flex: 1;
    padding: 30px 30px 0 20px;
    border-left: 1px solid @welcome-panel-border-color;
    background: @welcome-panel-background;
    overflow: auto;
}

.welcome:after when(@welcome-alter-widgets = true) {
    height: 7px;
    background: @welcome-top-border;
    content: "";
    position: absolute;
    left: 775px;
    right: 0;
    top: 0;
}

.welcome .welcome-heading {
    position: absolute;
    font-size: 60px;
    font-family: Myriad Pro, Arial;
    top: 67px;
    left: 205px;
    font-weight: normal;
}

.welcome .intro {
    font-family: Arial;
    font-size: 12px;
    min-width: 400px;
    max-width: 600px;
    line-height: 1.5em;
    margin: 160px 20px 0 35px;
}

.welcome h3{
    font-weight : normal;
    font-size : 12px;
    color: @welcome-heading-color;
    border-bottom: @welcome-heading-border-bottom;
    padding-bottom: 4px;
    margin-bottom: 9px;
}

.sidepanel .video .placeholder{
    width: 100%;
    height: 150px;
    border: 1px solid rgba(255, 255, 255, 0.14);
    background: rgba(255, 255, 255, 0.05);
    font-size: 25px;
    text-align: center;
    vertical-align: middle;
    color: rgba(255, 255, 255, 0.29);
}

.sidepanel .video .placeholder:after {
    content: "";
    display: inline-block;
    height: 100%;
    width: 1px;
    vertical-align: middle;
}

.sidepanel .video label{
    width: 100%;
    text-align: center;
    display: block;
    margin: 3px;
}

.welcome .more{
    display: block;
    text-align: right;
    cursor: pointer;
}
.welcome .more:hover{
    text-decoration : underline;
}

.sidepanel h4{
    color: #b7d513;
    margin-bottom : -10px;
    margin-top: 0px;
}
.sidepanel h4:hover{
    cursor : pointer;
    text-decoration: underline;
}

.welcome .configure{
    margin: 20px 0px 0 35px;
    width: 400px;
}

.welcome .next {
    margin: 0px 0px 0 35px;
    width: 400px;
}

.welcome .form .cbblack.cbcontainer,
.welcome .form .cbblack.cbcontainer span,
.welcome .label{
    font-size : 12px;
    color : inherit;
}

.welcome ul {
    padding: 0 0 0 20px;
}

.welcome ul li {
    line-height: 18px;
    color: @welcome-highlight-color;
    cursor : pointer;
}
.welcome ul li:hover{
    text-decoration : underline;
}
.welcome .switched button {
    margin: 20px 0 0 122px;
    width: 100px;
    height: 21px;
}
.welcome .switched {
    display : none;
    position: absolute;
    left: 50%;
    top: 100px;
    background: rgb(228, 252, 232);
    color: black;
    padding: 20px;
    box-shadow: 0px 0px 40px 5px rgba(0,0,0,0.4);
    width: 400px;
    margin-left: -200px;
    z-index: 100000;
    box-sizing: border-box;
    border-radius: 3px;
}
.welcome .switched td{
    padding-right : 10px;
}
.welcome .switched th{
    text-align :left;
}
.welcome .switched h2{
    margin-top: 0;
    color: #5F7525;
}
.welcome p{
    line-height: 1.4em;
}

.welcome .black_dropdown when(@welcome-alter-widgets = true){
    background: transparent;
    border-color: rgba(0, 0, 0, 0.35);
    background-image: linear-gradient(to top, rgba(0, 0, 0, 0.13) 0%, rgba(0, 0, 0, 0) 100%);
}
.welcome .black_dropdownOver when(@welcome-alter-widgets = true){
    background-image: linear-gradient(to top, rgba(0, 0, 0, 0) 0%, rgba(255, 255, 255, 0.02) 100%);
}
.welcome .black_dropdownDown when(@welcome-alter-widgets = true){
    background-image: linear-gradient(to top, rgba(45, 45, 45, 0.08) 0%, rgba(0, 0, 0, 0.07) 100%);
}
.welcome .black_dropdown .button when(@welcome-alter-widgets = true){
    border-left: 1px solid rgba(255, 255, 255, 0.1);
}
/*.c9-optionList{*/
/*    background: rgba(29, 63, 77, 1);*/
/*    border: 1px solid #021F2A;*/
/*}*/
/*.c9-optionList .c9-dd-item.hover {*/
/*    background-color: rgba(0, 0, 0, 0.23);*/
/*}*/

.welcome .presets{
    margin: 20px 0px 40px 35px;
    width: 410px;
}

.welcome .preset_container{
    padding: 10px 10px 0 10px;
}

.welcome .preset_container .preset{
    width: 116px;
    height: 116px;
    display: inline-block;
    margin-right: 13px;
    position: relative;
    cursor: pointer;
    box-sizing: border-box;
    border: 1px solid transparent;
    background: no-repeat 50% 50%;

    border: 1px solid rgba(255, 255, 255, 0.17);
    background-color: rgba(148, 148, 148, 0.1);
}
.welcome .preset_container .preset:last-child{
    margin-right: 0;
}

.welcome .preset_container .preset:hover{
    border: 1px solid rgba(255, 255, 255, 0.28);
    background-color: rgba(148, 148, 148, 0.15);
}

.welcome .preset_container .preset.active{
    border: 1px solid rgba(255, 255, 255, 0.28);
    background-color: rgba(148, 148, 148, 0.19);
}

.welcome .preset_container .preset label{
    text-align: center;
    position : absolute;
    bottom : -25px;
    left: 0;
    right: 0;
    cursor: inherit;
    opacity: 0.5;
    border-radius: 3px;
    padding: 1px;
}
.welcome .preset_container .preset:hover label{
    opacity: 0.65;
    background: rgba(158, 158, 158, 0.1);
}
.welcome .preset_container .preset.active label{
    opacity: 0.8;
    background: rgba(158, 158, 158, 0.3) url("/static/plugins/c9.ide.layout.classic/images/check.gif") no-repeat 0 -16px;
}

.welcome .preset_container .preset#default{
    background-image : url("@{plugin-path}/images/fullide.png");
}
.welcome .preset_container .preset#minimal{
    background-image : url("@{plugin-path}/images/minimal.png");
}
.welcome .preset_container .preset#sublime{
    background-image : url("@{plugin-path}/images/sublime.png");
}