/*
Design by webbaird for Trafford Aikido  2013
*/


/*Windows Phone 8 and Internet Explorer 10
Internet Explorer 10 doesn't differentiate device width from viewport width, and thus doesn't properly apply the media queries in Bootstrap's CSS. To address this, you can optionally include the following CSS and JavaScript to work around this problem until Microsoft issues a fix*/
@-webkit-viewport   { width: device-width; }
@-moz-viewport      { width: device-width; }
@-ms-viewport       { width: device-width; }
@-o-viewport        { width: device-width; }
@viewport           { width: device-width; }


/*Added for Bootstrap*/


/*Part of navbar-static-top*/

.jumbotron {
	margin-top: 0em;
	padding: 0.1em;
	padding-left: 0;
	/*background-color:#FFFFFF; */   
}

.jumbotron p{
	font-size: 0.93em;
}


.float-l {
	float:left;
}

.float-r {
	float:right;
	margin-right: 2em;
}





/*Customise buttons */
.btn-ttc,
.btn-ttc:hover,
.btn-ttc:active {
  color: white;
  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
  background-color: #9a0303;/*#007da7*/
  border-color: #000;
  border: 0.5em;
   -webkit-border-radius: 20px;
   -moz-border-radius: 20px;
   -ms--border-radius: 20px;
   -o--border-radius: 20px;
   border-radius: 20px;
   font-size: 1em;
}   


.blue {
	color:#036;
}

.red {
	color: #9a0303;
}

.mylist-remove-indent {
	padding-left:1.3em;
}


.mysize-blockquote {
	font-size: 0.9em;
}

.mywell {
	background-color: #B3FFFF;
}

.my-pills > li {
	padding-bottom: 3px;
}

.my-pills > li > a {
    background-color: #d4d4d4;
    color: #000;  /*  fff is white */
    }
.my-pills > li > a:hover, 
.my-pills > li > a:focus {
    background-color: #660202; /* Dark red*/
	color:#fff;
    }
	
.my-pills >  .active-pills a,
.my-pills > .active-pills a:hover{
	background-color: #9a0303;
	color: #fff;
}

.col-heading { /* column red colour = H3 #9A0303 now dark blue */
	font-size: 110%;
	color:#03C;
	font-weight:bold;
	line-height: 1.5em;
	margin: 0 0 1.5em;
	}

.my-bottom-nav {
	font-size: 0.90em;
	color: #999;
}
.my-bottom-nav a{
	font-size: 1em;
	color: #999;
}



h4.heading { /* For page heading after breadcrumb */
	font-family: 'Gloria Hallelujah',Arial, Helvetica, sans-serif, cursive; font-size: 1.8em; color:#CC0000; 
}
p.gradeheading { /* For grading syllabus headings*/
	font-family: 'Gloria Hallelujah',Arial, Helvetica, sans-serif, cursive; font-size: 2.5em; color:#CC0000; 
}
p.small { /* For under grading syllabus headings*/
	font-size: 0.75em;
	}
	

/* Chrome fix for Google Fonts   possibly not required*/	
body {
    -webkit-animation-delay: 0.1s;
    -webkit-animation-name: fontfix;
    -webkit-animation-duration: 0.1s;
    -webkit-animation-iteration-count: 1;
    -webkit-animation-timing-function: linear;
}

@-webkit-keyframes fontfix {
    from { opacity: 1; }
    to   { opacity: 1; }
}

p.kids-comment { /* For Juniors Why I do Aikido*/ 
		font-family:'Indie Flower', Arial, Helvetica, sans-serif, cursive; 
		font-size:1.25em; 
		margin-top:0.3em; 
		}

p.who { /* For Juniors Why I do Aikido*/ 
	font-family: 'Open Sans', sans-serif;
	text-align: right;
	margin-top: -1.8em;
	font-size: 0.7em;
	}	

	
.my-move-up { /* For moving bulleted lists up */
	margin-top: -0.95em;
}

/* IE 6 does not support max-width so default to width 100% Picked up and thrown in here */
.ie6 img {
	width:100%;
}


.my-masthead {
	background-color: #66ccff;
	width: 100%;
}

/*  Adjusts the brand logo up to merge into black bar  */
.navbar-brand {
	margin-top: -0.5em;
}


/*Code introduced to hide - nav bar text Trafford Aikido for large displays*/
@media only screen and (min-width: 651px) {
.mynav-hide-brand {
		display: none
	}
}


/*Code introduced to hide - header bar for small displays
Ie if below 650 px  display:none operates hiding header and adds logo and words image */
@media only screen and (max-width: 650px) {	
.myheader-hide {
		display:none;
	}	

	/*For putting logo and name onto nav bar - image 45px high Not utilised part of html 
	.navbar-brand {
 	 background:url(/newsite/asset/ta-logo-n.jpg) no-repeat left center;
  	max-width: 100%;
		}*/
}


