/* General styles applying to all screen sizes */
	@font-face {
		font-family: sapi;
		src: url("Sapi.eot") /* EOT file for IE */
	}
	@font-face {
		font-family: sapi;
		src: url("Sapi.ttf") /* TTF file for CSS3 browsers */
	}
	body{
		font-family:sapi;
	}
	.en{
		display:none;
		}
	#videoLinks{
		padding:50px; 
		padding-top: 50px;
	}
	.homeHeader h1{
		display:none;
	}
	.geiradurHeader h2{
		display:none;
	}
	.langHeader h2{
		display:none;
	}
	.canllawiauHeader h2{
		display:none;
	}
	.mobileIcon{
		display:none;
	}
	.linkBox{		
		width:33.33%;
		text-align:center;
		float:left;
		font-weight:bold;
		font-size:30px;
		height:350px;
		cursor:pointer
	}
	.wordLink{
		cursor:pointer;
		width:32%; 
		height:100%;
		float:left; 
		margin-right:1.3%;
		margin-bottom:2%;
		text-align:center;
		font-size:30px;
		
	}
	.wordLink img{
		width:100%;
	}
	.hatImgWrapper{
		height:320px;
		line-height:320px;
		cursor:pointer
	}
	.hatImage{
		vertical-align:middle;
		cursor:pointer
	}
	.whiteBox{
		border:2px solid #004b6b;
		width:100%;
		background:#FFFFFF;
	}
	.search{
		height:30px; 
		padding:10px; 
		border:none;
		width:65%;
	}
	.mag{
		
	}
	.yellowBox{
		border-right:2px solid #004b6b;
		border-left:2px solid #004b6b;
		border-bottom:2px solid #004b6b;
		width:100%;
		background:#FFFae2;
		padding:10px 0 10px 0;
	}
	#contentWrapper{
		clear:both;
	}	
	#rightWrapper{
		float:left;
		  height: 108px;
		  z-index: 200;
	}
	.disableSelect{
		-webkit-user-select: none;  
		-moz-user-select: none;    
		-ms-user-select: none;      
		user-select: none;
		}	
		
	#bodyWrapper{
		width:1024px; 
		margin:auto; 
		
	}
	#headerWrapper{
		position:fixed;
		  z-index: 100;
		height: 128px;
	}
	.splashWrapper{
		width:1024px;
	}
	.floatRight{
		float:right !important;
	}
	.splashContent{
		padding-top:80px;
		font-size:28px;
		font-weight:bold; 
	}
	.splashContent a {
		text-decoration:none;
		color:#FFFFFF;
	}
	.linkWrapper{
		clear:both; 
		width:100%;
		margin-top:20px;
	}
	.splashHeadText{
		text-align:center;
	}
	.resourceLink{
		width:100%; 
		text-align:center;
		padding: 20px 0px 20px 0px;
	}
	.guidelineLink{
		margin-left:7%;
		float:left;
		width:40%; 
		margin-top:-60px;
		text-align:center;
		padding: 20px 0px 20px 0px;
	}
	#videoProfile, #geiriauPage, #videoProfileWord{
		display:none;
		clear:both;
		padding: 50px;
		padding-top: 150px;
	}
	/* BG Colors */
		.homeBG{
			background:#9ee4e4;
		}
		.wordsBG{
			background:#ffddc2;
		}
		.vidWordBG{
			background:e7b5f0;
		}
		.vidSongBG{
			background:ffb2e0;
		}
		
	/* Header */
		.homeHeader.cy{
			background:url('../images/web/tabs.0001.png') no-repeat;
		}
		.homeHeader.en{
			background:url('../images/web/tabs.0005.png') no-repeat;
		}
		.homeHeader{
			height:128px;
			width:764px;
			float:left;
			z-index:5;
			position:relative;
			cursor:pointer;			
		}
		.geiradurHeader.cy{
			background:url('../images/web/tabs.0011.png') no-repeat;
		}
		.geiradurHeader.en{
			background:url('../images/web/tabs.0012.png') no-repeat;
		}
		.canllawiauHeader.cy{
			background:url('../images/web/canllawiau.png') no-repeat;
		}
		.canllawiauHeader.en{
			background:url('../images/web/guidelines.png') no-repeat;
		}
		.geiradurHeader, .canllawiauHeader{			
			height:90px;
			width:282px;
			float:left;
			margin-left:-131px;
			z-index:1;
			position:relative;
			cursor:pointer
		}
		.langHeader{			
			float:left;
			height:103px;
			width:123px;
			margin-left:-13px;
			z-index:2;	
			cursor:pointer
		}
			.langCy{
				background:url('../images/web/tabs.0014.png') no-repeat;
			}
			.langEn{
				background:url('../images/web/tabs.0013.png') no-repeat;
			}
			#homeIcon{
				background:url('../images/web/tabs.0015.png') no-repeat;
				height:81px;
				width:67px;
				clear:both;
				float:right;
				margin-top: -8px;
				margin-right: 0px;
				cursor:pointer;
			}
			.left{float:left}
			
			#video{
				width:70%;
				float:left;
			}
			#videoWord{
				width:70%;
				clear:both;
			}
			#character{
				float: right;
				width: 30%;
				/* position: static; */
				height: 100%;
				position: absolute;
				right: 0;
				
			}
			#Videowrapper, #VideowarpperWord{
				height: auto;
				position: relative;
			}
			#VideowrapperWord{
				width:100%;
				text-align:center;
			}
			#character img{
				position: absolute;
				bottom: 0;
				max-width: 100%;
				text-align: center;
				margin-left:15%;
			}
			#songTitle, #geiriau, #songTitleWord{
				font-size:40px;
				font-weight:bold;
				padding-bottom:10px;
				margin-top:-30px;
			}
			#songTitle span, #geiriau span, #songTitleWord span{
				line-height: 60px;
			}
			#footer{
				clear:both;
				margin-top:30px;
				width:100%;
				background:#FFFFFF;
			}
			#footerText{
				padding:20px;
				text-align:center;
			}
			.footerBottom{
				margin-bottom:80px;
			}
			
