/*
Theme Name: Circle B trailers
Theme URI: http://circlebtrailerstexas.com
Description: Based on HTML5 reset
Author: Glenn V.
Author URI: http://granburypcservice.com
Version: 1.0
*/

/* Apply a natural box layout model to all elements: http://paulirish.com/2012/box-sizing-border-box-ftw/ */
* { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; }

.chromeframe {position: absolute; top: 0;}

/* Ok, this is where the fun starts.
-------------------------------------------------------------------------------*/

/* A Linux- and Windows-friendly sans-serif font stack: http://prospects.mhurrell.co.uk/post/updating-the-helvetica-font-stack */
body {
 font-size: 100%;
 font-family: 'Amaranth', sans-serif;
 background-color: black;
}

/* We like off-black for text. */
body, select, textarea {
color: #333;
background-image: url('Images/woodbg.jpg');
}

a:hover {
 color: #69f;
 transition: color linear .1s;
}

 A, A:visited {
 text-decoration: none;
}

h1 {
 font-size: 1.8rem;
}

h2 {
 font-size: 1.6rem;
}

h3 {
 font-size: 1.4rem;
}



/* Custom text-selection colors (remove any text shadows: http://twitter.com/miketaylr/status/12228805301) */
::-moz-selection{background: #fcd700; color: #fff; text-shadow: none;}
::selection {background: #fcd700; color: #fff; text-shadow: none;}

/*	j.mp/webkit-tap-highlight-color */
a:link {-webkit-tap-highlight-color: #fcd700;}

/* Mozilla dosen't style place holders by default */
input:-moz-placeholder { color:#a9a9a9; }
textarea:-moz-placeholder { color:#a9a9a9; }


/* And here begins the WordPress fun.
-------------------------------------------------------------------------------*/
#wrapper {
 width: 100%;
 float: right;
}

#header {
 padding-bottom: 30px;
 margin-left: auto;
 margin-right: auto;
 text-align: center;
}

#logo {
display: inline-block;
}

.title {
 display: inline-block;
 vertical-align: top;
 text-align: center;
 padding: 20px;
}

#header h1 A {
 font-size: 5rem;
  text-decoration: none;
  color: rgb(210, 214, 208);
  -webkit-text-stroke-width: 1px;
  -webkit-text-stroke-color: #313030;
  text-shadow: -1px -1px 1px #efede3,
                   0px 1px 0 #2e2e2e,
                   0px 2px 0 #2c2c2c,
                   0px 3px 0 #2a2a2a,
                   0px 4px 0 #282828,
                   0px 5px 0 #262626,
                   0px 6px 0 #242424,
                      0px 7px 0 #222,
                   0px 8px 0 #202020,
                   0px 9px 0 #1e1e1e,
                  0px 10px 0 #1c1c1c,
                  0px 11px 0 #1a1a1a,
                  0px 12px 0 #181818,
                  0px 13px 0 #161616,
                  0px 14px 0 #141414,
                  0px 15px 0 #121212,
     2px 20px 5px rgba(0, 0, 0, 0.9),
     5px 23px 5px rgba(0, 0, 0, 0.3),
     8px 27px 8px rgba(0, 0, 0, 0.5),
     8px 28px 35px rgba(0, 0, 0, 0.9);
}

.description {
 color: white;
 font-size: 2rem;
 -webkit-text-stroke-width: 1px;
 -webkit-text-stroke-color: black;
}

#navbutton {
 display: none;
}

#nav {
 text-align: center;
 position: relative;
 top: 260px;
 width: 100%;
 background-image: url("Images/menub.png");
 background-color: white;
 background: #ffffff; /* Old browsers */
 box-shadow: 0px 0px 40px 12px rgba(0,0,0,0.88);
 border: 1px #303030 solid;
 background: linear-gradient(to bottom, #ffffff 0%,#f1f1f1 50%,#e1e1e1 51%,#f6f6f6 100%);
 padding-bottom: 5px;

}

#content {
 background-color: #f5f0dc;
}

.fixed {
position: fixed !important;
top: 0px !important;
z-index: 1;
}

.menu {
 width: 100%;
  padding-top: 5px;
}

.menubutton {
display: none;
}


.menu ul li {
 display: inline;
}

.menuLink {
 color: black;
 text-decoration: none;
 margin-right: 20px;
 font-family: 'Crete Round', serif;
 font-size: 1.3rem;
 text-transform: uppercase;
 background: #feffff; /* Old browsers */
 border-radius: 12px;
 background: radial-gradient(ellipse closest-side , #cccccc, rgba(20,20,20,0));
 box-shadow: 0px 0px 1px #cecece;
 padding-left: 8px;
 padding-right: 8px;
 transition: color linear .1s;
}

.cycle-slideshow {
    border: 2px black solid;
    box-shadow: 0px 0px 2px 2px black;
    border-radius: 10px;
    overflow: hidden;
    z-index: 0;
}
.cycle-slideshow > Img {
width: 100%;
}


.menu ul li a:hover {
 color: #A32C2C;
}

.active {
  color: red;
}

article {
 padding: 4%;
 width: 80%;
 float: right;
}

article > header {
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}

article > header  {
 border-bottom: 6px;
 border-image: linear-gradient( to left, rgba(30,30,30,0) 0%,rgba(30,30,30,.8) 50%, rgba(30,30,30,.8) 50%, rgba(30,30,30,0) 100%);
 border-image-slice: 1;
}


article > header > h2 > A {
 font-family: 'Amaranth', sans-serif;
 text-transform: uppercase ;
 text-decoration: none;
 color: black;
}

.page-content {
 font-family: 'Amaranth', sans-serif;
}

.mobile-aside {
 display: none;
}

aside {
 background-color: #f5f0dc;
 padding-top: 50px;
 font-size: 1.4rem;
 text-align: center;
 float: left;
 width: 20%;
}

aside #logo {
 float: none;
 margin-left: auto;
 margin-right: auto;
}

