/*
CLICKSTREAM DESIGN CHECKLIST CARRIED OUT BY: Aoife
DATE: 07/01/2009
*/



/* COLOURS
-------------------------------------------------------------- */
/*
TURQUOISE 01 - #2399a7
TURQUOISE 02 - #44bbc9
*/



/*.................................................. GENERAL ...............................................*/
html	{
	overflow-y: scroll;
}
body {margin:0;  padding:0;  font-size:100.01%; font-family: Verdana, Arial, Helvetica, Geneva, _Sans, sans-serif;  color: #d4d4d4 ; background: url(/img/bg/tara-house-background.gif) #222;  text-align:left; /**text-align:center;*/}
* { margin: 0; padding:0;}

/***** GENERAL STYLES *****/
.floatLeft {float:left;}
.floatRight {float:right;}
.clear { clear:both; width:100%; height:1px; font-size:1px; }
.cb {border: 0px;}
img { border: none;}
.toDo {background: yellow}

a {	color: #feffb4; }
a:hover {text-decoration:none;}
acronym { border-bottom:1px solid #AAD4FE;  cursor: help;  }

ul {margin:0}
ul li {margin:0; padding:0; background: none; list-style:none}

/*.............................................. ACCESSIBILITY .............................................*/
#access {height:1px; font-size:1px; color:#fff;}
#access a {color:#fff;}
#access ul li {display: inline; float:left; font-size: 1px; text-indent:-9000px;}

/*.................................................. WRAP ALL ................................................*/
#wrapall {width:990px; margin:0 auto; font-size: 0.75em; text-align: left; }

/*.................................................. HEADER ................................................*/
#header { padding: 10px; /*width:960px;*/ width: 970px; background:url(/img/bg/tara-house-header.jpg) #454545; float:left; clear:both;}
#header h1 {margin: 0 0 5px 0; }
#headings {float: left; }
#header ul {margin: 8px 0 0 0; float: right; color: #fff; text-align:right; font-size: 0.9em}
#header ul li.row01 {margin: 0 0 5px 0; }
#header ul span {color: #c9c9c9}
a.viewMap {padding: 0 10px 0 0; background:url(/img/icons/arrow-grey.gif) no-repeat right 3px}

/*.................................... MAIN NAVIGATION ................................................*/
#mainmenu {padding: 4px 0 3px 1px; width: 989px; clear:both; float:left; background:url(/img/bg/mainmenu.gif) no-repeat #3c3c3c; font-family:"Trebuchet MS", Arial, Helvetica, sans-serif; height: 28px;}
#mainmenu ul {float: left; width: 100%; text-align:center; }
#mainmenu ul li {padding: 0 3px 0 4px ; display: inline; float:left}
#mainmenu ul li.home {padding-left: 8px ; }
#mainmenu ul li.location {padding-right: 0px ; }
#mainmenu ul li a {padding: 5px 6px 5px 6px; font-weight: bold; color:#fff;text-decoration: none; display: block}
#mainmenu ul li.on a {background: #44bbc9; }
#mainmenu ul li a:hover {text-decoration: underline; }
#mainmenu ul li a:focus { outline: none} /*hides the dots around the links caused by text indent, if used*/

/*........................ MAIN this wraps the left and right columns........................*/
#main {padding: 15px 0 0 15px; width: 975px; float:left; background: url(/img/bg/celtic-cross.gif) no-repeat #2a2a2a 250px 15px; }
h1 {margin:0 0 10px 0; color:#fff79e; font-size:1.8em; font-weight:normal}
p {line-height: 1.8em}
/*.................................................. LEFTCOL ...............................................*/
#leftCol {padding: 0 10px 10px 0; float:left; width: 190px ;}
#leftCol .panel {margin: 0 0 10px 0; float: left; padding: 10px;  background:#5e004b; width: 170px;}
#leftCol .panel h2 {margin: 0 0 5px 0; font-size: 1.0em; color:#fff}
#leftCol .panel p {font-size: 0.9em; color:#fff; line-height:1.5em}
#leftCol .panel p.moreInfo {margin: 8px 0; text-align:right; padding: 0 10px 0 0; background:url(/img/icons/arrow-grey.gif) no-repeat right 5px}
#leftCol .locationMap, #content .eventsPanel .panel.locationMap {background: #003a5e;  }
#leftCol .contactUs {background: #434835;  }

/*........ SECONDARY NAVIGATION ................................................*/
ul#submenu {margin: 0 0 15px 0; clear: both; float:left;}
ul#submenu li {margin: 0 0 5px 0; float: left; display:inline; width: 188px;}
ul#submenu li a {padding: 8px; background: #000; display:block; text-decoration:none; color:#fff;}
ul#submenu li.on a {background: #710000; color:#fff; }
ul#submenu li a:hover {background: #414141; color:#fff; }

/*......... RIGHTCOL HOME ...............................................*/
#main #rightCol {float: left; width: 760px;}
#main.home #rightCol {width: 100%}

/*............................................. COLUMN THREE ...............................................*/
#thirdCol {float: right; width:275px; background: #710000}
#thirdCol .panel {padding: 8px 0 8px 0; float: left; width: 275px}
#thirdCol .panel.restaurant {background:url(/img/content/restaurant.jpg) no-repeat; }
#thirdCol .panel.rooms {background:url(/img/content/rooms.jpg) no-repeat; }
#thirdCol .panel.functionRoom {background:url(/img/content/function-room-availability.jpg) no-repeat; }
#thirdCol h1 {margin-left: 15px; font-size: 1.3em; margin-bottom: 120px; }
#thirdCol h1 a {padding: 2px 0 3px 0; color: #fff; text-decoration: none; font-size: 1.0em; background:url(/img/bg/arrow.gif) no-repeat -355px 0; display:block}
#thirdCol h1 a:hover {background-position: -15px 0}
#thirdCol p {margin: 0 15px 5px 15px; font-size: .9em ; color:#fff	}
#thirdCol .moreInfo {margin-right: 8px; text-align: right; }
#thirdCol .moreInfo a {padding: 0 10px 0 0; background:url(/img/icons/arrow-red.gif) no-repeat right 3px}
/*.................................................. CONTENT ...............................................*/
#bcrumb {font-size: .85em; text-transform: lowercase}

#content {float: left;  width: 750px}
#main.home #content {width: 700px}

#content h2 {margin:15px 5px 10px 0; padding: 0 0 3px 0; color:#fff; font-size:1.3em; font-weight:normal; border-bottom: 1px dotted #565656; clear:left; }
#content h2.displayInline {display: inline-block; }
#content h3 {margin:15px 5px 5px 0;color:#d8fffe; font-size:1.2em;  font-weight: normal; clear: left;  }
#content h3.eventTitle {width: auto;}
#content p {margin:5px 0 10px 0; }
#content p.note {font-size: 0.9em;}
#content p.backToTop {margin-top: 20px; font-size: 0.9em; text-align:right;}
#content img.floatLeft {padding: 5px; margin:0 10px 10px 0; border: 1px solid #565656;}
#content img.floatRight {padding: 5px; margin: 0 0 10px 10px; border: 1px solid #565656;}

/*************************** LISTS ***************************************/
ol {margin:10px 0 10px 30px;}
#content ul li {margin: 0 0 5px 0; }
#content ul.linkTo {margin: 10px; padding: 8px; background: #212121; float:left; font-size: .9em}
#content ul.linkTo li {padding: 0 0 0 12px; background: url(../img/icons/bullet01.gif) no-repeat 0 5px}
#content ul.linkTo.narrow {width: 250px;}
#content ul.linkTo.narrow li {line-height: 1.6em}

/*************************** TABLES ***************************************/
table {border-collapse: collapse}
table td {text-align: left; vertical-align: top; }

/*************************** FORMS ***************************************/
fieldset {border: 0px}
form.inputform {margin: 0 0 10px 0; padding: 10px; background: #161616; float:left; }
form.inputform input {padding: 2px 3px; font-size: 1.1em; width: 160px; border: 1px dotted #333; background:#000; color: #fff}
form.inputform select {padding: 2px 0px; font-size: 1.0em;}
form.inputform textarea {padding: 2px 3px; font-family: Verdana, Arial, Helvetica, Geneva, _Sans, sans-serif; font-size: 1.0em; width: 160px; border: 1px dotted #333; background:#000; color: #fff}
form.inputform tr.action td {text-align: center;}
form.inputform input.submit {background: #a62153; width: auto; border: 0; color:#fff}
form.inputform table {margin: 0 0 10px 0; }
form.inputform table td {padding: 2px 3px 10px 2px; }
.mand {color: #eaff00;}
/*Styling Error Messages*/
p#errMsg {padding: 10px; background: #000; }

/*.................................................. FOOTER ...............................................*/
#footer {padding: 10px; margin: 0 0 10px 0; width: 970px; float:left; clear:both; font-size: 0.9em; text-align:center}
#footer p#credits {margin: 15px 0 0 0; padding: 5px; float: right; background: #000}
#footer p#credits a {color: #5f5f5f; text-decoration:none;}
#footer p#credits a:hover {color: #fff}
#footer ul {margin-bottom: 5px;}
#footer ul li {margin: 0 3px; display: inline;  }
#footer ul li a {color: #535f61}
#footer ul li a:hover, #footer ul li.on a {color: #fff}

/*HOMEPAGE*/
#slideshow {margin: 0 0 15px 0; float: left; width: 460px;}
.eventsPanel {padding: 0 15px 10px 15px; float: left; width: 210px;}
#content .eventsPanel a {color: #c8db26}
#content .eventsPanel h1 {font-size: 1.3em}
#content .eventsPanel h1 a {text-decoration: none; color:#fff}
#content .eventsPanel ul {font-size: 0.9em}
#content .eventDate {float: right; width: 80px; text-align: right;}
#content .eventTitle {float: left; width: 100px}
#content .eventDesc {width: 100%; clear:both; }
#content .viewEvent {padding: 0 0 20px 0;margin-bottom: 0px; text-align: right; background: url(/img/bg/event-divider.gif) no-repeat bottom center}
#content .viewEvent.lastEvent {margin-bottom: 0px; }
#content .viewEvent a {padding: 0 10px 0 0; background:url(/img/icons/arrow-grey.gif) no-repeat right 3px}
#content .eventsPanel p.readMore {margin: 0px; text-align:right;}
#content .eventsPanel p.readMore a {padding: 0 10px 0 0; background:url(/img/icons/arrow-grey.gif) no-repeat right 3px}
/*Events Panel on Homepage*/
.eventsPanel .panel {margin: 0 0 10px 0; float: left; padding: 10px;  background:#5e004b; width: 190px;}
#content .eventsPanel .panel h2 {margin: 0 0 5px 0; font-size: 1.0em; color:#fff}
.eventsPanel input#email {padding: 3px 3px; border: 0px; background:#320028; color:#fff; }
.eventsPanel input.submit {padding: 2px 3px; border: 0px; background:#a60084; color:#fff; }
#content .eventsPanel p.moreInfo {margin: 8px 0; text-align:right; padding: 0 10px 0 0; background:url(/img/icons/arrow-grey.gif) no-repeat right 8px}
#content .panel.events {padding: 10px; background: #494949}

#callBack {margin: 10px 0 0 0; }

#homeContent {float: left; padding: 0 15px 0 0 ;}
#specialOffer {margin: 0 0 10px 0; padding: 0 15px 0 15px; background: url(/img/content/hill-of-tara-photo.jpg) no-repeat bottom left #121212; float:left; clear:both; }
#specialOffer h1 {margin-bottom: 5px; color: #fff; font-family:"Lucida Sans Unicode", "Lucida Grande", sans-serif; font-size: 1.9em}
#specialOffer p {color: #fff; font-family:"Lucida Sans Unicode", "Lucida Grande", sans-serif; font-size: 1.1em}
#specialOffer p a.moreInfo {padding: 0 10px 0 0; background:url(/img/icons/arrow-grey.gif) no-repeat right 5px}
#price {padding: 5px 0 0 0 ; float: left; width: 150px; }
#price img {display: block; border: 3px #fff solid}
#offerText {float: right; width: 500px}
#main #offerText h1 {margin-top: 5px;}

/*LOCATION MAP*/
#map {margin: 0 0 10px 0; width: 600px; height: 400px; color: #2a2a2a }

/*RESTAURANT AND MENUS */
div.menuWrap {margin: 10px 10px 0 0; padding: 5px 10px 10px 10px; background: #383837; }
div.menu {margin: 10px 10px 0 0; padding: 10px; background: #908972; color:#fff;}
#content div.menu h2 {margin-top: 0px; font-weight:bold;}
#content div.menu h2 span.price {font-weight:normal}
#content div.menu h3 {margin-top: 15px; }
#content div.menu ul {margin-bottom: 15px; }
#content div.menu ul li {margin: 0 0 5px 0; }

/*LIVE EVENTS*/
.calendarWrap { font-size: .9em; text-align:center}
.calendarWrap table {width: 100%}
.calendarWrap th {padding: 5px 2px 5px 2px; font-weight:normal; text-align:center; background:#710000; color:#fff;}
.calendar-month {padding-bottom: 8px; padding-top: 8px; text-align:center}
.calendarWrap td {padding: 5px; text-align:center; background: #333;}
table.calendar {margin-bottom: 10px;}
table caption {background: #000}
table td.current-day {background: #000}
table td.linked-day {background: #484848; }
table td.linked-day a {color: #fff}



li.social-links-header	{
	margin-top: 5px;
}



/* FORMS
-------------------------------------------------------------- */
form.inputform input.submit:hover	{
	cursor: pointer;
}



/* MEDIA QUERIES
-------------------------------------------------------------- */
@media screen and (max-width: 990px)	{
	#wrapall	{
		width: 100%;
	}
	#main	{
		width: 98%;
		padding: 15px 1% 0 1%;
	}
	#thirdCol	{
		width: 30%;
	}
	#thirdCol .panel,
	#thirdCol .panel.restaurant,
	#thirdCol .panel.rooms,
	#thirdCol .panel.functionRoom	{
		width: 100%;
		background-size: contain;
	}
	#main.home #content	{
		width: 70% !important;
	}
	#slideshow	{
		width: 66.666%;
	}
	#slideshow img	{
		width: 100%;
		height: auto;
	}
	.eventsPanel	{
		width: 31.333%;
		padding: 0 1%;
	}
	.eventsPanel .panel,
	#content .panel.events	{
		width: 96%;
		padding: 10px 2%;
	}
	#footer	{
		width: 98%;
		padding: 10px 1%;
	}
	body.about #leftCol,
	body.rooms #leftCol,
	body.function #leftCol,
	body.menus #leftCol .locationMap,
	body.menus #content .eventsPanel .panel.locationMap,
	body.menus #leftCol .contactUs,
	body.bar #leftCol,
	body.services #leftCol,
	body.tourism #leftCol,
	body.activities #leftCol,
	body.contact #leftCol,
	body.location #leftCol,
	body.error #leftCol	{
		display: none;
	}
	#main #rightCol,
	#main #rightCol #content	{
		width: 100%;
	}
	body.events #leftCol,
	body.menus #leftCol	{
		width: 100%;
		margin: 0 0 10px 0;
		padding: 0;
	}
	.calendarWrap table	{
		float: left;
		width: 31.333%;
		margin: 0 1%;
	}
	body.menus #leftCol ul#submenu	{
		width: 100%;
		text-align: center;
	}
	body.menus #leftCol ul#submenu li	{
		display: inline-block;
		float: none;
		width: auto;
		margin: 5px;
	}
	body.menus #rightCol .menuWrap,
	body.menus #rightCol .menu	{
		margin-right: 0;
	}
	body.contact #frm	{
		width: 50%;
	}
	body.contact #frm table	{
		width: 100%;
	}
	body.contact form.inputform input,
	body.contact form.inputform textarea	{
		width: 100%;
	}
	body.location #map	{
		display: block;
		float: none;
		width: 90%;
		margin: 0 auto;
	}
}

@media screen and (max-width: 989px)	{
	#mainmenu	{
		width: 98%;
		padding: 4px 1% 3px 1%;
		background: none;
		background: #2399a7;
		text-align: center;
	}
	#mainmenu ul	{
		font-size: 0;
	}
	#mainmenu ul li	{
		display: inline-block;
		float: none;
		padding: 0;
		font-size: 12px;
	}
	#mainmenu ul li.home	{
		padding: 0;
	}
	#header	{
		width: 98%;
		padding: 10px 1%;
	}
	#headings	{
		width: 100%;
		text-align: center;
	}
	#header ul	{
		float: left;
		width: 100%;
		text-align: center;
	}
	#header ul li	{
		display: inline-block;
	}
}

