demo_page

* Jnr Squad, Jnr Squad Adv, Snr Squad, Higher Levels: By Invite Only
** School Groups and Private Groups: Depending on Availability

<a href="http://www.oneoakhosting.com.au/site_kimnastix2/index.php/page-section/classes/">Click here to view class details</a>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Super Simple Modal Popups Demo</title>
<link href='http://fonts.googleapis.com/css?family=Roboto' rel='stylesheet' type='text/css'>
<link href="http://cdnjs.cloudflare.com/ajax/libs/normalize/3.0.1/normalize.css" rel="stylesheet" type="text/css">
<style>
html {
font-family: "roboto", helvetica;
position: relative;
height: 100%;
font-size: 100%;
line-height: 1.5;
color: #444;
}

h2 {
margin: 1.75em 0 0;
font-size: 5vw;
}

h3 { font-size: 1.3em; }

.v-center {
height: 100vh;
width: 100%;
display: table;
position: relative;
text-align: center;
}

.v-center > div {
display: table-cell;
vertical-align: middle;
position: relative;
top: -10%;
}

.btn {
background-color: #fff;
display: inline;
font-size: 3vmin;
text-decoration: none;
transition: background-color 1s ease 0s;
}

.btn:hover {
background-color: #ddd;
-webkit-transition: background-color 1s ease;
-moz-transition: background-color 1s ease;
transition: background-color 1s ease;
}

.btn-small {
padding: .75em 1em;
font-size: 0.8em;
}

.modal-box {
display: none;
position: absolute;
z-index: 1000;
width: 98%;
background: white;
border-bottom: 1px solid #aaa;
border-radius: 4px;
box-shadow: 0 3px 9px rgba(0, 0, 0, 0.5);
border: 1px solid rgba(0, 0, 0, 0.1);
background-clip: padding-box;
}
@media (min-width: 32em) {

.modal-box { width: 20%; }
}

.modal-box header,
.modal-box .modal-header {
padding: 1.25em 1.5em;
border-bottom: 1px solid #ddd;
}

.modal-box header h3,
.modal-box header h4,
.modal-box .modal-header h3,
.modal-box .modal-header h4 { margin: 0; }

.modal-box .modal-body { padding: 2em 1.5em; }

.modal-box footer,
.modal-box .modal-footer {
padding: 1em;
border-top: 1px solid #ddd;
background: rgba(0, 0, 0, 0.02);
text-align: right;
}

.modal-overlay {
opacity: 0;
filter: alpha(opacity=0);
position: absolute;
top: 0;
left: 0;
z-index: 900;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.3) !important;
}

a.close {
line-height: 1;
font-size: 1.5em;
position: absolute;
top: 5%;
right: 2%;
text-decoration: none;
color: #bbb;
}

a.close:hover {
color: #222;
-webkit-transition: color 1s ease;
-moz-transition: color 1s ease;
transition: color 1s ease;
}
</style>
</head>

<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script>
$(function(){

var appendthis = ("<div class='modal-overlay js-modal-close'></div>");

$('a[data-modal-id]').click(function(e) {
e.preventDefault();
$("body").append(appendthis);
$(".modal-overlay").fadeTo(500, 0.7);
//$(".js-modalbox").fadeIn(500);
var modalBox = $(this).attr('data-modal-id');
$('#'+modalBox).fadeIn($(this).data());
});

$(".js-modal-close, .modal-overlay").click(function() {
$(".modal-box, .modal-overlay").fadeOut(500, function() {
$(".modal-overlay").remove();
});

});

$(window).resize(function() {
$(".modal-box").css({
top: ($(window).height() - $(".modal-box").outerHeight()) / 2,
left: ($(window).width() - $(".modal-box").outerWidth()) / 2
});
});

$(window).resize();

});
</script>
<div id="popup1" class="modal-box">
<header> <a href="#" class="js-modal-close close">×</a>
</header>
<div class="modal-body">
</div>
<div class="modal-body">
</div>
<footer> <a href="#" class="btn btn-small js-modal-close">Close</a> </footer>
</div>

