/*
 * HTML5 Boilerplate
 *
 * What follows is the result of much research on cross-browser styling.
 * Credit left inline and big thanks to Nicolas Gallagher, Jonathan Neal,
 * Kroc Camen, and the H5BP dev community and team.
 */

/* =============================================================================
   RESET CSS
   ========================================================================== */
	/*Headings*/
	h1,h2,h3,h4,h5,h6{font-size:1em;line-height:1em;margin:0;font-weight:normal;}
	/*Text elements*/
	p{margin:0;}
	ul,ol,li,dl,dd{margin:0;padding:0;}
	ul{list-style-type:none;}
	ol{list-style-type:decimal;}
	dl dt{font-weight:normal;}
	fieldset {padding:0; margin:0; border:none;}
	address{margin:0;font-style:normal;}
	del{color:#000;}
	blockquote{margin:1.5em;}
	strong{font-weight:normal;}
	em,dfn{font-style:italic;}
	dfn{font-weight:bold;}
	pre,code{margin:1.5em 0;white-space:pre;}
	pre,code,tt{font:1em monospace;line-height:1.5;}
	tt{display:block;margin:1.5em 0;line-height:1.5;}
	/*Tables*/
	table {margin-bottom:1.4em;}
	th{font-weight:bold;}
	td {}
	th,td{padding: 0;}
	/*cfix*/
	.cfix:after{clear:both;content:'.';display:block;visibility:hidden;height:0;}
	.cfix{display:inline-block;}
	* html .cfix{height:1%;}
	.cfix{display:block;}


/* =============================================================================
   STYLE BASIC ELEMENTS
   ========================================================================== */
   
   .blue 				{color:#62c8d0}
   .pink-purple 		{color:#bd1e61}
   .dark-pink-purple 	{color:#6d0e3a}
   .green 				{color:#9ccc3c}
   
   
	body {font-family: Arial, verdana, sans-serif; background-color:#fff; color:#bd1e61; font-size:75%;margin:0;padding:0; position:relative; zoom:1; line-height:1.7;}
	
	h1,h2,h3,h4,h5,h6					{line-height:1.2em;margin-bottom:10px; font-weight:normal;zoom:1;color:#bd1e61}
	p,dl,ul,ol,pre,blockquote,fieldset 	{margin-bottom:20px; }
	textarea, input 					{font-family: 'din',arial,verdana,tahoma; background-color:#f6f6f6; color:#bd1e61; border:1px solid #dddddd; padding:10px 8px; display:inline-block;-moz-border-radius:2px;-webkit-border-radius:2px;border-radius:2px;}
	ul,ol,dl							{margin-left:25px;}
	
/* basic table style */
	table caption	{position:absolute; left:-9999px; font-size:0; line-height:0}
	table th		{background-color:#fff; color:#8c8c8c; padding:5px 10px;}
	table thead th	{border-bottom:1px solid #b1b1b1; text-align:left}
	table td		{padding:5px; border-bottom:1px solid #efefef;}
	table th,
	table td		{padding:5px 10px;}
	table .alt		{background-color:#fafafa; color:#8c8c8c}
	
/* headings */
	h1 {font-size:360%}
	h2 {font-size:380%}
	h3 {font-size:200%}
	h4 {font-size:130%;}
	h5 {font-size:100%}
	h6 {font-size:90%}
	
/* custom generic style for common elements */
	acronym			{text-decoration:none; border-bottom:none; cursor:help}
	table			{border:none border-collapse:collapse; margin-left:0; margin-bottom:15px; text-align:left; width:100%;}
	form            {margin:0;padding:0}
	a:hover img 	{alpha(opacity=80);opacity:.80; -moz-opacity: 0.80;}
	
/* default links states */ 
	a:link 			{color:#09F; text-decoration:none}
	a:visited 		{color:#09F; text-decoration:none}
	a:hover 		{color:#555; text-decoration:underline}
	a:focus     	{color:#555; text-decoration:underline}

	legend span {position:absolute;left:-9999px;}


/* ==========================================================================
   Base styles: opinionated defaults
   ========================================================================== */

html,
button,
input,
select,
textarea {
    color: #222;
}

/*
 * Remove text-shadow in selection highlight: h5bp.com/i
 * These selection declarations have to be separate.
 * Customize the background color to match your design.
 */

::-moz-selection {
    background: #b3d4fc;
    text-shadow: none;
}

::selection {
    background: #b3d4fc;
    text-shadow: none;
}

/*
 * A better looking default horizontal rule
 */

hr {
    display: block;
    height: 1px;
    border: 0;
    border-top: 1px solid #ccc;
    margin: 1em 0;
    padding: 0;
}

/*
 * Remove the gap between images and the bottom of their containers: h5bp.com/i/440
 */

img {
    vertical-align: middle;
}

/*
 * Remove default fieldset styles.
 */

fieldset {
    border: 0;
    margin: 0;
    padding: 0;
}

/*
 * Allow only vertical resizing of textareas.
 */

textarea {
    resize: vertical;
}

/* ==========================================================================
   Chrome Frame prompt
   ========================================================================== */

.chromeframe {
    margin: 0.2em 0;
    background: #ccc;
    color: #000;
    padding: 0.2em 0;
}

/* ==========================================================================
   Fonts
   ========================================================================== */

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

/* ==========================================================================
   Author's custom styles
   ========================================================================== */



   .blue        {color:#62c8d0}
   .pink-purple     {color:#bd1e61}
   .dark-pink-purple  {color:#6d0e3a}
   .green         {color:#9ccc3c}
   
  .container {margin:0 auto; width:960px;padding: 0;}
  
  nav .logo {background: url('../img/logo-nav.png') no-repeat 0 0; width: 50px; height: 60px; text-indent: -9999px; display: block;float:left; position: absolute;left:0;top:-8px;}
  nav .container {position: relative;zoom:1;}
  body {font-family:'populaireregular',arial;}
  body > nav {background-color:#bd1e61; color:#fff;margin:0;padding:0; position:fixed;top:0;left:0;width:100%; z-index: 10; -moz-box-shadow:0 0 15px rgba(0,0,0,0.2);-webkit-box-shadow:0 0 15px rgba(0,0,0,0.3);box-shadow:0 0 15px rgba(0,0,0,0.3);}
  body > nav ul {margin:0; padding:0; overflow:hidden;zoom:1;padding-left: 90px; height: 57px;}
  body > nav li {margin:0 auto; padding:0; display:inline-block; text-align:center}
  body > nav a {display:block;margin:0;padding:10px 15px; font-size:180%; color:#fff; text-decoration:none;}
    body > nav li a:link     {color:#fff;}
    body > nav li a:visited  {color:#fff;}
    body > nav li a:hover    {color:#fff; background-color:#6d0e3a; text-decoration:none;}
    body > nav li a:focus    {color:#fff;}

    
  #hero {color:#fff; padding:100px 0 0;background-color:#62c8d0;}
  #hero .container {height: 755px;}
  #hero p { text-align:center; font-size:140%;line-height:1.2; text-shadow:1px 1px 1px rgba(0,0,0,0.25); margin-bottom: 0}
  #hero p strong {display:block; margin:0 auto; font-size:180%; font-weight: normal;}
  #hero h1 {text-indent:-9999px; margin:0 auto;padding:0; width:880px; height:525px; background:#62c8d0 url('../img/logo-main.png') no-repeat 50% 50%}
  #hero .actions {margin: 0;padding:0; background-color: #ddd; position: relative;zoom:1;}

  .actions li {display: block;margin:0;padding:0;}
  .actions a {display: block; font-size: 300%; width: 367px; height: 155px;padding-top:35px; position: absolute; top: 0;text-align: center;}
    .actions a:link     {color:#fff;}
    .actions a:visited  {color:#fff;}
    .actions a:hover    {color:#fff; text-decoration: none;}
    .actions a:focus    {color:#fff;}
  .actions .tickets a {padding:76px 100px 0 40px; width:215px;text-align: left; font-size:195%;height:173px; left:120px; background: url('../img/btn-bg-left_inside-out.png') no-repeat 0 0;}
  .actions .fb a {width:337px;height:123px;padding-top:82px;left:480px;/* 500px */ background: url('../img/btn-bg-right.png') no-repeat 0 50px; font-size: 220%; text-align: left;padding-left:30px;}
  .fb a span {display:block; position: absolute;left:-9999px;}
  /*
  .actions .tickets a:hover {background-image:url('../img/btn-bg-left_HOVER.png');} 
  .actions .fb a:hover {background-image:url('../img/btn-bg-right_HOVER.png');}
  */

.grass-overlay {background: url('../img/white-grass_transparent.png') repeat-x 50% 0;margin:0;padding:0;height:100px; position: relative;zoom:1; z-index: 5; margin-top: -50px;}

  .block {display:block; padding:70px 0; text-align:center;}
  .block .container {min-height:300px;}
  .block h2 {margin-bottom:30px;}
  
  .block-what .container {}
  .img-what {margin-bottom: 30px;display:block;}
  .block-what p {margin:0 auto;padding:0; font-size:300%; line-height:1.2;}
  .block-where .map {display: block; margin-bottom: 20px}
  
  .info-panels {margin:0 auto 50px; padding:0; overflow:hidden;zoom:1; font-size:240%; line-height:1.2; text-align:center;}
  .info-panels li {margin:0 20px;padding:60px 30px 50px; display:inline-block; width:160px;height:110px;-moz-border-radius:110px;-webkit-border-radius:110px;border-radius:110px; background-color:#62c8d0;color:#fff; text-align:center; overflow:hidden; vertical-align:middle;}
  .info-panels li:nth-child(1) {padding-top:80px;height:90px;}
  .info-panels li em {font-size:80%; font-style:normal;}
  .info-panels dl {margin:-10px auto 0;padding:0;}
  .info-panels dt,
  .info-panels dd {display:inline-block;}

  .block-when .container > p {font-size: 180%; margin-bottom: 15px; line-height: 1.3;}

  .block-where .address {font-size: 200%; line-height: 1.3; padding-left: 289px; text-align: left;}

  .block-what-do-i-need {min-height: 800px;}
  .block-what-do-i-need p {font-size: 250%; line-height: 1.3;}









/* ==========================================================================
   Helper classes
   ========================================================================== */

/*
 * Image replacement
 */

.ir {
    background-color: transparent;
    border: 0;
    overflow: hidden;
    /* IE 6/7 fallback */
    *text-indent: -9999px;
}

.ir:before {
    content: "";
    display: block;
    width: 0;
    height: 100%;
}

/*
 * Hide from both screenreaders and browsers: h5bp.com/u
 */

.hidden {
    display: none !important;
    visibility: hidden;
}

/*
 * Hide only visually, but have it available for screenreaders: h5bp.com/v
 */

.visuallyhidden {
    border: 0;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
}

/*
 * Extends the .visuallyhidden class to allow the element to be focusable
 * when navigated to via the keyboard: h5bp.com/p
 */

.visuallyhidden.focusable:active,
.visuallyhidden.focusable:focus {
    clip: auto;
    height: auto;
    margin: 0;
    overflow: visible;
    position: static;
    width: auto;
}

/*
 * Hide visually and from screenreaders, but maintain layout
 */

.invisible {
    visibility: hidden;
}

/* ==========================================================================
   EXAMPLE Media Queries for Responsive Design.
   Theses examples override the primary ('mobile first') styles.
   Modify as content requires.
   ========================================================================== */

@media only screen and (min-width: 1024px) {

}

@media only screen and (-webkit-min-device-pixel-ratio: 1.5),
       only screen and (min-resolution: 144dpi) {
    /* Style adjustments for high resolution devices */
}

/* ==========================================================================
   Print styles.
   Inlined to avoid required HTTP connection: h5bp.com/r
   ========================================================================== */

@media print {
    * {
        background: transparent !important;
        color: #000 !important; /* Black prints faster: h5bp.com/s */
        box-shadow:none !important;
        text-shadow: none !important;
    }

    a,
    a:visited {
        text-decoration: underline;
    }

    a[href]:after {
        content: " (" attr(href) ")";
    }

    abbr[title]:after {
        content: " (" attr(title) ")";
    }

    /*
     * Don't show links for images, or javascript/internal links
     */

    .ir a:after,
    a[href^="javascript:"]:after,
    a[href^="#"]:after {
        content: "";
    }

    pre,
    blockquote {
        border: 1px solid #999;
        page-break-inside: avoid;
    }

    thead {
        display: table-header-group; /* h5bp.com/t */
    }

    tr,
    img {
        page-break-inside: avoid;
    }

    img {
        max-width: 100% !important;
    }

    @page {
        margin: 0.5cm;
    }

    p,
    h2,
    h3 {
        orphans: 3;
        widows: 3;
    }

    h2,
    h3 {
        page-break-after: avoid;
    }
}