/* Styles applied to width greater than iPad */


@media only screen 
  and (min-width: 1024px)   {
  #rightWrapper{
		float:left;
		height: 108px;
		z-index: 200;
		margin-left: -18px;
	}
  

}

/* Styles applied to iPad Landscape */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : landscape) {
/* Styles */
  #bodyWrapper{width:100%;}

}

.ipadRight{
			margin-left: -1px !important;	
			}

/* Styles applied to iPad Portrait */
@media only screen 
  and (max-width: 1023px) 
  {
	.homeHeader h1{
		display:inline;
	}
	#homeIcon{
		margin-top:-8px;
	}
	#bodyWrapper, #headerWrapper{width:100%;}
	#headerWrapper{
			background:rgb(250, 155, 87);
			height:66px;
	}
	.guidelineLink{
		margin-top:-5.6%;
	}
	.guidelineLink img{
		width:100%;
	}
	.resourceLink img{
		
	}
	.splashWrapper{
		width:auto;
	}
	.splashContent{
		padding-top: 100px;
	}
	.floatRight{
		float:none;
	}
	.left{
		width: 62.22%;
	}
	.linkBox{		
		width:50%;
		text-align:center;
		float:left;
		font-weight:bold;
		font-size:24px;
		height:350px;
	}
	
	.wordLink{		
		width: 48%;
  text-align: center;
  float: left;
  font-weight: bold;
  font-size: 24px;
  height: 350px;
  margin-right: 1.5%;
  height: 100%;
  margin-bottom: 1%;
	}
	
	.homeHeader.cy{
		background:rgb(250, 155, 87);
		color:#FFFFFF;
		font-size:40px;
		padding:10px;
	}
	.homeHeader.en{
		background:rgb(250, 155, 87);
		color:#FFFFFF;
		font-size:40px;
		padding:10px;
	}
	#rightWrapper{	
		float:right;
	}
	.homeHeader{			
			background:rgb(250, 155, 87);
			height:46px;
			width:100%;
			float:left;
			z-index:1;
			position:relative;
			cursor:pointer			
		}
		.geiradurHeader{
			background:url('../images/web/tabs.0011.png') no-repeat;
			height:90px;
			width:282px;
			float:left;		
			z-index:1;
			position:relative;
			cursor:pointer
		}
		.langHeader{			
			float:left;
			height:103px;
			width:123px;
			z-index:2;	
			cursor:pointer
		}

}