<table class="tribe-events-calendar1" border="0" width="100%" cellspacing="0" cellpadding="0" align="center">
<thead>
<th align="center" valign="middle">class</th>
<th align="center" valign="middle">monday</th>
<th align="center" valign="middle">tuesday</th>
<th align="center" valign="middle">wednesday</th>
<th align="center" valign="middle">thursday</th>
<th align="center" valign="middle">friday</th>
<th align="center" valign="middle">saturday</th>
</thead>
<tbody>
<tr>
<td align="center" valign="middle" bgcolor="#f4f4f4">Kindergym 0-3yrs Parent/Child</td>
<td align="center" valign="middle"><a href="#" class="js-open-modal btn" data-modal-id="popup1">10am</a></td>
<td align="center" valign="middle"><a href="#" class="hover">10am</a></td>
<td align="center" valign="middle"><a class="tooltip1" title="Sample tooltip" href="#">10am</a></td>
<td align="center" valign="middle"><a class="tooltip1" title="Sample tooltip" href="#">10am</a></td>
<td align="center" valign="middle"><a class="tooltip1" title="Sample tooltip" href="#">9am</a></td>
<td></td>
</tr>
<tr>
<td align="center" valign="middle" bgcolor="#f4f4f4">Pre-Junior gym 3-4yrs</td>
<td align="center" valign="middle"><a class="tooltip1" title="Sample tooltip" href="#">11am</a></td>
<td align="center" valign="middle"></td>
<td align="center" valign="middle"></td>
<td align="center" valign="middle"></td>
<td align="center" valign="middle"></td>
<td></td>
</tr>
<tr>
<td align="center" valign="middle" bgcolor="#f4f4f4">Junior Gym 4-5yrs</td>
<td align="center" valign="middle"><a class="tooltip1" href= "http://www.oneoakhosting.com.au/site_kimnastix2/?p=16979">12 noon</a></td>
<td align="center" valign="middle"><a class="tooltip1" title="Sample tooltip" href="#">11am</a></td>
<td align="center" valign="middle"><a class="tooltip1" title="Sample tooltip" href="#">11am</a></td>
<td align="center" valign="middle"><a class="tooltip1" title="Sample tooltip" href="#">11am</a></td>
<td align="center" valign="middle"></td>
<td></td>
</tr>
<tr>
<td align="center" valign="middle" bgcolor="#f4f4f4">Pre-School Squad (invitation only)</td>
<td align="center" valign="middle"></td>
<td align="center" valign="middle"></td>
<td align="center" valign="middle"></td>
<td align="center" valign="middle"></td>
<td align="center" valign="middle"><a class="tooltip1" title="Sample tooltip" href="#">10-11.30am</a></td>
<td></td>
</tr>
<tr>
<td align="center" valign="middle" bgcolor="#f4f4f4"></td>
<td align="center" valign="middle"></td>
<td align="center" valign="middle"></td>
<td align="center" valign="middle"></td>
<td align="center" valign="middle"></td>
<td align="center" valign="middle"></td>
<td></td>
</tr>
<tr>
<td align="center" valign="middle" bgcolor="#f4f4f4">SCHOOLS/GROUPS</td>
<td align="center" valign="middle"><a class="tooltip1" title="Sample tooltip" href="#">12-3pm</a></td>
<td align="center" valign="middle"><a class="tooltip1" title="Sample tooltip" href="#">12-3pm</a></td>
<td align="center" valign="middle"><a class="tooltip1" title="Sample tooltip" href="#">12-3pm</a></td>
<td align="center" valign="middle"><a class="tooltip1" title="Sample tooltip" href="#">12-3pm</a></td>
<td align="center" valign="middle"><a class="tooltip1" title="Sample tooltip" href="#">12-3pm</a></td>
<td></td>
</tr>
<tr>
<td align="center" valign="middle" bgcolor="#f4f4f4"></td>
<td align="center" valign="middle"></td>
<td align="center" valign="middle"></td>
<td align="center" valign="middle"></td>
<td align="center" valign="middle"></td>
<td align="center" valign="middle"></td>
<td></td>
</tr>
<tr>
<td align="center" valign="middle" bgcolor="#f4f4f4">Junior Recreation 4-8years</td>
<td align="center" valign="middle"><a class="tooltip1" title="Sample tooltip" href="#">4-5pm</a></td>
<td align="center" valign="middle"><a class="tooltip1" title="Sample tooltip" href="#">4-5pm</a></td>
<td align="center" valign="middle"><a class="tooltip1" title="Sample tooltip" href="#">4-5pm</a></td>
<td align="center" valign="middle"><a class="tooltip1" title="Sample tooltip" href="#">4-5pm</a></td>
<td align="center" valign="middle"><a class="tooltip1" title="Sample tooltip" href="#">4-5pm</a></td>
<td align="center" valign="middle"><a class="tooltip1" title="Sample tooltip" href="#">10-11am</a></td>
</tr>
<tr>
<td align="center" valign="middle" bgcolor="#f4f4f4">Senior Recreation 8-12 years</td>
<td align="center" valign="middle"></td>
<td align="center" valign="middle"><a class="tooltip1" title="Sample tooltip" href="#">5-6pm</a></td>
<td align="center" valign="middle"><a class="tooltip1" title="Sample tooltip" href="#">5-6pm</a></td>
<td align="center" valign="middle"><a class="tooltip1" title="Sample tooltip" href="#">5-6pm</a></td>
<td align="center" valign="middle"></td>
<td></td>
</tr>
<tr>
<td align="center" valign="middle" bgcolor="#f4f4f4">Progression (invite only)</td>
<td align="center" valign="middle"><a class="tooltip1" title="Sample tooltip" href="#">5-7pm</a></td>
<td align="center" valign="middle"><a class="tooltip1" title="Sample tooltip" href="#">5-7pm</a></td>
<td align="center" valign="middle"><a class="tooltip1" title="Sample tooltip" href="#">5-7pm</a></td>
<td align="center" valign="middle"><a class="tooltip1" title="Sample tooltip" href="#">5-7pm</a></td>
<td align="center" valign="middle"><a class="tooltip1" title="Sample tooltip" href="#">5-7pm</a></td>
<td></td>
</tr>
<tr>
<td align="center" valign="middle" bgcolor="#f4f4f4">Boys Competitive</td>
<td align="center" valign="middle"></td>
<td align="center" valign="middle"></td>
<td align="center" valign="middle"></td>
<td align="center" valign="middle"><a class="tooltip1" title="Sample tooltip" href="#">4-6pm</a></td>
<td align="center" valign="middle"></td>
<td></td>
</tr>
<tr>
<td align="center" valign="middle" bgcolor="#f4f4f4">Parkour</td>
<td align="center" valign="middle"><a class="tooltip1" title="Sample tooltip" href="#">Beginners 6.30-7.30pm Advanced 7.30-8.30pm</a></td>
<td align="center" valign="middle"></td>
<td align="center" valign="middle"></td>
<td align="center" valign="middle"><a class="tooltip1" title="Sample tooltip" href="#">Beginners 6-7pm</a></td>
<td align="center" valign="middle"></td>
<td></td>
</tr>
<tr>
<td align="center" valign="middle" bgcolor="#f4f4f4">Tumbling</td>
<td align="center" valign="middle"><a class="tooltip1" title="Sample tooltip" href="#">Beginners 6.30-7.30pm Advanced 7.30-8.30pm</a></td>
<td align="center" valign="middle"></td>
<td align="center" valign="middle"><a class="tooltip1" title="Sample tooltip" href="#">6-8pm</a></td>
<td align="center" valign="middle"></td>
<td align="center" valign="middle"></td>
<td></td>
</tr>
<tr>
<td align="center" valign="middle" bgcolor="#f4f4f4">Gymnastics Australia Junior National Competitive Squad (invite only)</td>
<td align="center" valign="middle"><a class="tooltip1" title="Sample tooltip" href="#">Maybe we can fit the gym now logo in the box</a>?</td>
<td align="center" valign="middle"><a class="tooltip1" title="Sample tooltip" href="#">4-7pm</a></td>
<td align="center" valign="middle"><a class="tooltip1" title="Sample tooltip" href="#">6-8pm</a></td>
<td align="center" valign="middle"></td>
<td align="center" valign="middle"><a class="tooltip1" title="Sample tooltip" href="#">4-7pm</a></td>
<td align="center" valign="middle"><a class="tooltip1" title="Sample tooltip" href="#">8-11am</a></td>

