body {margin:0 auto; text-align:center;}

.header {width:850px; margin:0 auto; text-align: center;}
    .logo {min-height:25px; text-align:left; width:400px; position:relative; float: left; margin:0 auto; padding:25px 0 0px 20px;}
    .search {width:300px; position: relative; float:right; margin:8% 0 0 0;}
.contents {margin:0 auto; width:850px; margin-top:10px; min-height:385px;  text-align:center;}
	
	.left {position:relative; float:left; width:480px; min-height:600px; text-align:left;
	        border-right:10px solid #f4f4f4; padding:0 80px 0 0;}
		.text {border-bottom:1px dotted #c7c7c7; margin:5px 0 25px 10px; padding:0 0 5px 0;}
	
	.storySlideshow {margin:0 0 10px 0;}
		.photo {margin:10px 0 10px 2px;}
		.photo img {padding:4px 4px 4px 4px; margin:0 10px 0 0; border:1px solid #dadada;}
	
	.right {position:relative; float:right; width:220px; min-height:600px;
	        margin:10px 10px 0 0; text-align:left; padding:0 0 0 20px; }

.footer {text-align:center; margin:0 auto; clear:both; background:#eef0f5; min-height:190px;
         margin-top:10px; padding:20px 0 20px 0; }
         
         .footer-wrapper {width:850px; margin:0 auto; text-align:center;}
         
         .f1, .f2, .f4 {font-size:0.9em; margin:0; padding:0; line-height:normal;}
         .f1 a, .f2 a, .f4 a, .f1 a:hover, .f2 a:hover, .f4 a:hover {color:#57679f; font-size:0.8em; font-weight:bold; text-decoration:none;}
         
         .f1 {position:relative; float:left;  width:290px; margin:0 10px 0 0; min-height:50px; text-align:left;}
         .f2 {position:relative; float:left; width:290px; margin:0 0 0 20px; min-height:50px; text-align:left; line-height:19px; }
         .f2 p, .f1 p {line-height:19px; font-size:0.8em;}
         .f3 {position:relative; float:right; width:185px; min-height:50px; text-align:left;}
				.f3 ul {list-style:none; margin:4px 0 0 0;}
				.f3 li {padding:2px 0 2px 5px; border-bottom:1px dotted #c7c7c7;}
				.f3 li a {font-size:0.8em; text-decoration:none; color:Black;}
				.f3 li a:hover {text-decoration:underline;}
			
         .f4 {position:relative; float:left; width:400px; min-height:30px; margin:0px 0 0 0; text-align: left;}

.textbox {background:red;}
/*********************
 Fonts               *
*********************/
a {font-size:inherit; color:#57679f; font-family:Arial, Serif, Sans-Serif;}
a:hover {font-size:inherit;}
p {font-size:0.95em; color:#494949; font-family:Arial, Serif, Sans-Serif; 
   margin:15px 0 10px 8px; line-height:28px;}

h1 {margin:5px 0 15px 0; color:#57679f; font-family:Arial, Serif, Sans-Serif; font-size:2.4em;}

h2 {font-family:Trebuchet MS, Arial, Serif, Sans-Serif; font-weight:lighter; color:#494949; 
    margin:2px 0 0 8px; font-size:1.3em; z-index:-1; line-height:32px;}
h2 a {text-decoration:none; font-family:Trebuchet MS, Arial, Serif, Sans-Serif;}
h2 a:hover {text-decoration:underline;}

h3 {margin:18px 0 0px 0px; padding:5px 0 7px 5px; color:#ffffff; width:101%; background:#494949 url(../img/headingbg.jpg) no-repeat right bottom; font-family:Trebuchet MS, Arial, Serif, Sans-Serif; font-size:1em;}
	h3 a {color:#ffffff; text-decoration:none;}
	h3 a:hover {text-decoration:underline;}

h4 {width:475px; padding:2px 0 2px 5px; margin:0 0 0 0px; background:#eaeaea; color:#494949; font-family:Trebuchet MS, Arial, Serif, Sans-Serif; font-size:0.9em;}

h5 {width:475px; padding:2px 0 2px 5px; margin:0 0 0 2px; background:#dadada; color:#494949; font-family:Trebuchet MS, Arial, Serif, Sans-Serif; font-size:0.9em;}
	h5 a {color:Black; font-size:0.8em; text-decoration:none; font-weight:lighter;}
	h5 a:hover {font-size:0.8em; text-decoration:underline;}
	
h6 {color:#57679f; font-size:0.8em; font-weight:bold; text-decoration:none; font-family:Trebuchet MS, Arial, Serif, Sans-Serif;}
	h6 a {color:#57679f; font-weight:bold; text-decoration:none; font-family:Trebuchet MS, Arial, Serif, Sans-Serif;}
	h6 a:hover {text-decoration:underline;}
	
/*********************
 Clips               *
*********************/
.life-at-rhyl, .gallery, .student-quotes, .courses, .events, .more-links {margin-bottom:18px;}

.more-links {border-bottom:1px dotted #c7c7c7;}
	.more-links img {margin:5px;}
	.more-links ul {list-style:none; margin:10px 0 0 0;}
	.more-links li {padding:5px 0 5px 5px; border-top:1px dotted #c7c7c7;}
	.more-links li a {font-size:0.9em; text-decoration:none; color:Black;}
	.more-links li a:hover {text-decoration:underline;}
	
.student-quotes {}
	.student-quote {border-left:5px solid #f4f4f4; padding:0 0 10px 10px; font-style:italic;
	                font-family:Arial, Serif, Sans-Serif; font-size:1em; margin:10px 0 0 10px;}
	.student-name {font-style:normal; font-weight:bold; color:#ce061e; font-size:0.7em; line-height:23px;}
	.student-subject {font-style:normal; color:#ce061e; font-size:0.7em;}

.new-event {width:100%; min-height:10px; margin:20px 0 20px 1%; overflow:auto;}
    .event-date {position:relative; float:left; min-height:15px; width:11%;
                 padding:0% 1% 0% 2%; }
        .event-date-month {min-height:18px; background:#d11414; color:White; font-family:Arial, Serif; font-size:0.8em; text-align:center; padding:0px 0 0 0; }
        .event-date-day {min-height:36px; background:white; border-bottom:1px #c7c7c7 solid; border-right:1px #c7c7c7 solid; border-left:1px #c7c7c7 solid;
                         margin:0 0 px 0; text-align:center; font-weight:bolder; font-size:2em; font-family:Arial, Serif;}
                         .event-date-day strong {font-size:10px; margin:0 0 0 3px;}
    
    .event-title {position:relative; float:right; width:78%; min-height:20px; margin:0 0 5% 0;  
                  border-top:1px #c7c7c7 solid; padding:1% 5% 0% 2%; font-size:0.8em; font-family:Arial, Serif;}
           .event-title strong {font-size:1.8em;}                      
           .event-title em {font-weight:bold; font-size:1.2em; font-style:normal;} 
            .event-title p {font-size:1em;}
.events {border-bottom:1px dotted #c7c7c7; height:190px; overflow:hidden;}
		
	.side-event { margin:5px 0 10px 0; padding:0 0 0px 0; background:white; font-family:Arial, Serif, Sans-Serif; 
	              position:relative; top:-109px; width:100%; min-height:0px; overflow:auto;}
          .side-event-date {position:relative; float:left; min-height:15px; width:16%;
                 padding:0% 1% 0% 2%; }
          .side-event-date-month {min-height:18px; background:#d11414; color:White; font-family:Arial, Serif; font-size:0.8em; text-align:center; padding:0px 0 0 0; }
          .side-event-date-day {min-height:34px; background:white; border-bottom:1px #c7c7c7 solid; border-right:1px #c7c7c7 solid; border-left:1px #c7c7c7 solid;
                         margin:0 0 px 0; text-align:center; font-weight:bolder; font-size:1.6em; font-family:Arial, Serif;}
                        .event-date-day strong {font-size:10px; margin:0 0 0 3px;} 
          .side-event-title {position:relative; float:right; width:73%; min-height:20px; margin:0 0 5% 0;  
                  border-top:1px #c7c7c7 solid; padding:1% 5% 0% 2%; font-size:0.8em; font-family:Arial, Serif;}
           .side-event-title strong {font-size:1.2em;}                      
           .side-event-title em {font-weight:bold; font-size:0.9em; font-style:normal;}           


.life-at-rhyl {}
.courses {}
	.details {margin:8px 0 0 2px; border-bottom:1px dotted #c7c7c7;}
.gallery {}
	.slide img {border: 1px solid #dadada; padding:5px; margin:4px;}

/*********************
 Navigation          *
*********************/
.cont {margin:0 auto; text-align:center; width:850px;}

.lang {padding:0 0 0 10px; position:relative;margin:15px 8px 0 0; float:right; width:15%; }
	.lang ul { padding:0; margin:0 4px 0 0px; font-size:0.9em; font-weight:bold; list-style:none;}
	.lang li {}
	.lang li a {font-size:0.9em; color:#57679f; text-decoration:none;}
	.lang li a:hover {text-decoration:underline;}

.navi { width:78%; min-height:25px; margin-top:5px; position:relative; float:left; z-index:100; }
.menu {list-style:none; margin:0 4px 0 0px; padding:0; font-size:0.9em; height:33px; font-family: arial; z-index:100;}
.menu a { color:#000; text-decoration:none; font-weight:600; font-family:Trebuchet MS; z-index:100;}
.menu a span {}
.menu a:hover {color:#000; text-decoration:none; z-index:100;}
.menu li {position:relative; float:left; padding:6px 27px 6px 7px; margin:3px 0 0 3px; z-index:100;}
.menu li:hover { z-index:100; }
.menu ul {position:absolute; z-index:100; text-align:left; text-indent:0px; left:00px; z-index:100; top:28px; padding:0px 0 0 0; margin:0; min-width:200px; display:none; list-style:none; background:#333;}
.menu ul li {position:relative; width:200px; margin:2px 0 0 0; padding:0; z-index:100;}
.menu ul li a {display:block; padding: 5px 3px 5px 8px; color:#FFF; font-size:12px; z-index:100; font-weight:normal; }
.menu ul li a:hover {color:#FFF; background:#494949; text-decoration:none; z-index:100;}

.pink a:hover {color:#e3006a;}
.activepink a {color:#e3006a; text-decoration:underline; }
.activepink a:hover {color:#e3006a; text-decoration:underline;}

.orange a:hover {color:#ff6f1e;}
.activeorange a {color:#ff6f1e; text-decoration:underline;}
.activeorange a:hover {color:#ff6f1e;}

.red a:hover {color:#ce061e;}
.red ul {background:url(../img/navRed.png);}
.activered a {color:#ce061e; text-decoration:underline; }
.activered a:hover {color:#ce061e; text-decoration:underline; }
.activered ul {background:url(../img/navRed.png);}
.activered ul li a {text-decoration:none;}

.green a:hover {color:#8eb233;}
.activegreen a {color:#8eb233; text-decoration:underline;}
.activegreen a:hover {color:#8eb233; text-decoration:underline;}

.blue a:hover {color:#0098d4; }
.blue ul {background:url(../img/navBlue.png); }
.activeblue a {color:#0098d4; text-decoration:underline;}
.activeblue a:hover {color:#0098d4; text-decoration:underline;}
.activeblue ul {background:url(../img/navBlue.png); }
.activeblue ul li a {text-decoration:none;}

.olive a:hover {color:#54b284;}
.olive ul {background:url(../img/navOlive.png);}
.activeolive a {color:#54b284; text-decoration:underline;}
.activeolive a:hover {color:#54b284; text-decoration:underline;}
.activeolive ul {background:url(../img/navOlive.png);}
.activeolive ul li a {text-decoration:none;}



/*********************
Splash classes       *
*********************/	
.splash-orange {width:100%; margin:0 auto; text-align:center; padding:0; 
                margin-top:5px; background:#ff6f1e; min-height:1px;}

.splash-red {width:100%; margin:0 auto; text-align:center; 
                margin-top:5px; background:#ce061e; min-height:1px;}	

.splash-blue {width:100%; margin:0 auto; text-align:center;
                margin-top:5px; background:#0098d4; min-height:1px;}

.splash-green {width:100%; margin:0 auto; text-align:center; 
                margin-top:5px; background:#9bd430; min-height:1px;} 

.splash-pink {width:100%; margin:0 auto; text-align:center; padding:0;
                margin-top:5px; background:#e3006a; min-height:1px;} 
                
.splash-olive {width:100%; margin:0 auto; text-align:center; 
                margin-top:5px; background:#54b284; min-height:1px;}
                
.splash-white { background:white; margin:0 auto; width:850px; }                        


/***********************************************
Clear Default Margins, Paddings and Borders    *
***********************************************/
* { margin: 0em; padding: 0em; }
img { border: none; }
img a {padding:0; margin:0;}
form { margin: 0em; padding: 0em; }
.clearboth { clear: both; }
.clearboth-border {clear:both; border-bottom:1px dotted #dadada; margin:2% 0 2% 0;}
.clearleft { clear: left; }
.clearright { clear: right; }

ul {margin:20px 0 10px 50px; font-size:0.95em; }
li {line-height:24px; font-family:Arial, Serif, Sans-Serif; color:#333;}
li a {text-decoration:none; font-family:Arial, Serif, Sans-Serif;}
li a:hover {text-decoration:underline;}

ul ul li {font-size:1.2em;}

/***********************************************
Picture Classes    *
***********************************************/
.picture { margin:11px 0 5px 0px;}
.pictureleft { float: left; text-align: center; margin-bottom: 0.5em; margin-right: 1em; padding: 0.2em; }
.pictureright { float: right; text-align: center; margin-bottom: 0.5em; margin-left: 1em; padding: 0.2em; border:1px solid #d7d7d7; }