.img-mine {
	max-width: 100%;
}

.my-imgthumbnail-tiny {
		max-width: 800px;
}

.my-imgthumbnail-verysmall {
		max-width: 150px;
}

.my-imgthumbnail-small {
		max-width: 250px;
}

.my-imgthumbnail-med {
		max-width: 350px;
}

.my-img-centre {
	display: block;
    margin: auto;
}

/* Header */

/* Logo */

/* Menu */

/* Page */

/* Sidebar */


/* Footer */

footer {
	font-size: 0.8em;
	padding: 0.2em
}


/*Added for new Google maps API 3   Jan13	*/
#map_canvas { height: 99%; width: 99% } /*Google code they say needed*/
/* fixed width and height needed in html I adopted min-width half normal and same fixed height as a workarround in a fluid layout  ie
<div id="map_canvas" style="min-width:200px; height:390px"></div> */

/* Fix Google Maps canvas - Bootstrap3 solution
 *
 * Wrap your Google Maps embed in a `.google-map-canvas` to reset Bootstrap's
 * global `box-sizing` changes. You may optionally need to reset the `max-width`
 * on images in case you've applied that anywhere else. (That shouldn't be as
 * necessary with Bootstrap 3 though as that behavior is relegated to the
 * `.img-responsive` class.)
 Feb15   Added padding left and right for mobile phones to edge away from screen edge
 */


.google-map-canvas,
.google-map-canvas * { .box-sizing(content-box); padding-left: 0.75em; padding-right 0.75em; }


/* Responsive iFrame  for Google maps and calendar
http://themeloom.com/2013/02/tips-embed-google-maps-and-calendars-in-a-responsive-wordpress-theme/       #########   Fixed to 500px height   ############ */
 
.myresponsive-iframe-container {
    position: relative;
    padding-bottom: 56.25%;
    padding-top: 30px;
    height: 500px;
    overflow: hidden;
}
 
.myresponsive-iframe-container iframe,  
.vresponsive-iframe-container object, 
.vresponsive-iframe-container embed {
    position: absolute;
    top: 0;
    left: 0;
    width: 99%!important;
    height: 99%!important;
}
/* Responsive iFrame  end */


/* Responsive iFrame  for Google maps and calendar
http://themeloom.com/2013/02/tips-embed-google-maps-and-calendars-in-a-responsive-wordpress-theme/    Note the css above is fixed to 500px height   */
 
.responsive-iframe-container {
    position: relative;
    padding-bottom: 56.25%;
    padding-top: 30px;
    height: 0;
    overflow: hidden;
}
 
.responsive-iframe-container iframe,  
.vresponsive-iframe-container object, 
.vresponsive-iframe-container embed {
    position: absolute;
    top: 0;
    left: 0;
    width: 99%!important;
    height: 99%!important;
}
/* Responsive iFrame  end */