</tr>
<tr>
<td align="center" valign="middle" bgcolor="#f4f4f4">Gymnastics Australia Senior National Competitive Squad Level 3-4</td>
<td align="center" valign="middle"><a class="tooltip1" title="Sample tooltip" href="#">4.30-7.30pm Maybe here too?</a></td>
<td align="center" valign="middle"><a class="tooltip1" title="Sample tooltip" href="#">5-8pm</a></td>
<td align="center" valign="middle"><a class="tooltip1" title="Sample tooltip" href="#">4.30-7.30pm</a></td>
<td align="center" valign="middle"><a class="tooltip1" title="Sample tooltip" href="#">4-8 (includes 1 hour tumbling)</a></td>
<td align="center" valign="middle"></td>
<td align="center" valign="middle"><a class="tooltip1" title="Sample tooltip" href="#">8-11am</a></td>
</tr>
<tr>
<td align="center" valign="middle" bgcolor="#f4f4f4"></td>
<td align="center" valign="middle"><a class="tooltip1" title="Sample tooltip" href="#">4.30-7.30pm</a></td>
<td align="center" valign="middle"><a class="tooltip1" title="Sample tooltip" href="#">5-8pm</a></td>
<td align="center" valign="middle"><a class="tooltip1" title="Sample tooltip" href="#">4.30-7.30pm</a></td>
<td align="center" valign="middle"><a class="tooltip1" title="Sample tooltip" href="#">4-8 (includes 1 hour tumbling)</a></td>
<td align="center" valign="middle"></td>
<td align="center" valign="middle"><a class="tooltip1" title="Sample tooltip" href="#">8-11am</a></td>
</tr>
<tr>
<td align="center" valign="middle" bgcolor="#f4f4f4">Birthday Parties</td>
<td align="center" valign="middle"></td>
<td align="center" valign="middle"></td>
<td align="center" valign="middle"></td>
<td align="center" valign="middle"></td>
<td align="center" valign="middle"></td>
<td align="center" valign="middle"><a class="tooltip1" title="Sample tooltip" href="#">11.30-1.30pm & 2-4pm</a></td>
</tr>
</tbody>
</table>
<strong>* all prices on enquiry * Bookings essential</strong>
</html>