@charset "utf-8";
/* CSS Document */
html,body{ height:100%; }

body{
 margin:0px; padding:0px;
 background-image:url(http://www.calebgraystudio.com/images/woodgrain_bg.gif);
 background-position:top center;
 background-color:#cbb46b;
 font-family:Arial, Helvetica, sans-serif;
 color:#444444;
 font-size:13px;
}
#main{
 width:100%;
 margin-left:auto;
 margin-right:auto;
 height:100%;
 position:relative;
}

a{ color:#108988; text-decoration:none; }
a:hover{ text-decoration:underline; }

#main { height:auto; }

#main_nav a{
 display:block;
 background-repeat:no-repeat;
 overflow:hidden;
 text-indent:-1000px;
}
#main_nav ul{
 list-style:none;
 margin:0px; padding:0px;
}
#main_nav{
 margin-left:auto;
 margin-right:auto;
 width:1070px;
}
#sub_nav{
 width:100%;
 background-image:url(http://www.calebgraystudio.com/images/subnav_bg.gif);
 background-repeat:repeat-x;
 background-position: 0px 80px;
 margin-top:20px;
}

#main_nav ul{ display:block; float:left; margin-top:40px;}

#main_nav li a{
 width:140px;
 height:86px;
}
#main_nav li{
 float:left;
 margin-left:-5px;
}

#page_content{
 margin-left:auto;
 margin-right:auto;
 width:830px;
 padding:50px 50px 50px 50px;
 min-height:390px;
}
#content{
 position: relative;
 width:930px;
 margin-left:auto;
 margin-right:auto;
 min-height:460px;
}
.artworkcat #content{ background-image:url(http://www.calebgraystudio.com/images/rounded_btm2.gif); padding-bottom:148px; }
.artworkcat #content_expandable{ background-color:#FFFFFF;  }
.artworkcat #page_content{ padding-bottom:0px; min-height:460px; }

#content_expandable {
 width:930px;
 margin-left:auto;
 margin-right:auto;
 padding:0px;
 min-height:308px;
 background-image: url('http://www.calebgraystudio.com/staging/images/squircle.png');
 background-image: url('http://www.calebgraystudio.com/staging/images/squircle-3.svg');
 background-repeat: no-repeat;
 background-size: 100% 100%;
 background-position: center top;
}
#cat-back{
 margin-top:40px;
 margin-bottom:-90px;	
}

#nav_home{
 background-image:url(http://www.calebgraystudio.com/images/home_logo2.png);
 width:270px;
 height:153px;
 margin-left:-20px;
}

#nav_home{ margin-left:0px; float:left; margin-left:-15px; margin-top:6px;}
#home #nav_home:hover{ background-position:0px -170px; }
#nav_home:hover{ background-position:0px -154px; }
#nav_artwork {background-image:url(http://www.calebgraystudio.com/images/nav_artwork.png); }
#nav_products {background-image:url(http://www.calebgraystudio.com/images/nav_products.png); }
#nav_news {background-image:url(http://www.calebgraystudio.com/images/nav_news.png); }
#nav_about {background-image:url(http://www.calebgraystudio.com/images/nav_about.png); }
#nav_contact {background-image:url(http://www.calebgraystudio.com/images/nav_contact.png); }
#nav_shows {background-image:url(http://www.calebgraystudio.com/images/nav_shows.png); }
#main_nav .selected, #main_nav li a:hover{ background-position:0px -86px; }


#bottom_nav{
 width:330px;
 font-size:12px;
 color:#6e5621;
 text-align:center;
 padding:5px;
 background-color:#cbb46b;
 border:5px solid #c2a756;
}

#bottom_nav{
 margin-left:auto; margin-right:auto;
 margin-top:20px;
 margin-bottom:10px;
}

#bottom_nav a{
 color:#6e5621;
 text-decoration:none;
}
#bottom_nav a:hover{
 color:#108988;
}

/* HOMEPAGE ########################################### */
#home_tv{
 width:586px;
 float:left;
}
#tv_screen{
 width:586px;
 height:465px;
 position:relative; 
}
#tv_frame{
 display:block;
 width:586px;
 height:465px;
 position:absolute;
 top:0px; left:0px;
 z-index:20;
}

#tv_rightknob{
 display:block;
 width:78px;
 height:85px;
 float:right;
 margin-right:20px;
 margin-top:25px;
}
#tv_leftknob{
 display:block;
 width:78px;
 height:85px;
 margin-left:20px;
 margin-top:25px;
 float:left;
}

