/* /////// ------- THEME-MOBILE.CSS ------- \\\\\\\ */ /* Layout.css is intended for structural css only. All the heavy lifting is done here. */ /* Author(original): Chad Fontaine @ Chameleon Creative Author URI: http://www.chameleoncreative.com/ Version: 2.0 Last Revision: Dec 2015 Revised Made By: Chad Fontaine Project: Douglas Walker Description: Base install layout.css */ /*############################################################################################################################################################################################################## # # VARIOUS # ################################################################################################################################################################################################################*/ body { line-height: 1; color: #fff; background: #000; } .clear { clear: both; margin: 0; padding: 0; } .none { display:none;} body { color: #eee; font: 100 16px/22px 'Roboto', Arial, Helvetica, sans-serif; } h1.page-header { color: #999999; font: 100 38px/normal 'Roboto', Arial, Helvetica, sans-serif; margin: 0px 0px 10px 0px; padding: 0px 0px 0px 0px; border-bottom-color:#333;} #sidebar .padding { margin-bottom:40px;} /*############################################################################################################################################################################################################## # # LOGO # ################################################################################################################################################################################################################*/ #logo {} /*############################################################################################################################################################################################################## # # HEADER SEO # ################################################################################################################################################################################################################*/ #header-seo {} #header-seo h1 { font: 300 12px/normal 'Roboto', Arial, Helvetica, sans-serif; margin:0px; padding:0px; /*color: #CCC;*/ color:#797878; text-align:center} /*############################################################################################################################################################################################################## # # ROWS # ################################################################################################################################################################################################################*/ #art-feature-row, #aritist-feature-row { overflow:hidden;} /*############################################################################################################################################################################################################## # # FOREWORD # ################################################################################################################################################################################################################*/ #foreword { background: url(../images/dot-grey-dark.gif) repeat-x left 23px; margin:0px 0px 40px 0px; text-align:center;} #foreword-title { text-align:center;} #foreword h2 { color: #404040; font: 300 32px "Roboto",Arial,Helvetica,sans-serif; margin: 0px 0px 30px 0px; padding: 0px 20px 0px 20px; text-transform: lowercase; background: #000; text-align:center; display:inline-block; } #foreword h3 { color: #404040; font: 500 24px "Roboto",Arial,Helvetica,sans-serif; margin: 0px 0px 0px 0px; padding: 0px 0px 0px 0px;} #foreword h4 { color: #404040; font: 300 24px "Roboto",Arial,Helvetica,sans-serif; margin: 0px 0px 0px 0px; padding: 0px 0px 0px 0px;} #foreword span { color: #404040; font-size: 75px; line-height: 60px; padding-top: 4px; padding-right: 8px; padding-left: 8px; font-family: Georgia; } #foreword span.first { float: left;} #foreword span.last { float: right;} #foreword span { display:none;} /*############################################################################################################################################################################################################## # # BLOCK SIDEBAR BOOKS # ################################################################################################################################################################################################################*/ #books { margin: 20px 0px 30px 0px} #books h2 {color: #999999; font: 300 20px/normal 'Roboto', Arial, Helvetica, sans-serif; margin: 0px 0px 3px 0px; padding: 0px 0px 0px 0px;} #books a.cta { background-color: #272b30; background-image: none; border: none; border-radius: 4px; box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset; text-align:center; color: #999; display: inline-block; font-size: 14px; height: auto; padding: 3px 12px; transition: border-color 0.15s ease-in-out 0s, box-shadow 0.15s ease-in-out 0s; width: 100%; max-width:235px; margin:3px 0px 0px 0px; } #books a:hover.cta { background-color: #430c58; color:#fff; text-decoration: none;} #books a img { border:1px solid #2e2e2e;} #books a:hover img { border-color: #430c58;} /*############################################################################################################################################################################################################## # # NAVBAR # ################################################################################################################################################################################################################*/ .navbar-inverse { background-color: #000; margin-top:10px; border-color: #430c58;} .navbar-inverse .navbar-collapse, .navbar-inverse .navbar-form, .navbar-inverse .navbar-toggle { border-color: #430c58;} .navbar-inverse .navbar-toggle:hover, .navbar-inverse .navbar-toggle:focus { background-color: #430c58;} .navbar-inverse .navbar-nav > .active > a, .navbar-inverse .navbar-nav > .active > a:hover, .navbar-inverse .navbar-nav > .active > a:focus, .navbar-inverse .navbar-nav > li > a:hover, .navbar-inverse .navbar-nav > li > a:focus { background-color: #430c58; color: #ffffff; text-decoration:none;} .nav li a { text-decoration:none;} .navbar-inverse .navbar-nav .open .dropdown-menu > li > a:hover, .navbar-inverse .navbar-nav .open .dropdown-menu > li > a:focus, .dropdown-menu > li > a:hover, .dropdown-menu > li > a:focus, .navbar-inverse .navbar-nav .open .dropdown-menu > .active > a, .navbar-inverse .navbar-nav .open .dropdown-menu > .active > a:hover, .navbar-inverse .navbar-nav .open .dropdown-menu > .active > a:focus { background-color: #430c58; color: #CCC; text-decoration:none; } .navbar-inverse .navbar-nav > .open > a, .navbar-inverse .navbar-nav > .open > a:hover, .navbar-inverse .navbar-nav > .open > a:focus { background-color: transparent; color: #CCC; } /*############################################################################################################################################################################################################## # # PRESS PAGE # ################################################################################################################################################################################################################*/ #press { text-align:center;} #press img { margin: 15px auto 15px auto;} /*############################################################################################################################################################################################################## # # ARTIST FEATURE ROW # ################################################################################################################################################################################################################*/ #aritist-feature-row {text-align:center; color:#797878; font: 300 18px/normal 'Roboto', Arial, Helvetica, sans-serif; background:url(../images/layout/bio-row.jpg) no-repeat center top; padding:70% 0px 0px 0px; border-bottom: 1px solid #430c58; background-size: 100% auto;} #aritist-feature-row .padding { margin: 0px 20px 30px 20px;} #aritist-feature-row h2 { color:#2c2623; font: 300 38px/normal 'Roboto', Arial, Helvetica, sans-serif; margin:0px; padding:0px;} #aritist-feature-row a.cta { display:block; width: 100%; height:auto; font: 500 18px/normal 'Roboto', Arial, Helvetica, sans-serif; color:#430c58; text-decoration:none;} #aritist-feature-row a:hover.cta { color:#fff;} /*############################################################################################################################################################################################################## # # ART FEATURE ROW # ################################################################################################################################################################################################################*/ #art-feature-row { padding:40px 0px 40px 0px; text-align:center;} #art-feature-row .col-sm-4 div { width:290px; margin:0px auto;} #art-feature-row a, #art-feature-row a:hover { text-decoration:none;} #art-feature-row a h2 { color:#404040; font: 300 32px/normal 'Roboto', Arial, Helvetica, sans-serif; margin:0px; padding:0px; text-transform:lowercase; text-align:center;} #art-feature-row a:hover h2 { color:#949494;} #art-feature-row a img { border: 1px solid #000;} #art-feature-row a:hover img { border-color: #430c58;} #art-feature-row .cta { margin-bottom:25px; text-align:left; text-indent:200px; display:block; width: 100%; height:auto; background: url(../images/layout/more-purple.jpg) no-repeat left top; font: 500 14px/normal 'Roboto', Arial, Helvetica, sans-serif; color:#404040; text-decoration:none;} #art-feature-row a:hover .cta { color:#fff;} /*############################################################################################################################################################################################################## # # BLOG # ################################################################################################################################################################################################################*/ body.blog #sidebar .padding, body.node-type-blog #sidebar .padding { margin: 40px 0px 0px 20px} #block-views-display-blog-archive-block h2 { color:#666666} #block-views-display-blog-archive-block ul { list-style: none; list-style-image:none; list-style-type:none; color: #639; font-size:14px; margin: 0px 0px 0px 10px; padding:0px; font: 500 18px/normal 'Roboto', Arial, Helvetica, sans-serif;} #block-views-display-blog-archive-block ul li a { font: 300 18px/normal 'Roboto', Arial, Helvetica, sans-serif; text-decoration:none; } #block-views-display-blog-archive-block ul li { margin-bottom:5px; } .blog-container h2 { margin:0px; padding:0px;} .blog-container h2 a { font: 100 25px/25px 'Roboto', Arial, Helvetica, sans-serif; margin:0px; padding:0px; text-decoration:none;} .blog-container .date-display-single { color:#999; margin: 0px 0px 20px 0px; padding:0px; } .blog-container { margin-bottom:20px; padding-bottom:20px; border-bottom: 1px solid #333;} .blog-container img { margin:20px auto;} /*############################################################################################################################################################################################################## # # CONTACT PAGE # ################################################################################################################################################################################################################*/ body.page-node-5 label { color: #999999; font: 300 20px/normal 'Roboto', Arial, Helvetica, sans-serif; margin: 15px 0px 3px 0px; padding: 0px 0px 0px 0px;} body.page-node-5 #edit-submitted-email { background-color: #ffffff; background-image: none; border: 1px solid #cccccc; border-radius: 4px; box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset; color: #272b30; display: block; font-size: 14px; height: 38px; line-height: 1.42857; padding: 8px 12px; transition: border-color 0.15s ease-in-out 0s, box-shadow 0.15s ease-in-out 0s; width: 100%; } body.page-node-5 #edit-submitted-email, body.page-node-5 .form-control { background-color: #333; background-image: none; border: none; color:#fff; } .resizable-textarea .grippie { background: #666666; border:none; } #edit-submit { background: #430c58; border:none; color:#fff; padding:3px 30px; font: 300 15px/normal 'Roboto', Arial, Helvetica, sans-serif; margin:10px 0px; text-transform:uppercase;} #edit-submit:hover { background: #360549;} /*############################################################################################################################################################################################################## # # ART PAGE # ################################################################################################################################################################################################################*/ #art-container {} #art-container .padding { margin: 0px 0px 0px 0px;} #child-menu { border-top: 1px solid #252525; margin: 20px 0px 40px 0px; padding: 20px 0px 0px 0px;} #child-menu .padding { margin: 0px 0px 30px 0px;} #child-menu h2 { color:#898989; font: 300 28px/normal 'Roboto', Arial, Helvetica, sans-serif; margin: 0px 0px 0px 0px; padding:0px;} #child-menu li, #child-menu ul { list-style:none; list-style-image:none; list-style-type:none; margin:0px; padding:0px;} #child-menu li a { color:#6a6969; font: 100 16px/normal 'Roboto', Arial, Helvetica, sans-serif; padding-bottom:5px; text-decoration:none;} #child-menu li a.active, #child-menu li a:hover { color:#61307d; text-decoration:none;} #art-container #col-two { color:#797878; font: 100 16px/normal 'Roboto', Arial, Helvetica, sans-serif;} #art-container #col-two h1 { color:#898989; font: 300 38px/normal 'Roboto', Arial, Helvetica, sans-serif; margin: 0px 0px 0px 0px; padding:0px;} #art-container #col-two h3 { color:#898989; font: 100 16px/normal 'Roboto', Arial, Helvetica, sans-serif; margin: 0px 0px 30px 0px; padding:0px;} #art-container #col-three {} #art-container #col-three img { border:none; background:#000;} #youtube { margin: 40px 0px 0px 0px; text-align:center;} #col-one { margin-top:30px; margin-bottom:40px; padding-top:30px; border-top: 1px solid #61307d;} #child-menu { margin-left:30px;} /*############################################################################################################################################################################################################## # # FOOTER TOP # ################################################################################################################################################################################################################*/ #footer-top { background: #430c58; text-align:center} #footer-top a { color:#fff; font-size: 18px; display:inline-block; margin: 5px;} #footer-top a:hover { color:#000;} #footer-top-one {} #footer-top-two {} /*############################################################################################################################################################################################################## # # NEWSLETTER SIGNUP # ################################################################################################################################################################################################################*/ #footer-top-one div, #footer-top-one section { margin:0px; padding:0px; height:auto; } #footer-top-one a#newsletter-signup { text-transform:uppercase; font: 500 16px/normal 'Roboto', Arial, Helvetica, sans-serif; background: #2e043e; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; border:none; display:inline-block; color:#773f8c; text-decoration:none; margin: 4px 0px 0px 0px; padding: 0px 3px 0px 10px;} #footer-top-one a#newsletter-signup i { color:#fff;} #footer-top-one a:hover#newsletter-signup { background:#430c58; color:#fff; } /*############################################################################################################################################################################################################## # # FOOTER # ################################################################################################################################################################################################################*/ #footer { background:#090909; border-bottom:1px solid #181818; border-top: 1px solid #181818; color:#797878; font: normal 10px/normal Arial, Helvetica, sans-serif; padding-bottom:20px; text-align:left;} #footer h2 { color:#797878; font: bold 12px/normal Arial, Helvetica, sans-serif; margin: 30px 0px 0px 0px; padding:0p;} #footer ul { margin: 0px 0px 0px 15px; padding:0px;} #footer li { color:#797878; font: normal 12px/normal Arial, Helvetica, sans-serif;} #footer img { margin: 20px 0px 0px 0px; opacity: 0.4; filter: alpha(opacity=40); /* For IE8 and earlier */} /*############################################################################################################################################################################################################## # # CREDITS # ################################################################################################################################################################################################################*/ #credits { text-align: left; background:url(../images/layout/chameleon_creative.gif) no-repeat left 5px; padding:5px 0px} #credits a, #credits a:active, #credits a:link, #credits a:visited { margin: 0px 0px 0px 25px; color: #797878; text-decoration: none; display: block; font: normal 10px/10px Arial, Helvetica, sans-serif;} #credits a:hover { color: #fff; text-decoration: none; }