@media screen and (max-width: 960px)	{
	#footer p#credits	{
		display: inline-block;
		float: none;
		text-align: center;
	}
	#thirdCol h1 a	{
		margin-right: 10px;
		background-position: center right;
	}
	#thirdCol h1 a:hover	{
		background-position: center right;
	}
}

@media screen and (max-width: 919px)	{
	#mainmenu	{
		width: 100%;
		height: auto;
		padding: 0;
	}
	#mainmenu ul	{
		width: 100%;
		font-weight: normal;
	}
  	#mainmenu ul li	{
		width: 16.666%;
		float: left;
	}
  	#mainmenu ul li a	{
		padding: 8px 0px;
		border: 1px solid #ccc;
		display: block;
	}
	#mainmenu ul li:nth-of-type(7n) a	{
		border-top: 0;
	}
	#mainmenu ul li:nth-of-type(8n) a	{
		border-top: 0;
	}
	#mainmenu ul li:nth-of-type(9n) a	{
		border-top: 0;
	}
	#mainmenu ul li:nth-of-type(10n) a	{
		border-top: 0;
	}
	#mainmenu ul li:nth-of-type(11n) a	{
		border-top: 0;
	}
	#mainmenu ul li:nth-of-type(12n) a	{
		border-top: 0;
	}
}