#category_list{
 font-size:22px;
 text-align:center;
 padding:0px; margin:0px;
 margin-bottom:28px;
}
#category_list a{
  text-decoration:none;
  color:#eb1c32;
  padding:0px 20px;
}
#category_list a:hover{ color:#FF6666; }
.imagelisting{
 list-style:none;
 margin:0px;
 padding:0px 0px 20px 30px;
}
.subcat_desc p,.subcat_desc{
 margin:0; padding:0; display:inline;
 font-size:15px;	
 font-style:italic;
 color:#9bc7bf;
 padding-left:5px;
}

.imagelisting li{
 float:left;
 padding:0px; margin:0px;
 padding-right:25px;
 padding-bottom:25px;
}
.imagelisting li a{
 border:none;
}
.subcat_title{
 font-family:'Lato';
 font-size:18px; 
 color:#108988;
 margin:0px 40px;
 padding-bottom:6px;
 border-bottom:1px dotted #bde4dd;
}


#product_categories{
 margin:0px; padding:0px;
 margin-top:45px;
 list-style:none;
 text-align:center;
 width:120px;
 font-family:'Lato',sans-serif;
 font-size:17px;
 float:left;
 color:#108988;
 padding-right:30px;
 padding-left:26px;
}
#product_categories li{
 padding-bottom:25px;
}
#product_categories a{
 color:#108988;
 font-weight:normal;
 text-decoration:none;
}
#product_categories a:hover, #product_categories a.selected{
 color:#eb1c32;
 text-decoration:none;
}

#product_info{
  padding-top:20px;
  width:500px;
  margin-left:110px;
  font-size:13px;
  float:left;
}
#product_info a{
 text-decoration:none;
 color:#108988;
}
.product_image{
 padding-right:20px;
}

.hfeed{
 list-style:none;
 margin:0px; padding:0px;
}
.paging{
 text-align:center;
}
.post_info{
 padding-left:30px;
 float:left;
 width:450px;
}
.hfeed li{
 padding-bottom:30px;
}

.blog_image{
 width:100px; height:100px;
 padding-left:30px;
 float:left;
}
.post_title{
 font-weight:normal;
 font-family:'Lato',sans-serif;
 font-size:19px;
 color:#CCCCCC;
 padding:0px; margin:0px;
}
.post_title a{
 text-decoration:none;
 color:#108988;
}
.entry-title{  }
.post_date{
 display:block;
 color:#AAAAAA;
 font-size:13px;
 font-weight:normal;
 padding-bottom:4px;
}
.post_excerpt{
 padding:0px; margin:0px;
}
.post_morelink{
 color:#108988;
 text-decoration:none;
}
.paging{
 color:#999999;
}

.hentry h2{
 color:#108988;
 padding:0px; margin:0px;
}
.post_image_full{
 float:right;
 padding-left:15px; padding-bottom:15px;
}
div.hentry{
 width:600px;
 margin-left:auto; margin-right:auto;
}
#contactinfo{
 text-align:center;
}
#contactinfo h2 a{
 text-decoration:None;
 color:#108988;
}
#contactinfo h2 a:hover{
 color:#eb1c32;
}
#contactform{ padding-top:20px;}
#formurl { display:none; }
label{
 width:120px;
 display:block;
 float:left;
 text-align:right;
 padding-right:6px;
 font-weight:bold;
 padding-top:5px;
}
.formline{
 padding-bottom:10px;
}
#contactform input[type=text]{
 width:250px;
 padding:5px;
 border: 3px solid #cccccc;

}
#contactform .textarea{
 width: 250px;
 border: 3px solid #cccccc;
 padding: 5px;
}
#contactform #contact_submit{
 float:right;
 margin-right:38px;
 background-color:#a2d8d0;
 border:none;
 padding:3px 10px;
}
#error_list{
 color:#eb1c32;
}
#show_content{
 text-align:center;
 width:400px;
 float:left;
 margin-left:45px;
 font-size:17px;
}
.showinfo{
 padding-bottom:20px;
}
.showinfo strong{
  color:#108988;
  font-size:18px;
}
.showinfo a{
 color:#108988;
 text-decoration:none;
}
.showinfo a:hover{ color:#eb1c32; }

.curved180 {
   -webkit-border-radius: 180px;
   -moz-border-radius: 180px;
   border-radius: 180px;
   position:relative;
   behavior: url(/PIE.htc);
}
#footer{
width:960px;
margin:0 auto;	
position:relative;
}

#social_links{
 position:absolute;
 right:40px; bottom:-3px;	
}
#social_links a{
 display:inline-block;
 width:45px; height:45px;
 line-height:45px !important; 
 font-size:22px;
 font-weight:normal;
 text-align:center;
 vertical-align:bottom;
 color:#FFFFFF;
 background-color:#cbb470;
 -webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;
