/* CSS Document for Carlson Gracie Columbus website */

/* reset by eric meyer */

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {margin: 0;padding: 0;border: 0;font-size: 100%;font: inherit;vertical-align: baseline;}

/* HTML5 display-role reset for older browsers, reset by eric meyer */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {display: block;}
body {line-height: 1;}
ol, ul {list-style: none;}
blockquote, q {quotes: none;}
blockquote:before, blockquote:after,
q:before, q:after {content: '';content: none;}
table {border-collapse: collapse;border-spacing: 0;}

* {
    margin: 0;
    padding: 0;
}

/* mobile global */

html {
height: 100%; background-color: #FFF;
}

body { height:100%; margin:0;
padding:0; }


	
a {text-decoration: none; }

/* mobile headings */

h1 /*homepage welcome*/
{ font-size: 20px;  font-family: "Roboto Condensed", sans-serif; font-weight:700; padding:15px 10px 0 10px;}

h2 /*bottom page */
{ font-size: 15px;  font-family: "Roboto Condensed", sans-serif; font-weight:700; text-align:center;}

h3 /*subheads */
{ font-size: 15px; font-family: "Roboto Condensed", sans-serif; font-weight:700; padding:0 10px 0 10px;}

h4 /*captions red*/
{ font-size: 15px; font-family: "Roboto Condensed", sans-serif; font-weight:500; color: #CC0000; padding:0px 10px 0 10px;}

h5 /*captions media*/
{ font-size: 15px; font-family: "Roboto Condensed", sans-serif; font-weight:500; color: #CC0000; margin-right: 15px; margin-top: 2px; }

h10		 /*supersmall text*/	
{ font-size:9px; font-family: "Roboto", sans-serif; font-weight: 400; text-align:center; }

h6 /*callout*/	
{ font-size: 14px;  font-family: "Roboto Condensed", sans-serif; font-weight:700; padding:0 10px 0 10px; }

h7 /*chinese text*/
{font-size:14px; font-family:"cwtexfangsong",  line-height:150%; padding:0 10px 10px 10px;}

h8 /*chinese subhead*/
{ font-size: 25px; font-family:"cwtexfangsong", font-weight:700; margin: 15px 0 0 0;}



/* mobile text elements */
p			{ font-size:14px; line-height:130%; margin: 0 0 15px 0; font-family: "Roboto", Gadget, sans-serif; font-weight: 400; padding:0 10px 0 10px;}
p .left		{ margin: 1.5em 1.5em 1.5em 0; padding: 0; }
p .right	{ margin: 1.5em 0 1.5em 1.5em 1.5em; padding: 0; }
a 			{}
a:link 		{ color: #CC0000; }
a:visited 	{ color: #000; }
a:active 	{ color: #000; }
a:focus 	{ color: #000; }
a:hover 	{ color: #000; }

blockquote 	{ color: #000; font-size: 12px; }
strong 		{ font-weight: bold; }
em 			{ font-style: italic; }



/* mobile containers global */
.redtext { color:#CC0000;}
#navbarandsplat {width:100%; margin:0 0 0 0;}
#topnav { padding:10px 5px 10px 5px;}

#myBtn {
    display: none; 
    position: fixed; 
    bottom: 20px; 
    right: 30px; 
    z-index: 99; 
    border: none; 
    outline: none; 
    background-color: red; 
    color: white; 
    cursor: pointer; 
    padding: 15px; 
    border-radius: 10px; 
}

#myBtn:hover {
    background-color: #555; /* Add a dark-grey background on hover */
}

/*mobile drop shadow h -v - spread - color)*/
.dropshadow {box-shadow: 0px 0px 10px #333333;}


/* mobile home page */
img.floatRight { float:right; }
#newlocation { position:absolute; margin-left: 820px; }
#socialmedia {text-align:center; clear:both;}

#facebookcenter {
  margin: 0 auto;
}

/* call button*/
a[href^=tel] {
  border-radius: 5px;
  color: white;
  display: inline-block;
  font-style: normal;
  padding: 3px 10px;
  text-decoration: none;
  background-color: #CC0000; 
}

a[href^=sms] {
  border-radius: 5px;
  color: white;
  display: inline-block;
  font-style: normal;
  padding: 3px 10px;
  text-decoration: none;
  background-color: #CC0000; 
}


/* mobile aboutbjj page */
.imageandcapm {float:left; margin: 0 10px 10px 0px; width:100%;}



/* mobile staff page */
#bodymain { margin: 60px 0 0 0;}


/* mobile media page */

#padding {margin-left: 10px;}
.shadow { box-shadow: 1px 2px 5px #333333; } /* h v spread color */


/*mobile navbar, thanks to CSS Menu Maker!*/


#cssmenu { font-family: "Roboto", sans-serif; font-weight: 300; font-size:13px; }

/*default

@import url(http://fonts.googleapis.com/css?family=Open+Sans:400,600,300);

#cssmenu {
  font-family: "Open Sans", "Helvetica Neue", Helvetica, Arial, Sans-Serif;
  font-size: 10px;
  line-height: 15px;
  text-transform: uppercase;
  text-align: left; */
}
#cssmenu > ul {
  width: auto;
  list-style-type: none;
  padding: 0;
  margin: 0;
  background: #ffffff;
  border: 1px solid #ece6e8;
  border-bottom: 3px solid #d9ced2;
  -webkit-border-radius: 2px;
  -moz-border-radius: 2px;
  -o-border-radius: 2px;
  border-radius: 2px;
}
#cssmenu > ul li#responsive-tab {
  display: none;
  /* Hide for large screens */

}
#cssmenu > ul li {
  display: inline-block;
  *display: inline;
  zoom: 1;
}
#cssmenu > ul li.right {
  float: right;
}
#cssmenu > ul li.has-sub {
  position: relative;
}
#cssmenu > ul li.has-sub:hover ul {
  display: block;
}
#cssmenu > ul li.has-sub ul {
  display: none;
  width: 250px;
  position: absolute;
  margin: 0;
  padding: 0;
  list-style-type: none;
  background: #ffffff;
  border: 1px solid #ece6e8;
  border-bottom: 3px solid #d9ced2;
  border-top: 0 none;
}
#cssmenu > ul li.has-sub ul li {
  display: block;
}
#cssmenu > ul li.has-sub > a {
  background-image: url('CGC-images/caret.png');
  background-repeat: no-repeat;
  background-position: 90% -95%;
}
#cssmenu > ul li.has-sub > a.active,
#cssmenu > ul li.has-sub > a:hover {
  background: #CC0000 url('CGC-images/caret.png') no-repeat;
  background-position: 90% 195%;
}
#cssmenu > ul li a {
  display: block;
  padding: 12px 24px 11px 24px;
  text-decoration: none;
  color: #747474;
  text-shadow: 0px 1px 0px #fff;
}
#cssmenu > ul li a.active,
#cssmenu > ul li a:hover {
  background: #CC0000;
  color: #fff;
  text-shadow: 0px 1px 0px #000;
}
@media (max-width: 600px) {
  #cssmenu > ul {
    width: 100%;
  }
  #cssmenu > ul li#responsive-tab {
    display: block;
  }
  #cssmenu > ul li#responsive-tab a {
    background: url('CGC-images/menu.png') no-repeat;
    background-position: 95% -35%;
  }
  #cssmenu > ul li#responsive-tab a:hover {
    background-color: #CC0000;
    background-position: 95% 135%;
  }
  #cssmenu > ul li {
    display: none;
  }
  #cssmenu > ul li.right {
    float: none;
  }
  #cssmenu > ul li.has-sub {
    position: relative;
  }
  #cssmenu > ul li.has-sub ul {
    display: block;
    position: static;
    width: 100%;
    background: #ffffff;
    border: 0 none;
  }
  #cssmenu > ul li.has-sub ul li {
    display: block !important;
  }
  #cssmenu > ul li.has-sub ul li a span {
    display: block;
    padding-left: 24px;
  }
  #cssmenu > ul li.has-sub > a {
    background-image: none;
  }
}
/* Make sure they show even if hidden in mobile view by JS */
@media (min-width: 600px) {
  #cssmenu > ul > li.collapsed {
    display: inline-block !important;
    *display: inline;
    zoom: 1;
  }
  #cssmenu > ul ul li.collapsed {
    display: block !important;
  }
}