* {padding: 0; margin: 0}
a {text-decoration:none; outline:none;}

body, html {
	height: 100%; text-size-adjust: none;
	font-family: "Trebuchet MS", "Myriad Pro", Calibri, sans-serif;
	/*font:Verdana, Geneva, Arial, Helvetica, sans-serif;*/
	color:white;
}
@media all and (min-width: 1367px) {/*HD*/
body {background: #05baff url("../bob-tipping/Errol.jpg") no-repeat center top;
background-size: fixed;
}
#menu .sub1 li, #menu ul li:hover{background: url("../bob-tipping/Linkon.png") no-repeat 4px center;}
}/*end HD*/
#content {
  font-size:18px; color:#fff;
  box-shadow: 0 0 10px 2px rgba(0, 0, 0, 0.8);
  background: rgba(0, 0, 0, 0.6);/*opacity 0.6*/
  width: 900px; /*height:100%;*/
  position:relative; top:130px; bottom:0;
  margin: 0 auto;
}

#event {position:absolute; display:block; z-index:100; top:-6px; left:-6px; width:100px; height:100px; background: url("../bob-tipping/Event.png")}

#content .spacer{height:8px}
#content .clear { clear:both}
#content h3 {padding:5px 0 10px}

#content #cal {
text-align:center;
text-shadow: 2px 2px 2px #000;
transform:rotate(-38deg) skewX(-40deg);
-webkit-transform:rotate(-40deg) skewX(-42deg);
font: 14px Trebuchet MS; color:#fff;
position:absolute; width:60px; top:-16px; left:1072px;
}

#content #rtext {
width: 415px; margin: 0 15px 0 ; float:right;
}
#menu ul {
list-style:none;
width:100px; margin:0; padding:0; position: absolute; left:900px;
}
#menu ul li{
background: url("../bob-tipping/Link.png") no-repeat 4px center;
height:25px; margin-bottom:10px; padding: 0 10px; 
}
#menu ul li a, #button {
text-decoration:none; 
display:table-cell; height:24px; vertical-align: middle;
font: bold 16px Trebuchet MS; color:#555;
}

#menu ul li a:hover{ color:#fff }
 
#menu ul div.sub1
  { 
    position: absolute; left:80px;/*left:0;*/
    margin-top:-35px;/*margin-top:0*/
    width: 200px;
    display: block;
  }  
#menu ul.root li:hover ul.sub1
  { display: block;}/*not needed now*/
 
video {vertical-align: bottom}
  
@media all and (max-width: 1366px) {/*start laptop *************************************/
	body {background: #05baff url("../bob-tipping/Errol-laptop.jpg") no-repeat center top;
	background-size: fixed;
}
#content {top:110px;}

#menu ul li{
background: url("../bob-tipping/Linkc.png") no-repeat 4px center;
width:94px; height:25px; margin-bottom:10px; 
}

#menu ul li.accord {margin-bottom:0}

#menu ul li a{color:#ccc;}

#menu ul div.sub1
  {
  position:relative; left:0; width:110px; /*WIDTH********************/
  background: url("../bob-tipping/sub.png") repeat-y left top;
  margin:0 0 0 4px;
  }
#menu ul div.sub1 li {background:none; margin:0; padding-left:6px}
#menu ul div.sub1 li a{font-size:15px; color:blue}
#menu ul div.sub1 li a:hover{color:#fff}
#menu ul li:hover{background: url("../bob-tipping/Linkon.png") no-repeat 4px center;}
#content #cal {top:-24px; left:993px; font-size:12px}

}/*end of laptop **********************************************************/  
@media all and (max-width: 1024px) {/*start ipad #########################*/
	body {background: #05baff url("../bob-tipping/Errol-ipad.jpg") no-repeat left top;
	background-size: fixed;
}
#content {
  top:100px; bottom:0; margin: 0 auto 0 6px;
}

#menu ul li{
background: url("../bob-tipping/Linkc.png") no-repeat 4px center;
width:94px; height:25px; margin-bottom:10px; 
}

#menu ul li.accord {margin-bottom:0}

#menu ul li a{color:#ccc;}

#menu ul div.sub1
  {
  position:relative; left:0; width:110px; /*WIDTH********************/
  background: url("../bob-tipping/sub.png") repeat-y left top;
	/*background: -moz-linear-gradient(left, #00FFFF 40%, transparent 110%);
    background: -webkit-linear-gradient(left, #00FFFF 20%,transparent 95%);
	background: -o-linear-gradient(left, #00FFFF 20%,transparent 95%);
    background: -ms-linear-gradient(left, #00FFFF 20%,transparent 95%);
    background: linear-gradient(left, #00FFFF 20%,transparent 95%);*/
  margin:0 0 0 4px;
  }
#menu ul div.sub1 li {background:none; height:auto; margin:0; padding-left:6px}
#menu ul div.sub1 li a{font-size:15px; color:blue}
#menu ul div.sub1 li a:hover{color:#fff}
#menu ul li.hassub a:hover{color:#ccc}
#menu ul li.hassub:hover{background: url("../bob-tipping/Linkc.png") no-repeat 4px center}

#content #cal {top:-30px; left:935px; font-size:10px}

}/*end of ipad #############################*/

#centre { padding: 15px 0 0}
#centre ul {
   padding: 0;
   /*clear:left;*/
   float:right;
   list-style:none;
   position:relative;
   right:50%;
   text-align:center;
}
#centre ul li {
   display:block;
   float:left;
   position:relative;
   left:50%;
  margin: 20px 20px;/*spacing*/
  width: 132px; height: 100px;
  border: 1px solid #999;
  border-radius: 3px 3px;
}
#centre ul li a { text-decoration:none; color:white;}
#centre ul li a:hover { color:gray;}
#centre ul li a div { 
  color: #fff; 
  font: bold 16px Trebuchet MS;
  text-shadow: 0 0 10px red;
  width: 120px; height: 68px;
  background-position: 0 -11px;
	margin: -20px 6px 0;/*spacing*/
  border-radius: 3px 3px;   
}
#centre ul li a p {
font: 10px Verdana, Geneva, Arial, Helvetica, sans-serif;
  display: table-cell;
  vertical-align: middle;
  text-align: center;
  height: 50px;  width:130px;
}

#progress { 
	position:absolute; width:100%; text-align:center; color:#999; top:225px; 
}
#cap { 
	font-family: Tahoma, Verdana, Segoe, sans-serif; font-size:20px; z-index:100; 
	position:absolute; left:0; right:0;
	text-align:center; color:#fff; opacity:0
}
#button {
	background: url(../bob-tipping/Button.png) center no-repeat;
	text-align:center; color:#ccc; padding-top:3px;
	bottom:2px; left:0; right:0;
	}
	
#Overlay {
	display: none;
	position: fixed;
	z-index: 10;
	height: 100%; width: 100%;
	left: 0; top: 0;
	background-color: #000;
	cursor: pointer;
	}
#foot{
position:absolute; z-index:-1;
right:0; left:0;
bottom: -20px;
text-align:center;font-size: 12px;
color:#444;	
}