border:4px solid #c2a756;
margin-left:4px;

position:relative;
-webkit-transform: translateZ(0);
transform: translateZ(0);
box-shadow: 0 0 1px rgba(0, 0, 0, 0);
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
-webkit-transition-property: color;
transition-property: color;
-webkit-transition-duration: 0.3s;
transition-duration: 0.3s;
overflow:hidden;
}
#social_links a i{ line-height:45px; }
/* #social_links a:hover{ background-color:#eb1c32; }*/

#social_links a:before {
  content: "";
  position: absolute;
  z-index: -1;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: #eb1c32;
  border-radius: 100%;
  -webkit-transform: scale(0);
  transform: scale(0);
  -webkit-transition-property: transform;
  transition-property: transform;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -webkit-transition-timing-function: ease-out;
  transition-timing-function: ease-out;
}
#social_links a:hover, #social_links a:focus, #social_links a:active {
  color: white;
}
#social_links a:hover:before, #social_links a:focus:before, #social_links a:active:before {
  -webkit-transform: scale(2);
  transform: scale(2);
}





#album_list{
 margin:0; padding:0;
 list-style:none;	
}
#album_list li{
 width:140px;
 padding:20px 33px;
 display:block;
 float:left;
 text-align:center;	
}
#album_list li a{
 text-decoration:none;
 border:0;	
 color:#ccb370;
 font-size:20px;
 font-family:'Lato',sans-serif;
}
#album_list li a img:hover{
 opacity:.6;	
}
#album_list li a img{
/*-webkit-border-radius: 15px;
-moz-border-radius: 15px;
border-radius: 15px;	*/
-o-transition:.3s;
-ms-transition:.3s;
-moz-transition:.3s;
-webkit-transition:.3s;
transition:.3s;
}