@media screen and (max-width: 899px)	{
	#footer ul li	{
		display: inline-block;
		margin: 3px;
	}
}

@media screen and (max-width: 869px)	{
	body.contact #frm	{
		width: 45%;
	}
	li.social-links-header	{
		display: block;
		width: 100%;
	}
}

@media screen and (max-width: 849px)	{
	#slideshow	{
		width: 98%;
		padding-right: 2%;
	}
	#slideshow img	{
		width: 100%;
		height: auto;
	}
	.eventsPanel	{
		width: 98%;
		padding: 0 2% 10px 0;
	}
	.eventsPanel .panel,
	#content .panel.events	{
		float: left;
		width: 29.333%;
		min-height: 130px;
		margin: 0 1%;
		padding: 10px 1%;
	}
	.eventsPanel .clear	{
		display: none;
	}
	#homeContent	{
		width: 98%;
		padding: 0 2% 0 0;
	}
	#homeContent #specialOffer	{
		width: 98%;
		padding: 0 1%;
		background-size: cover;
	}
	#homeContent #specialOffer #offerText	{
		width: 100%;
	}
	body.menus #leftCol ul#submenu li	{
		margin: 5px 2px;
	}
	body.menus #leftCol ul#submenu li a	{
		font-size: 10px;
	}
	body.contact #frm	{
		width: 42%;
	}
}

