/* JJK Hapkido-USA, Inc. */

img {
max-width:100%; 
height:auto;
}

@media all and (min-width: 1000px) {
	.Mobile100 {}		
	.Mobile90 {}
	.MobileShow {display: none;}	
	.table1000 {display:block; width:1000px; margin:auto;}
	#BodyContent{ min-width="100%"; padding-left: 0px; } 
	td { font-size: 13px;	line-height: 20px; vertical-align:top; }
	h1 {	font-size:26px; }
	h2 {	font-size: 18px;	line-height: 20px;}
	h3 {	font-size: 18px;	line-height: 20px;}
	h4 {	font-size: 10px;	line-height: 12px;}
	.ApptButton { font-size: 13px; 	height: 70px; padding-top: 10px; width: 100%;}
	.ApptLink	 {font-size: 13px;line-height: 20px;}
	.ContactForm td { font-size: 13px;	 }
	.FAQ {	font-size: 14px;}
	.JJKdifference { width: 70%; margin:auto;}
	.news{	font-size: 11px;	line-height: 13px;	}
	#mainmenu li 	{	font-size: 18px; padding: 0px 17px 10px 5px; }
	#sidemenu li 	{	font-size: 18px;  }
	.SidebarTitle {	font-size: 26px;}
	.SidebarLink {font-size:17px;}
	.SidebarPhoneDesc {font-size: 14px; color: red;}
	.AnnouncementHeading {	font-size: 15px; }
	.ComparisonTable { width: 90%; margin: auto;}
	.ComparisonTable td {	font-size: 15px;	line-height: 16px;}
	.ComparisonBlock td {	font-size: 12px;	line-height: 30px;}
	.ComparisonBlockBad td {	font-size: 12px;	line-height: 20px;}
	.iframe560 {width: 560px; height: 349px;}	
	.iframe480 {width: 480px; height: 360px;}	
	.iframeAppointy { width: 700px; height:555px;}
	.InstructorTable td { font-size: 11px !important; line-height: 16px; vertical-align:top;}
	.LinkBlueSm 		{font-size:11px;}
	#locations {	font-size: 14px;}
	.Footer { min-height: 109px; padding:6px; background-image:url(Images/FooterShort.gif); background-repeat: none;}
	.FooterA {font-size:12px; float: left; vertical-align: top; padding-right: 20px; }
	.FooterA a {font-size:14px;}
	.FooterB { float: left;}
	.schedule td {	font-size: 12px;	}
	.RightWhenFull {	float: right;	}
	.WorldwideRegion {	font-size: 16px;}	
	.WorldwideTable td {	font-size: 12px;	}
	.PhotoGalleryTable td {	font-size: 10px;	line-height: 14px;}
	.SocialDesc {color: #ffffff; font-size: 12px; line-height: 14px;}
	.date{ 		font-size: 10px;}							/* Date post published */
	div.feedburnerFeedBlock ul li span a {font-size: 16px;}	/* links and titles (because they are links) */
	.VideoAnimoto 	{width: 432px; height: 243px;} /* Flash video on home page and videos page */
	.VideoYT 		{width: 432px; height: 243px;} /* originally {width: 560px; height:315px;}  */
}

@media all and (max-width: 767px) and (min-width: 481px) {
	.MobileHide {display: none;}	
	.MobileShow {display: inline-block;}	
	.MobileClearL {clear: left;}
	.Mobile100 {max-width:100% !important; height:auto;}
	.Mobile90 {max-width:90% !important; height:auto;}
	.table1000 {display:block; max-width:1000px; border-collapse:collapse; margin:auto}
	#BodyContent{ min-width="100%"; padding-left: 5px; } /* needed because 2% left of parent table gets too small */
	td {font-size:15px; line-height:24px}
	h1 {font-size:20px; line-height:20px}
	h2 {	font-size: 18px;	line-height: 20px;}
	h3 {	font-size: 18px;	line-height: 20px;}
	h4 {	font-size: 10px;	line-height: 12px;}
	.ApptButton { font-size: 13px; line-height: 16px; height: 70px; padding-top: 12px; width: 100%;}
	.ApptLink	 {font-size: 13px; line-height: 16px;}
	.ContactForm td { font-size: 15px;	 }
	.FAQ {	font-size: 15px;}
	.JJKdifference {clear: left; width: 100%; margin:auto;}
	.news{	font-size: 11px;	line-height: 13px;	}
	#mainmenu li, #mainmenu li li 	{	font-size: 14px;  }	
	#sidemenu li, #sidemenu li li 	{	font-size: 14px;  }	
	.SidebarTitle {	font-size: 18px;}
	.SidebarLink a {font-size:14px;}
	.SidebarPhoneDesc {font-size: 14px; color: #D1342A;}
	.AnnouncementHeading {	font-size: 15px; }
	.ComparisonTable { width: 100%; margin: auto;}	
	.ComparisonTable td {	font-size: 13px;	line-height: 15px;}
	.ComparisonBlock td {	font-size: 10px;	line-height: 20px;}
	.ComparisonBlockBad td {	font-size: 10px;	line-height: 15px;}
	.InstructorTable td { font-size: 8px !important;	line-height: 12px; vertical-align:top; border-collapse:collapse !important;}
	.InstructorTable img { width: 50px; height: auto;}
	.iframe560 {width: 280px; height: 175px;}
	.iframe480 {width: 288px; height: 216px;}
	.iframeAppointy { width: 280px; height:222px;}	
	.LinkBlueSm 		{font-size:11px;}
	#locations {	font-size: 14px;}
	.Footer { min-height: 218px; padding:6px; background-color: black;}
	.FooterContent { width: 500px;}	
	.FooterA {font-size:12px; float: left; vertical-align: top; padding-right: 10px; padding-bottom: 5px; }
	.FooterA a{font-size:14px;}
	.FooterB {float: left;}	
	.schedule td {	font-size: 12px;	}
	.RightWhenFull {	float: left;	}
	.WorldwideRegion {	font-size: 16px;}	
	.WorldwideTable td {	font-size: 10px; line-height: 12px;		}
	.PhotoGalleryTable td {	font-size: 10px;	line-height: 14px;}
	.SocialDesc {color: #ffffff; font-size: 8px; line-height: 9px;}
	.date{ 		font-size: 10px;}							/* Date post published */
	div.feedburnerFeedBlock ul li span a {font-size: 16px;}	/* links and titles (because they are links) */
	.VideoAnimoto 	{width: 432px; height: 243px;} /* Flash video on home page */
	.VideoYT 		{width: 432px; height: 243px;}
	
}
@media all and (max-width: 480px) {
	.MobileHide {display: none;}
	.MobileShow {display: inline-block;}	
	.MobileClearL {clear: left;}
	.Mobile100 {max-width:100% !important; height:auto;}
	.Mobile90 {max-width:90% !important; height:auto;}
	.table1000 {display:block; max-width:1000px; border-collapse:collapse; margin:auto}
	#BodyContent{ min-width="100%"; padding-left: 5px; } /* needed because 2% left of parent table gets too small */
	td {font-size:15px; line-height:24px}
	h1 {font-size:20px; line-height:20px}
	h2 {	font-size: 18px;	line-height: 20px;}
	h3 {	font-size: 18px;	line-height: 20px;}
	h4 {	font-size: 15px;	line-height: 12px;}
	.ApptButton { font-size: 13px; line-height: 16px; height: 70px; padding-top: 12px; width: 100%;}
	.ApptLink	 {font-size: 13px; line-height: 16px;}
	.ApptLink	 {font-size: 13px; line-height: 16px;}
	.ContactForm td { font-size: 15px;	 }
	.FAQ {	font-size: 15px;}
	.JJKdifference {clear: left; width: 100%; margin:auto;}
	.news{	font-size: 11px;	line-height: 13px;	}
	.SidebarTitle {	font-size: 18px;}
	.SidebarLink a {font-size:14px;}
	.SidebarPhoneDesc {font-size: 14px; color: #D1342A;}
	#mainmenu li, #mainmenu li li 	{	font-size: 14px;  }	
	#sidemenu li, #sidemenu li li 	{	font-size: 14px;  }	
	.AnnouncementHeading {	font-size: 15px; }
	.ComparisonTable { width: 100%; margin: auto;}	
	.ComparisonTable td {	font-size: 7px;	line-height: 12px;}
	.ComparisonBlock td {	font-size: 7px;	line-height: 12px;}
	.ComparisonBlockBad td {	font-size: 7px;	line-height: 12px;}
	.iframe560 {width: 280px; height: 175px;}
	.iframe480 {width: 288px; height: 216px;}
	.iframeAppointy { width: 280px; height:222px;}	
	.InstructorTable td { font-size: 8px !important;	line-height: 14px; vertical-align:top; border-collapse:collapse !important;}
	.InstructorTable img { width: 50px; height: auto;}
	.LinkBlueSm 		{font-size:11px;}
	#locations {	font-size: 14px;}
	.Footer { min-height: 218px; padding:6px;  background-color: black;}
	.FooterContent { width: 400px;}
	.FooterA {font-size:12px; float: left; vertical-align: top; padding-right: 10px;  padding-bottom: 5px; }
	.FooterA a{font-size:14px;}
	.FooterB { float: left;}	
	#schedule td {	font-size: 12px;	}
	.RightWhenFull {	float: left;	}
	.WorldwideRegion {	font-size: 16px;}	
	.WorldwideTable td {	font-size: 10px; line-height: 12px;	}	
	.PhotoGalleryTable td {	font-size: 10px;	line-height: 14px;}
	.SocialDesc {color: #ffffff; font-size: 8px; line-height: 9px;}
	.date{ 		font-size: 10px;}							/* Date post published */
	div.feedburnerFeedBlock ul li span a {font-size: 16px;}	/* links and titles (because they are links) */	
	.VideoAnimoto 	{width: 259px; height:145px;} 	
	.VideoYT 		{width: 259px; height:145px;} 	
}


.TextBody {padding-right: 15px;}
.TextSmaller {font-size: 80%;}

a img {border: none; }

body {	background: url('Images/bg.png') repeat-x #000000;		}
#BodyMain { background-color: #fff;}
	
.ApptButton { 
	background: url('Images/ButtonApptBlank.png');
	background-size: contain;
	background-repeat: no-repeat;
	vertical-align: middle;
	margin-top: 10px;
	font-weight: bold;
    color: black;
	/*
    animation-name: BlackToRed;
    animation-duration: 2s;
    animation-iteration-count: infinite;
	*/
}
.SafariMarquee {  
	align-content: center;
	overflow-x: -webkit-marquee;
	-webkit-marquee-direction: backwards;
	-webkit-marquee-style: alternate;
	-webkit-marquee-speed: fast;
	-webkit-marquee-increment: large;
	-webkit-marquee-repetition: 600;
}

.ApptLink:link, .ApptLink:active, .ApptLink:visited	 {
	font-weight: bold;
	text-decoration: none;  
}	

.ApptLink:hover	 {
	font-weight: bold;
	text-decoration: none;  	
}
.ApptLink p { margin: 0;
 padding: 0;
}
/* The animation code */
@keyframes BlackToRed {
    0%   {color: black;}
    40%  {color: red;}
    80%  {color: black;}
/*    from {color: black;}
    to {color: red;} */
}



td {
	font-family: Arial, Sans-Serif;
	color: #000000;
}


.red {color: #EA343A;} /* dull red */
.red1 {color: #D1342A}; /* bright red */
.blue {color: #0000F6!important;}
.gold {	color: #B2A851;}
.pink {	color: #F6B8C5;	font-weight: bold;}

.Top {	vertical-align:top;}
.Mid {	vertical-align:middle;}

h1 {
	color: #0000F6;
	font-family: garamond, "BOOK Antiqua", "TIMes New Roman";
	font-weight: bolder;
	text-align: center;
}
h2 {
	color: #D1342A;
	font-weight: bold;
	font-style:italic;
	margin: 0;
	padding: 0;
}
h3 {
	color: #B2A851;
	font-weight: bolder;
	font-style:italic;
	margin: 0;
	padding: 0;
}
h4 {
	color: #000000;
	font-weight: bolder;
	margin: 0;
	padding: 0;
	font-family: Arial, Sans-Serif;
}
.FAQ {	color: #D1342A;	font-weight: bold;}
.FieldDesc150 {width: 150px; display: inline-block; clear: left;}
.FieldSizeLg {width: 250px;}


textarea.sunken {border: 2px inset; }  /* for form textarea boxes to make them look like other fields */

ul  {margin-top: 0px;	 }
ul li {margin-left: -25px;	 }

#fadeshow1 {	margin-left: auto;	margin-right: auto;}

.NavBar {	background: #000;	vertical-align:middle;	text-align:center;}


AnnouncementHeading {	font-weight: bold; 	font-family: Arial, Helvetica, sans-serif;}

.Bordered {	border: 	1px solid #000;}
.BorderLeft {	border-left: 	1px solid #000;}
.BorderRight {	border-right: 	1px solid #000;}
.BorderTop {	border-top: 	1px solid #000;}
.BorderBottom {	border-bottom: 	1px solid #000;}


.Centered {margin: auto; }
.CenterContents {text-align: center;}
.ClearBoth {clear: both;}
.ContentsLeft {text-align: left;}
.ContentsRight {text-align: right;}

.ComparisonTable {
	border-collapse:collapse;
	line-height: 25px;
	background-color:#CCC;
}
.ComparisonTable td {
	text-align: center;
	font-weight:bolder;
	vertical-align: bottom;
	color: #000000;	
}
.ComparisonBlock td {
	text-align: center;
	font-family: Arial, Helvetica, sans-serif;
	font-weight:bold;
	vertical-align: middle;	
	border-color:#000;
	color: #fffff;
	background-color: #D1342A;
}
.ComparisonBlockBad td {
	text-align: center;
	font-family: Arial, Helvetica, sans-serif;
	font-weight: bold;
	vertical-align: middle;
	border-color: #000;
	color: #D1342A;
	background-color:#000;
}

	
a:link, a:active, a:visited		{	color:#0000F6; text-decoration:none;  	}
a:hover {	color:#D1342A; text-decoration:none;  	}

.LinkRed		{color: #D1342A; text-decoration:none; font-weight:bold;}
.LinkRed:hover 	{color: #0000F6; text-decoration:none; font-weight:bold;}
.LinkBlue 		{color: #0000F6; text-decoration:none; font-weight:bold;}
.LinkBlue:hover {color: #D1342A; text-decoration:none; font-weight:bold;}
.LinkBlueSm 	{color: #0000F6; text-decoration:none; font-weight:bold; }
.LinkBlueSm:hover {color: #D1342A;}
.LinkBlack 		{color: #000000; text-decoration:none; font-weight:bold;}
.LinkBlack:hover{color: #D1342A; text-decoration:none; font-weight:bold;}



#locations {color: #FFFFFF;	}

.FloatR {float: right; margin-left: 10px;}
.FloatL {float: left; margin-right: 10px;}

.Footer {
	color:#ffffff; 
	font-weight: bold; 
	font-family: garamond, "BOOK Antiqua", "TIMes New Roman"; 
	vertical-align:top;	
}

.InstructorCard {float: left; width: 140px; margin-right: 10px; margin-bottom: 20px;}

.Hidden {display: none;}
.Unhidden {display: block;}

.news{	font-family: Arial, Sans-Serif;	color:#fff;	}

.FooterA {color:#ffffff; font-weight: bold; font-family: garamond, "BOOK Antiqua", "TIMes New Roman";}
.FooterA a{color:#ffffff; text-decoration:underline; font-weight: bold;}
.FooterA a:hover {color: #0000F6; }

#schedule td {	font-family: Arial, Sans-Serif;	}
	
	
.WorldwideRegion {	color: #D1342A;	font-weight: bold;}
.WorldwideRegionDirector {	color: #000000;	font-weight: bold;}	
.WorldwideTable td {	padding-bottom:10px;	vertical-align: top;	}

.PhotoGalleryTable td {
	text-align: center;
	font-family: Arial, Helvetica, sans-serif;
	font-weight:bold;
	vertical-align: top;	
}

.RedLogo {	color: #CF3626;}


.SideBar tr td p {	text-align: center;}
.SideBar.CenterContents tr td .sidelinks {	text-align: left; margin-left: 5px;}

.SideBar {
	height: 100%;
	background-color: #000;
	background-repeat:repeat-y;
}
.SidebarTitle {
 	color: #B2A851;
	font-family: garamond, "BOOK Antiqua", "TIMes New Roman";
	font-weight: bolder;
	text-shadow: black 0.1em 0.1em 0.2em;  /* doesn't show up in IE but works in Chrome */
}
.SidebarLink:link, .SidebarLink:visited, .SidebarLink:active {
	font-family: garamond, "BOOK Antiqua", "TIMes New Roman";
	color: #FFFFFF;
	font-weight:bolder;
	text-decoration:none;
}
.SidebarLink:hover {
	font-family: garamond, "BOOK Antiqua", "TIMes New Roman";
 	color: #D1342A;
	font-weight:bolder;
	text-decoration:none;
}

.VerticalTop {vertical-align:top;}
.VerticalMid {vertical-align:middle;}

.mylivechat_bubble_img {width: 100px; height: 104px;} /* this has to be define or Page Speed is affected */

/* DROPDOWN MENU ============================================================================================================================== */
#mainmenu {
	color: #B2A851;
	font-family: garamond, "BOOK Antiqua", "TIMes New Roman";
	font-weight:bolder;
	vertical-align:middle;
}
#mainmenu {
	background:#000;
	text-align:left;
	padding:0;
	margin:0;
}

#mainmenu a {
	color: #B2A851;
	text-decoration:none;
}
#mainmenu a:hover {
  	color: #D1342A;
	font-weight:bolder;}
	
/* - - - ADxMenu:BASIC styles [ MANDATORY ] - - - */
/* remove all list stylings */
#mainmenu, #mainmenu ul {	margin:0;	padding:0;	border:0;	list-style-type:none;	display:block;	z-index:1000;}

#mainmenu ul {
	margin:0;
	padding:5px 5px 5px 5px;
	text-align:left;
	background: black;
}
#mainmenu ul ul {
	margin:0 0 0 -10px;
	padding:7px 7px 7px 7px;
}
#mainmenu li {
	margin: 0px 14px 10px 0px;
	padding: 0px 5px 0px 5px;
    border:0;
	display:inline;
	float:left;	/* move all main list items into one row, by floating them */
	position:relative;/* position each LI, thus creating potential IE.win overlap problem */
	z-index:5;/* thus we need to apply explicit z-index here... */
	vertical-align:middle;
}

#mainmenu ul li {  display:block;	float:none;}
#mainmenu li:hover {
	z-index:10000;		/* ...and here. this makes sure active item is always above anything else in the menu */
	white-space:normal;	/* required to resolve IE7 :hover bug (z-index above is ignored if this is not present)
						see http://www.tanfa.co.uk/css/articles/pure-css-popups-bug.asp for other stuff that work */
}
#mainmenu li li {
	/*background:transparent url(../art/opacity.png);*/
	float: none;	/* items of the nested menus are kept on separate lines */
	padding: 5px 5px 0px 0px;
	width: 200px; 
}
#mainmenu ul {
	visibility:hidden;	/* initially hide all submenus. */
	position:absolute;
	z-index:10;
	left:0;				/* while hidden, always keep them at the top left corner, */
	top:0;				/* to avoid scrollbars as much as possible */
}
#mainmenu li:hover>ul { 	visibility:visible;	/* display submenu them on hover */	top:100%;			/* 1st level go below their parent item */}
#mainmenu li li:hover>ul {/* 2nd+ levels go on the right side of the parent item */	top:0;	left:100%;}

/* -- float.clear --  force containment of floated LIs inside of UL */
#mainmenu:after, #mainmenu ul:after { 	content:".";	height:0;	display:block;	visibility:hidden;	overflow:hidden;	clear:both;}
#mainmenu, #mainmenu ul {/* IE7 float clear:*/	min-height:0;}
/* -- float.clear.END --  */

/*
#mainmenu ul { 	width:180px; }
#mainmenu ul ul {	width: 300px;} */
#mainmenu li.hidden {	display:none;}


/* DROPDOWN MENU ============================================================================================================================== */
#sidemenu {
	color: #fff;
	font-family: garamond, "BOOK Antiqua", "TIMes New Roman";
	font-weight:bolder;
	vertical-align:middle;
	background:#000;
	text-align:left;
	padding:0;
	margin:0;
}

#sidemenu a {
	color: #fff;
	text-decoration:none;
	margin-left: -10px;
}
#sidemenu a:hover {
  	color: #D1342A;
	font-weight:bolder;}
	
/* - - - ADxMenu:BASIC styles [ MANDATORY ] - - - */
/* remove all list stylings */
#sidemenu, #sidemenu ul {	margin:0;	padding:0;	border:0;	list-style-type:none;	display:block;	z-index:1000;}

#sidemenu ul {
	margin:0;
	padding:5px 5px 5px 0px;
	text-align:left;
	background: #000;
}
#sidemenu ul ul {
	margin: 0px;
	padding: 0px;
}
#sidemenu li {
	margin: 0px 14px 10px 0px;
	padding: 0px 5px 0px 0px;
    border:0;
	display:inline;
	float:left;	/* move all main list items into one row, by floating them */
	position:relative;/* position each LI, thus creating potential IE.win overlap problem */
	z-index:5;/* thus we need to apply explicit z-index here... */
	vertical-align:middle;
}

#sidemenu ul li {  display:block;	float:none;}
#sidemenu li:hover {
	z-index:10000;		/* ...and here. this makes sure active item is always above anything else in the menu */
	white-space:normal;	/* required to resolve IE7 :hover bug (z-index above is ignored if this is not present)
						see http://www.tanfa.co.uk/css/articles/pure-css-popups-bug.asp for other stuff that work */
}
#sidemenu li li {
	/*background:transparent url(../art/opacity.png);*/
	float: none;	/* items of the nested menus are kept on separate lines */
	padding: 0px 2px 0px 20px;
	width: 150px;
}
#sidemenu ul {
	visibility:hidden;	/* initially hide all submenus. */
	position:absolute;
	z-index:10;
	left:0;				/* while hidden, always keep them at the top left corner, */
	top:0;				/* to avoid scrollbars as much as possible */
}
#sidemenu li:hover>ul { 	visibility:visible;	/* display submenu them on hover */	top:100%;			/* 1st level go below their parent item */}
#sidemenu li li:hover>ul {/* 2nd+ levels go on the right side of the parent item */	top:0;	left:100%;}

/* -- float.clear --  force containment of floated LIs inside of UL */
#sidemenu:after, #sidemenu ul:after { 	content:".";	height:0;	display:block;	visibility:hidden;	overflow:hidden;	clear:both;}
#sidemenu, #sidemenu ul {/* IE7 float clear:*/	min-height:0;}
/* -- float.clear.END --  */

#sidemenu li.hidden {	display:none;}


div.fb-like-box {max-width: 700px; height: 4000px;}
div.fb-page {max-width: 200px; height: 300px;}
blockquote.fb-xfbml-parse-ignore a {font-size: 60%; color: white!important;}
/* CSS Hack for hiding the LIKE count  ======================================= */
div.fb-like span {
  display:block;
  width:48px !important;  
}

div.fb-like iframe {
  width:48px !important;
}

div.fb-like iframe.fb_iframe_widget_lift {
  width:100px !important;
}


/* USED FOR FORMATTING BLOG FEEDS ============================================================================================================================== */
div.feedburnerFeedBlock div {	 
	margin: 0;
	padding: 0;
}

div.feedburnerFeedBlock date {/* doesn't work */}
.date{ 						/* Date post published */
	color: #000000;
	display: inline;
	font-style: italic;
	padding-left: 10px; 
}

	
div.feedburnerFeedBlock ul {list-style-type: none; }

div.feedburnerFeedBlock ul li { 
	padding-top: 10px;	
	padding-bottom: 5px;			/* amount of space above the border-bottom */
	border-bottom: 1px solid #999;
}

div.feedburnerFeedBlock ul li span a	 {	/* links and titles (because they are links) */
	color: #0000F6;
	font-weight: bolder;
}
div.feedburnerFeedBlock ul li span a:hover	 {	
	color: #D1342A;
}

div.feedburnerFeedBlock ul li span.headline { /* doesn't work */ 
}
.headline { 								  /* make sure this is listed AFTER a so that formatting will override that for titles */
	display: inline-block;
	margin-bottom:	10px;   /* this margin won't work without inline block */
}


#creditfooter	 { display: none; }