/*----------------------------------------------------

	SCREEN.CSS

	SITE: www.ascoaches.co.uk
	CREATED: Wed 13.03.13 @ 11:21
	AUTHOR: Kean Richmond

----------------------------------------------------*/

@import url("reset.css");


/*--- 1-0. Common Elements ---------------------------------------------------------------------------*/

html						{font-size:62.5%;}
body						{background:#FFF; color:#6F6F6F; font-family:'Open Sans', Arial, Helvetica, sans-serif; font-size:14px; font-size:1.4rem;}

a							{color:#624985;}
a:hover						{color:#97B792;}

.fl							{float:left;}
.fr							{float:right;}
img.fl						{margin:10px 10px 10px 0;}
img.fr						{margin:10px 0 10px 10px;}


/*--- 1-1. Heading ---------------------------------------------------------------------------*/

h1, h2						{font-size:24px; font-size:2.4rem;}
h1							{color:#624985; padding:72px 0 30px 0;}
h2							{padding:52px 0 30px 0;}



/*--- 1-2. Main Layout ---------------------------------------------------------------------------*/

.wrapper					{margin:0 auto; padding:0 10px; position:relative; overflow:none; width:940px; z-index:1;}


/*--- 1-3. Table ---------------------------------------------------------------------------*/



/*--- 1-4. Form Elements ---------------------------------------------------------------------------*/

form p						{height:100%; overflow:hidden;}
label						{color:#2A2838; display:block; font-weight:600; margin:17px 0 2px 0;}

input,
select,
textarea					{float:left; font-family:'Open Sans', Arial, Helvetica, sans-serif; font-size:14px; font-size:1.4rem; margin-right:10px; padding:5px 6px 6px 6px;}

input[type='text'],
input[type='password'],
input[type='email'],
input[type='tel'],
select,
textarea					{color:#4D4D4D; padding:5px 6px 6px 6px; width:50%;}
textarea					{height:200px; width:75%;}
option						{padding:1px 10px 1px 2px;}

input[type='submit']		{background:#624985; border:0; color:#FFF; cursor:pointer; font-weight:700; margin-top:20px; min-width:120px;}
input[type='submit']:hover	{background:#97B792;}

#p-security					{clear:both; display:none; height:0px; visibility:hidden;}
#p-security label			{float:none; padding:0 0 4px 0; text-align:left; width:auto;}
#p-security input[type="text"]	{display:block; float:none;}

.hint						{color:#666; float:left; font-size:13px; font-size:1.3rem; font-style:italic; margin-top:6px;}


/*--- 1-5. Response Elements ---------------------------------------------------------------------------*/

#msg-response				{clear:both; color:#FFF; border-radius:5px; font-size:13px; font-size:1.3rem; font-weight:600; margin:20px 0; padding:9px 20px 9px 37px; position:relative;}
#msg-response:before		{font-family:'brodings'; font-size:16px; font-size:1.6rem; font-weight:normal; left:10px; position:absolute; top:8px;}

.msg-error,
.inline-response.error		{background:#D95D5D;}
.msg-error:before,
.inline-response.error:before	{content:"\e006";}
.msg-success,
.inline-response.success	{background:#99C563;}
.msg-success:before,
.inline-response.success:before	{content:"\e007";}

#msg-response ul			{list-style:inside none!important; line-height:1.3em!important; margin:0!important; padding:0!important;}
#msg-response li			{padding:0!important;}
#msg-response a				{color:#FFF;}
#msg-response a:hover		{color:#444; text-decoration:underline;}

input:invalid,
input.error,
textarea.error				{border:1px solid #FFD2D2; border-bottom-color:#FFDFDF; border-top-color:#FF8B8B; border-radius:2px; box-shadow:none; color:#D95D5D;}
.hint.error					{color:#D95D5D;}

.inline-response			{margin:5px 0; padding-left:22px; position:relative;}
.inline-response:before		{font-family:'brodings'; @include font-size(1.8); left:0; position:absolute; top:2px;}


/*--- 1-6. Skip Link ---------------------------------------------------------------------------*/

.skip-link					{float:left; margin:0 0 0 -9999px; text-decoration:none;}
.skip-link:focus			{background:#333333; border-bottom:1px solid #FFFFFF; border-right:1px solid #FFFFFF; color:#FFFFFF; font-size:11px; margin:0; padding:3px 7px 3px 5px; position:relative; z-index:1000;}


/*--- 1-7. Tooltip ---------------------------------------------------------------------------*/

#tooltip 					{position:absolute; z-index:3000;}


/*--- 1-8. Clearfix ---------------------------------------------------------------------------*/

* html .clearfix			{height:1%; overflow:visible;}/* float clearing for IE6 */
*+html .clearfix			{min-height:1%;}/* float clearing for IE7 */
.clearfix:after				{clear:both; content:"."; display:block; height:0; font-size:0; visibility:hidden;}


/*--- 1-9. Icon Fonts ---------------------------------------------------------------------------*/

@font-face 					{font-family:'brodings'; src:url('fonts/brodings.eot'); src:url('fonts/brodings.eot?#iefix') format('embedded-opentype'), url('fonts/brodings.svg#brodings') format('svg'), url('fonts/brodings.woff') format('woff'), url('fonts/brodings.ttf') format('truetype'); font-weight:normal; font-style:normal;}

/* Use the following CSS code if you want to use data attributes for inserting your icons */
[data-icon]:before 			{font-family:'brodings'; content:attr(data-icon); font-weight:normal; speak:none; -webkit-font-smoothing:antialiased;}
/* Use the following CSS code if you want to have a class per icon */
[class^="icon-"]:before,
[class*=" icon-"]:before	{font-family:'brodings'; font-style:normal; font-weight:normal; speak:none; -webkit-font-smoothing:antialiased;}
.screen-reader-text 		{left:-9999px; position:absolute; top:-9999px;}



/*--- 2. SITEWIDE ELEMENTS -----------------------------------------------------------------------------------------------------------------------------------*/

/*--- 2-1. Layout ---------------------------------------------------------------------------*/


/*--- 2-2. Header ---------------------------------------------------------------------------*/

header						{color:#2A2838; height:100%; overflow:hidden; position:relative;}
#index header				{background:#FFF; background:rgba(255,255,255,0.8); height:220px; margin:0 auto; width:700px;}
#index .header-wrapper		{padding-top:240px;}
#logo						{float:left; margin-right:20px;}

header a					{color:#2A2838; text-decoration:none;}
header a:hover				{color:#624985;}

.hdr-contact li				{padding:3px 0 2px 0;}

.link--facebook				{bottom:10px; position:absolute; right:10px;}
.link--facebook:hover		{opacity:0.7;}
.link--facebook	img			{float:left;}


/*--- 2-3. Navigation ---------------------------------------------------------------------------*/

#mainnav					{padding:17px 0 40px 0;}
#mainnav a					{display:inline-block; font-weight:600; padding:3px 0 2px 0; text-decoration:none;}


/*--- 2-4. Content ---------------------------------------------------------------------------*/

.content					{}
.content p					{line-height:2em; padding:14px 0;}

figure.fr					{margin:23px 0 40px 60px;}
figcaption					{font-size:12px; font-size:1.2rem; font-style:italic; line-height:1.2em; margin-top:4px; text-align:center;}
figcaption strong			{display:block; font-weight:600;}


/*--- 2-5. Footer ---------------------------------------------------------------------------*/

footer						{border-top:8px solid #E6E6E6; border-color:rgba(131,131,131,0.2); margin-top:60px!important; padding:36px 0 80px 0!important; text-align:right;}

.back-to-top				{float:left; font-weight:600; margin-top:4px; padding:1px 0; position:relative; text-decoration:none; text-transform:uppercase;}
.back-to-top:before			{content: "\e008"; font-family:'brodings'; font-size:32px; font-size:3.2rem; height:22px; left:0; position:absolute; top:-8px; width:32px;}
.generatedcontent .back-to-top	{padding-left:42px;}

.copyright a				{color:#6F6F6F; text-decoration:none;}
.copyright a:hover			{color:#624985;}
.address					{font-size:13px; font-size:1.3rem;}


/*--- 2-6. Hire Us ---------------------------------------------------------------------------*/

.hire-us					{background:url(/img/_icon_minicoach.png) center 15px no-repeat #624985; color:#FFF; display:block; font-size:24px; font-size:2.4rem; font-weight:600; height:84px; margin:20px auto 0 auto; padding-top:41px; text-align:center; text-decoration:none; text-transform:uppercase; width:140px;}
.hire-us:hover				{background-color:#97B792; color:#FFF;}
.hire-us.fixed				{margin:0; position:fixed; right:30px; top:0; z-index:10;}


/*--- 3. PAGE SPECIFIC ELEMENTS -----------------------------------------------------------------------------------------------------------------------------------*/

/*--- 3-1. Index ---------------------------------------------------------------------------*/

#map-canvas					{height:700px; left:0; position:absolute; top:0; width:100%; z-index:0;}

.read-more					{background:#97B792; color:#FFF; display:block; font-size:13px; font-size:1.3rem; font-weight:700; margin:106px auto; padding:5px; text-align:center; text-decoration:none; text-transform:uppercase; width:100px;}
.read-more:hover			{background:#624985; color:#FFF;}

.generatedcontent .read-more	{background:0; color:#97B792; margin:77px auto 74px auto; padding:71px 0 0 0; position:relative; text-shadow:0 2px 0 rgba(255,255,255,0.8);}
.generatedcontent .read-more:hover	{color:#624985;}
.generatedcontent .read-more:before	{background:#97B792; border-radius:50%; color:#FFF; content: "\e00b"; font-family:'brodings'; font-size:32px; font-size:3.2rem; font-weight:normal; height:60px; left:50%; line-height:61px; margin-left:-30px; position:absolute; text-align:center; text-shadow:none; top:0; width:60px;}
.generatedcontent .read-more:hover:before	{background:#624985;}

.cols						{-moz-column-count:3; -ms-column-count:3; -webkit-column-count:3; column-count:3; -moz-column-gap:60px; -ms-column-gap:60px; -webkit-column-gap:60px; column-gap:60px;}
.cols p						{padding:0 0 28px 0; -webkit-column-break-inside:avoid; -moz-column-break-inside:avoid; -o-column-break-inside:avoid; -ms-column-break-inside:avoid; column-break-inside:avoid;}
.cols li					{padding-bottom:17px; -webkit-column-break-inside:avoid; -moz-column-break-inside:avoid; -o-column-break-inside:avoid; -ms-column-break-inside:avoid; column-break-inside:avoid;}

.content-cols				{padding:14px 0 12px 0;}

.no-csscolumns .services	{height:100%; overflow:hidden;}
.no-csscolumns .services li	{float:left; width:33%;}

.gallery li					{float:left; margin:0 0 40px 2.127659574468085%; position:relative; width:18.29787234042553%;}
.gallery li:nth-child(5n+1)	{margin-left:0;}
.gallery li:first-child		{margin-left:0;}
.gallery a					{display:block;}
.gallery a:before,
.gallery a:after			{background:#FFF; content:""; height:23px; position:absolute; width:23px;}
.gallery a:before			{border-radius:0 100% 0 0; bottom:-8px; box-shadow:3px -3px 3px rgba(0,0,0,0.15); left:-8px;}
.gallery a:after			{border-radius:0 0 0 100%; box-shadow:-3px 3px 3px rgba(0,0,0,0.15); right:-8px; top:-8px;}
.gallery a:hover			{opacity:0.9;}
.gallery img				{border:4px solid #FFF; box-shadow:0 0 3px rgba(0,0,0,0.3); float:left;}

.testimonials				{height:100%; overflow:hidden;}
.testimonial				{height:100%; margin-bottom:36px; overflow:hidden; width:440px;}
.testimonial:nth-of-type(odd)	{clear:left; float:left;}
.testimonial:nth-of-type(even)	{clear:right; float:right;}
.testimonial blockquote		{background:#EFECF3; border-radius:10px; font-size:18px; font-size:1.8rem; font-style:italic; padding:15px 20px; position:relative;}
.cite						{float:right; padding:14px 30px 0 0;}
.testimonial blockquote:after 			{border:solid transparent; border-color:rgba(255,255,255,0); border-top-color:#EFECF3; border-width:12px; content:" "; height:0; pointer-events:none; position:absolute; right:50px; top:100%; width:0;}


/*--- 4. MEDIA QUERIES -----------------------------------------------------------------------------------------------------------------------------------*/

/*--- 4-1. Tablet ---------------------------------------------------------------------------*/


/*--- 5. PLUGINS -----------------------------------------------------------------------------------------------------------------------------------*/

/*--- 5-1. Lightbox ---------------------------------------------------------------------------*/

#lightboxOverlay 			{background:#000; display:none; left:0; opacity:0.85; position:absolute; top:0; z-index:9999;}
#lightbox 					{font-family:"lucida grande", tahoma, verdana, arial, sans-serif; font-weight:normal; left:0; line-height:0; position:absolute; text-align:center; width:100%; z-index:10000;}
#lightbox img 				{height:auto; width:auto;}
.lb-outerContainer 			{background:#FFF; border-radius:4px; height:250px; margin:0 auto; position:relative; width:250px; *zoom:1;}
.lb-outerContainer:after,
.lb-dataContainer:after		{clear:both; content:""; display:table;}
.lb-container 				{padding:10px;}
.lb-loader 					{height:25%; left:0%; line-height:0; position:absolute; text-align:center; top:40%; width:100%;}
.lb-nav 					{height:100%; left:0; position:absolute; top:0; width:100%; z-index:10;}
.lb-container > .nav 		{left:0;}
.lb-prev, .lb-next 			{background-image:url("data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7"); cursor:pointer; display:block; height:100%; width:49%;}
.lb-prev 					{float:left; left:0;}
.lb-next 					{float:right; right:0;}
.lb-prev:hover 				{background:url(/img/lightbox/prev.png) left 48% no-repeat;}
.lb-next:hover 				{background:url(/img/lightbox/next.png) right 48% no-repeat;}
.lb-dataContainer 			{border-radius:0 0 4px 4px; margin:0 auto; padding-top:5px; *zoom:1; width:100%;}
.lb-data 					{color:#BBB; padding:0 10px;}
.lb-data .lb-details 		{float:left; line-height:1.1em; text-align:left; width:85%;}
.lb-data .lb-caption 		{font-size:13px; font-weight:bold; line-height:1em;}
.lb-data .lb-number 		{clear:left; display:block; font-size:11px; padding-bottom:1em;}
.lb-data .lb-close 			{float:right; outline:none; padding-bottom:0.7em; width:35px;}
.lb-data .lb-close:hover 	{cursor:pointer;}