/*
* css Extracted from jQuery Mobile Framework
* Copyright (c) jQuery Project
*/
body
{
	
	background-image:url(../images/background34.jpg);
	background-repeat:repeat-x;
	font-family: mainFont;
}

.middle {
	margin-left: auto;
	margin-right: auto;
	margin-top: 5px;
	padding: 20px 20px 20px 20px;
	width: 900px;
	height: auto;20px;
	border:solid 3px #FF6600; 
	background-color:#FFF;
	border-radius: 20px;
	background-position:top center;
	background-repeat:no-repeat;
	margin-top:50px;
}
.tittle
{
	margin-top: 20px;
	font-weight: bold;
	margin-left: auto;
	margin-right: auto;
	font-size: large;
	width:780px;
}
#nav
{
	margin-right: auto;
	text-align: center;
	font-size:40px;
}
@font-face {
    font-family: 'mainFont';
    src: url('../css/myriadpro-regular.eot');
    src: url('../css/myriadpro-regular.eot?#iefix') format('embedded-opentype'),
         url('../css/myriadpro-regular.woff') format('woff'),
         url('../css/myriadpro-regular.ttf') format('truetype'),
         url('../css/myriadpro-regular.svg') format('svg');
}

h1{font-family: mainFont;color:#CA2A1D; font-size:40px;}
h2{font-family: mainFont !important; color:#333 !important; font-size:24px !important;}

.nav { width:280px; height:110px; color: black !important; background-color:white; background-image: url(../images/nesaf.png); background-repeat: no-repeat; background-position: right center; position:absolute; left:38%; right:50%; top:110px; border-radius:20px; border:solid 2px #666; padding:20px; text-align:center;}

.nav_Correct {width:280px; height:100px; background-color:white; position:absolute; left:38%; right:50%; top:110px; border-radius:20px; border:solid 2px #666; padding:20px; text-align:center;}

select{
border: 1px solid #F00 !important;
border-radius: 4px;
padding: 10px !;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2) inset;
width: auto !important;
margin-left: 10px;
margin-right: 10px;
color: #F00 !important;
font-size: 20px !important;
height:40px !important
}
h3{font-family: mainFont;}


p{font-family: mainFont; color:#666; font-size:22px; line-height:30px;}
a{color:#000; text-decoration:none;}
a:hover{text-decoration:none;}

#block {

  -webkit-transition-property: left, top, background, -webkit-transform;
  -webkit-transition-duration: 2s, 2s, 1s, 1s;
  -webkit-transition-timing-function: ease-out, ease-in, linear, ease-in-out;
  -webkit-transition-delay: 0, 0, 0, 0.1s;
 -moz-transition-property: left, top, background, -moz-transform;
  -moz-transition-duration: 2s, 2s, 1s, 1s;
  -moz-transition-timing-function: ease-out, ease-in, linear, ease-in-out;
  -moz-transition-delay: 0, 0, 0, 0.1s;
  width:60px;
  height:60px;  
  margin-right:20px;
 
}
#stage{width:60px; margin-left:20px;}
#stage:hover #block {
 height:60px;
  width:60px;

  -webkit-transform: rotate(360deg);
  -moz-transform: rotate(360deg);
 
}
#cartref {

  -webkit-transition-property: left, top, background, -webkit-transform;
  -webkit-transition-duration: 2s, 2s, 1s, 1s;
  -webkit-transition-timing-function: ease-out, ease-in, linear, ease-in-out;
  -webkit-transition-delay: 0, 0, 0, 0.1s;
  -moz-transition-property: left, top, background, -moz-transform;
  -moz-transition-duration: 2s, 2s, 1s, 1s;
  -moz-transition-timing-function: ease-out, ease-in, linear, ease-in-out;
  -moz-transition-delay: 0, 0, 0, 0.1s;
  width:60px;
  height:60px;  
  margin-right:5px;
  float:right;
 
}
#stage3:hover #cartref {
 height:60px;
  width:60px;
  -moz-transform:rotate(360deg);
  -webkit-transform: rotate(360deg);
 
}

#gwybodaeth {

  -webkit-transition-property: left, top, background, -webkit-transform;
  -webkit-transition-duration: 2s, 2s, 1s, 1s;
  -webkit-transition-timing-function: ease-out, ease-in, linear, ease-in-out;
  -webkit-transition-delay: 0, 0, 0, 0.1s;
  -moz-transition-property: left, top, background, -moz-transform;
  -moz-transition-duration: 2s, 2s, 1s, 1s;
  -moz-transition-timing-function: ease-out, ease-in, linear, ease-in-out;
  -moz-transition-delay: 0, 0, 0, 0.1s;
  width:55px;
  height:55px;  
  margin-right:10px;
  float:right;
 
}