@media only screen 
  and (max-width: 750px) 
  {
	.homeHeader h1{
		display:inline;
		font-size:20px;
	}
	.geiradurHeader h2{
		display:inline;
	}
	.langHeader h2{
		display:inline;
	}
	.canllawiauHeader h2{
		display:inline;
	}
	.mobileIcon{
		display:inline;
		margin-top:5px;
	}
	#homeIcon{
		background:rgb(32, 161, 233);
		float:left;
		width:20%;
		height:50px;
		clear:none;
		position:relative;
		text-align:center;
		margin-top:0px;
		
	}	
	.floatRight{
		float:none !important;
	}
	
	
	#bodyWrapper, #headerWrapper{width:100%;}
	#headerWrapper{
			background:rgb(250, 155, 87);
			height:67px;
	}
	.splashWrapper{
		width:auto;
	}
	.left{
		width:100%;
	}
	.linkBox{		
		  width: 100%;
  text-align: center;
  /* float: left; */
  font-weight: bold;
  font-size: 24px;
  height: 390px;
  clear: both;
  border-bottom: 1px solid rgba(8, 186, 200, 1);
  padding-bottom: 10px;
	}
	
	.wordLink{		
		  width: 100%;
  text-align: center;
  /* float: left; */
  font-weight: bold;
  font-size: 24px;
  height: 100%;
  clear: both;
  padding-bottom: 10px;
	}
	.hatImage{
		max-width:100%;
	}
	.homeHeader.cy{
		
		color:#FFFFFF;
		
		padding:10px;
	}
	.homeHeader.en{
		
		color:#FFFFFF;
		
		padding:10px;
	}
	#rightWrapper{	
		clear:both;
		float:none;
	}
	.homeHeader{			
			background:rgb(250, 155, 87);
			float:none;
			z-index:1;
			position:relative;
			cursor:pointer;
			text-align:Center;			
		}
		.geiradurHeader, .canllawiauHeader{
			background:rgb(255, 254, 50) !important;
			height:50px;
			line-height:50px;
			width:60%;
			float:left;		
			z-index:1;
			position:relative;
			cursor:pointer;
			margin-left:0px;
			color:#000000;
			font-size:30px;
			text-align:center;
			border-bottom: none; 
			padding-bottom: 0px;
		}
		
		.langHeader{	
			background:rgb(107, 229, 119);
			float:left;
			line-height:50px;
			height:50px;
			width:20%;
			z-index:2;	
			cursor:pointer;
			margin-left:0px;
			color:#FFFFFF;
			font-size:30px;
			text-align:center;
		}
		
		.hatImage{
			margin-top:0px !important;
			margin-left:0px !important;
			margin-right:0px !important;
		}
		.hatext{
			margin-top:0px !important;
			margin-left:0px !important;
			margin-right:0px !important;
		}
		
			#video{
				width:100%;
				float:none;
				clear:both;
			}
			#videoLinks{
				  padding-top: 90px;
			}
			#character{
				float: none;
				width: 100%;
				clear:both;
				
			}
			#Videowrapper{
				height: auto;
				position: relative;
			}
			#character img{
				position:relative;
				max-width: 100%;
				text-align: center;
				
			}
			#songTitle, #geiriau{
				font-size:20px;
				font-weight:bold;
				padding-bottom:10px;
				margin-top:-30px;
			}
			#songTitle span, #geiriau span{
				line-height: 60px;
			}

}





#bottom_fade.blue{
	position:fixed;
	z-index:2;
	right:auto; 
	bottom:0; 
	width:1024px;
	left:auto; 
	height:70px; /* adjust it to your needs */
    background: url(data:image/svg+xml;base64,alotofcodehere);
    background: -moz-linear-gradient(top,  rgba(158, 228, 228,0) 0%, rgba(158, 228, 228, 1) 70%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(158, 228, 228,0)), color-stop(70%,rgba(158, 228, 228, 1)));
    background: -webkit-linear-gradient(top,  rgba(158, 228, 228,0) 0%,rgba(158, 228, 228, 1) 70%);
    background: -o-linear-gradient(top,  rgba(158, 228, 228,0) 0%,rgba(158, 228, 228, 1) 70%);
    background: -ms-linear-gradient(top,  rgba(158, 228, 228,0) 0%,rgba(158, 228, 228, 1) 70%);
    background: linear-gradient(to bottom,  rgba(158, 228, 228,0) 0%,rgba(158, 228, 228, 1) 70%);
}

#bottom_fade.pink{
	position:fixed;
	z-index:2;
	right:auto; 
	bottom:0; 
	width:1024px;
	left:auto; 
	height:70px; /* adjust it to your needs */
    background: url(data:image/svg+xml;base64,alotofcodehere);
    background: -moz-linear-gradient(top,  rgba(231, 181, 240,0) 0%, rgba(231, 181, 240, 1) 70%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(231, 181, 240,0)), color-stop(70%,rgba(231, 181, 240, 1)));
    background: -webkit-linear-gradient(top,  rgba(231, 181, 240,0) 0%,rgba(231, 181, 240, 1) 70%);
    background: -o-linear-gradient(top,  rgba(231, 181, 240,0) 0%,rgba(231, 181, 240, 1) 70%);
    background: -ms-linear-gradient(top,  rgba(231, 181, 240,0) 0%,rgba(231, 181, 240, 1) 70%);
    background: linear-gradient(to bottom,  rgba(231, 181, 240,0) 0%,rgba(231, 181, 240, 1) 70%);
}