/* Ffeil CSS Hwyl a Fflag Awst/Medi/Hydref 2006 
 * Dylunio a rhaglenni gan Emyr R. E. Pugh 
 * Cysylltwch a 07876427393 os nad yw'r taflen steil hon 
 * yn gweithio fel y disgwylir */


	body {
			margin: 0 auto;
			font: 76% Verdana,Tahoma,Arial,sans-serif;
			line-height:1.3em;
		}
		
		a {
			text-decoration: none;
			color: #286ea0;
		}

		a:hover {
			text-decoration: underline;
		}

		h4 {
			color:#404040;
			text-align:center;	
		}

		.atable {
			position:relative;
			left:25px;
			font-weight:bold;
			color:#03758D;
			padding: 0px 0px 20px 0px;
		}

		#container {
			position:relative;
			margin: auto;
			width:870px;
			background: #ffffff;
		}


		#logo_c {
			position:relative;
			top:10px;
			left:110px;
			height:146px;
			width:356px;
	}

		#logo_s {
			position:relative;
			top:10px;
			left:110px;
			height:146px;
			width:356px;
		}
		
		#logo_s img {
		}

		#postcard {
			display:none;
			position:absolute;
			left:293px;
			top:0px;
			height:142px;
			width:645px;
			background:url(images/toptest.png) top center no-repeat;
		}

		#girl {
			position:absolute;
			display:none;
			z-index:90;
			left:28px;
			top:242px;
			width:246px;
			height:88px;
			background: url(images/girl.png);
			
		}

		#iaith {
			position:absolute;
			display:none;
			left:480px;
			top:20px;
		}
		
		#homearea {
			position:absolute;
			display:none;
			left:50px;
			top:90px;
			width:120px;
			height:120px;
			background:transparent;
			z-index:999;
		}
		

		#test {
			position:absolute;
			left:530px;
			top:200px;
			width:380px;
			height:142px;
			background: url(images/boy.png) no-repeat;
		}
		#sidebartop
		{
			position:relative;
			display:none;
			width:325px;
			height:111px;
			background: url(images/s1.png) no-repeat;
		}
		#sidebar {
			position:relative;
			display:none;
			float:left;
			top:188px;
			left:-25px;
			width:325px;
			background: url(images/s2.png) repeat-y;
			float:left;
		}
		#sidebarbottom {
			position:relative;
			display:none;
			width:325px;
			height:56px;
			background: url(images/s3.png) bottom center no-repeat;
		}

		#sidebar p {
			font-size: 0.9em;
			line-height: 1.3em;
			margin: 0 0 12px 60px;
			width:277px;
		}

		.sidelink_c {
			text-align: left;
			z-index:1000;
			display: block;
			width: 180px;
			color:#ffffff;
			background: #a1c02e url(images/bot.png) repeat-y;
			padding: 3px 4px 3px 8px;
			margin: 5px 10px 5px 0;
		}

		.sidelink_c:hover {
			background: #e0e0e0;
			text-decoration: none;
		}

		.sidelink_s {
			text-align: left;
			display: block;
			width: 182px;
			color:#ffffff;
			background: #009cc7 url(images/botwm_s.png) no-repeat;
			padding: 3px 4px 3px 8px;
			margin: 5px 10px 5px 0;
		}

		.sidelink_s:hover {
			background: #e0e0e0;
			text-decoration: none;
		}


		#top1 {
			position:relative;
			display:none;
			width:710px;
			height:18px;
			background:url(images/top_m1.png) no-repeat;
			z-index:99;
		}	

		#top2 {
			position:relative;
			display:none;
			top:110px;
			left:240px;
			width:710px;
			background:url(images/top_m2.png) repeat-y;
			z-index:99;
		}
		
		#top3 {
			position:relative;
			display:none;
			top:10px;
			width:710px;
			height:26px;
			background:url(images/top_m3.png) no-repeat;
			z-index:99;
		}

		#top2 p {
			padding: 0px 10px 0px 20px;
		}
		.toplink_c {
			text-align: center;
			position:relative;
			left:100px;
			top:4px;
			display: inline;
			width: 170px;
			color:#ffffff;
			background: #a1c02e url(images/botwm_c_t.png) repeat-x;
			padding: 10px 8px 10px 8px;
			margin: 5px 10px 5px 0;
		}

		.toplink_c:hover {
			background: #e0e0e0;
			text-decoration: none;
		}

		.toplink_s {
			text-align: center;
			position:relative;
			left:100px;
			top:4px;
			display: inline;
			width: 170px;
			color:#ffffff;
			background: #00b0cd url(images/botwm_s_t.png) repeat-x;
			padding: 10px 8px 10px 8px;
			margin: 5px 10px 5px 0;
		}

		.toplink_s:hover {
			background: #e0e0e0;
			text-decoration: none;
		}

	#main_c {
		position:relative;
		margin-top:-60px;
		margin-bottom:-20px;
		float:left;
		top:100px;
		left:20px;
		width:100%;
		background-color:#ffffff;
	}
	#main_s h3 {
		font-size:1.2em;
		padding-left:30px;
		color:#009cc7;
	}

	#main_s h3 p {
		font: 86% Verdana,Tahoma,Arial,sans-serif;
		line-height:1.3em;
		font-weight:normal;
		padding-left:10px;
		color:#000000;
	}

	#main_c h3 {
		font-size:1.2em;
		padding-left:30px;
		color:#637230;
	}

	#main_c h3 p {
		font: 86% Verdana,Tahoma,Arial,sans-serif;
		line-height:1.3em;
		font-weight:normal;
		padding-left:10px;
		color:#000000;
	}

	#main_s {
		position:relative;
		margin-top:-60px;
		margin-bottom:-20px;
		float:left;
		top:100px;
		left:20px;
		width:100%;
		background-color:#ffffff;
	}
	

	#main_top {
		position:absolute;
		display:none;
		top:-17px;
		z-index:99;
		left:20px;
		width:512px;
		height:36px;
		background: url(images/m1.png);
	}

	#main_right {
		position:absolute;
		display:none;
		top:-21px;
		left:515px;
		width:103px;
		height:202px;
		background: url(images/m2.png);
	}

	#main_gutter {
		display:none;
		position:relative;
		height:0px;
	}
	
	#main_c p {
		position:relative;
		padding:5px 15px 5px 15px;
	}

	#main_c h1 {
		font-size:1.5em;
		padding-left:10px;
		color:#637230;
	}
	
	#main_c h2 {
		font-size:1.2em;
		padding-left:10px;
		color:#637230;
	}

	#main_c h2 img {
		position:relative;
		left:5px;
		top:7px;
	}

	#main_s h2 img {
		position:relative;
		left:5px;
		top:7px;
	}

	.clear {
		position:relative;
		z-index:-1;
		height:210px;
		clear:both;
	}

	#key_s {
		position:relative;
		top:150px;
		left:40px;
	}

	#key_c {
		position:relative;
		top:150px;
		left:40px;
	}

	#gutter {
		position:relative;
		clear:both;
		z-index:-1;
		height:0px;
	}

	#footer {
		position:relative;
		clear:left;
		top:140px;
		left:184px;
		width:600px;
		background: #fafafa;
		color: #808080;
		font-size: 0.9em;

		border-top: 1px solid #d0d0d0;
		border-bottom: 1px solid #d0d0d0;
		text-align: center;
	}


	#foothold {
		position:absolute;
		width:100px;
		height:1px;
	}


	#lightbox{
		position: absolute;
		top: 40px;
		left: 0;
		width: 100%;
		z-index: 100;
		text-align: center;
		line-height: 0;
	}

	#lightbox a img { 
		border: none; 
	}

	#outerImageContainer{
		position: relative;
		background-color: #fff;
		width: 250px;
		height: 250px;
		margin: 0 auto;
	}

	#imageContainer{
		padding: 10px;
	}

	#loading{
		position: absolute;
		top: 40%;
		left: 0%;
		height: 25%;
		width: 100%;
		text-align: center;
		line-height: 0;
	}
	
	#hoverNav{
		position: absolute;
		top: 0;
		left: 0;
		height: 100%;
		width: 100%;
		z-index: 10;
	}
	#imageContainer>#hoverNav{ left: 0;}
	
	#hoverNav a{ outline: none;}

	#prevLink, #nextLink{
		width: 49%;
		height: 100%;
		background: transparent url(../images/blank.gif) no-repeat; /* Trick IE into showing hover */
		display: block;
	}
	
	#prevLink { left: 0; float: left;}
	
	#nextLink { right: 0; float: right;}
	
	#prevLink:hover, #prevLink:visited:hover { background: url(../images/prevlabel.gif) left 15% no-repeat; }
	
	#nextLink:hover, #nextLink:visited:hover { background: url(../images/nextlabel.gif) right 15% no-repeat; }

	#imageDataContainer{
		font: 10px Verdana, Helvetica, sans-serif;
		background-color: #fff;
		margin: 0 auto;
		line-height: 1.4em;
	}

	#imageData{
		padding:0 10px;
	}
	
	#imageData #imageDetails{ width: 70%; float: left; text-align: left; }	
	
	#imageData #caption{ font-weight: bold;	}
	
	#imageData #numberDisplay{ display: block; clear: left; padding-bottom: 1.0em;	}			
	
	#imageData #bottomNavClose{ width: 66px; float: right;  padding-bottom: 0.7em;	}	
		
	#overlay{
		position: absolute;
		top: 0;
		left: 0;
		z-index: 90;
		width: 100%;
		height: 500px;
		background-color: #000;
		filter:alpha(opacity=60);
		-moz-opacity: 0.6;
		opacity: 0.6;
	}
	

	.clearfix:after {
		content: "."; 
		display: block; 
		height: 0; 
		clear: both; 
		visibility: hidden;
	}

	* html>body .clearfix {
		display: inline-block; 
		width: 100%;
	}

	* html .clearfix {
		/* Hides from IE-mac \*/
		height: 1%;
		/* End hide from IE-mac */
	}