html, body 
{
    height:100%;
    min-height:100%;
    margin:0;
	
	background-image:url(../images/MainBG.png);
	background-repeat:repeat-x;
}

A:link 
{
	text-decoration:underline;
	color:#0591f0;
}

A:visited 
{
	text-decoration:none; 
	color:#0591f0;
}

A:hover 
{
	text-decoration:none;
	color:#FF0000;
}

#top a:link
{
	color: #FFF;
	text-decoration: none;
}

#top a:hover 
{
	color: #FFF;
	text-decoration: none;
}

#top a:visited
{
	color: #FFF;
	text-decoration: none;
}


#footer a:link
{
	color: #FFFFFF;
	text-decoration: none;
}

#footer a:hover 
{
	color: #fd0003;
	text-decoration: none;
}

#footer a:visited
{
	color: #FFFFFF;
	text-decoration: none;
}

/* ================================================================================================================== */

@font-face 
{
	font-family: 'gothic';
	src: url('../customFonts/gothic.ttf');
}

@font-face 
{
	font-family: 'gothicOtherBrowsers';
  	src: url('../customFonts/gothic.eot');
}

@font-face 
{
	font-family: 'berlinSans';
	src: url('../customFonts/berlinSans.ttf');
}

@font-face 
{
	font-family: 'berlinSansOtherBrowsers';
  	src: url('../customFonts/berlinSans.eot');
}

/* ================================================================================================================== */

/* Setting properties for initial menu box */
#Menu ul 
{
	text-align: left;
  	display: inline;
  	margin: 0;
  	padding: 15px 4px 17px 0;
  	list-style: none; /* hide the bullet points */
	z-index:8; /* this is to ensure menu comes on top of the slider image */
	
	/* Gives shadow effect for the box */
  	/* -webkit-box-shadow: 0 0 5px rgba(0, 0, 0, 0.15);
  	-moz-box-shadow: 0 0 5px rgba(0, 0, 0, 0.15);
  	box-shadow: 0 0 5px rgba(0, 0, 0, 0.15); */
}

/* More settings for initial menu box */
#Menu ul li 
{
	font-family: 'berlinSans', 'berlinSansOtherBrowsers';
	font-size:16px;
	color:#FFFFFF; /* Text Color */
	display: inline-block;
	margin-right: -4px;
	position: relative;
	padding: 12px 20px; /* set the hight and width of the box */
	/* background: #FFFFFF; /* set initial bg color */
	cursor: pointer;
	
	/* Give fading effect when mouse over */
	-webkit-transition: all 0.3s;
	-moz-transition: all 0.3s;
	-ms-transition: all 0.3s;
	-o-transition: all 0.3s;
	transition: all 0.3s;
}

#Menu ul li a:link
{ text-decoration:none; }

/* Set properties for main menu on mouse over */
#Menu ul li:hover 
{
	background: #a1daff; /* BG Color */
  	color: #000000; /* Text color */
}

/* Setting properties for drop down menu box */
#Menu ul li ul 
{
	padding: 0;
	position: absolute;
	top: 36px; /* set vertical position */
	left: 0;
	width: 255px; /* set width of the drop down menu */
	-webkit-box-shadow: none;
	-moz-box-shadow: none;
	box-shadow: none;
	display: none;
	opacity: 0;
	visibility: hidden;
	
	-webkit-transiton: opacity 0.3s;
	-moz-transition: opacity 0.3s;
	-ms-transition: opacity 0.3s;
	-o-transition: opacity 0.3s;
	-transition: opacity 0.3s;
}

/* More settings for drop down menu */
#Menu ul li ul li 
{ 
	background: #a1daff; /* BG Color */
	display: block; /* Set the box */
	color: #084a6c; /* Text Color */
	/* text-shadow: 0 -1px 0 #000; */ /* Give shadow effect for text */
}

/* drop down mouse over effects */
#Menu ul li ul li:hover 
{
	background: #054b6f; 
	color: #FFFFFF; /* Text Color */
	text-shadow: 0 -1px 0 #000; /* Give shadow effect for text */
}

/* To Display drop down menu on mouse over */
#Menu ul li:hover ul 
{
	display: block;
	opacity: 1;
	visibility: visible;
}

/* ================================================================================================================== */

.P05  { padding:5px; }
.PT05 { padding-top:5px; }
.PB05 { padding-bottom:5px; }
.PL05 { padding-left:5px; }
.PR05 { padding-right:5px; }