@media screen and (max-width: 767px)	{
  	#mainmenu ul li	{
		width: 25%;
	}
	#mainmenu ul li:nth-of-type(5n) a	{
		border-top: 0;
	}
	#mainmenu ul li:nth-of-type(6n) a	{
		border-top: 0;
	}
	#thirdCol	{
		width: 100%;
		margin-bottom: 10px;
		background: none;
	}
	#thirdCol .panel,
	#thirdCol .panel.restaurant,
	#thirdCol .panel.rooms,
	#thirdCol .panel.functionRoom	{
		width: 31.333%;
		min-height: 330px;
		margin: 0 1%;
		background-color: #710000;
		background-size: auto;
	}
	#main.home #content,
	#slideshow,
	.eventsPanel	{
		width: 100% !important;
		padding: 0;
	}
	.eventsPanel .panel,
	#content .panel.events	{
		min-height: 100px;
		margin-bottom: 10px;
	}
	#slideshow	{
		height: 300px;
		overflow: hidden;
	}
	#slideshow img	{
		margin-top: -80px;
	}
	body.menus #leftCol ul#submenu li a	{
		font-size: 12px;
	}
}

@media screen and (max-width: 667px)	{
	#mainmenu ul li	{
		width: 33.333%;
	}
	#mainmenu ul li:nth-of-type(4n) a	{
		border-top: 0;
	}
	#thirdCol .panel,
	#thirdCol .panel.restaurant,
	#thirdCol .panel.rooms,
	#thirdCol .panel.functionRoom	{
		min-height: 350px;
	}
	#slideshow	{
		height: 250px;
	}
	#slideshow img	{
		margin-top: -50px;
	}
	.eventsPanel .panel,
	#content .panel.events	{
		min-height: 120px;
	}
}

