@charset "UTF-8";
/* CSS Document */

body {
	/*background-image:url(../images/map-index-bg.jpg);*/
	background-image:url(../images/index-homepageBG.jpg);
	
	background-color:#000;
	font-family:Arial, Helvetica, sans-serif;
	overflow-x: hidden;
	background-repeat:no-repeat;
	background-position:top center;	
	background-size:100%
}

@font-face {
    font-family: 'mainFont';
    src: url('../css/ysg1__-webfont.eot');
    src: url('../css/ysg1__-webfont.eot?#iefix') format('embedded-opentype'),
         url('../css/ysg1__-webfont.woff') format('woff'),
         url('../css/ysg1__-webfont.ttf') format('truetype'),
         url('../css/ysg1__-webfont.svg#Ysgol1Regular') format('svg');
}

.img {background-color:#FFF; border:solid 3px #666; border-radius:5px;} 

#container{
	margin:auto;
	margin-top:-10px;
	width:1200px;
	padding:10px;
	background-repeat:no-repeat;
	height:920px;	
	margin-top:20px;
	position:relative;
	margin-left:auto;
	margin-right:auto;
}
    #wrapper { width: auto; margin: 0 auto; position:relative; float:right }
     canvas {
        width: 500px;
        height: 707px;
        border:none;
		position:relative;
		float:right;
		display:none;
		border-radius:10px;
		margin-top:-20px;
		cursor:cell;
      }
	  
      .tools { 
	  	margin-bottom: 10px;
		width: 325px;
		position:absolute;
		top: 230px;
		padding:10px;
		z-index:2;
		left:207px;
		border-radius:10px;
		height:89px;
		background-color:#FEA;
		/*background-image:url(../images/paint-brush-bg.jpg);*/
		
		
} 
.instructionsCont {
	background-color: #FFF;
	position: absolute;
	left: 200px;
	width: 481px;
	padding: 10px;
	top: 80px;
	font-size: 20px;
	border-radius: 10px;
	border: solid 2px #000;	
}
.toolsText {
position: absolute;
top: 4px;
font-size: 20px;
color: #000;
left: 25px;
}
.tools a {
height: 30px; line-height: 30px; padding: 0 10px; vertical-align: middle; text-align: center; text-decoration: none; display: inline-block; color: red; font-weight: bold; border-radius:10px;margin-bottom:5px;
      }
	  .tools:hover{color:#FF0; text-decoration:none;}
.positions a {
    color: #AA2B12;
	background-color:#AA2B12;
	font-family:mainFont;
     display:inherit;
    font-weight: bold;
    text-decoration: none;
    -webkit-transition: -webkit-transform .4s ease-in-out;
    -moz-transition:-moz-transform .4s ease-in-out;
    -o-transition: -o-transform 0.4s ease-in-out;
    -ms-transition: -webkit-transform 0.2s ease-in-out;
    transition: -webkit-transform 0.4s ease-in-out;
	-moz-border-radius: 20px;
	-webkit-border-radius: 20px;
	border-radius: 20px;
}
.positions a:hover {
    color: #EBEBEB;
	width:20px;
	height:20px;
   	display:inherit;
    -webkit-transform: scale(1.8);
    -moz-transform:scale(1.8);
    -o-transform: scale(1.8);
    -ms-transform: scale(1.8);
    transform: scale(1.8);
  
  	-moz-border-radius: 20px;
	-webkit-border-radius: 20px;
	border-radius: 20px;
   
}
#ynys{position:absolute; width:20px; height:20px; background-color:#F00; border-radius:20px;  left:190px; top: 110px; z-index:4}

#arthur{position:absolute; width:20px; height:20px; background-color:#F00; border-radius:20px; right:58px; top: 590px; z-index:4}

#bedd {position:absolute; width:20px; height:20px; background-color:#F00; border-radius:20px; left:270px; top: 140px; z-index:4}

#aberteifi {
	position:absolute;
	width:20px;
	height:20px;
	background-color:#F00;
	border-radius:20px;
	left:240px;
	top: 300px;
	z-index:4
}

#crosshands {position:absolute; width:20px; height:20px; background-color:#F00; border-radius:20px; left:312px; top: 485px; z-index:2000; z-index:4}

#melangell {position:absolute; width:20px; height:20px; background-color:#F00; border-radius:20px; left:350px; top: 210px; z-index:4}

.red-dots {border-radius:100%; height:20px; width:20px; background-color: #AA2B12;}

.contents {width:400px; height:auto; background-color:black;padding:20px; background-image:url(../images/map_index_content.jpg); background-repeat:no-repeat; border-radius:10px;border: solid 2px #000; opacity:0; cursor:move; position:absolute; top:363px; left:206px;}
.contents p {font-size:20px; color:#000; font-family:Arial, Helvetica, sans-serif; line-height:22px;}

/* ================ DOCK 1 ================ */
#dock { position: relative; top: 150px; }
.dock-container { position: relative; top: -8px; height: 50px; padding-left: 20px; }
a.dock-item { display: block; width: 50px; position: absolute; bottom: 0; text-align: center; text-decoration: none; color: #333; }
.dock-item span { display: none; padding-left: 20px; }
.dock-item img { border: 0; margin: 5px 10px 0px; width: 100%; }

/* ================ DOCK 2 ================ */
#dockContainer {
	position:absolute;
	top: 50px;
	left:5px;
	width: 100px;
}
#jqDock {
	position: relative;
	bottom: 48px;
	width: 100px;
}
#jqDock li { list-style: none; }
.jqDockLabel { background: #FFF; color: #000; padding: 3px 10px; -webkit-border-radius: 10px; -moz-border-radius: 10px; font-family:Arial, Helvetica, sans-serif !important}

.popover-title{background-color:#000 !important; color:#FFF !important;}