.P10  { padding:10px; }
.PT10 { padding-top:10px; }
.PB10 { padding-bottom:10px; }
.PL10 { padding-left:10px; }
.PR10 { padding-right:10px; }

.P20  { padding:20px; }
.PT20 { padding-top:20px; }
.PB20 { padding-bottom:20px; }
.PL20 { padding-left:20px; }
.PR20 { padding-right:20px; }

.BB	  { border:1px solid #07367b; }

/* ================================================================================================================== */

.formTextArea
{
	border: 1px solid #60b7dc;
    margin: 2px;
    padding: 5px;
	
	font-family: 'berlinSans', 'berlinSansOtherBrowsers';
	font-size:14px;
	color:#000000;
	
	   -moz-transition: all 0.3s ease-in-out;
         -o-transition: all 0.3s ease-in-out;
    -webkit-transition: all 0.3s ease-in-out;
  
  	transition: all 0.3s ease-in-out;
}

.frmTxtStnd { width: 238px; }
.frmTxtFull { width: 98%; }
.frmTxtSmll { width: 99px; }
.frmTxtLong { width: 420px; }

.formSelectMenu
{
	border: 1px solid #60b7dc;
    margin: 2px;
    padding: 5px;
	height:30px;
	
	-webkit-appearance: none;  /* Removes default chrome and safari style */
       -moz-appearance: none;  /* Removes Default Firefox style */
	
	background:url(../images/selectArrow.png) no-repeat;
		
	/* border: 0 !important;  Removes border*/
	  
	font-family: 'berlinSans', 'berlinSansOtherBrowsers';
	font-size:14px;
	color:#000000;
	
	   -moz-transition: all 0.3s ease-in-out;
         -o-transition: all 0.3s ease-in-out;
    -webkit-transition: all 0.3s ease-in-out;
  
  	transition: all 0.3s ease-in-out;
	background-color:#FFF;
}

.formSelectMenu option /* solves the issue of missing right border */
{ border-right: 2px solid silver; }

.frmSelStnd { width: 250px; background-position: 225px 4px; /* positioning arrow */ }
.frmSelFull { width: 99%;   background-position:   99% 4px; /* positioning arrow */	}
.frmSelSmll { width: 111px; background-position:  85px 4px; /* positioning arrow */ }
.frmSelLong { width: 432px; background-position: 405px 4px; /* positioning arrow */ }

.formTextArea:focus, .formSelectMenu:focus
{
	-webkit-box-shadow: 0 0 5px #51cbee;
	   -moz-box-shadow: 0 0 5px #51cbee;
			box-shadow: 0 0 5px #51cbee;
}

.right { text-align:right; }
.center { text-align:center; }

/* ================================================================================================================== */

.btn
{
	display: inline-block;
	cursor: pointer;
	padding: 5px 10px;
	background: #0199d9;
	
	font-family: 'berlinSans', 'berlinSansOtherBrowsers';
	color: rgba(255,255,255,0.9);
	text-shadow: -1px -1px 0 rgba(15,73,168,0.66) ;
	-o-text-overflow: clip;
	   text-overflow: clip;
	   
	-webkit-box-sizing: content-box;
	   -moz-box-sizing: content-box;
			box-sizing: content-box;	
	
	border: 1px solid #018dc4;
	-webkit-border-radius: 3px;
			border-radius: 3px;
	
	-webkit-box-shadow: 2px 2px 2px 0 rgba(0,0,0,0.2) ;
			box-shadow: 2px 2px 2px 0 rgba(0,0,0,0.2) ;
		   
	-webkit-transition: all 300ms cubic-bezier(0.42, 0, 0.58, 1);
	   -moz-transition: all 300ms cubic-bezier(0.42, 0, 0.58, 1);
		 -o-transition: all 300ms cubic-bezier(0.42, 0, 0.58, 1);
			transition: all 300ms cubic-bezier(0.42, 0, 0.58, 1);
}

.btn:hover 
{
	border: 1px solid #007cad;
	background: rgba(0,142,198,1);
	
	-webkit-box-shadow: 2px 2px 2px 0 rgba(0,0,0,0.3) ;
			box-shadow: 2px 2px 2px 0 rgba(0,0,0,0.3) ;
	
	-webkit-transition: all 200ms cubic-bezier(0.42, 0, 0.58, 1);
	   -moz-transition: all 200ms cubic-bezier(0.42, 0, 0.58, 1);
		 -o-transition: all 200ms cubic-bezier(0.42, 0, 0.58, 1);
			transition: all 200ms cubic-bezier(0.42, 0, 0.58, 1);
}

.btn:active
{
	border: 1px solid #018dc4;
	background: #00a6e8;
	text-shadow: none;
	
	-webkit-box-shadow: 0 1px 4px 0 rgba(0,0,0,0.2) inset;
			box-shadow: 0 1px 4px 0 rgba(0,0,0,0.2) inset;
	
	-webkit-transition: all 50ms cubic-bezier(0.42, 0, 0.58, 1);
	   -moz-transition: all 50ms cubic-bezier(0.42, 0, 0.58, 1);
		 -o-transition: all 50ms cubic-bezier(0.42, 0, 0.58, 1);
			transition: all 50ms cubic-bezier(0.42, 0, 0.58, 1);
}

.btnRed 	  { background: #ff6f6f; }
.btnRed:hover { background: #b30000; }

/* ============================================================ */

.circularImg
{
	width: 333px;
	height: 333px;
	
	background-repeat:no-repeat;
	background-position:center;
	background-size:100%;
	
	-webkit-border-radius: 166px;
	   -moz-border-radius: 166px;
			border-radius: 166px;
	
	-webkit-box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.5);
	   -moz-box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.5);
			box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.5);
}