@media screen and (max-width: 599px)	{
	#thirdCol .panel,
	#thirdCol .panel.restaurant,
	#thirdCol .panel.rooms,
	#thirdCol .panel.functionRoom	{
		width: 100%;
		min-height: 0;
		margin: 0 0 10px 0;
		background-size: 50%;
	}
	#thirdCol h1	{
		display: block;
		float: left;
		width: 48%;
		margin: 0 1% 100px 1%;
	}
	#thirdCol h1 a	{
		margin: 0;
	}
	#thirdCol p	{
		float: right;
		width: 48%;
		margin: 0;
		padidng: 0 1%;
	}
	#thirdCol .moreInfo	{
		float: right;
		width: 49%;
		margin: 15px 1% 0 0;
	}
	#slideshow img	{
		margin-top: -25px;
	}
	.eventsPanel .panel,
	#content .panel.events	{
		width: 98%;
		min-height: 0;
		margin: 0 0 10px 0;
		padding: 10px 1%;
	}
	#content img.floatRight,
	#content img.floatLeft	{
		display: block;
		float: none;
		width: 95%;
		height: auto;
		margin: 0 auto 10px auto;
		padding: 5px
	}
	.calendarWrap table	{
		width: 98%;
		margin: 0 1% 10px 1%;
	}
	body.contact #frm	{
		width: 96%;
		padding: 10px 2%;
	}
}

