@import url('https://fonts.googleapis.com/css?family=Source+Sans+Pro:400');
/* @import url('normalize.css'); */

HTML {
	box-sizing:content-box;
	font-size:16px;
}

BODY { font-family: 'Source Sans Pro'; font-size:.95em; line-height: 1.343rem; margin:0; padding:0; border:none; }

H1,H2,H3 { font-weight:400; }
H1 { font-size: 1.8rem; margin: .67rem 0; line-height: 2.6rem; }
H2 { font-size: 1.5rem; margin: .75rem 0; line-height: 2.165rem; }
H3 { font-size: 1.25rem; margin: .83rem 0; line-height: 1.812rem; }

body { 
	/*
	margin:3px auto; 
	font-family:"Trebuchet MS", "Lucida Sans Unicode", Arial, sans-serif;
	font-size:100%;
	font-size:.8125em;
	*/
	}

/*  unecessary H1 { margin-top:.25em; } */
H3.bookings { }
H4.bookings {  }
A { color:#000; }
HR { border:0; height:1px; background-color:#ccc; color:#ccc; }

/************ FORM ELEMENTS **********/

FORM:not(#login_form, .my_booking_form) { display: inline-block; width:auto; margin: 1em 0;  padding: .5em 20px; background:#f8f8f8; }

FORM#booking_form { width:100%; padding:0; background:none; }

INPUT:not(INPUT[type=submit]), SELECT { background:#fff; }

LABEL:HOVER { background:lightyellow; cursor:pointer;  }

INPUT[type=text], INPUT[type=number], INPUT[type=email], INPUT[type=tel], INPUT#register_password, SELECT, TEXTAREA {
	width: auto;
	margin: .15em auto;
	padding: 3px 8px;
	background:#fff;
  }
INPUT#username, INPUT#password {
	width: 90%;
	margin: .25em auto;
	padding: 3px 8px;
  }

#remember { margin: .75em auto; }

INPUT[type=submit] { padding:3px 8px; }

INPUT[type=checkbox] { 	margin: .25em auto; /* can't be styled within */ }

INPUT.amount { width:60px; }

.text_input { width:200px; border:10px solid blue;  }

.btn2 {
    display: inline-block;
    border: none;
    padding: .5rem 1rem;
    margin: 0;
    text-decoration: none;
    background: #0069ed;
    color: #ffffff;
    /* font-family: sans-serif; */
	
    font-size: 1em;
    cursor: pointer;
    text-align: center;
    transition: background 250ms ease-in-out, transform 150ms ease;
    -webkit-appearance: none;
    -moz-appearance: none;
}
.btn2:hover, .btn2:focus { background: #0053ba; }
.btn2:focus {
    outline: 1px solid #fff;
    outline-offset: -4px;
}


/*****************/

#wrapper { width:868px; margin:auto; }
#header { height:84px;  padding:0; overflow:hidden;  }
#nav { padding:3px 10px; font-weight:bold; text-decoration:none; }
#nav a { font-weight:bold; text-decoration:none; white-space:nowrap; }
#nav a:hover { text-decoration:underline; }	
#nav_cms { padding:3px 10px; font-weight:bold;  }
#nav_cms a { text-decoration:none; white-space:nowrap; }
#nav_cms a:hover { text-decoration:underline; }	
#col_wrapper { padding:1em 0; background:#ffffff; }
#left_col { float:left;  width:190px; padding:0 5px; }
#left_col .panel { margin-bottom:20px; border:1px dotted #a0a0a0; padding:10px; background-color:#fafafa; }
#member_login_heading { margin:0 0 3px 0; font-weight:bold; text-transform:uppercase; }
#booking_sheets_heading { margin:0 0 1em 0; font-weight:bold; text-transform:uppercase; }
#left_col A { }
#right_col 	{ float:right; margin:0 10px 0 0;  border:0; padding:0 10px; width:628px; background:#ffffff; }
.two_cols { float:left; margin:0 1em 1em 0; border:0;  }
.right_col_nested_col { float:left; margin:0 20px 0 0; padding:10px; width:270px;  border:1px dotted #cccccc; } 
.end_floats { clear:both; }
#footer { clear:both; padding:1em 0; text-align:center; background:none; border-top:0; line-height:normal; }
#footer A { color:#e0e0e0; }
#banners { margin:2em auto; }
/*
#hbi {  margin:2em auto; padding:.5em 0; text-align:center;  }
#hbi, #mycourts_wrapper, #mycourts_logo_wrapper { width:100%; clear:both;  }
#hbi A { }
#hbi H1 { font-size:small; padding:0; margin:1em 0; }
*/
#hbi { margin:3em auto 1em	; text-align:center; }
#map { margin:1em 0; width:98%; height:60em; }

/**************/

.nested_column { float:left; width:230px; margin:0 5px 2em 0; border-bottom:1px dotted #aaa; }
.courtname { text-transform:uppercase; font-weight:bold; margin:1em 0; }
.courtdescr { }
.court_available { background:#fff; }
.court_available:HOVER { background:#fafafa; border-color:#999; }
.court_available A { }
.court_available, .court_booked, .slot { margin-bottom:0; padding:0 3px 2px 3px; min-height:3em; border:0; border-top:1px dotted #aaa; }
.court_available { background:#fff; }
.court_booked { background:#ffffe0; /*lightyellow*/ }
.court_booked A {  }
.court_booked.team { background:#0ff;  /*aqua -- previouslu #00feff*/ }
.starttime { display:inline-block; width:40px; background:none; vertical-align:top; }
.by { display:inline-block; width:calc(100% - 40px);  }
.showcancellation { margin-left:40px; color:#bbb; }
.showcost, .cost { display:block; margin-left:40px; color:#888; }
.opponent { margin-left:40px; }

/*
.join_link { display:inline-block; margin-left:40px; padding:0 3px;  background:#f8f8f8; border:solid 1px #ccc; }
.join_link:HOVER { background:yellow; cursor:pointer; }
*/
.join_link { margin-left:40px; font-weight:bold; text-decoration:underline; }
.join_link:HOVER { cursor:pointer; }


.booknow_wrapper { margin:2em 0 1em; padding:10px; border:1px solid #ccc; background:lightyellow; display:none; }
DIV.slot:HOVER { background:lightyellow; cursor:pointer;  }
DIV.slot.selected { background:yellow; font-weight:normal;	 }

/****************/

DIV.pp_court { float:left; display:inline-block; min-width:24%; margin:0 1% 1em 0; }
DIV.pp_court:last-child { margin:0 0 1em 0; }
DIV.pp_court LABEL { display:inline-block; white-space:nowrap; }

/**************/

.form_table { background:#eee; margin:1em 0; }
.form_table TH { background:#f8f8f8; padding:3px 10px; font-weight:bold; text-align:left; }
.form_table TD { background:#fafafa; padding:2px 10px;}
.form_table TH.league { text-align:left; }
.form_table TH.league A { display:inline-block; float:right; font-weight:normal; color:blue; }
.form_table TD.league_player_img, .tbl TD.league_player_img { padding:0; width:27px; }
.form_table TD.player { min-width:150px; white-space:nowrap; }
.form_table TD.pos { width:35px;  text-align:center; font-weight:bold; }
.form_table TD.total { width:35px; text-align:center; font-weight:bold; white-space:nowrap; }
.form_table TD.points { text-align:center; }
.form_table TD.xbox { background:#eee !important; }
/*
.form_table TH.score_details { text-align:center; }
.form_table TH.score_details A { color:blue; font-weight:normal; }
*/
.formInput { width:200px; }

TABLE.form_table.my_bookings TD { padding:.5em 10px; background:#fbfbfb; } 
TABLE.form_table.my_bookings TD.actions { line-height:1.75em; } 
TABLE.form_table.my_bookings TD A.btn { padding:.075em 5px; border:1px solid #ccc; text-decoration:none; background:yellow; } 
TABLE.form_table.my_bookings TD A.btn:HOVER { background:lightyellow;  } 
TABLE.form_table.my_bookings TD A.btn.cancel { border-color:#aaa; background:red; color:#fff;  } 
TABLE.form_table.my_bookings TD A.btn.cancel:HOVER { background:crimson; } 

.my_booking { 
	display:inline-block;
	/*
	min-width:250px;
	max-width:400px;
	*/
	margin:.5em 0;  
	padding:0 20px; 
	background:#fafafa;
	border:1px solid #ccc; 
	}

.my_booking.booked_by_me { 
	background:#fafafa;
	}
	
.allow_joiners_wrapper { }

.selected { color:#000000; text-decoration:none; font-weight:bold; }
#admin_sub_nav { padding-bottom:30px; }
.smaller { font-size:smaller; }
.thumb_img_div { float:left; width:40px; height:35px; margin:1px; padding:0;}
.settings_image { float:left; margin-right:3px; height:37px; width:50px; padding:0; text-align:right; }
.settings_image img:hover { border-left:1px solid #ffffff; border-bottom:1px solid #ffffff; border-top:0; border-right:0; }
#div_comment { margin-bottom:1em;}
.private_comment, .private_comment a { color:#777777; }

.subnav { margin:0 0 1em 0; text-decoration:none; }
.subnav .selected { font-weight:bold; }

#editor_content TABLE { background:#ccc; }
#editor_content TABLE TD { padding:3px 6px; background:#fafafa; }

.alert { margin:2em 0; padding:15px; background:lightyellow; border:1px solid #ccc; }

#show_member_login { color:red; font-weight:bold; }

/*#mycourts_logo { background:url(../images/mycourts_logo.png) top center no-repeat; height:71px; }*/

#sponsor_banners {  }

/********* v1
UL.tabs { margin:1em 0 2em 0; padding:0; list-style:none; border-bottom:1px solid #aaa; }
UL.tabs LI { display:inline; margin:0 2px 0 0; }
UL.tabs LI A { 
	text-decoration:none; 
	padding:3px 10px 0 10px; 
	border-top:1px solid #ccc; 
	border-right:1px solid #ccc; 
	border-bottom:1px solid #aaa;   
	border-left:1px solid #ccc;
	background:#eee;
	} 
UL.tabs LI A:HOVER { background:#fff;   } 
UL.tabs LI A.selected { 
	border-top:1px solid #aaa; 
	border-right:1px solid #aaa; 
	border-bottom:1px solid #fff;   
	border-left:1px solid #aaa;
	background:#fff;   
	} 
*********************/

UL.tabs { margin:.5em 0; padding:0; list-style:none; border-bottom:0;  }
UL.tabs LI { display:inline; }
UL.tabs LI A {
	display:inline-block;
	margin:0 0 .25em 0;
	padding:3px 10px; 
	border:1px solid #ccc; 
	text-decoration:none; 
	background:#f8f8f8;
	color:#333;
	white-space:nowrap;
	} 
UL.tabs LI A:HOVER { background:yellow;   } 
UL.tabs LI A.selected { 
	background:yellow; font-weight:normal;
	color:#000;
	} 

.booking_rule_index { margin:1em 0; padding:1em 0; background:lightyellow; border:1px solid #eee; }

#facebook_twitter { display:none; }

.link_button { padding:3px 10px; background:#f00; color:white; text-decoration:none; text-transform:uppercase; font-weight:bold; }
.link_button:HOVER { background:#c00; }

/*
.cancel_button { padding:3px 10px; background:#f00; color:white; text-decoration:none; text-transform:uppercase; }
.cancel_button:HOVER { background:#c00; }
*/


.select_partners_button { padding:3px 10px; background:yellow; color:black; text-decoration:none; text-transform:uppercase; }

.tbl { background:#fafafa;  }
.tbl TH { padding:6px 20px 6px 0; border-bottom:1px dotted #ddd; font-weight:bold; text-align:left; }
.tbl TD { padding:6px 20px 6px 0; border-bottom:1px dotted #ddd; vertical-align:top; }
#account_balance_wrapper { margin:1em 0; }
#account_balance_heading { font-weight:bold; }
.na { color:#777 !important; }


A.small_button { margin:0 3px 0 0; padding:3px 6px; border:1px solid #ddd; background:#f8f8f8; text-decoration:none; }
A.small_button:HOVER, A.btn_selected { text-decoration:none; background:yellow; }
A.small_button.select_playing_partners { background:yellow; text-transform:uppercase; }
.small_button.cancel { background:red; color:white; text-transform:uppercase; }
.small_button.cancel:HOVER { background:#c00; }

TABLE.tournament_tbl { margin:1em 0; border-collapse:collapse; }
TABLE.tournament_tbl TH, TABLE.tournament_tbl TD { border:1px solid #ccc; padding:3px 6px; }
TABLE.tournament_tbl TH { background:#ddd; }
TABLE.tournament_tbl TD { background:#fafafa; }
/*TABLE.tournament_tbl TD A { color:blue; text-decoration:none; }
TABLE.tournament_tbl TD A:HOVER { color:blue; text-decoration:underline; background:#ffe; }*/

TABLE.tt { margin:1em 0; border-collapse:collapse; width:auto; }
TABLE.tt TH, TABLE.tt TD {  padding:3px; border-left:1px solid #eee; border-right:1px solid #eee; border-bottom:0px solid red; white-space:nowrap; }
TABLE.tt TH { background:#ddd; }
TABLE.tt TD { background:#fff; min-width:100px; }
TABLE.tt TD A { text-decoration:none; }
TABLE.tt TD.tv { border-right:1px solid #000 !important; }
TABLE.tt TD.th { border-bottom:1px solid #000 !important; }
TABLE.tt TD.tvh { border-right:1px solid #000 !important; border-bottom:1px solid #000 !important; }


#select_date { background:none; }
DIV#select_date DIV.left_side_date A {
	margin:0;
	padding:3px 0 3px 15px;
	display:block; 
	text-decoration:none;
	border-bottom:1px dotted #ccc;
	background:#fff;
	}
DIV#select_date DIV.left_side_date:first-child A  { border-top:1px dotted #ccc; }
DIV#select_date DIV.left_side_date A:HOVER, DIV#select_date DIV.left_side_date A.selected { background:yellow; font-weight:normal; text-decoration:none; } 	

TABLE#activity_bookings { margin:1em 0; background:none; border-collapse:collapse;  }
TABLE#activity_bookings TD { background:#fafafa; border:1px solid #ccc; }
TABLE#activity_bookings TD.activity_name SPAN { text-transform:uppercase; font-weight:bold; }
	A.book_now_activity { text-transform:uppercase; font-weight:bold; white-space:nowrap;  }
	A.book_now_activity:HOVER { background:yellow; }

/*.section_wrapper { display:inline-block; margin:1em 0; width:auto; padding:0 20px 1em 20px; background:#fafafa; border:1px solid #ccc; } */

UL#news_download_links LI A { 
    white-space: pre-wrap; /* CSS3 */    
    white-space: -moz-pre-wrap; /* Mozilla, since 1999 */
    white-space: -pre-wrap; /* Opera 4-6 */    
    white-space: -o-pre-wrap; /* Opera 7 */    
    word-wrap: break-word; /* Internet Explorer 5.5+ */
}


#gleneagles_nav, #twsrc_tournament_banner { display: none; }

#ico_box { float:right; width:200px; margin:0 0 2em 20px; border:1px solid #ccc; padding:15px; text-align:center; font-size:smaller; background:#fafafa; }


#sponsors { display:none; width:980px; margin:0 auto; padding:1em 0; background:#fff; text-align:center; }
.sponsor {
	display:inline-block;
	height: 180px; /* equals max image height */
	width: 30%;
	margin:1em 0;
	padding:0;
	border:0;
	white-space: nowrap;
	text-align: center; 
	background:#fff;
}
#sponsor_us { width:30%; height:auto; margin:.5em auto; padding:1em 0; background:#eee; vertical-align: middle; }
.sponsor SPAN { /*https://stackoverflow.com/questions/7273338/how-to-vertically-align-an-image-inside-a-div*/
    display: inline-block;
    height: 100%;
	width:0;
    vertical-align: middle;
}
.sponsor IMG {
    vertical-align: middle;
    max-width: 80%;
	max-height:180px;
	height:auto;
}



/******** common styles ************/

.alert { margin:1em 0; padding:1em 20px; background:lightyellow; border:1px solid #ccc; }

IMG.img_inline { vertical-align:text-bottom; }
IMG.icon_sendmail { margin-bottom:3px; width:19px; height:17px; border:none; display:inline-block; }
/*IMG.icon_whatsapp { max-width:none; width:22px; height:auto;  }*/
IMG.icon_sendmail, IMG.icon_whatsapp { margin-right:5px; vertical-align:text-bottom; }

.icon_share, .icon_email { height:24px; width:auto; margin-right:10px; }
.icon_whatsapp { height:32px; width:auto; margin-right:10px; }
.icon_share:HOVER, .icon_email:HOVER, .icon_whatsapp:HOVER { background:#eee; }

.dont-break-out {
	/* These are technically the same, but use both */
	overflow-wrap: break-word;
	word-wrap: break-word;
	-ms-word-break: break-all;
	/* This is the dangerous one in WebKit, as it breaks things wherever */
	word-break: break-all;
	/* Instead use this non-standard one: */
	word-break: break-word;
	/* Adds a hyphen where the word breaks, if supported (No Blink) */
	-ms-hyphens: auto;
	-moz-hyphens: auto;
	-webkit-hyphens: auto;
	hyphens: auto;
}

/********************/

.index_nav UL { list-style: none; margin:0 0 1em 0; padding:0; font-weight:bold;   }
.index_nav UL LI A { background:none; }
.index_nav UL LI UL LI { }
.index_nav UL LI UL LI A { display:inline-block; margin:0 10px .35em 15px; font-weight:normal; background:none; }
.index_nav A:HOVER { background:lightyellow; }

/********************/

/**********************************************/

#overlay {
	display:none;
	z-index:2000;
	height:100%;
	width:100%; 
	padding:0;
	position: fixed;
	top: 0;
	left: 0;	
	overflow-x: hidden;
	transition: .5s;
	background-color: rgba(0,0,0,.3);
	cursor: pointer;
}
#overlay_close { margin:0; text-align:right; }
#overlay_close A { text-decoration:none; font-size:5em; }
#overlay_content_wrapper {
	/*height:100%;*/
	margin:0 20% 0 20%;
	padding:5%;
	cursor:default;	
	background:#fff;
}

.overlay {
	display:none;
	z-index:3;
	height:100%;
	width:100%; 
	padding:0;
	position: fixed;
	top: 0;
	left: 0;	
	overflow-x: hidden;
	transition: .5s;
	background-color:  rgba(0,0,0,.3);
	cursor: pointer;
}
.overlay_close { margin:0; text-align:right; }
.overlay_close A { text-decoration:none; font-size:5em; }
.overlay_content {
	margin:0 20% 0 20%;
	padding:5%;
	cursor:default;	
	background:#fff;
}


/**********************************************/


/********************/

.desktop { display:block; }
.mobile { display:none; }