#album h1{
 text-align:center;	
 font-family:'Lato',sans-serif;
 color:#eb1c32; 	
 font-weight:normal;
 margin:0; padding:0;
}
#album li{
 padding:14px;	
}
#album li img{
-webkit-border-radius: 15px;
-moz-border-radius: 15px;
border-radius: 15px;	
	
}
h2{ font-family:'Lato',sans-serif; font-weight:normal; color:#eb1c32; }

.request, .request a{
 text-align:center;
 color:#eb1c32;
 font-family:'Lato',sans-serif;
 font-size:17px; 	
 padding-bottom:6px;
}
.request a{ text-decoration:underline; }
.centered{ margin:0 auto; }
.med{ width:150px; font-size:18px; display:block; }
.small{ width:50px; font-size:14px; display:block; }
.prevnext{ display:inline-block; color:#ffffff; }
.btn-link{
 background-color:#bde4dd;
 padding:3px 6px;
 text-align:center;
 color:#FFFFFF;
 
 -webkit-border-radius: 9px;
 -moz-border-radius: 9px;
 border-radius: 9px;	 
 text-decoration:none;
 font-family:'Lato',sans-serif;	
}
.btn-link.right{ float:right; }
.btn-link:hover{ background-color:#108988;	}
#member-nav{
 width:200px;
 text-align:center;
 background-color:#e4d6a4;
 position:absolute;
 top:0px; right:0px;
 padding:6px 10px;
 color:#eb1c32;	
-webkit-border-bottom-left-radius: 20px;
-moz-border-radius-bottomleft: 20px;
border-bottom-left-radius: 20px; 
}
#member-nav a{
 color:#108988;	
}

/* New Menu */
.main-menu {
    background-image:url(http://www.calebgraystudio.com/images/subnav_bg.gif);
    background-repeat: repeat-x;
    background-position: 50%;
    width: 100%;
    height: 170px;
    margin-top: 20px;
}
.menu-inner { width: 1080px; margin: 0 auto; }
.menu-left {
    float: left;
}
.menu-right {
    float: right;
}
.menu-nav {
    margin: 40px 0 0;
    padding: 0;
    list-style-type: none;
}
.menu-nav a{
 display:block;
 background-repeat:no-repeat;
 overflow:hidden;
 text-indent:-1000px;
}
.menu-nav li a{
 width:140px;
 height:86px;
}
.menu-nav li{
 float:left;
 margin-left:-5px;
}
.menu-nav .selected, .menu-nav li a:hover{ background-position:0px -86px; }
.nav-home {
 display: inline-block;
 background-image:url(http://www.calebgraystudio.com/images/home_logo2.png);
 width:270px;
 height:153px;
 margin-left:-6px;
}

.nav-home:hover{ background-position:0px -154px; }

.menu-pulldown {
    z-index: 500;
    display: none;
    position: absolute;
    top: 0;
    left: 0;
    font-family: FontAwesome;
    font-size: 2em;
    color: #ffffff;
    padding: 10px;
}
#main .menu-pulldown {
    top: -20px;
}
    
/* New TV Screen */
.knobs-left {
    float: left;
    width: 200px;
    height: 461px;
    background-image: url('../images/tv-left.png');
    background-repeat: no-repeat;
    background-position: 50%;
}
.knobs-right {
    float: right;
    width: 200px;
    height: 461px;
    background-image: url('../images/tv-right.png');
    background-repeat: no-repeat;
    background-position: 50%;
}
.tv-container {
    width: 986px;
    margin: 20px auto;
    overflow: auto;
}

/* Product Categories */
.category-box {
    width: 21%;
    margin: 10px 2% 0;
    float: left;
}
.category-box h2 {
    padding: 0 5px;
    box-sizing: border-box;
    color: #cbb46b;
    font-size: 1.3em;
    text-align: center;
    text-transform: uppercase;
}
.category-box a:hover {
    text-decoration: none;
}
.category-box img {
    display: block;
    margin: 0 auto;
    max-width: 140px;
    height: auto;
}

/* Category Page Template */
.row {
    width: 100%;
    margin: 0 auto;
    padding: 10px 0 0;
}
.row p {
    padding-left: 10px;
}
.center { text-align: center; }
.column-third, .image-third {
    width: 31%;
    float: left;
    margin: 10px 1%;
    box-sizing: border-box;
}
.columns-third:nth-child(odd), .image-third:nth-child(even) { margin: 10px 1.5%; }
.image-third img {
    width: 100%;
}

#photostack { width: 100% !important; height: 0 !important; padding-bottom: 78%; }
#photostack img { width: 100% !important; max-width: 100% !important; height: auto !important; }
    
/* Add Media Queries Here! */
@media screen and (min-width: 1090px) {
    #content_expandable {
        background-image: url('http://www.calebgraystudio.com/staging/images/squircle.svg');
    }
}
@media screen and (max-width: 1090px) {
    .main-menu {
        height: auto;
        background-position: 0 74px;
    }
    .menu-inner { width: 100%; }
    .nav-home {
        display: block;
        margin: 20px auto 0;
    }
    .menu-nav {
        display: inline-block;
        float: none;
        width: 100%;
        text-align: center;
        margin: 0 auto;
        background-image: url(http://www.calebgraystudio.com/images/subnav_bg.gif);
        background-repeat: repeat-x;
        background-position: 50%;
    }
    .menu-nav li { display: inline-block; float: none; }
    #page_content { box-sizing: border-box; }
    .tv-container { width: 100%; }
    .knobs-left, .knobs-right { 
        width: 20%;
        height: 0;
        padding-bottom: 48%;
        background-size: 60%;
    }
    #home_tv { width: 60%; }
    #tv_screen { width: 100%; max-width: 586px; height: auto; margin: 0 auto; }
    #tv_frame { max-width: 100%; height: auto; }
}

@media screen and (max-width:960px) {
    #content {
        width: 95%;
    }
    #content_expandable {
        width: 100%;
        overflow: auto;
    }
    #page_content {
        width: 100%;
        box-sizing: border-box;
    }
    .column-third {
        width: 98%;
    }
    .category-box {
        width: 46%;
    }
    #footer { width: 100%; }
    #bottom_nav {
        float: none;
        margin: 20px auto;
    }
    #social_links {
        position: relative;
        right: initial;
        bottom: initial;
        margin: 20px auto;
        text-align: center;
    }
}

@media screen and (max-width:650px) {
    .nav-home { margin: 0 auto; }
    .menu-nav {
        background-image: none;
    }
    .menu-inner {
        overflow: hidden;
        height: 165px;
        transition: .7s ease-out;
    }
    .selected {
        height: 689px;
    }
    .menu-pulldown { display: block; }
    .menu-pulldown:hover { color: #eb1c32; }
    .menu-nav li {
        display: block;
        width: 100%;
    }
    .menu-nav li a {
        margin: 0 auto;
    }
    .tv-container { width: 90%; }
    .knobs-left, .knobs-right { display: none; }
    #home_tv { width: 100%; }
    .row p { padding-left: 5px; }
}

@media screen and (max-width:550px) {
    .category-box {
        width: 96%;
    }
    #bottom_nav {
        width: 90%;
        box-sizing: border-box;
    }
}