/*
document: css/page-styles.css
developer: marcin tworos
company: codelaboratory.com
email: lab@codelaboratory.com
web: http://codelaboratory.com
date: 11/03/2012
description: this document contains the all pages gemeral CSS rules for StyleWithAgnes.ie page Cascading Style Sheet developed by Code Laboratory
-------------------------------------------------------------- */
@font-face {
    font-family: 'BasicallySerifFREEversionRg';
    src: url('fonts/basically-serif_free-version-webfont.eot');
    src: url('fonts/basically-serif_free-version-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/basically-serif_free-version-webfont.woff') format('woff'),
         url('fonts/basically-serif_free-version-webfont.ttf') format('truetype'),
         url('fonts/basically-serif_free-version-webfont.svgz#BasicallySerifFREEversionRg') format('svg'),
         url('fonts/basically-serif_free-version-webfont.svg#BasicallySerifFREEversionRg') format('svg');
    font-weight: normal; font-style: normal;}
@font-face {
    font-family: 'PetitaMediumRegular';
    src: url('fonts/petitamedium-webfont.eot');
    src: url('fonts/petitamedium-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/petitamedium-webfont.woff') format('woff'),
         url('fonts/petitamedium-webfont.ttf') format('truetype'),
         url('fonts/petitamedium-webfont.svgz#PetitaMediumRegular') format('svg'),
         url('fonts/petitamedium-webfont.svg#PetitaMediumRegular') format('svg');
    font-weight: normal; font-style: normal;}
@font-face {
    font-family: 'MiodragRegular';
    src: url('fonts/miodrag-webfont.eot');
    src: url('fonts/miodrag-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/miodrag-webfont.woff') format('woff'),
         url('fonts/miodrag-webfont.ttf') format('truetype'),
         url('fonts/miodrag-webfont.svgz#MiodragRegular') format('svg'),
         url('fonts/miodrag-webfont.svg#MiodragRegular') format('svg');
	font-weight: normal; font-style: normal;}
@font-face {
    font-family: 'SweetlyBrokenRegular';
    src: url('fonts/sweetly_broken-webfont.eot');
    src: url('fonts/sweetly_broken-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/sweetly_broken-webfont.woff') format('woff'),
         url('fonts/sweetly_broken-webfont.ttf') format('truetype'),
         url('fonts/sweetly_broken-webfont.svgz#SweetlyBrokenRegular') format('svg'),
         url('fonts/sweetly_broken-webfont.svg#SweetlyBrokenRegular') format('svg');
    font-weight: normal; font-style: normal;}
	
*		{ margin: 0; padding: 0; }
html 	{ height: 100%; }

body 	{ height: 100%; }
#all 	{ display: block; position: relative; width: 100%; min-height: 100%; }
* html #all 	{height: 100%; }


html				{ background: url( ../graphs/bg-page.png); background-position: top left; background-repeat: repeat-y}
#all			     { background: url( ../graphs/bg-all.png); background-position: top left; }

#menu a { -webkit-transition:all .15s ease-in-out; -moz-transition: all .15s ease-in-out; transition: all .15s ease-in-out;}