aside > div {
 clear: both;
 width: 85%;
 margin-bottom: 1em;
 margin-left: auto;
 margin-right: auto;
 padding: 10px;
 border: 1px #EeE9D4 solid;
 border-radius: 8px;
 background-color: #FFF9E0;
 box-shadow: 0px 0px 4px 0px rgba(0,0,0,0.75);

}

.widget-title {
 border-bottom: 1px black solid;
}

.center-widget-area {
 width: 100%;
 clear: both;
 text-align: center;
}

#footer {
 text-align: center;
}

.footer-widget-area {
  width: 100%;
  clear: both;
  text-align: center;
}

.woocommerce-breadcrumb {
 text-align: center;
 width: 100%;
}

#iframe {
 height: 3000px;
 width: 90%;
 box-shadow: 0 0 5px rgba(0,0,0,0.2);
 border-radius: 10px;
}

ol.commentlist {list-style: none;}
ol.commentlist li {}
ol.commentlist li.alt {}
ol.commentlist li.bypostauthor {}
ol.commentlist li.byuser {}
ol.commentlist li.comment-author-admin {}
ol.commentlist li.comment {border-bottom: 1px dotted #666; padding: 10px;}
ol.commentlist li.comment div.comment-author {}
ol.commentlist li.comment div.vcard {}
ol.commentlist li.comment div.vcard cite.fn {font-style: normal;}
ol.commentlist li.comment div.vcard cite.fn a.url {}
ol.commentlist li.comment div.vcard img.avatar {float:right; margin: 0 0 10px 10px;}
ol.commentlist li.comment div.vcard img.avatar-32 {}
ol.commentlist li.comment div.vcard img.photo {}
ol.commentlist li.comment div.vcard span.says {}
ol.commentlist li.comment div.commentmetadata {}
ol.commentlist li.comment div.comment-meta {font-size: 10px;}
ol.commentlist li.comment div.comment-meta a {color: #ccc;}
ol.commentlist li.comment p {}
ol.commentlist li.comment ul {}
ol.commentlist li.comment div.reply {font-size: 11px;}
ol.commentlist li.comment div.reply a {font-weight: bold;}
ol.commentlist li.comment ul.children {list-style: none; margin: 10px 0 0;}
ol.commentlist li.comment ul.children li {}
ol.commentlist li.comment ul.children li.alt {}
ol.commentlist li.comment ul.children li.bypostauthor {}
ol.commentlist li.comment ul.children li.byuser {}
ol.commentlist li.comment ul.children li.comment {}
ol.commentlist li.comment ul.children li.comment-author-admin {}
ol.commentlist li.comment ul.children li.depth-2 {border-left: 5px solid #555; margin: 0 0 10px 10px;}
ol.commentlist li.comment ul.children li.depth-3 {border-left: 5px solid #999; margin: 0 0 10px 10px;}
ol.commentlist li.comment ul.children li.depth-4 {border-left: 5px solid #bbb; margin: 0 0 10px 10px;}
ol.commentlist li.comment ul.children li.depth-5 {}
ol.commentlist li.comment ul.children li.odd {}
ol.commentlist li.even {background: #fff;}
ol.commentlist li.odd {background: #f6f6f6;}
ol.commentlist li.parent {border-left: 5px solid #111;}
ol.commentlist li.thread-alt {}
ol.commentlist li.thread-even {}
ol.commentlist li.thread-odd {}


/* Print styles!
-------------------------------------------------------------------------------*/
@media print {

}

/* Media queries!
-------------------------------------------------------------------------------*/

/* Consider this: www.cloudfour.com/css-media-query-for-mobile-is-fools-gold/ */

@media screen and (max-device-width: 480px) {

#header {
 border-bottom: 3px black solid;
 padding-top: 110px;
}

#content > aside {
 display: none;
}

.mobile-aside, .mobile-aside > aside {
 overflow: hidden;
 display: block;
 float: none;
 width: 100%;
 background-color: transparent ;
}

article {
 margin: 0;
 width: 99%;
 padding: 4%;
}

#nav {
 width: 0px;
 height: 100%;
 position: fixed;
 top: 0;
 left: 0;
 z-index: 2;
 transition: width 0.3s ease;
}

.menu {
 overflow: hidden;
 padding-top: 110px;
}

.menu > ul > li > A {
 font-size: 1.8rem;
}

#navbutton {
position: fixed;
    width: 100%;
    height: 90px;
    display:block;
    background: linear-gradient(to bottom, #ffffff 0%,#f1f1f1 50%,#e1e1e1 51%,#f6f6f6 100%);
    border-radius: 5px;
    z-index: 100;
    font-size: 3.2rem;
    text-align: left;
    padding-left: 3%;
    padding-right: 3%;
    padding-top: 10px;
}

#navbutton > img {
 display: inline-block;
 float: right;
 margin-top: -10px;
}

#nav:hover {
width: 40%;
}

#nav:hover + #wrapper {
width: 60%;
}

#nav:hover > div {
overflow:visible;
}

#wrapper {
 width: 100%;
 float: right;
 transition: width 0.3s ease;
}

.menu > ul > li {
 list-style-type: armenian;
 display:block;
 margin-top: 15px;
 width: 95%;
 border: 1px black solid;
 border-radius: 30px;
 margin-left: auto;
 margin-right: auto;
 box-shadow: 0px 0px 5px black;
 background: linear-gradient(to bottom, #ffffff 0%,#f1f1f1 50%,#e1e1e1 50%,#f6f6f6 100%);
}


}

@media all and (orientation: portrait) {

}

@media all and (orientation: landscape) {

}