/*	This is used when you are making a website with individual css for each page
	NOTE: Use the master css for any items that you want to be constant throughout the website
*/
/*#detailBg{display:block;font-size: 1em;margin:auto; text-align: center;}
#detailBg>ul{padding:0;margin:0;}
#detailBg>ul>li{display:inline-block;list-style: none;margin:0;padding:0;}
#detailBg>ul>li>a:link, #detailBg>ul>li>a:visited{display: block;padding:0px 15px; margin:0; color:#111;}
#detailBg>ul>li>a:hover, #detailBg>ul>li>a:active{color:#111;}
#detailBg>ul>li>a>span{display:inline-block;vertical-align: middle;height: 40px;line-height: 40px;padding:0px 2px;}
#detailBg.mobile>ul>li>a>.detailTxt{display:none;}*/

#hdrtop{background: url('/styles/stylesets/201701cardiff/images/hdr2.jpg') center center repeat fixed; padding: 30px 0 30px 0; margin: auto; height: 125px;}
#MainNavWrap{max-width: 1200px; margin: 30px auto 20px; text-align: center; display: block;}
#MainNavBox{background: #1a3260; border: 2px solid #ffffff; display: inline-block; padding: 20px; margin: 0 10px 10px 10px; text-align: center; text-align: center; width: 400px;  border-radius: 5px;}
#MainNavLogo{margin: auto; text-align: center; display: block;}
#MainNavKey{margin: auto; text-align: center; color: #ffffff; font-size: 1.5em; display: block; font-family: 'Maven Pro', sans-serif; }

#MainNavBox a:link, #MainNavBox a:visited{margin: auto; text-align: center; color: #000000;}
#MainNavBox a:hover{color: #000000; background: #ffffff;}

#MainNavKey a:link, #MainNavKey a:visited{margin: auto; text-align: center; color: #ffffff; font-size: 2em; display: block;}
#MainNavKey a:hover, #MainNavKey a:active{text-decoration:none; color:#000000;}

#homeSec1{display: inline-block; vertical-align: middle; width: 65%;margin: 0 0 0 10px; text-align: left;}
#homeImg1{display: inline-block; vertical-align: middle; width: 25%;}
#hmeInfoWrap{margin: 20px 0 20px 0;}
#hmeSymbolsWrap{text-align: center; margin: 20px auto 0;}
#hmeSymbols{display: inline-block;  width: 15%; text-align: center; margin: 0 10px 0 0px;}
#hmeSymbols .symboleImg{display: block;}
#hmeSymbols .symboleText{display: block;}
#hmeSymbols a:link, #hmeSymbols a:visited{font-size: 1em; color: #363636;  padding: 5px; font-family: 'Maven Pro', sans-serif; background: #e3f5fc; border-radius: 5px; border: 1px solid #363636; display: block; transition: ease-in-out 0.3s;}
#hmeSymbols a:hover, #hmeSymbols a:active{text-decoration:none; background: #a4cedf; box-shadow: inset 0 0 2px #2a2d2e;}

#hmeSymbols2{display: inline-block;  width: 10%; text-align: center; margin: 0 10px 0 0px; vertical-align: top;}
#hmeSymbols2 .symboleImg{display: block;}
#hmeSymbols2 .symboleText{display: block;}
#hmeSymbols2 a:link, #hmeSymbols2 a:visited{font-size: 1em; color: #363636; height: 95px; padding: 5px; font-family: 'Maven Pro', sans-serif; background: #e3f5fc; border-radius: 5px; border: 1px solid #363636; display: block; transition: ease-in-out 0.3s;}
#hmeSymbols2 a:hover, #hmeSymbols2 a:active{text-decoration:none; background: #a4cedf; box-shadow: inset 0 0 2px #2a2d2e;}

#hmeInfo{text-align: right; }
#hmeInfo a:link, #hmeInfo a:visited{font-size: 1.3em; color: #1a3260;  font-family: 'Maven Pro', sans-serif; }
#hmeInfo a:hover, #hmeInfo a:active{text-decoration:none; color:#000000;}

.secBox2 #hmeInfo a:link, .secBox2 #hmeInfo a:visited{font-size: 1.3em; color: #ffffff;  font-family: 'Maven Pro', sans-serif; }
.secBox2 #hmeInfo a:hover, .secBox2 #hmeInfo a:active{text-decoration:none; color:#a4cedf;}

@media screen and (max-width:1200px){
    
}

@media screen and (max-width:1100px){
    
}

@media screen and (max-width:1000px){
    
}

@media screen and (max-width:900px){
    #homeSec1{display: block; width: 100%; margin: 0;}
    #homeImg1{display: block; width: 100%; text-align: center; margin: auto;}
    #hmeSymbols2{width: 15%; margin: 0 10px 10px 0px; }
    #MainNavBox{ display:block; margin: 0 auto 10px; }
}

@media screen and (max-width:800px){
    #hmeSymbols{width: 20%; } 
    #hmeSymbols2{width: 20%; }  
}

@media screen and (max-width:700px){
    
}

@media screen and (max-width:600px){
    #hmeSymbols{width: 30%; } 
    #hmeSymbols2{width: 30%; }   
}

@media screen and (max-width:500px){
  #MainNavBox{ width: auto;}  
}

@media screen and (max-width:400px){
    #hmeSymbols{width: auto; display: block; margin: 0 0 10px 0;} 
    #hmeSymbols2{width: auto; display: block; margin: 0 0 10px 0;} 
    #hmeSymbols2 a:link, #hmeSymbols2 a:visited{ height: auto;}
}

@media screen and (max-width:360px){
    
}