.clear			{ display: block; clear: both; color: #fff}
/* ----------------------------------------------------------------- */

div.language		{ height: 45px; }
div.language p	{ padding: 10px 0 0 20px; font-family:'Verdana',sans-serif;
				  font-size: 16px; color: #878787}
div.language a	{ font-family:'Verdana',sans-serif;
				  font-size: 16px; color: #878787}
div.language a:hover	{ color: #370000}

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

#style-content		{ max-width: 1021px; padding: 0 0 150px 200px;} /*footer holder*/


@media (max-width: 1110px) {
#style-content      { padding: 0 0 150px 4%; margin-left: 0px;}
}
@media (max-width: 640px) {
#style-content      { padding: 0 0 150px 4%; margin-left: 0px;}
}

h1					{ height: 62px; background: url(../graphs/bg-h1-border.png);  background-repeat: no-repeat; background-position: bottom right;}


h1 a					{ font-family:'BasicallySerifFREEversionRg','Tahoma',sans-serif;
					     font-weight: normal; font-size: 36px; color: #b1a4a4}

@media (max-width: 400px) {
	h1 a					{ font-size: 30px; }
}

h1 a span.change				{ color: #d7d2d2}

#yps					{ font-family: 'PetitaMediumRegular','Verdana',sans-serif; 
						  font-size: 18px; color: #797979; font-weight: normal;
						  letter-spacing: 2px; padding: 0 95px 0 0px; float: right;
						  position: relative; top: 33px}
@media (max-width: 720px) {
#yps	{ position: absolute; right: 25px; margin: -20px 0 0 0; display: block; padding: 0 5px 0 0px; }
}
						  
h2					{ padding: 0 0 20px 0; font-family: 'SweetlyBrokenRegular','Georgia',sans-serif;
					    color: #470202; font-size: 32px; font-weight: normal}
					  
.rslides				{background: url(../graphs/bg-h1-border.png);  background-repeat: no-repeat; background-position: bottom right;}
		
    /*			  
.rslides h2		{ position: absolute; z-index: 999999999999; font-weight: normal; border: solid red;
							  background: url(../graphs/bg-headers.png);  background-repeat: no-repeat; background-position: left 85%;}
							  
.rslides h2 a	{ font-family:'','Tahoma',sans-serif; display: block;
							  font-size: 20px; color: #fff;
							  position: relative; left: 10px; top: 50%;
							  text-shadow: 2px 2px 3px #000;}

#ps	{ }
#ks	{ left: 212px}
#as	{ left: 405px}

#ps a	{ display: block; width: 212px; height: 285px; overflow: hidden; border: solid green;}
#ks a  	{ display: block; width: 193px; height: 285px; overflow: hidden}
#as a	{ display: block; width: 509px; height: 285px; overflow: hidden}
#bs a	{ display: block; width: 914px; height: 285px; overflow: hidden}
	*/				  

.rslides h2   {font-weight: normal; position: absolute; top: 87%; width: 100%; overflow: hidden;
                background: url(../graphs/bg-headers.png);  background-repeat: repeat; background-position: left top}
                
.rslides h2 a { font-family:'','Tahoma',sans-serif; display: block; padding: 5px 0 5px 0;
                font-size: 20px; color: #fff;
                position: relative; left: 10px; /*top: 50%;*/
                text-shadow: 2px 2px 3px #000;}

@media (max-width: 1020px) {
.rslides h2   { top: 85%; }
}
@media (max-width: 920px) {
.rslides h2 a { font-size: 14px; }
}
@media (max-width: 600px) {
.rslides h2   { top: 65%; }
}
@media (max-width: 420px) {
.rslides h2   { display: none}
}

#ps { width: 33.3%; }
#ks { left: 33.3%; width: 33.3%; }
#as { left: 66.6%; width: 33.3%; }



#menu				{ height: 35px; padding: 15px 0 0 40px; 
					  background: url(../graphs/bg-h1-border.png);  background-repeat: no-repeat; background-position: bottom right;}

@media (max-width: 650px) {
  #menu       { height: 35px; padding: 15px 0 0 5px; }
}

#menu ul 			{ }
#menu ul li			{ display: inline}
				
#dropdown			{ display: none}				


#menu li:hover ul, #lista-systemow li.hover ul  { display: block; position: absolute; z-index: 100000;
					margin: 0 0 0 80px; padding: 12px 30px 20px 12px;}

#menu li #dropdown		{ background: #ababab}
#menu li #dropdown li		{ display: block; height: 30px; }

#menu li #dropdown li a:hover		{ color: #fff}

#menu a				{ font-family: 'BasicallySerifFREEversionRg',sans-serif;
					  font-size: 18px; color: #470202;
					  margin: 0 33px 0 0;
					}

#menu a:hover		{ color: #878787}

@media (max-width: 1190px) {
#menu a				{ margin: 0 15px 0 0}	
}
@media (max-width: 1040px) {
#menu				{ height: 70px;}
#menu a				{ display: inline-block; margin: 0 33px 15px 0}
#menu li:hover ul, #lista-systemow li.hover ul { margin: -16px 0 0 80px; padding: 12px 10px 20px 12px; }
}
@media (max-width: 580px) {
	#menu				{ height: 110px;}
	}
@media (max-width: 440px) {
	#menu				{ height: 145px;}
	}
@media (max-width: 380px) {
	#menu				{ height: 180px;}
	#menu li #dropdown li		{ display: block; height: 50px; }
	}
@media (max-width: 320px) {
	#menu				{ height: 215px;}
	}
/* ----------------------------------------------------------------- */

div.quotes			{ text-align: right; padding: 0 0 20px 0}

div.quotes p span		{ display: block; font-family:'BasicallySerifFREEversionRg','Tahoma',sans-serif;
						font-size: 16px; color: #470505;
						padding: 0 0 5px 0}
						
.italic						{ font-style: italic}
div.quotes p span.italic		{ padding: 0 5px 0 0; font-size: 14px}


#l-col, #r-col      { float: right; }

#l-col				{ width: 260px; padding: 30px 0 0 0px;}
#r-col				{ width: 690px; padding: 30px 0 0 40px;}

@media (max-width: 881px) {
  #r-col         { }
  #r-col p,
  #r-col p em,
  #r-col p em span  { font-size: 18px!important;}
}
@media (max-width: 1240px) {
	#r-col              { width: calc(100% - 300px);}
}

@media (max-width: 600px) {
	#l-col				{ padding: 30px 0 0 45px}
	#r-col              { width: 89%;}

	#l-col, #r-col      { float: none; padding-left: 4%;}
  
}


#l-col p 			{  font-family:'BasicallySerifFREEversionRg','Tahoma',sans-serif;
					   font-size: 14px; color: #a09090;}

#l-col p a			{  font-family:'BasicallySerifFREEversionRg','Tahoma',sans-serif;
					   font-size: 18px; color: #a09090;
					   display: block; margin: 20px 0 0 0}

#l-col p img			{ padding: 0 0 50px 0}
					   
#l-col p a:hover	span		{ color: #470505;}


h3 						{ padding: 20px 0 50px 0;}

div.cushycms			{ font-family:'Arial','Tahoma',sans-serif;  text-align: left;
					   font-size: 14px; color: #1c1a1a;}

					   
div.cushycms h3.heading	{ color: #470505; font-family:'BasicallySerifFREEversionRg','Tahoma',sans-serif;
						  font-size: 18px; font-weight: normal;
						  padding: 40px 0 20px 0;
						  }
					   
div.cushycms p		{ padding: 0 0 30px 0; line-height: 20px;}


.backtotop			{ font-family:'Verdana','Tahoma',sans-serif;
					  font-size: 11px; color: #878787;
					  padding: 0 0 0 10px}
.backtotop:hover	{ color: #323232}


#gallery				{ padding: 30px 0 30px 0;}
#gallery div.cushycms	{ text-align: center}
#gallery p				{ }
#gallery img			{ padding: 5px }

#gallery h2			{ font-family:'Verdana',sans-serif; font-size: 18px; font-weight: normal;
					  padding: 80px 100px 20px 100px; text-transform: uppercase}
#gallery h2.bottom	{ padding: 10px 100px 50px 100px; text-transform: none}

#ah					{ clear: left; text-align: left; padding: 0 100px 0 310px; 
					  font-family: 'PetitaMediumRegular','Verdana',sans-serif;
					  font-size: 18px; color: #797979; font-weight: normal;
					  letter-spacing: 2px;}
h4					{ font-family: 'SweetlyBrokenRegular','Georgia',sans-serif;
					  font-size: 42px; color: #470202; font-weight: normal;
					  padding: 30px 0 0 0}

@media (max-width: 600px) {
    #ah                 { padding: 0 100px 0 50px; }
}
/* ----------------------------------------------------------------- */

#form-box { padding: 0 0 32px 0;}

#form-box,
#form-box table  { text-align: center; width: 100%;}

#form-box input { }

/* ====================================================
=======================================================
==================================================== */
  .reveal-modal-bg { 
    position: fixed; 
    height: 100%;
    width: 100%;
    background: #000;
    background: rgba(0,0,0,.7);
    z-index: 100;
    display: none;
    top: 0;
    left: 0; 
    }
  
  .reveal-modal {
    visibility: hidden;
    top: 280px; 
    left: 50%;
    margin-left: -195px;
    width: 320px;
    background: #eee url(../graphs/modal-gloss.png) no-repeat -200px -80px;
    position: absolute;
    z-index: 99999999999;
    padding: 10px 40px 10px 40px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px;
    -moz-box-shadow: 0 0 10px rgba(0,0,0,.4);
    -webkit-box-shadow: 0 0 10px rgba(0,0,0,.4);
    -box-shadow: 0 0 10px rgba(0,0,0,.4);
    }
    
 .reveal-modal form { border: solid #470202 2px;-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px; padding: 1em;  width: 80%; margin: 0 auto;  font-family: 'Tenor Sans', sans-serif; font-size: 0.8em; line-height: 1em}





  .reveal-modal form span, 
  .reveal-modal form input,
  .reveal-modal form textarea   { display: block; text-align: left; width: 90%; margin: 0 auto;}
  
  .reveal-modal .close-reveal-modal {
    font-size: 22px;
    line-height: .5;
    position: absolute;
    top: 8px;
    right: 11px;
    color: #aaa;
    text-shadow: 0 -1px 1px rbga(0,0,0,.6);
    font-weight: bold;
    cursor: pointer;
    } 



.send-info   { font-family: "Arial";}



div.transbox        { padding-right: 5%;}
em.person       	{ display: block; float: right; padding: 15px 0 0 0;}





#footer 	{ display: block; position: relative; clear: both; max-width: 1221px; height: 27px; margin-top: -27px; }
		  
#footer div		{ padding: 5px 0 0 17%; background: url(../graphs/bg-footer-border.png);  background-repeat: no-repeat; background-position: top right;
				  font-family:'BasicallySerifFREEversionRg','Tahoma',sans-serif;
				  font-size: 11px; color: #370000;
                  
				  }



#footer div span            { padding: 0 0 0 50px}
#footer div p	     { display: inline-block;float: left; margin: 0 20px 0 40px;}
#footer div p .statcounter      { padding: 0;}



#footer div a		{ font-family:'BasicallySerifFREEversionRg','Tahoma',sans-serif;
				  font-size: 11px; color: #370000;}

@media (max-width: 780px) {
#footer div     { padding: 5px 0 0 20px; }
#footer div p        { display: inline-block;float: left; margin: 0 20px 0 0px;}
    }
@media (max-width: 530px) {

#footer     { height: 67px; margin-top: -67px; }

#footer div span            { padding: 10px 0 0 21px; display: block; }
    }



#facebook-right 	{ width: 522px;
	position: fixed;
	left: -480px;
	bottom: 15%;
	z-index: 300;
}

#facebook-right #facebook-icon { 
    float: right;
    height: 42px;
    width: 42px;
	background-image: url("../graphs/fb.png");
}

#facebook-right #facebook-app { min-height: 28px; padding: 8px 0 0 24px;
    background-color: #FFFFFF;
    border: 3px solid #123776;
    float: right;
}