.theme-selector-layout .layout-cell { padding: 24px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } .theme-selector-layout .theme-thumbnail { width: 288px; background: #ecf0f1; border-top: 1px solid #e3e7e9; } .theme-selector-layout .theme-thumbnail img { opacity: 0.6; filter: alpha(opacity=60); width: 240px; } .theme-selector-layout .theme-description { border-top: 1px solid #f2f3f4; } .theme-selector-layout .theme-description h3, .theme-selector-layout .theme-description p { opacity: 0.6; filter: alpha(opacity=60); } .theme-selector-layout .theme-description h3 { margin: 0 0 25px 0; font-size: 28px; color: #2b3e50; display: inline-block; } .theme-selector-layout .theme-description p.author { font-size: 13px; display: inline-block; color: #808c8d; } .theme-selector-layout .theme-description p.description { color: #2b3e50; font-size: 14px; line-height: 180%; margin-bottom: 30px; } .theme-selector-layout .theme-description .controls .btn > i { margin-right: 5px; font-size: 16px; position: relative; top: 1px; } .theme-selector-layout .theme-description .controls .btn > i.icon-star { color: #f1a84e; } .theme-selector-layout .theme-description .controls .dropdown { display: inline-block; } .theme-selector-layout .layout-row.active .theme-thumbnail { background: #bdc3c7; border-top-color: #bdc3c7; } .theme-selector-layout .layout-row.active .thumbnail-container { position: relative; } .theme-selector-layout .layout-row.active .thumbnail-container:after { content: ''; display: block; width: 0; height: 0; border-top: 14px solid transparent; border-bottom: 14px solid transparent; border-left: 15px solid #bdc3c7; position: absolute; right: -35px; top: 50%; margin-top: -14px; } .theme-selector-layout .layout-row.active .theme-description h3, .theme-selector-layout .layout-row:hover .theme-description h3, .theme-selector-layout .layout-row.active .theme-description p, .theme-selector-layout .layout-row:hover .theme-description p { opacity: 1; filter: alpha(opacity=100); } .theme-selector-layout .layout-row.active .theme-thumbnail img, .theme-selector-layout .layout-row:hover .theme-thumbnail img { opacity: 1; filter: alpha(opacity=100); } .theme-selector-layout .layout-row:first-child .theme-description, .theme-selector-layout .layout-row.links .theme-description, .theme-selector-layout .layout-row:first-child .theme-thumbnail, .theme-selector-layout .layout-row.links .theme-thumbnail { border-top: none; } .theme-selector-layout .layout-row.links .theme-thumbnail { border-bottom: 1px solid #e3e7e9; } .theme-selector-layout .layout-row.links .theme-description { border-bottom: 1px solid #f2f3f4; } .theme-selector-layout .create-new-theme { margin-bottom: 10px; } .theme-selector-layout .create-new-theme, .theme-selector-layout .find-more-themes { background: #ecf0f1; color: #2b3e50; text-decoration: none; display: block; padding: 20px; -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; } .theme-selector-layout .create-new-theme:hover, .theme-selector-layout .find-more-themes:hover { background: #1795f1; color: white; } @media (max-width: 768px) { .theme-selector-layout .layout-cell, .theme-selector-layout .layout-row { display: block!important; width: auto!important; height: auto!important; } .theme-selector-layout .theme-thumbnail img { width: 100%; } .theme-selector-layout .layout-row.links .theme-thumbnail { background: transparent; padding: 0; } }