/*  
Theme Name: Maes Yr Haf
Theme URI: http://maes-yr-haf.com/
Description: The design template for Maes Yr Haf
Version: 1.0
Author: Ech Design
Author URI: http://echdesign.co.uk/
*/

/* Typography */

* {
margin:0;
padding:0;
}
body {
margin:0;
padding:0;
text-align:center;
font-family: verdana, arial, helvetica;
font-size:62.5%;
color:black;
background: url('images/wallpaper.jpg')
top left repeat;
}
p {
margin:10px;
margin-top:0;
line-height:1.7em;
font-size:1.1em;
}
li {
font-size:1.1em;
}
strong {
color:#6c2833;
}
h1 {
float:left;
width:271px;
height:111px;
margin-left:3px;
}

h1 a {
  display: block;
 text-indent: -900%;
/*   position: absolute; may be able to remove this */
  outline: none;
  background: url(images/maes-yr-haf-logo.png) no-repeat;
 width:271px;
height:111px; 
}
h1 a:hover {
  background-position: left bottom;
  border:none;
	 /* prevents a border from appearing when the home icon is mousedover */
}

h2 {
color:#6c2833;
font-weight:normal; 
padding:10px; /* set as padding to avoid displacing any margins in the right hand column */
font-size:1.7em;
}
h3 {
color:#6c2833;
padding:0px;
font-size:1.4em;
line-height:1.7em;
font-weight:normal;
}
h4 {
color:#6c2833;
font-size:1.1em;
line-height:1.7em;
}
a:link {
color:#6c2833;
}
a:visited {
color:#3C0C3F;
}
a:hover {
color:#c4a974;
}
a img {
border:none;
}


/* divs and area specific content */

#contentwrapper {
width:954px; /* was 954 */ 
margin-left:auto;
margin-right:auto;
margin-top:10px;
text-align:left;
}
#header {
height:111px;  /*the same height as the logo */
background: url('images/header.png') 259px 59px no-repeat;
position:relative; /* may be able to remove this */

}
#header ul {
margin-left:274px;

}
#header li {
list-style-type:none;
float:left;
margin-top:58px;

}
#header li a {

display: block;
 text-indent: -10000px;
 text-decoration:none;
outline:none;
 }
li#rest a {
background: url(images/restaurant.png) no-repeat;
width:116px;
height:53px; 
}
li#rest a:hover {
background-position: left bottom;
}
li#rooms a {
background: url(images/rooms.png) no-repeat;
width:83px;
height:53px; 
}
li#rooms a:hover {
background-position: left bottom;
}
li#gower a {
background: url(images/gower.png) no-repeat;
width:82px;
height:53px; 
}
li#gower a:hover {
background-position: left bottom;
}
/* Side tabs */
a#rates {
display:block;
position:absolute;
right:1px;
top:111px;
width:35px;
height:128px;
background: url(images/rates.png) no-repeat;
text-indent:-10000px;
z-index:5;
}
a#recruitment {
display:block;
position:absolute;
right:1px;
top:244px;
width:35px;
height:127px;
background: url(images/recruitment.png) no-repeat;
text-indent:-10000px;
z-index:5;
}


/* li#concierge a {
background: url(images/contact.png) no-repeat;
width:100px;
height:53px; 
} */
li#newspress a {
background: url(images/news.png) no-repeat;
width:76px;
height:53px; 
}
li#newspress a:hover {
background-position: left bottom;
}

li#contact a {
background: url(images/contact.png) no-repeat;
width:95px;
height:53px; 
}

li#contact a:hover {
background-position: left bottom;
}
li#book a {
background: url(images/book-online.png) no-repeat;
width:117px;
height:53px; 
}

li#book a:hover {
background-position: left bottom;
}
li#events a {
background: url(images/events.png) no-repeat;
width:82px;
height:53px; 
}

li#events a:hover {
background-position: left bottom;
}




/* content runs the full width and is used on the front page, content 2 fills most of the width and is used when you want a right hand column */

#content, #content2 {
background: url(images/mid-left.png) no-repeat;
position:relative; /* applying this as otherwise a gap is appearing under the header */
top:0px;
}
#content2 {
float:left;

}
#content img { 
background: url(images/mid-right.png) top right no-repeat;
padding-right:23px; /* these padding items allow room for the background image borders */
padding-left:20px;

}
#content2 img {
padding-left:20px;
margin-bottom:-1px;
}
#flash {
/* background: url(images/mid-right.png) top right no-repeat;*/
padding-top:7px;
padding-right:0px; /* these padding items allow room for the background image borders */
margin-left:20px;
background:#F6F6F6;

}
#flash object {
width:677px; /* width of the contentwrapper minus padding on both sides */
height:297px; /* I think we may want to reduce the height of these a bit to fit more above the fold on 1024 */
}
#textcontainer {
width:662px; /* might need to change */
border-top:8px solid #F6F6F6;
border-left:8px solid #F6F6F6;
border-bottom:8px solid #F6F6F6;
margin-left:10px;
background: url(images/leftflourish.png) top right no-repeat #D7D7D7;
height:485px; 
padding-right:15px;
}
#textcontainerbase {
background: url(images/bottom-left.png) bottom left no-repeat ;
padding-bottom:15px;
padding-left:2px;
}
#bigscroller {
margin-right:50px;

