/* Theme Name: Three One G Records Author: Over Exposed Design Version: 1.0.0 Author URI: http://www.overexposeddesign.com */ html, body {font-family:Arial, Helvetica, sans-serif;} body {background:url(images/bg.jpg) fixed repeat; padding:75px 0 15px 0;} a {font-weight:bold; color:#000; text-decoration:none; outline:none; } a p {font-weight:normal;} p {margin-bottom:10px;} .threeDee {text-transform:uppercase; text-shadow: 2px 0px #ff0000, -2px 0px #00ff66;} /***** Float Clear ************/ .form:after, .form-item:after,.contactWrap:after, .artist_wrap:after, .archive_related:after, .archive_header span:before, .archive_header:after, .archive_description:after, .nav:before, .aboutWrap:after, div.video-content:after, .leftColumn:after, .gridContainer:after, .grid:after, .subMenu:after, .albumThumbItem:after, .news_content:after, .header:after, .storeNavWrap ul:after {content: "."; display: block; height: 0; clear: both; visibility: hidden; } /***** Global Grid ************/ .grid li, .grid div {float:left;} #video-container #infscr-loading {display:none; z-index: 3;} #infscr-loading img {border:30px solid #fff; margin:30px; box-shadow:8px 8px 0 #000;} #infscr-loading {display:block; width:100%; height:200px; background:rgba(0,0,0,0.4); position:fixed; bottom:0px; right:0; text-align: center;} #infscr-loading div { color:#000; text-indent: -9999px;} .button-container {height:1px; padding: 1px; overflow: hidden;} /***** Boxes Global ************/ .white_box {background:#fff; border:1px solid #666; color:#000; } .white_box h1, .white_box h2, .white_box h3, .white_box span, .white_box div, .white_box p {color:#000;} .black_box {background:#000; color:#fff; box-shadow: 5px 5px #000 ; border:1px solid #666;} .black_box h1, .black_box h2, .black_box h3, .black_box span, .black_box , .black_box p, .white_box .black_box {color:#fff;} .box_title {border:1px solid #666; color:#000; font-weight:bold; font-size:110%; position:absolute; top:-10px; left:-15px; padding:5px 10px;} .box_title.black_box {box-shadow: 4px 3px #000;} .box_title.white_box{box-shadow: 4px 3px #fff;} .left_box {padding:35px 15px 15px 15px; margin:10px 10px 25px 15px; position:relative; box-shadow:10px 6px #777;} .box_title h1, .box_title h2, .box_title h3, .box_title span, .box_title div {font-size:110%; } /****** News *************/ .newsWrap {display:block; margin:0 15px;} .youtube-player, .news .post iframe { width: 100% !important; height: auto !important; } .news_box {border:1px solid #000; text-decoration:none; display:block; padding:10px 10px 10px 10px; background:#fff; -webkit-transition:background .5s; color:#000; position:relative; box-shadow:10px 6px #888;} a.news_box .news_content {height:1px; overflow:hidden; color:#fff; -webkit-transition:height 1s;} a.news_box:hover .news_content {height:120px; -webkit-transition:height 1s; overflow:hidden;} .news_box h3, .news_box h2, .news_box h2{font-size:110%; margin:0 0 15px 45px; border-bottom:1px dotted #222; padding:10px ; text-transform:uppercase; text-shadow: 2px 0px #ff0000, -2px 0px #00ff66;} /* h1 {border:1px solid #666; text-shadow: 2px 0px #ff0000, -2px 0px #00ff66; color:#000; margin:0px 0 8px 0; text-transform:uppercase; box-shadow:10px 6px #fff; padding:10px 10px; background:#fff;} */ a.news_box .box_title{margin-top:5px;} div.news_box {margin-top:0px;} a.news_box:hover {background:#000; -webkit-transition:background .5s; } a.news_box:hover h3 {text-transform:uppercase; text-shadow:none; border-bottom:#666 1px dotted; color:#fff;} .news_content { color:#000; z-index:2; display:block; font-size:100%; padding:0 0 0 55px ; } .news_content iframe, .news_content object, .news_content embed, .news_content img, .news_content p{ float:left; width:100%; margin:0px; padding:0px; } .news_content p {margin:0 0 10px 0;} .news_content iframe[src*="https://www.youtube.com/"] {height:500px;} .news_box .box_title { box-shadow: 4px 3px #000; padding:15px 7px; top:4px; font-size:110%; text-align:center; margin:15px 0 0 -10px; background:#000; color:#fff; height:24px; width:50px; z-index:3;} .subMenu li{float:left;} .subMenu {list-style:none; border:1px #444 solid; background:#222; z-index:2; position:fixed; top:47px; left:400px; padding:0px; box-shadow: 0px 2px 4px #000000, 0px -2px 4px #000000;} .subMenu li a {font-size:10px; color:#fff; display:block; height:15px; padding:7px 15px 6px; font-weight:bolder; text-decoration:none;} /* grid */ .gridContainer{margin:0 0 0 10px; text-align:center; overflow:hidden;} .grid {width:100%; padding:0px; margin:0px; list-style:none; } .grid li { width:25%; height:200px; float:left; overflow:hidden; list-style:none; position:relative; text-align:center; } .grid li a {} .grid li img {min-width:100%; min-height:100%; } .leftColumn {width:66%; float:left;} .rightColumn {width:32.75%; float:right;} .titleBox h3{margin:0px;} .titleBox {box-shadow: 5px 5px #aaa ; text-shadow: 2px 0px #ff0000, -2px 0px #00ff66; background:#fff; padding:5px 10px; margin: 0 0 10px 0;} .storeWrap {width:79.5%; position:absolute; margin:0 20px 0 0; right:0;} .albumThumbItem {width:47%; float:left; position:relative; margin:10px 6% 30px 0; cursor:pointer;} .albumThumbItem img {width:100%; min-width:100%; display:block; -webkit-transition:opacity .5s;} .albumThumbItem:hover { background:url(images/static.gif); display:block; } .albumThumbItem:hover img {opacity:0; -webkit-transition:opacity .5s; } .rightColumn .albumThumbItem:nth-child(even) {margin-right:0px;} .storeWrap .albumThumbItem {width:23%; margin: 0px 2% 30px 0;} .albumName { border:1px solid #666; background:#fff; padding:5px; bottom:-10px; right:-3px; z-index:1; box-shadow: 4px 3px #666; } .albumInfo h4 {font-size:80%; font-weight:normal; text-shadow:none; font-weight:bold; text-transform:uppercase; font-size:10px; } .albumInfo { border:1px solid #666; margin:0 15px 0 0; z-index:1; position:absolute; bottom:-15px; background:#fff; padding:5px; left:-10px; z-index:1; box-shadow: 4px 3px #fff; font-size:90%; font-weight:bold; text-shadow: 2px 0px #ff0000, -2px 0px #00ff66;} .albumPrice {background:#000; z-index:2; color:#fff; font-weight:bold; text-shadow: 2px 0px #ff0000, -2px 0px #00ff66; position:absolute; left:-5px; top:-10px; padding:5px; box-shadow: 3px 3px #000;} .tourDate { font-size:10px; font-weight:900; text-transform:uppercase; border-bottom:1px dotted #999; padding:5px 0;} .tourDateInfo {width:25%;float:left;} .storeNavWrap {width:16%; position:fixed; left:1%; background:#fff; border:1px solid #333; box-shadow: 5px 5px #fff;} .storeNavWrap ul{list-style:none; padding:15px 0px; margin:0px;} .archive_text .artists li {width:50% !important;} .archive_header {padding:10px; position:relative; margin-bottom:10px; width:63%; float:right;} .archive_header h1 {font-size:130%; margin:10px 0 0 0; } .archive_description {box-shadow:10px 10px 0px #fff; padding:15px; margin-bottom:20px;} .archive_description img {float:left; width:33%; } .archive_text {float:right; width:65%;} .archive_text p {margin:0 0 0 10px;} .archive_gallery {float:left; width:33%;} .archive_links{list-style:none;} .archive_links li a {padding:15px;} .storeWrap span {font-size:14px; text-shadow:none; margin-top:10px; display:block;} .archive_header span {font-size:14px; text-shadow:none; display:block; font-weight:bold; text-transform:uppercase; } .purchase_options {list-style:none; display:table; float:left; margin-right:3px; margin:10px 0 5px;} .purchase_options li {float:left; } .purchase_options li a {padding:10px; background:#ff0000; display:block; color:#fff; text-transform:uppercase; margin:0 5px 5px 0; font-size:10px; border:1px solid #000; box-shadow:4px 3px 0 #ff0000; -webkit-transition:background .5s, box-shadow .5s; white-space:nowrap;} .purchase_options li:last-child a {margin:0px;} .purchase_options li a:hover {background:#999; box-shadow:2px 1px 0 #999; -webkit-transition:background .3s, box-shadow .3s; text-decoration: none;} .archive_related {width:100%;} .archive_related h2 {padding:10px; box-shadow:10px 5px #000; margin-bottom:15px; } .tourDate div {width:25%; color:#333;} .tourDate div:first-child {width:15%;} .tourDate:after {content: "."; display: block; height: 0; clear: both; visibility: hidden; } .tourDate:last-child {border:none;} .video {position:fixed; top:50%; left: 50%; margin:-210px 0 0 -15%; z-index: 10; opacity: 0; background:#fff; padding:20px; box-shadow:10px 10px #fff; border:1px solid #000;} .close_button {position:absolute; right:10px; top:10px; white-space: nowrap;} .close_text {text-transform: uppercase; font-size: 65%; margin:-15px 0 0 15px;} .video_title {font-size:65%; margin:0 0 10px;} .video_shadow {position:fixed; width:100%; height:100%; z-index: 4; background:#000; opacity:00; top:0px; left:0px; } .video_grid {list-style:none; padding:0px 0px 0 15px; } .video-content { background-size:100% auto!important;background-repeat:no-repeat !important; background-position:center center !important; width:24%; float:left; height:250px; margin:0 1% 12px 0; position:relative; box-shadow: 0 0 8px #000; overflow:hidden; background:#000; } .video-content:hover .playButton {opacity:0; -webkit-transition:opacity .5s;} .video-content:hover {background-image:url(images/static.gif) !important; background-repeat:repeat !important;} .video-content h3 {text-transform:uppercase; text-shadow: 2px 0px #ff0000, -2px 0px #00ff66; background:#fff; border:1px solid #666; color:#000; text-align:center; margin:-15px 10% 0; position:absolute; top:40%; opacity:0; border:1px solid #999; padding:10px;} .video-content:hover h3 {opacity:100; -webkit-transition:opacity .5s;} .video-content span {display: none;} .rightColumn .video_grid {margin:0px; padding:0px;} .rightColumn .video-content {width:100%; position: relative;} .playButton {width:50px; height:40px; background:#fff; border-radius:0; position:absolute; top:50%; left:50%; margin:-20px 0 0 -25px; box-shadow: 3px 3px #fff ; border:1px solid #000; overflow:hidden;} .triangle{width:50px; height:30px; overflow:hidden; position:relative; margin:0px 0 0 18px; } .triangle div {width:50px; height:40px; position:absolute; top:5px; left:-50px; background:#000; -moz-transform: rotate(-60deg) skewY(30deg); -webkit-transform: rotate(-60deg) skewY(30deg); -o-transform: rotate(-60deg) skewY(30deg); -ms-transform: rotate(-60deg) skewY(30deg); transform: rotate(-60deg) skewY(30deg);} /******* About*************/ .aboutWrap, .contactWrap {max-width:90%; margin:20px auto 0; padding:15px 10px 10px 10px;} .aboutWrap img {float:left; max-width:25%;} .about_box {position:relative; background:#000; color:#fff; padding:10px 10px; height:100%; margin:0 auto;} .about_box .box_title {top:-35px; left:-30px;} .about_box .white_box {color:#000;} .about_content {font-size:75%; padding:0 0px 0 0; text-align:justify; max-width:50%; float:left;} .aboutWrap h1 {font-size:200%;} /********* Contact ***********/ .contact_right {width:30%; float:right;} .contact_right img {max-width:100%; float:left; margin:5px 0;} .contact_content {width:65%; float:left; padding-right:5%;} .content_text {margin-left:20%;} .form-item input {width:30%;} .form-item input, .form-item textarea { max-width:100%; padding: 5px; box-shadow: inset 0 0 5px #000; border: none; float:left; background: #ddd;} .form-item textarea {width:75%;} .form-item input:focus, .form-item textarea:focus {background: #fff;} .form-item label {float:left; font-weight: bold; width:20%;} .form-item {width:100%; margin-bottom: 10px; position: relative;} .form {width:100%; margin: 20px 0;} #submit{ box-shadow:none; background:#fff; padding:20px; border:1px solid #000; color:#000; font-weight:bold; font-size:110%; box-shadow: 4px 3px #fff; } #submit:hover {box-shadow:3px 2px 0 #fff; -webkit-transition:background .3s, box-shadow .3s;} .antispam {display: none; } /******* QUERY THIS STUFF *************/ /* Flexible layout columns --- roughly based on each image being 260x260 */ /* 7 columns: 14.28% 6 columns: 16.667% 5 columns: 20% 4 columns: 25% 3 colunns: 33.33% 2 columns: 50% 1 colunn: 100% @media screen and (min-width: 1821px) { .grid li { width: 16.6%; } .video-content {width:19%; height:300px;} .albumThumbItem {width:31%; margin:10px 1% 30px 0;} .news_box {margin:1px 10px 25px 30px; } } @media screen and (max-width: 1820px) { .grid li { width: 24%; } .video-content {width:24%; height:300px;} .news_box {margin:1px 10px 25px 30px; } } @media screen and (max-width: 1600px) { ul.grid.artists li {width:25%;} .video-content {width:24%; height:260px;} .news_box {margin:1px 10px 25px 30px; } } @media screen and (max-width: 1300px) { ul.grid.artists li {width:33%; } .video-content {width:32.33%; height:250px;} .albumThumbItem {width:46%;} .news_content iframe[src*="http://www.youtube.com/"] {height:394px;} } @media screen and (min-width:981px) { .archive_related .albumThumbItem {width:18%;} } @media screen and (max-width: 980px) { .about_content {max-width:100%;} .aboutWrap img { max-width:50%;} .storeWrap {width:95%; margin:15px 2.5%;} .cat-item:last-child a {border-bottom:1px dotted #000;} .storeNavWrap {width:96%; margin:0 1%; position:relative !important;} .storeWrap {position:relative;} .storeNavWrap ul li {width:16.5%; float:left; padding:0px; margin:0px;} .storeNavWrap ul li a {margin:5px; padding-left:5px;} } @media screen and (max-width: 920px) { .artist_image {height:300px;} .newsWrap .rightColumn .video-content {height:170px;} .video-content {height:280px; width:49%;} .header {min-width:1024px;} ul.grid.artists li {width:50%;} .albumThumbItem {width:97%;} .news_content iframe[src*="http://www.youtube.com/"] {height:315px;} .archive_header {width:62%;} } @media screen and (max-width: 700px) { .aboutWrap, .contactWrap {margin-top:40px !important;} .artist_image {height:250px;} .albumThumbItem {width:47% !important; float:left;} .albumThumbItem:nth-child(even){float:right;} html, body {padding-top:0px;} .header {text-align:center; overflow:hidden; position:relative; min-width:150px; margin-bottom:20px;} .nav {float:none; width:100%; display:block;} .nav ul {list-style:none; height:100%; margin:0px; padding:0px; min-width:150px;} .nav ul li { float:none; width:100%; font-weight:900; text-align:center; } .menu_button {display:block;} .leftColumn {width:100%;} .rightColumn {width:100%;} .newsWrap{margin:42px 15px 15px;} .newsWrap .rightColumn {display:none;} a.news_box, .news_box {margin:45px 10px 35px 0px; } .news_content iframe[src*="http://www.youtube.com/"] {height:394px;} .news_box h2, a.news_box h3 {margin:35px 10px 10px; text-align:center;} .news_content {margin:0px; padding:15px;} a.news_box .news_content {margin:0px; padding:0px;} .news_box .box_title, a.news_box .box_title { top:-25px; left:50%; margin:0px 0 0 -25px;} } @media screen and (max-width: 650px) { .cat-item a {margin:0px; padding-left:5px !important;} .contact_content, .contact_right {width:100%; float:none;} } @media screen and (max-width: 580px) { .artist_image {height:200px; } .news_content iframe[src*="http://www.youtube.com/"] {height:315px;} ul.grid.artists li {width:97%; margin:0px;} ul.grid.artists li a {width:100%; margin-right:0%;} .video-content {height:230px;} .video-content {width:98%;} .video-content {height:350px;} .aboutWrap img { max-width:100%;} } @media screen and (max-width: 500px) { .storeNavWrap ul {text-align: center;} .storeNavWrap ul li {width:100px; height:100px; margin: 5px; padding:5px; float:none; display:inline-block;} .storeNavWrap ul li:hover {background: #ccc;} .storeNavWrap ul li a {text-indent:-9999px; width:94px; height:94px; padding-left:0px !important; border:none !important; overflow: hidden; padding: 0px ; margin:0px;} } */ .post {display:none;} @media screen and (max-width: 400px) { .artist_image {height:150px; } .artist_image img {width:100% !important;} } @media screen and (max-width: 310px) { .artist_image img {width:auto !important;} }