/*Responsive Facebook
http://inspectelement.com/tutorials/how-to-make-the-facebook-like-box-responsive/  More for just the lie element  */
.facebook { overflow: hidden; border: 1px solid #d5d5d5; }



/* responsive fb like box */
/*http://www.trottyzone.com/making-facebook-responsive/ */
 
#fb-root {<em id="__mceDel">display: none; }</em>
/* To fill the container and nothing else */ 

.fb_iframe_widget, .fb_iframe_widget span, .fb_iframe_widget span iframe[style] {
width: 100% !important;
}

.embed-container {
position: relative;
padding-bottom: 56.25%; /* 16/9 ratio */ 
height: 650px;
overflow: hidden;
}

.embed-container iframe,
.embed-container object,
.embed-container embed {
position: absolute;
top: 0;
left: 0;
width: 100% !important;
height: 100% !important;
}
/* end of facebook like box responsive */


/* You Tube - 
You will need to wrap the responsive youtube embed code with a
and specify a 50% to 60% padding bottom. Then specify the child elements (iframe, object embed) 100% width, 100% height, with absolute position. This will force the embed elements to expand fullwidth automatically - See more at: http://avexdesigns.com/responsive-youtube-embed/#sthash.YD1YAPMA.dpuf
*/
.video-container {
    position: relative;
    padding-bottom: 56.25%;/* 16/9 ratio */ 
    padding-top: 30px; height: 0; overflow: hidden;
}
 
.video-container iframe,
.video-container object,
.video-container embed {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%!important;
    height: 100%!important;
}
/* end of You Tube responsive */





/* Optional responsive image override 
img { max-width: none; }*/


/*  ============ Customise navbar for Trafford Aikido =====================  */

/*  Colour scheme

343434  Black to match shade of logo
660202  Darker red
9a0303  Corporate red   (Range 962536 for a darker red)



*/

/*Deals with any drop down menus */
.dropdown-menu{background-color:#fff;}
.dropdown-menu .divider{background-color:#e5e5e5}
.dropdown-menu>li>a{color:#9a0303/* #9a0303 = corporate red 962536= estimate darker red #011949 NUT Dark blue #333*/;white-space:nowrap}
.dropdown-menu>li>a:hover,.dropdown-menu>li>a:focus{color:#fff;background-color:#9a0303;/*#357ebd  #428bca   This is sub menu hover*/
	background-image:-webkit-gradient(linear,left 0,left 100%,from(#9a0303),to(#962536));			
	background-image:-webkit-linear-gradient(top,#9a0303,0%,#962536,100%);
	background-image:-moz-linear-gradient(top,#9a0303 0,#962536 100%);
	background-image:linear-gradient(to bottom,#9a0303 0,#962536 100%);
	background-repeat:repeat-x;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff9a0303',endColorstr='#ff962536',GradientType=0)}




/*  from Google search */

/* navbar 
.navbar-inverse {
    background-color: #F8F8F8;
    border-color: #E7E7E7;
}*/
/* title 
.navbar-inverse .navbar-brand {
    color: #5E5E5E;
}*/
/* link 
.navbar-inverse .navbar-nav > li > a {
    color: #fff;
}*/
/* active link 
.navbar-inverse .navbar-nav > .active > a, 
.navbar-inverse .navbar-nav > .active > a:hover, 
.navbar-inverse .navbar-nav > .active > a:focus {
    color: #555;
    background-color: #E7E7E7;
}*/

/*http://bootstrap3-menu.codedorigin.com/#sthash.XErna1Gb.tC8DyE62.dpbs*/

.navbar-inverse { background-color: #343434}
.navbar-inverse .navbar-nav>.active>a:hover,.navbar-inverse .navbar-nav>li>a:hover, .navbar-inverse .navbar-nav>li>a:focus { background-color: #660202}
.navbar-inverse .navbar-nav>.active>a,.navbar-inverse .navbar-nav>.open>a,.navbar-inverse .navbar-nav>.open>a, .navbar-inverse .navbar-nav>.open>a:hover,.navbar-inverse .navbar-nav>.open>a, .navbar-inverse .navbar-nav>.open>a:hover, .navbar-inverse .navbar-nav>.open>a:focus { background-color: #9A0303}

.navbar-inverse { border-color: #343434}
.navbar-inverse .navbar-brand { color: #999999}
.navbar-inverse .navbar-brand:hover { color: #FFFFFF}
.navbar-inverse .navbar-nav>li>a { color: #cfcfcf  /* #CFCFCF = Light grey - Colour of text of tabs at rest*/}
.navbar-inverse .navbar-nav>li>a:hover, .navbar-inverse .navbar-nav>li>a:focus { color: #FFFFF /* on hover/focus */ }
.navbar-inverse .navbar-nav>.active>a,.navbar-inverse .navbar-nav>.open>a, .navbar-inverse .navbar-nav>.open>a:hover, .navbar-inverse .navbar-nav>.open>a:focus { color: #FFFFFF}
.navbar-inverse .navbar-nav>.active>a:hover, .navbar-inverse .navbar-nav>.active>a:focus { color: #FFFFFF}

.navbar-inverse .navbar-nav>.dropdown>a .caret { border-top-color: #EBEBEB /* #EBEBEB = Light grey */}
.navbar-inverse .navbar-nav>.dropdown>a:hover .caret { border-top-color: #FFFFFF}
.navbar-inverse .navbar-nav>.dropdown>a .caret { border-bottom-color: #EBEBEB}
.navbar-inverse .navbar-nav>.dropdown>a:hover .caret { border-bottom-color: #FFFFFF}

.navbar-default {
  border-color: #343434;   /* Outline of nav-box*/
}

a {
	text-decoration:   none; 
	color: #9A0303;   /*links show as red*/
}

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

/*  =========== EMail Form styling ==============   */

/*fieldset {
    margin:0 auto;
    width: 235px;
}
legend {
    font-weight:bold;
    font-size:125%;
}
form div.row-f {
    margin-bottom: 8px;
}
label {
    display: block;
    font-weight:bold;
}
input[type=text],input[type=email] {
    display:block;
    width: 400px;
}

textarea {
    width: 400px;
    height:200px;
}*/


/*End Email Contact Form Style*/


/* securimage css *********** */
@CHARSET "UTF-8";

@-webkit-keyframes rotating /* Safari and Chrome */ {
  from {
    -ms-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -webkit-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  to {
    -ms-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -webkit-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
@keyframes rotating {
  from {
    -ms-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -webkit-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  to {
    -ms-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -webkit-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
.rotating {
  -webkit-animation: rotating 1.5s linear infinite;
  -moz-animation: rotating 1.5s linear infinite;
  -ms-animation: rotating 1.5s linear infinite;
  -o-animation: rotating 1.5s linear infinite;
  animation: rotating 1.5s linear infinite;
}

/* end securimage */

/* End email form */