.circularSmallerImg
{
	width: 200px;
	height: 200px;
	
	background-repeat:no-repeat;
	background-position:center;
	background-size:100%;
	
	-webkit-border-radius: 166px;
	   -moz-border-radius: 166px;
			border-radius: 166px;
	
	-webkit-box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.5);
	   -moz-box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.5);
			box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.5);
}

/* ============================================================ */

.headerLogoBG
{
	background-image:url(../images/menuBG.jpg);
	background-position: bottom;
	background-repeat: repeat-x;
}

.networksWeAreIn
{
	background-image:url(../images/networksWeArePartOff.png);
	background-position:right bottom;
	background-repeat:no-repeat;
}

/* ============================================================ */
/* ============== CSS For Image Mouseover Effect ============== */
/* ============================================================ */

ul.img-list 
{
	list-style-type: none;
	margin: 0;
	padding: 0;
	text-align: center;
}

ul.img-list li 
{
	display: inline-block;
	height: 330px;
	margin: 0 1em 1em 0;
	position: relative;
	width: 220px;
}

span.text-content 
{
	background: rgba(0,0,0,0.5);
	color: white;
	cursor: pointer;
	display: table;
	height: 330px; /* minus 20px of actual image height since using padding 10px */
	left: 0;
	position: absolute;
	top: 0;
	width: 230px; /* minus 20px of actual image width since using padding 10px */
	opacity: 0;
	padding:10px;
	
	-webkit-transition: opacity 500ms;
	-moz-transition: opacity 500ms;
	-o-transition: opacity 500ms;
	transition: opacity 500ms;
	
}

ul.img-list li:hover span.text-content 
{ opacity: 1; }

span.text-content span 
{
	display: table-cell;
	text-align: center;
	vertical-align: middle;
}

/* ============================================================ */
/* ============================================================ */

.pageTitleBerlinsBlue
{
	font-family: 'berlinSans', 'berlinSansOtherBrowsers';
	font-size:24px;
	color:#07367b;
}

.pageMiniTitleBerlinsWhite
{
	font-family: 'berlinSans', 'berlinSansOtherBrowsers';
	font-size:16px;
	color:#FFFFFF;
}

.pageMiniTitleBerlinsBlack
{
	font-family: 'berlinSans', 'berlinSansOtherBrowsers';
	font-size:16px;
	color:#000000;
}

.paragraphGothicBlack
{
	font-family: 'gothic', 'gothicOtherBrowsers';
	font-size:14px;
	color:#000000;
}

.paragraphGothicMiniTitleWhite
{
	font-family: 'gothic', 'gothicOtherBrowsers';
	font-size:16px;
	color:#FFFFFF;
}

.paragraphGothicWhiteSmall
{
	font-family: 'gothic', 'gothicOtherBrowsers';
	font-size:12px;
	color:#FFFFFF;
}

.justified
{ text-align:justify; }

.subMenuLine 	{ border-bottom: 2px dotted #dadada; height: 1px; width:500px; }