overflow:auto;

}
#accordion {
overflow:auto;
height:430px;
padding-right:10px;
}
#textcontainer p {
margin-left:10px;
}
#textcontainer h3, #textcontainer h4 {
margin-left:10px;
}
#textcontainer h3 {
margin-top:10px;
}
#lefttext {
/* float:left;*/
background: url('images/grey-text-box.png')
top left no-repeat;
width:696px;
height:212px; /* same dimensions as the background */

padding-top:0px;
padding-bottom:0px;
}
#lefttext img {
margin-left:0px;
margin-bottom:10px;/* is this required */
}
#lefttext p {
margin-left:35px;
margin-right:30px;
margin-top:0; 
}
#lefttext h2 {
margin-bottom:0;
/* padding-top:8px; */
margin-left:25px;
}
#lefttext h3 {
margin-bottom:0;
margin-left:35px;
}
#lefttext h4 {
margin-left:35px;
margin-bottom:0px; /* to counteract the margin on the p */
} 
#lefttext ul { 
margin-bottom:10px;
}
#lefttext li {
margin-left:50px;
line-height:1.7em;
}
#scroller {
height:144px;
overflow:auto;
margin-right:30px;
position:relative;
z-index:5;
}
#biglefttext {
position:relative;
background: url('images/big-grey-box.png')
top left no-repeat;
width:696px;
height:738px; /* same dimensions as the background */

padding-top:0px;
padding-bottom:0px;
}
 #biglefttext h2 {
margin-left:25px;
padding-top:20px;
}
#biglefttext h3 {
margin-left:30px;
padding-left:5px;
margin-top:0px;
margin-bottom:5px;
margin-right:10px;
background:#F3F3F3;
}
#biglefttext p {
margin-left:35px;
margin-right:20px;
}
/*
#biglefttext h2 img {
position:relative;
top:1px;
left:-25px;
}*/
#bigscroller {
height:561px;
overflow:auto;
position:absolute;
top:102px;
width:681px;
}
#bigscroller2 {
height:472px;
overflow:auto;
position:absolute;
top:202px;
width:681px;
}

#bigscroller .post, #bigscroller2 .post {
margin-bottom:25px;
}
#bigscroller img, #bigscroller2 img {
margin-left:-25px;
float:left;
margin-right:10px;
margin-bottom:5px;
padding-top:5px;
}
#accordion2 {
padding-top:8px;
margin-left:19px;
margin-right:3px;
}
#accordion2 h2 {
cursor:pointer;
}
img#swirl {
position:absolute;
top:7px;
right:2px;
}
img#longbottom {
position:absolute;
bottom:1px;
right:-6px;
z-index:5;
}
/* img thumbnail post meta css */
.post-meta {
float:left;
margin-top:5px;
margin-bottom:0px;
}
.post-meta li  {
list-style-type:none;
margin-left:0px; /* not sure why this is required */
margin-right:10px; /* adds right margin to thumbnail images */
}
#sidecontent .post-meta li {
margin-left:15px;
line-height:1.0em;
}

li .post-meta-key {
display:none;
}
#news {
margin-left:20px;
margin-right:20px;

}

#rightoffer {

/* width:250px; probably a little off 
margin-left:696px;*/
/* background: url('images/offer-right.png') top right no-repeat;*/
position:absolute;
bottom:-14px;
left:-1px;
background: url('images/offer-bottom.png')
bottom left no-repeat;

}
#rightoffer img {

padding-bottom:22px;

}
#rightoffer p, #sidecontent #rightoffer p { /* because the post will wrap any content in a p */
margin:0;
}
#sidewrapper {
float:left;
background: url(images/right.png) top right no-repeat;
 /* these padding items allow room for the background image borders */
width:234px; /* the width of the content wrapper minus the width of content2 minus the padding from both */
height:516px;
}
#sidecontent { /* to avoid the wallpaper showing through */
background: url(images/curve.png) top right no-repeat #FCFCFC;
border-top:8px solid #F6F6F6;
position:relative;
height:494px;
margin-right:23px;
}
#sidecontent p {
margin-left:15px;

}
#sidecontent ul {
margin-bottom:10px;
}
#sidecontent li { /* for text lists rather than images */
margin-left:35px;
line-height:1.7em;
}
#sidecontent h2 {
padding-left:15px;
}
#sidecontent h3 {
margin-left:10px; /* maybe apply this somewhere else */
margin-top:10px;
margin-bottom:10px;
}
#nooffer {
position:relative;
left:-1px;
background: url('images/offer-bottom.png')
left bottom no-repeat;
height:508px;
padding-left:0px; /* to counteract */
width:220px;
}
ul#gallery {
margin-top:15px;
}
ul#gallery li { /* controls the formatting of thumbnails in the lightbox galleries */
float:left;
margin-left:15px;
margin-right:0px;
margin-bottom:9px;
list-style-type:none;
display:inline; /* solving ie6 float bug */
}
#footer {
clear:left;
text-align:center;
}
.clear {
clear:both;
}
/* Tool tip styles */
.tool-tip {

	color: #000000;

	width: 160px;

	z-index: 13000;
margin-top:10px;
	background: url(images/toptip.png) top left;
}

 

.tool-title {

	font-weight: bold;

	font-size: 11px;

	margin: 0;

	color: #6b2933;

	padding: 8px 8px 4px;



}

 

.tool-text {

	font-size: 11px;

	padding: 4px 8px 8px;

/*	background: url(images/bottomtip.png) bottom right;*/

}

/* cformsII css */
p.linklove {
display:none;
}
/* page specific styling */
#lefttext img.booking {
padding-left:0px;
}


/* "Blessed be the manor" */