@media screen and (max-width: 568px)	{
	#thirdCol .panel,
	#thirdCol .panel.restaurant,
	#thirdCol .panel.rooms,
	#thirdCol .panel.functionRoom	{
		width: 98%;
		padding: 10px 1%;
		background-size: 100%;
	}
	#thirdCol h1	{
		width: 100%;
		margin: 0;
	}
	#thirdCol h1 a	{
		background: none;
	}
	#thirdCol p	{
		display: block;
		float: left;
		width: 98%;
		padding: 5px 1%;
		background: rgba(0,0,0,0.5);
	}
	#thirdCol .moreInfo	{
		float: right;
		width: auto;
		margin: 15px 0 0 0;
	}
}

@media screen and (max-width: 499px)	{
	#headings h1 a img,
	#headings h2 a img	{
		width: 90%;
		height: auto;
	}
	#slideshow	{
		height: 200px;
	}
}

@media screen and (max-width: 449px)	{
	body.menus #leftCol ul#submenu li	{
		display: block;
		float: float;
		width: 98%;
		margin: 5px 1%;
	}
}

@media screen and (max-width: 414px)	{
	#mainmenu ul li	{
		width: 50%;
	}
	#mainmenu ul li:nth-of-type(3n) a	{
		border-top: 0;
	}
	#thirdCol h1 a	{
		font-size: 20px;
	}
	body.contact form.inputform table td	{
		display: block;
		float: left;
		width: 98%;
		padding: 2px 1%;
	}
	body.contact form.inputform input,
	body.contact form.inputform textarea	{
		width: 98%;
		padding: 2px 1%;
	}
	body.contact form.inputform input.submit	{
		width: 100%;
		padding: 5px 1%;
	}
	#loginform	{
		width: 96%;
		padding: 10px 2%;
	}
	#loginform table,
	#loginform tr	{
		width: 100%;
	}
	#loginform td	{
		width: 48%;
		padding: 2px 1%;
	}
	#loginform input	{
		width: 100%;
	}
}

@media screen and (max-width: 375px)	{
	#thirdCol .panel,
	#thirdCol .panel.restaurant,
	#thirdCol .panel.rooms,
	#thirdCol .panel.functionRoom	{
		background-size: cover;
	}
	#loginform td	{
		display: block;
		float: left;
		width: 98%;
		padding: 2px 1%;
	}
}

@media screen and (max-width: 319px)	{
	#mainmenu ul li	{
		width: 100%;
	}
	#mainmenu ul li:nth-of-type(2n) a	{
		border-top: 0;
	}
}