Concierto en familia 2013

git-svn-id: https://192.168.0.254/svn/Proyectos.ConciertoEnFamilia2013_Web/trunk/www@2 e93497c2-1ea5-354b-87df-d62054e007c0

css/alpha_background.css

@@ -0,0 +1,50 @@
+/*--------------------------------------------------------------------------
+   
+	Eventcamp
+
+	* Alpha Backgrounds
+
+--------------------------------------------------------------------------*/
+
+/* Black Transparent Background Presets */
+.bg_alpha5 { background-image: url(../images/alpha/bg_alpha5.png); }
+.bg_alpha10 { background-image: url(../images/alpha/bg_alpha10.png); }
+.bg_alpha15 { background-image: url(../images/alpha/bg_alpha15.png); }
+.bg_alpha20 { background-image: url(../images/alpha/bg_alpha20.png); }
+.bg_alpha25 { background-image: url(../images/alpha/bg_alpha25.png); }
+.bg_alpha30 { background-image: url(../images/alpha/bg_alpha30.png); }
+.bg_alpha35 { background-image: url(../images/alpha/bg_alpha35.png); }
+.bg_alpha40 { background-image: url(../images/alpha/bg_alpha40.png); }
+.bg_alpha45 { background-image: url(../images/alpha/bg_alpha45.png); }
+.bg_alpha50 { background-image: url(../images/alpha/bg_alpha50.png); }
+.bg_alpha55 { background-image: url(../images/alpha/bg_alpha55.png); }
+.bg_alpha60 { background-image: url(../images/alpha/bg_alpha60.png); }
+.bg_alpha65 { background-image: url(../images/alpha/bg_alpha65.png); }
+.bg_alpha70 { background-image: url(../images/alpha/bg_alpha70.png); }
+.bg_alpha75 { background-image: url(../images/alpha/bg_alpha75.png); }
+.bg_alpha80 { background-image: url(../images/alpha/bg_alpha80.png); }
+.bg_alpha85 { background-image: url(../images/alpha/bg_alpha85.png); }
+.bg_alpha90 { background-image: url(../images/alpha/bg_alpha90.png); }
+.bg_alpha95 { background-image: url(../images/alpha/bg_alpha95.png); }
+
+
+/* White Transparent Background Presets */
+.bg_alpha5_white { background-image: url(../images/alpha/bg_alpha5_white.png); }
+.bg_alpha10_white { background-image: url(../images/alpha/bg_alpha10_white.png); }
+.bg_alpha15_white { background-image: url(../images/alpha/bg_alpha15_white.png); }
+.bg_alpha20_white { background-image: url(../images/alpha/bg_alpha20_white.png); }
+.bg_alpha25_white { background-image: url(../images/alpha/bg_alpha25_white.png); }
+.bg_alpha30_white { background-image: url(../images/alpha/bg_alpha30_white.png); }
+.bg_alpha35_white { background-image: url(../images/alpha/bg_alpha35_white.png); }
+.bg_alpha40_white { background-image: url(../images/alpha/bg_alpha40_white.png); }
+.bg_alpha45_white { background-image: url(../images/alpha/bg_alpha45_white.png); }
+.bg_alpha50_white { background-image: url(../images/alpha/bg_alpha50_white.png); }
+.bg_alpha55_white { background-image: url(../images/alpha/bg_alpha55_white.png); }
+.bg_alpha60_white { background-image: url(../images/alpha/bg_alpha60_white.png); }
+.bg_alpha65_white { background-image: url(../images/alpha/bg_alpha65_white.png); }
+.bg_alpha70_white { background-image: url(../images/alpha/bg_alpha70_white.png); }
+.bg_alpha75_white { background-image: url(../images/alpha/bg_alpha75_white.png); }
+.bg_alpha80_white { background-image: url(../images/alpha/bg_alpha80_white.png); }
+.bg_alpha85_white { background-image: url(../images/alpha/bg_alpha85_white.png); }
+.bg_alpha90_white { background-image: url(../images/alpha/bg_alpha90_white.png); }
+.bg_alpha95_white { background-image: url(../images/alpha/bg_alpha95_white.png); }

css/grid.css

@@ -0,0 +1,254 @@
+/*--------------------------------------------------------------------------
+   
+    Eventcamp
+    
+    * Grid system based on Skeleton v1.1
+    * Custom CSS for different viewports are listed at responsive_custom.css
+
+    * Gutter sizes for the base 960 grid was increased to 40px
+    * Copyright 2011, Dave Gamache
+    * www.getskeleton.com
+    * Free to use under the MIT license.
+    * http://www.opensource.org/licenses/mit-license.php
+    * 8/17/2011
+    
+--------------------------------------------------------------------------*/
+
+
+
+/* Table of Contents
+==================================================
+    #Base 960 Grid
+    #Tablet (Portrait)
+    #Mobile (Portrait)
+    #Mobile (Landscape)
+    #Clearing */
+
+
+
+/* #Base 960 Grid
+================================================== */
+
+    .container                                  { position: relative; width: 960px; margin: 0 auto; padding: 0; }
+    .container .column,
+    .container .columns                         { float: left; display: inline; margin-left: 20px; margin-right: 20px; }
+    .row                                        { margin-bottom: 20px; }
+
+    /* Nested Column Classes */
+    .column.alpha, .columns.alpha               { margin-left: 0; }
+    .column.omega, .columns.omega               { margin-right: 0; }
+
+    /* Base Grid */
+    .container .one.column,
+    .container .one.columns                     { width: 20px;  }
+    .container .two.columns                     { width: 80px; }
+    .container .three.columns                   { width: 140px; }
+    .container .four.columns                    { width: 200px; }
+    .container .five.columns                    { width: 260px; }
+    .container .six.columns                     { width: 320px; }
+    .container .seven.columns                   { width: 380px; }
+    .container .eight.columns                   { width: 440px; }
+    .container .nine.columns                    { width: 500px; }
+    .container .ten.columns                     { width: 560px; }
+    .container .eleven.columns                  { width: 620px; }
+    .container .twelve.columns                  { width: 680px; }
+    .container .thirteen.columns                { width: 740px; }
+    .container .fourteen.columns                { width: 800px; }
+    .container .fifteen.columns                 { width: 860px; }
+    .container .sixteen.columns                 { width: 920px; }
+
+    /* Offsets */
+    .container .offset-by-one                   { padding-left: 60px;  }
+    .container .offset-by-two                   { padding-left: 120px; }
+    .container .offset-by-three                 { padding-left: 180px; }
+    .container .offset-by-four                  { padding-left: 240px; }
+    .container .offset-by-five                  { padding-left: 300px; }
+    .container .offset-by-six                   { padding-left: 360px; }
+    .container .offset-by-seven                 { padding-left: 420px; }
+    .container .offset-by-eight                 { padding-left: 480px; }
+    .container .offset-by-nine                  { padding-left: 540px; }
+    .container .offset-by-ten                   { padding-left: 600px; }
+    .container .offset-by-eleven                { padding-left: 660px; }
+    .container .offset-by-twelve                { padding-left: 720px; }
+    .container .offset-by-thirteen              { padding-left: 780px; }
+    .container .offset-by-fourteen              { padding-left: 840px; }
+    .container .offset-by-fifteen               { padding-left: 900px; }
+
+
+
+/* #Tablet (Portrait)
+================================================== */
+
+    /* Note: Design for a width of 768px */
+
+    @media only screen and (min-width: 768px) and (max-width: 959px) {
+        .container                                  { width: 768px; }
+        .container .column,
+        .container .columns                         { margin-left: 10px; margin-right: 10px;  }
+        .column.alpha, .columns.alpha               { margin-left: 0; margin-right: 10px; }
+        .column.omega, .columns.omega               { margin-right: 0; margin-left: 10px; }
+        .alpha.omega                                { margin-left: 0; margin-right: 0; }
+
+        .container .one.column,
+        .container .one.columns                     { width: 28px; }
+        .container .two.columns                     { width: 76px; }
+        .container .three.columns                   { width: 124px; }
+        .container .four.columns                    { width: 172px; }
+        .container .five.columns                    { width: 220px; }
+        .container .six.columns                     { width: 268px; }
+        .container .seven.columns                   { width: 316px; }
+        .container .eight.columns                   { width: 364px; }
+        .container .nine.columns                    { width: 412px; }
+        .container .ten.columns                     { width: 460px; }
+        .container .eleven.columns                  { width: 508px; }
+        .container .twelve.columns                  { width: 556px; }
+        .container .thirteen.columns                { width: 604px; }
+        .container .fourteen.columns                { width: 652px; }
+        .container .fifteen.columns                 { width: 700px; }
+        .container .sixteen.columns                 { width: 748px; }
+
+        /* Offsets */
+        .container .offset-by-one                   { padding-left: 48px; }
+        .container .offset-by-two                   { padding-left: 96px; }
+        .container .offset-by-three                 { padding-left: 144px; }
+        .container .offset-by-four                  { padding-left: 192px; }
+        .container .offset-by-five                  { padding-left: 240px; }
+        .container .offset-by-six                   { padding-left: 288px; }
+        .container .offset-by-seven                 { padding-left: 336px; }
+        .container .offset-by-eight                 { padding-left: 348px; }
+        .container .offset-by-nine                  { padding-left: 432px; }
+        .container .offset-by-ten                   { padding-left: 480px; }
+        .container .offset-by-eleven                { padding-left: 528px; }
+        .container .offset-by-twelve                { padding-left: 576px; }
+        .container .offset-by-thirteen              { padding-left: 624px; }
+        .container .offset-by-fourteen              { padding-left: 672px; }
+        .container .offset-by-fifteen               { padding-left: 720px; }
+    }
+
+
+
+/*  #Mobile (Portrait)
+================================================== */
+
+    /* Note: Design for a width of 320px */
+
+    @media only screen and (max-width: 767px) {
+        .container { width: 300px; }
+        .container .columns,
+        .container .column { margin: 0; }
+
+        .container .one.column,
+        .container .one.columns,
+        .container .two.columns,
+        .container .three.columns,
+        .container .four.columns,
+        .container .five.columns,
+        .container .six.columns,
+        .container .seven.columns,
+        .container .eight.columns,
+        .container .nine.columns,
+        .container .ten.columns,
+        .container .eleven.columns,
+        .container .twelve.columns,
+        .container .thirteen.columns,
+        .container .fourteen.columns,
+        .container .fifteen.columns,
+        .container .sixteen.columns { width: 300px; }
+
+        /* Offsets */
+        .container .offset-by-one,
+        .container .offset-by-two,
+        .container .offset-by-three,
+        .container .offset-by-four,
+        .container .offset-by-five,
+        .container .offset-by-six,
+        .container .offset-by-seven,
+        .container .offset-by-eight,
+        .container .offset-by-nine,
+        .container .offset-by-ten,
+        .container .offset-by-eleven,
+        .container .offset-by-twelve,
+        .container .offset-by-thirteen,
+        .container .offset-by-fourteen,
+        .container .offset-by-fifteen { padding-left: 0; }
+
+    }
+	
+	
+
+
+/* #Mobile (Landscape)
+================================================== */
+
+    /* Note: Design for a width of 480px */
+
+    @media only screen and (min-width: 480px) and (max-width: 767px) {
+        .container { width: 420px; }
+        .container .columns,
+        .container .column { margin: 0; }
+
+        .container .one.column,
+        .container .one.columns,
+        .container .two.columns,
+        .container .three.columns,
+        .container .four.columns,
+        .container .five.columns,
+        .container .six.columns,
+        .container .seven.columns,
+        .container .eight.columns,
+        .container .nine.columns,
+        .container .ten.columns,
+        .container .eleven.columns,
+        .container .twelve.columns,
+        .container .thirteen.columns,
+        .container .fourteen.columns,
+        .container .fifteen.columns,
+        .container .sixteen.columns { width: 420px; }
+    }
+
+
+
+/* #Clearing
+================================================== */
+
+    /* Self Clearing Goodness */
+    .container:after { content: "\0020"; display: block; height: 0; clear: both; visibility: hidden; }
+
+    /* Use clearfix class on parent to clear nested columns,
+    or wrap each row of columns in a <div class="row"> */
+    .clearfix:before,
+    .clearfix:after,
+    .row:before,
+    .row:after {
+      content: '\0020';
+      display: block;
+      overflow: hidden;
+      visibility: hidden;
+      width: 0;
+      height: 0; }
+    .row:after,
+    .clearfix:after {
+      clear: both; }
+    .row,
+    .clearfix {
+      zoom: 1; }
+
+    /* You can also use a <br class="clear" /> to clear columns */
+    .clear {
+      clear: both;
+      display: block;
+      overflow: hidden;
+      visibility: hidden;
+      width: 0;
+      height: 0;
+    }
+
+
+
+/* #Images
+================================================== */
+
+	img.scale-with-grid {
+	  max-width: 100%;
+	  height: auto;
+	}

css/responsive_custom.css

@@ -0,0 +1,256 @@
+/*--------------------------------------------------------------------------
+   
+    Eventcamp
+
+    * Css override for mobile viewports
+
+--------------------------------------------------------------------------*/
+
+/* #Tablet (Portrait)
+================================================== */
+
+    /* Note: Design for a width of 768px */
+
+    @media only screen and (min-width: 768px) and (max-width: 959px) {
+        /* No specific adjustment for tablet viewports */
+
+        #section-about .item {
+            height: auto;
+            margin-bottom: 30px;
+        }
+
+            #section-about .item p.bio {
+                position: relative;
+                background: #111;
+            }
+    }
+
+
+/*  #Mobile (Portrait)
+================================================== */
+
+    /* Note: Design for a width of 320px */
+
+    @media only screen and (max-width: 767px) {
+        
+        /* Resize section titles and descriptions in the mobile viewports */
+        h2 {
+            font-size: 20px!important;
+            line-height: 30px!important;
+        }
+
+        p.desc {
+            font-size: 13px!important;
+            line-height: 23px!important;
+        }
+
+        /* Remove the alpha background in the top bar */
+        #topbar-inner {
+            background: transparent;
+        }
+
+        /* Style the menu in case user doesn't have javascript */
+        #section-topbar ul#nav {
+            float: right;
+            position: relative;
+            margin-top: 5px;
+        }
+
+        #section-topbar ul#nav > li {
+            display: block;
+            float: left;
+        }
+
+        #section-topbar ul#nav a {
+          display: block;
+          padding: 10px 20px 15px 20px;
+          font: normal 11px/18px 'Open Sans', "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif;
+          text-decoration: none;
+          text-transform: uppercase;
+          border-top: 3px solid #000;
+        }
+
+            #section-topbar ul#nav a:hover {
+              border-top: 3px solid #fff;
+              text-decoration: none;
+            }
+
+            #section-topbar ul#nav .active a {
+                border-top: 3px solid #fff;
+            }
+
+
+        /* Hide the regular menu and display a select box (javascript in js/jquery.custom.js) */
+        .js #nav { display: none!important; }
+        .js .selectnav { display: block; }
+
+
+        /* Select box (dropdown menu) styling */
+        /* http://www.webinterfacelab.com/snippets/dark-and-light-dropdown-lists */
+        .dropdown {
+            display: inline-block;
+            position: relative;
+            overflow: hidden;
+            height: 28px;
+            width: 200px;
+            background: #111;
+            border: 1px solid #111;
+            -webkit-box-shadow: inset 0 1px rgba(255, 255, 255, 0.1), 0 1px 1px rgba(0, 0, 0, 0.2);
+            box-shadow: inset 0 1px rgba(255, 255, 255, 0.1), 0 1px 1px rgba(0, 0, 0, 0.2);
+        }
+
+        .dropdown:before, .dropdown:after {
+            content: '';
+            position: absolute;
+            z-index: 2;
+            top: 9px;
+            right: 10px;
+            width: 0;
+            height: 0;
+            border: 4px dashed;
+            border-color: #888 transparent;
+            pointer-events: none;
+        }
+
+        .dropdown:before {
+            border-bottom-style: solid;
+            border-top: none;
+        }
+
+        .dropdown:after {
+            margin-top: 7px;
+            border-top-style: solid;
+            border-bottom: none;
+        }
+
+        .dropdown select {
+            position: relative;
+            width: 130%;
+            margin: 0;
+            padding: 6px 8px 6px 10px;
+            height: 28px;
+            line-height: 14px;
+            font-size: 12px;
+            color: #aaa;
+            text-shadow: 0 1px black;
+            /* Fallback for IE 8 */
+            background: #444;
+            /* "transparent" doesn't work with Opera */
+            background: rgba(0, 0, 0, 0) !important;
+            border: 0;
+            border-radius: 0;
+            -webkit-appearance: none;
+            outline: none;
+        }
+
+        .dropdown select:focus {
+            z-index: 3;
+            width: 100%;
+            color: #ccc;
+            outline: none;
+        }
+
+        .dropdown select > option {
+            margin: 3px;
+            padding: 6px 8px;
+            background: #444;
+            text-shadow: 0 1px rgba(0, 0, 0, 0.4);
+            border-radius: 3px;
+            cursor: pointer;
+        }
+
+
+        /* Fix for IE 8 putting the arrows behind the select element. */
+        .lt-ie9 .dropdown {
+            z-index: 1;
+        }
+
+        .lt-ie9 .dropdown select {
+            z-index: -1;
+        }
+
+        .lt-ie9 .dropdown select:focus {
+            z-index: 3;
+        }
+
+        /* Dirty fix for Firefox adding padding where it shouldn't. */
+        @-moz-document url-prefix() {
+            .dropdown select {
+                padding-left: 6px;
+            }
+        }
+
+        /* Adjust the site logo top/bottom margins */
+        #section-event h1 {
+            margin: 90px 0 70px 0;
+        }
+
+        /* Assign bottom margins to the event information boxes */
+        #section-event h2 {
+            margin-bottom: 30px;
+        }
+
+        #section-info #box-date, 
+        #section-info #box-time {
+            margin-bottom: 30px;
+        }
+
+        #section-info #box-location {
+            margin-bottom: 20px;
+        }
+
+        /* Remove the gradient background in div#section-speakers */
+        #section-fees {
+            background: #222;
+        }
+
+        #section-about .item {
+            height: auto;
+            margin-bottom: 30px;
+        }
+
+            #section-about .container .half.column {
+                width: 100%;
+            }
+
+            #section-about .item p.bio {
+                position: relative;
+                background: #111;
+            }
+
+        #section-program p.composer,
+        #section-program p.title {
+            font-size: 14px;
+            line-height: 26px;
+        }
+
+        #section-contact label.placeholder {
+            display: none;
+        }
+
+        #section-sponsors img {
+            max-width: 60%;
+            margin-bottom: 30px;
+        }
+        
+        /* Adjust footer social media menu */
+        #section-footer ul#social {
+            float: none;
+        }
+
+            #section-footer ul#social li a {
+                background: #111;
+                border-right: 1px solid #000;
+            }
+    }
+	
+	
+
+/* #Mobile (Landscape)
+================================================== */
+
+    /* Note: Design for a width of 480px */
+
+    @media only screen and (min-width: 480px) and (max-width: 767px) {
+
+    }

css/style.css

@@ -0,0 +1,777 @@
+/*--------------------------------------------------------------------------
+   
+	Eventcamp
+
+	0. YUI Library is used for CSS reset (http://yuilibrary.com/yui/docs/cssreset/)
+	1. Body
+	2. Typography
+	3. Page Sections
+		3.1. Topbar
+		3.2. Event Information
+		3.3. Invitation
+		3.4. About
+		3.5. Concert Program
+		3.6. Tickets
+		3.7. Map
+		3.8. Contact
+		3.9. Sponsors
+		3.10. Footer
+	4. Forms
+
+--------------------------------------------------------------------------*/
+
+/*--------------------------------------------------------------------------
+	1. Body
+--------------------------------------------------------------------------*/
+
+body {
+	color: #333;
+	background: #f6f6f6;
+	font: normal 16px/28px 'Open Sans', "Helvetica Neue", Helvetica, Arial, sans-serif;
+	-webkit-font-smoothing: antialiased; /* Fix for webkit rendering */
+	-webkit-text-size-adjust: 100%;
+}
+
+
+
+/*--------------------------------------------------------------------------
+	2. Typography
+--------------------------------------------------------------------------*/
+
+/* Links */
+a, a:visited { color: #333; text-decoration: none; outline: 0; }
+a:hover, a:focus { color: #666; }
+p a, p a:visited { line-height: inherit; }
+
+/* Font stylings */
+em { font-style: italic; }
+strong { font-weight: bold; }
+small { font-size: 80%; }
+
+
+
+/*--------------------------------------------------------------------------
+	3. Sections
+
+	* Each block of the HTML page is named similar to "section-name"
+	* If you don't need a specific section, just remove the whole section div block in the HTML file
+--------------------------------------------------------------------------*/
+
+h2 { 
+	font: bold 36px/48px 'Open Sans', "Helvetica Neue", Helvetica, Arial, sans-serif;
+	text-transform: uppercase;
+}
+
+p.desc {
+	font: normal 14px/26px 'Open Sans', "Helvetica Neue", Helvetica, Arial, sans-serif;
+}
+
+/* Font colors */
+.font-color-primary {
+	color: #b90504;
+}
+
+.font-color-white {
+	color: #f6f6f6 !important;
+}
+
+/* Colors - Underline */
+.underline-color-primary {
+	border-bottom: 1px solid #b90504;
+}
+
+img { max-width: 100%; }
+
+
+
+	/*---------------------------------------------------
+		3.1 Topbar
+
+		* This is the fixed top navigation
+	---------------------------------------------------*/
+
+	/* Topbar (fixed) */
+	/* Please refer to responsive_custom.css for CSS in smaller viewport */
+	#section-topbar {
+		height: 40px;
+		position: fixed;
+		top: 0;
+		left: 0;
+		right: 0;
+		z-index: 10000;
+		overflow: visible;
+		font: normal normal 16px/24px 'Open Sans', "Helvetica Neue", Helvetica, Arial, sans-serif;
+	}
+
+	#section-topbar a {
+	  color: #f6f6f6;
+	}
+
+	#topbar-inner {
+		/*	*	*	*	*	*	*	*	*	*	*	*
+			bg_alpha50.png file is used for transparent background 
+			Look in the documentation file for usages of transparent png overlays
+		*	*	*	*	*	*	*	*	*	*	*	*/
+		background: url('../images/alpha/bg_alpha50.png');
+	}
+
+	/*	*	*	*	*	*	*	*	*	*	*	*
+		In mobile viewports, the list menu is converted to "select" element via javascript
+		https://github.com/lukaszfiszer/selectnav.js
+	*	*	*	*	*	*	*	*	*	*	*	*/
+	.selectnav { display: none; }
+
+
+	/*
+		Top Bar
+
+		By default, top navigation bar uses "fixed" position
+		Menu collapses in mobile viewports
+		Refer to css/responsive_custom.css for mobile layouts
+	*/
+	#section-topbar ul#nav {
+		display: block;
+		float: right;
+		position: relative;
+		margin: 0;
+	}
+
+	#section-topbar ul#nav > li {
+		display: block;
+		float: left;
+	}
+
+
+	#section-topbar ul#nav a {
+	  display: block;
+	  padding: 10px 20px 15px 20px;
+          font: bold 13px/22px 'Open Sans',"Helvetica Neue",Helvetica,Arial,sans-serif;
+          font-weight: normal;
+	  text-decoration: none;
+	}
+
+		#section-topbar ul#nav a {
+			border-top: 3px solid #000;
+		}
+
+		#section-topbar ul#nav a:hover {
+		  border-top: 3px solid #b90504;
+		  text-decoration: none;
+		}
+
+		#section-topbar ul#nav .active a {
+			border-top: 3px solid #b90504;
+		}
+
+
+
+	/*---------------------------------------------------
+		3.2 Event
+		
+		* Includes site logo and event details
+		* Date, Time, and Location of the event
+	---------------------------------------------------*/
+	
+	#section-event {
+		color: #f6f6f6;
+		/* The background image used in this template is 1980 by 650 pixels */
+		background: #111 url('../images/bg_eventcamp.jpg') no-repeat center 0;
+	}
+
+		/* Site Title/Logo */
+		#section-event h1 { 
+			color: #f6f6f6;
+			font: normal 66px/78px 'PT Serif', Georgia, serif;
+			text-transform: normal;
+                        font-style: italic;
+			margin-top: 180px;
+			margin-bottom: 60px;
+                        text-align: right;
+		}
+                
+                #section-event h1 span {
+                        font: normal 90px/80px 'PT Serif', Georgia, serif;
+                        font-style: italic;
+                        color: #b90504;
+                }
+
+		#section-event h2 {
+			color: #f6f6f6;
+                        font: bold 36px/48px 'Open Sans', "Helvetica Neue", Helvetica, Arial, sans-serif;
+			font-size: normal;
+			text-transform: italic;
+			margin-top: 0px;
+			margin-bottom: 0px;
+                        text-align: right;
+		}
+                
+                #section-event h2 span {                    
+                }
+                
+                #section-event h3 {
+                        font: bold 16px/28px 'Open Sans', "Helvetica Neue", Helvetica, Arial, sans-serif;
+                        text-align: right;
+                        margin-bottom: 60px;
+                }
+
+		/* Apply max-width of 100% to make the image scale down in mobile viewports */
+		#section-event img {
+			max-width: 100%;
+		}
+
+		#section-event h1 a {
+			color: #f6f6f6;
+		}
+
+		#section-event h1 a:hover {
+			color: #b90504;
+		}
+
+
+		/* Event information */
+		#section-info {
+			background: url('../images/alpha/bg_alpha30.png');
+			padding: 30px 0;
+		}
+
+			#section-info h2 {
+				color: #777;
+				font: bold 16px/28px 'Open Sans', "Helvetica Neue", Helvetica, Arial, sans-serif;
+				text-transform: uppercase;
+			}
+
+			#section-info #box-date {
+				background: url('../images/icons/icon_date.png') no-repeat left 5px;
+				padding-left: 70px;
+			}
+
+			#section-info #box-time {
+				background: url('../images/icons/icon_time.png') no-repeat left 5px;
+				padding-left: 70px;
+			}
+
+			#section-info #box-location {
+				background: url('../images/icons/icon_map.png') no-repeat left 5px;
+				padding-left: 70px;
+			}
+                        
+			#section-info h3 {
+				color: #f6f6f6;
+				font: bold 13px/22px 'Open Sans', "Helvetica Neue", Helvetica, Arial, sans-serif;
+				text-transform: uppercase;
+				margin-bottom: 4px;
+				letter-spacing: 2px;
+                                text-align: left;
+			}
+
+			#section-info p {
+				color: #f6f6f6;
+				font: normal 13px/23px 'Open Sans', "Helvetica Neue", Helvetica, Arial, sans-serif;
+			}
+
+                        #section-info a {
+                            color: #F6F6F6;
+                        }
+
+                        #section-info a:hover {
+                            color: #b90504;
+                        }
+
+
+	/*---------------------------------------------------
+		3.3 Invitation
+
+		* Contains an example article about the event
+	---------------------------------------------------*/
+
+	#section-invite {
+		color: #333;
+		background: #b90504;
+		padding: 70px 0;
+	}
+
+		#section-invite h2 {
+			color: #F6F6F6;
+			margin-bottom: 10px;
+		}
+
+		#section-invite p.headline {
+			color: #F6F6F6;
+			font: italic 24px/36px 'PT Serif', Georgia, serif;
+			text-align: left;
+		}
+
+		#section-invite p {
+			color: #F6F6F6;
+			font: normal 15px/27px 'Open Sans', "Helvetica Neue", Helvetica, Arial, sans-serif;
+			margin-bottom: 30px;
+		}
+
+
+
+	/*---------------------------------------------------
+		3.4 About
+	---------------------------------------------------*/
+
+	#section-about {
+		color: #333;
+		background: #f6f6f6;
+		padding: 40px 0 20px 0;
+	}
+
+		#section-about h2 {
+			color: #222;
+		}
+
+		#section-about p.desc {
+			color: #b90504;
+		}
+
+		#section-about p {
+			margin-bottom: 40px;
+		}
+
+		/* Each speaker is wrapped by div#item */
+		#section-about .item {
+			
+		}
+
+			#section-about .item h3 {
+				color: #333;
+				font: normal 18px/30px 'Open Sans', "Helvetica Neue", Helvetica, Arial, sans-serif;
+				margin-top: 10px;
+			}
+
+				/* Speaker title */
+				#section-about .item h3 span {
+					color: #b90504;
+					background: #f6f6f6;
+					font: normal 11px/21px 'Open Sans', "Helvetica Neue", Helvetica, Arial, sans-serif;
+					display: inline-block;
+					padding: 4px 0 0 0;
+					border-bottom: 1px solid #b90504;
+					
+				}
+
+			#section-about .item p {
+				font: normal 13px/26px 'Open Sans', "Helvetica Neue", Helvetica, Arial, sans-serif;
+				color: #333;
+				margin-top: 10px;
+			}
+
+
+
+	/*---------------------------------------------------
+		3.5 Concert Program
+	---------------------------------------------------*/
+
+	#section-program {
+		background: #111;
+		font: normal 16px/27px 'PT Serif', Georgia, serif;
+		padding: 60px 0;
+	}
+
+		#section-program h2 {
+			color: #b90504;
+			margin-bottom: 20px;
+		}
+
+		#section-program p.headline {
+			color: #f6f6f6;
+			font: italic 24px/36px 'PT Serif', Georgia, serif;
+			text-align: left;
+                        margin: 20px 0;
+		}
+                
+		#section-program p.composer {
+			width: 35%;
+			display: inline-block;
+			float: left;
+			color: #666;
+			font: italic 14px/26px 'PT Serif', Georgia, serif;
+			margin-top: 10px;
+			border-top: 1px solid #222;
+			padding-top: 10px;
+		}
+
+		#section-program p.title {
+			width: 60%;
+			display: inline-block;
+			float: right;
+			color: #888;
+			font: normal 14px/26px 'PT Serif', Georgia, serif;
+			margin-top: 10px;
+			border-top: 1px solid #222;
+			padding-top: 10px;
+			margin-bottom: 10px;
+		}
+
+
+
+	/*---------------------------------------------------
+		3.6 Tickets
+	---------------------------------------------------*/
+
+	#section-fees {
+		color: #f6f6f6;
+		background: #111 url('../images/bg_gradient.jpg') no-repeat center center;
+		padding: 50px 0;
+	}
+
+		#section-fees h2 {
+			color: #f6f6f6;
+			margin-bottom: 5px;
+		}
+
+		#section-fees p.desc {
+			color: #b90504;
+			margin-bottom: 50px;
+		}
+
+		/* Each speaker is wrapped by div#item */
+		#section-fees .item {
+			background: #111;
+			padding: 20px 25px;
+			margin-bottom: 40px;
+		}
+
+			/* Each thumbnail image for speakers used in the template is 440 by 220 pixels */
+			#section-fees .item img {
+				max-width: 100%;
+			}
+
+			#section-fees .item span.price {
+				color: #f6f6f6;
+				font: bold 70px/80px 'Open Sans', "Helvetica Neue", Helvetica, Arial, sans-serif;
+				display: block;
+				padding-bottom: 10px;
+				border-bottom: 1px solid #222;
+				margin-bottom: 10px;
+			}
+
+                        #section-fees .item.entradas span.price {
+                            background: url('../images/entradas_logo.png') no-repeat left center;
+                            text-indent: -9000px;
+                            overflow: hidden;
+                        }
+
+                        #section-fees .item.taquilla span.price {
+                            font-size: 25px;
+                        }                        
+                        
+			#section-fees .item span.date {
+				font: normal 15px/28px 'Open Sans', "Helvetica Neue", Helvetica, Arial, sans-serif;
+				color: #b90504;
+				display: block;
+				margin-bottom: 10px;
+			}
+
+			#section-fees .item p {
+				font: normal 13px/26px 'Open Sans', "Helvetica Neue", Helvetica, Arial, sans-serif;
+				color: #888;
+			}
+
+                        #section-fees .item a {
+                            color: #F6F6F6;
+                        }
+
+                        #section-fees .item a:hover {
+                            color: #b90504;
+                        }
+                        
+
+	/* Ticket purchase buttons */
+	a.button {
+            font: bold 20px/30px 'Open Sans', "Helvetica Neue", Helvetica, Arial, sans-serif;
+            text-transform: uppercase;
+            letter-spacing: 4px;
+            display: block;
+            cursor: pointer;
+            color:#f6f6f6;
+            background:#b90504;
+            padding: 20px 28px;
+            border: none;
+            -moz-border-radius: 3px;
+            -webkit-border-radius: 3px;
+            -khtml-border-radius: 3px;
+            border-radius: 3px;
+	}
+			
+            a.button:hover { 
+                    color: #b90504;
+                    background: #f6f6f6; 
+            }
+
+        a.button.entradas {
+            color: #b90504;
+            background: #f6f6f6 url(../images/entradas_logo2.png) no-repeat right;
+        }
+
+            a.button.entradas:hover { 
+                    color: #f6f6f6;
+                    background: #b90504 url(../images/entradas_logo3.png) no-repeat right;
+            }
+        
+        
+	/*---------------------------------------------------
+		3.7 Map
+	---------------------------------------------------*/
+
+	#section-map {
+		height: 500px;
+		position: relative;
+		overflow: hidden;
+	}
+
+		#section-map #box-map {
+			position: absolute;
+			z-index: 10;
+			top: 30px;
+		}
+
+			#section-map #box-map h2 {
+				color: #222;
+			}
+
+		#map-wrap {
+			width: 100%;
+			height: 100%;
+			position: relative;
+		}
+
+
+
+	/*---------------------------------------------------
+		3.8 Contact
+	---------------------------------------------------*/
+	
+	#section-contact {
+		color: #f6f6f6;
+		padding: 0px 0;
+		background: #161616;
+		padding: 60px 0;
+	}
+	
+		#section-contact h2 {
+			color: #b90504;
+			margin-bottom: 5px;
+		}
+
+		#section-contact p.desc {
+			color: #777;
+			margin-bottom: 40px;
+		}
+		
+		/* Register Form */
+		#section-contact form {
+			margin-bottom: 40px;
+		}
+
+		#section-contact form p,
+		#section-contact label,
+		#section-contact legend { 
+			font: normal 15px/23px 'Open Sans', "Helvetica Neue", Helvetica, Arial, sans-serif;
+		}
+		
+		#section-contact label {
+			display: inline-block;
+			float: left;
+			width: 155px;
+			margin: 6px 0;
+		}
+		
+		#section-contact input, 
+		#section-contact textarea, 
+		#section-contact select { 
+			width: 280px; 
+			padding: 14px 20px; 
+			color: #eee; 
+			background: #333;
+			margin: 0 0 35px 0; 
+			border: 0;
+			outline: none;
+		}
+		
+		#section-contact input:focus, 
+		#section-contact textarea:focus, 
+		#section-contact select:focus { 
+			color: #f6f6f6;
+			background-color: #b90504;
+		}
+		
+		#section-contact button.submit {
+			font: bold 20px/30px 'Open Sans', "Helvetica Neue", Helvetica, Arial, sans-serif;
+			text-transform: uppercase;
+			letter-spacing: 4px;
+			display: block;
+			cursor: pointer;
+			color:#f6f6f6;
+			background:#b90504;
+			padding: 20px 28px;
+			border: none;
+			-moz-border-radius: 3px;
+			-webkit-border-radius: 3px;
+			-khtml-border-radius: 3px;
+			border-radius: 3px;
+		}
+		
+		#section-contact button.submit:hover { 
+			color: #b90504;
+			background: #f6f6f6; 
+		}
+		
+		#section-contact span.required { 
+			color: #b90504;
+			font-size: 13px;  
+		} /* Select the color of the * if the field is required. */
+
+		#contact-warning {
+			display: none;
+			color: #f6f6f6;
+			background: #dd3333;
+			padding: 20px 25px;
+			margin-bottom: 30px;
+		}
+		
+		#contact-success {
+			display: none;
+			color: #77aa44;
+			background: #111;
+			padding: 20px 25px;
+			margin-bottom: 30px;
+		}
+
+		#section-contact #box-contact {
+			margin-bottom: 60px;
+		}
+
+			#section-contact #box-contact h3 {
+				color: #b90504;
+				font: bold 15px/23px 'Open Sans', "Helvetica Neue", Helvetica, Arial, sans-serif;
+				text-transform: uppercase;
+				margin-bottom: 15px;
+			}
+
+			#section-contact #box-contact p.address {
+				color: #aaa;
+				font: normal 14px/25px 'Open Sans', "Helvetica Neue", Helvetica, Arial, sans-serif;
+				margin-bottom: 50px;
+			}
+			
+			#section-contact #box-contact p.address {
+				color: #aaa;
+				font: normal 14px/25px 'Open Sans', "Helvetica Neue", Helvetica, Arial, sans-serif;
+				margin-bottom: 50px;
+			}
+			
+			
+			#section-contact #box-contact a {
+				color: #f6f6f6;
+				font: normal 19px/28px 'Open Sans', "Helvetica Neue", Helvetica, Arial, sans-serif;
+			}
+			
+				#section-contact #box-contact a:hover {
+					color: #b90504;
+				}
+
+		/* PDF Download */
+		a.link-pdf {
+			color: #b90504;
+			background: url(../images/icons/icon_pdf.png) no-repeat;
+			font: bold 16px/30px 'Open Sans', "Helvetica Neue", Helvetica, Arial, sans-serif;
+			text-transform: uppercase;
+		    display: block;
+		    padding: 40px 60px;
+		}
+
+			a.link-pdf span {
+				background: #f6f6f6;
+				padding: 3px 6px;
+			}
+
+
+		a.link-pdf:hover {
+			color: #f6f6f6;
+		}
+
+			a.link-pdf:hover span {
+				background: #000;
+			}
+
+
+
+	/*---------------------------------------------------
+		3.9 Sponsors
+	---------------------------------------------------*/
+
+	#section-sponsors {
+		color: #333;
+		background: #111;
+		padding: 60px 0 40px;
+	}
+
+		#section-sponsors h2 {
+			font: bold 24px/36px 'Open Sans', "Helvetica Neue", Helvetica, Arial, sans-serif;
+			margin-bottom: 20px;
+		}
+
+		#section-sponsors img {
+			margin-bottom: 20px;
+		}
+
+
+
+	/*---------------------------------------------------
+		3.10 Footer
+	---------------------------------------------------*/
+
+	#section-footer {
+		font: normal 13px/26px 'Open Sans', "Helvetica Neue", Helvetica, Arial, sans-serif;
+		color: #f6f6f6;
+		background: #000;
+	}
+
+		#section-footer p#copytext {
+			color: #777;
+			margin: 35px 0;
+		}
+
+		#section-footer a { color: #b90504; }
+
+		#section-footer a:hover { color: #eee; }
+
+
+		#section-footer ul#social {
+			float: right;
+			border-left: 1px solid #111;
+		}
+
+		#section-footer ul#social li {
+			display: inline-block;
+			float: left;
+		}
+
+		#section-footer ul#social li a {
+			display: block;
+			padding: 30px;
+			border-right: 1px solid #111;
+		}
+
+		#section-footer ul#social li a:hover {
+			background: #b90504;
+		}
+
+
+
+/*--------------------------------------------------------------------------
+   4. Forms
+--------------------------------------------------------------------------*/
+
+/* HTML5 Placeholder */
+::-webkit-input-placeholder {
+   color: #b90504;
+}
+
+:-moz-placeholder {  
+	color: #b90504;
+}

includes/include.contactForm.php

@@ -0,0 +1,38 @@
+<?php 
+	$randomNumber1 = rand(1, 12);
+	$randomNumber2 = rand(1, 12);
+
+	$contactCaptchaAnswer = $randomNumber1 + $randomNumber2;
+?>
+				<div id="contact-warning">
+				</div><!-- // #contact-warning -->
+				
+				<div id="contact-success">
+					Email successfuly sent, thank you.<br />	
+				</div><!-- // #contact-warning -->
+				
+				<form name="contactForm" id="contactForm" method="post" action="includes/include.emailSender.php">
+					<fieldset>
+					
+						<label for="contactName">Name <span class="required">*</span></label>
+						<input name="contactName" type="text" id="contactName" size="30" value="" />
+						
+						<br />
+						<label for="contactEmail">Email <span class="required">*</span></label>
+						<input name="contactEmail" type="text" id="contactEmail" size="30" value="" />
+                        
+                        <br />
+						<label for="contactMessage">Message <span class="required">*</span></label>
+						<textarea name="contactMessage" id="contactMessage" rows="6" cols="7"></textarea>
+                        
+                        <br />
+						<label for="contactCaptcha"><strong><?php echo $randomNumber1; ?></strong> + <strong><?php echo $randomNumber2; ?></strong> = <span class="required">*</span></label>
+						<input name="contactCaptcha" type="text" id="contactCaptcha" size="30" value="" />
+
+						<input name="contactCaptchaAnswer" type="hidden" id="contactCaptchaAnswer" value="<?php echo $contactCaptchaAnswer ?>" />
+
+						<br />
+						<label class="placeholder">&nbsp;</label>
+						<button class="submit">Submit</button>
+					</fieldset>
+				</form>

includes/include.emailSender.php

@@ -0,0 +1,35 @@
+<?php
+
+// Change your@mail.com to your own
+$contactformRecipient = 'your@email.com';
+
+// Change the string
+// This is the title that will show up as a title in the e-mail
+$contactformTitle = 'Contact form submission';
+
+
+if($_POST) {
+		$contactName = addslashes( $_POST['contactName'] );
+		$contactEmail = addslashes( $_POST['contactEmail'] );
+		$contactMessage = addslashes( $_POST['contactMessage'] );
+		
+
+		$message = '';
+		$message .= 'Name: ' . $contactName . '<br />';
+		$message .= 'Email: ' . $contactEmail . '<br />';
+		if( isset($contactMessage) ) { $message .= 'Message: ' . $contactMessage . '<br />'; }
+
+
+		// Email Headers
+		$headers = "From: " . $contactEmail . "\r\n";
+		$headers .= "Reply-To: ". $contactEmail . "\r\n";
+		$headers .= "MIME-Version: 1.0\r\n";
+		$headers .= "Content-Type: text/html; charset=ISO-8859-1\r\n";
+		
+
+		// send mail
+		// mail( to, subject, message, headers, parameters)
+		mail( $contactformRecipient, $contactformTitle, $message, $headers );
+}
+
+?>

index.php

@@ -0,0 +1,483 @@
+<!DOCTYPE html>
+<!--[if lt IE 7 ]><html class="ie ie6" lang="es"> <![endif]-->
+<!--[if IE 7 ]><html class="ie ie7" lang="es"> <![endif]-->
+<!--[if IE 8 ]><html class="ie ie8" lang="es"> <![endif]-->
+<!--[if (gte IE 9)|!(IE)]><!--><html lang="es"> <!--<![endif]-->
+<head>
+
+	<!-- Basic Page Needs
+	================================================== -->
+	<meta charset="utf-8">
+	<title>Teatro Monumental, Madrid - Concierto en Familia, 10º aniversario</title>
+	<meta name="description" content="Eventcamp 2013 is a simple page HTML template for events and conferences.">
+	
+	<!-- Mobile Specific Metas
+	================================================== -->
+	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
+	
+	<!-- CSS Files
+
+	* alpha_background.css		- Classes for applying an alpha black or white background
+	* grid.css					- Responsive grid system based on "Skeleton" by Dave Gamache (http://www.getskeleton.com/)
+	* style.css					- Most of the css is here
+	* responsive_custom			- CSS override for responsive layout
+	================================================== -->
+	<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/3.8.0/build/cssreset/cssreset-min.css">
+	<link rel="stylesheet" href="css/alpha_background.css">
+	<link rel="stylesheet" href="css/grid.css">
+	<link rel="stylesheet" href="css/style.css">
+	<link rel="stylesheet" href="css/responsive_custom.css">
+	
+	<!--[if lt IE 9]>
+		<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
+	<![endif]-->
+
+	<!-- Favicons
+	================================================== -->
+	<!--<link rel="shortcut icon" href="images/favicon.ico">
+	<link rel="apple-touch-icon" href="images/apple-touch-icon.png">
+	<link rel="apple-touch-icon" sizes="72x72" href="images/apple-touch-icon-72x72.png">
+	<link rel="apple-touch-icon" sizes="114x114" href="images/apple-touch-icon-114x114.png">-->
+	
+	<!-- Google Web Fonts
+
+	* This template uses 'PT Serif' and 'Open Sans'
+	================================================== -->
+	<link href='http://fonts.googleapis.com/css?family=PT+Serif:400,700,400italic,700italic|Open+Sans:400italic,700italic,400,700' rel='stylesheet' type='text/css'>
+
+</head>
+<body data-spy="scroll" data-target="#section-topbar">
+
+	<!-- Topbar: fixed + datascroll
+
+	* the attribute data-scrollspy is for automatically updating nav targets based on scroll position
+	* scroll the area below the navbar and watch the active class change
+	================================================== -->
+	<div id="section-topbar">
+		<div id="topbar-inner">
+			<div class="container">
+				<div class="sixteen columns">
+					<div class="dropdown">
+						<ul id="nav" class="nav">
+							<li class="menu-item"><a href="#section-event">Inicio</a></li>
+							<!--<li class="menu-item"><a href="#section-invite">Invitación</a></li-->
+							<li class="menu-item"><a href="#section-program">Programa</a></li>
+							<li class="menu-item"><a href="#section-about">Intérpretes</a></li>>
+							<li class="menu-item"><a href="#section-fees">Entradas</a></li>
+							<li class="menu-item"><a href="#section-map">Mapa</a></li>
+						</ul><!-- // ul#nav -->
+					</div><!-- // .dropdown -->
+
+					<div class="clear"></div>
+				</div><!-- // .sixteen -->
+			</div><!-- // .container -->
+
+			<div class="clear"></div>
+		</div><!-- // #topbar-inner -->
+	</div><!-- // #section-topbar -->
+	
+
+
+	<!-- Event
+
+	* Event title & date, time, and location
+	================================================== -->
+	<div id="section-event">
+		<div class="container">
+			<div class="sixteen columns">
+                            <h1>
+                                Concierto en Familia<br/>
+                                <span>10º Aniversario</span>
+                            </h1>
+                            <h2>
+                                Requiem<br/><span>W. A. Mozart.</span>
+                            </h2>
+                            <h3>
+                                Coros de Óperas,
+                            <h3>
+                                    
+                                <!--    <a href="index.php" title="Inicio"><img src="images/logo_eventcamp.png" alt="Concierto en familia 10º aniversario" /></a></h1>-->
+			</div><!-- // .sixteen -->
+
+			<div class="clear"></div>
+		</div><!-- // .container -->
+
+		<div id="section-info">
+			<div class="container">
+				<div class="four columns">
+					<h2><br/>Información</h2>
+				</div><!-- // .four -->
+
+				<div class="four columns">
+					<div id="box-date">
+						<h3>Fecha</h3>
+						<p>27 de Abril de 2013, sábado</p>
+					</div><!-- // #box-date -->
+				</div><!-- // .four -->
+
+				<div class="four columns">
+					<div id="box-time">
+						<h3>Hora</h3>
+						<p>20:00h</p>
+					</div><!-- // #box-time -->
+				</div><!-- // .four -->
+
+				<div class="four columns">
+					<div id="box-location">
+						<h3><a href="#section-map">Lugar</a></h3>
+						<p>Teatro Monumental, Madrid</p>
+					</div><!-- // #box-location -->
+				</div><!-- // .four -->
+				
+				<div class="clear"></div>
+			</div><!-- // .container -->
+		</div><!-- // #section-info -->
+	</div><!-- // #section-event -->
+
+        <?php /*
+
+	<!-- Invitation
+	================================================== -->
+	<div id="section-invite">
+		<div class="container">
+			<div class="sixteen columns">
+				<h2>Invitación</h2>
+			</div><!-- // .sixteen -->
+
+			<div class="clear"></div>
+
+			<div class="eight columns">
+				<p class="headline">The Trio, known as one of the leading modern jazz revolutionists, are coming to Chicago on March 27th. </p>
+			</div><!-- // .eight -->
+
+			<div class="clear"></div>
+
+			<div class="sixteen columns">
+				<p>Quisque vel justo ipsum. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Duis rutrum risus quis est faucibus a consequat massa sagittis. Cras bibendum elit id felis dapibus volutpat. Cras gravida neque eget tortor laoreet a vestibulum lectus adipiscing. Ut elementum, velit ac tincidunt scelerisque, urna lorem varius diam, id ornare nunc turpis ac mi. Duis congue, elit non dapibus pellentesque, tortor elit tempor odio, non sollicitudin elit tortor nec felis. In a urna erat. Cras odio nisl, adipiscing auctor mollis nec, lacinia et elit. Ut eu lectus eu nulla lacinia dapibus ut nec diam. Vivamus interdum tellus ut tellus varius ac accumsan nunc porta. Sed semper elit eget ipsum venenatis tempus. Proin euismod gravida quam at bibendum.</p>
+			</div><!-- // .eight -->
+
+			<div class="clear"></div>
+		</div><!-- // .container -->
+	</div><!-- // #section-invite -->
+
+
+        */
+        ?>      
+
+	<!-- Concert Program
+	================================================== -->
+	<div id="section-program">
+		<div class="container">
+			<div class="sixteen columns">
+				<h2>Programa del concierto</h2>
+			</div><!-- // .sixteen -->
+			<div class="eight columns">
+				<p class="headline">Primera parte</p>
+			</div><!-- // .eight -->
+
+			<div class="sixteen columns">
+				<div id="box-program">
+					<p class="composer">P. Villaroig</p>
+					<p class="title">Odisea</p>
+                                        <div class="clear"></div>
+                                        
+					<p class="composer">F. Mendelshon</p>
+					<p class="title">Psalmo</p>
+					<div class="clear"></div>
+                                        
+					<p class="composer">L. W. Beethoven</p>
+					<p class="title">4º Movimiento Coral 9ª Sinfonia</p>
+                                        <div class="clear"></div>
+                                        
+				</div><!-- // #box-program -->
+			</div><!-- // .sixteen -->
+
+			<div class="clear"></div>
+
+			<div class="eight columns">
+				<p class="headline">Segunda parte</p>
+			</div><!-- // .eight -->
+
+			<div class="sixteen columns">
+				<div id="box-program">
+                        
+					<p class="composer">G. Caccini</p>
+					<p class="title">Ave María</p>
+                                        <div class="clear"></div>
+
+					<p class="composer">Bizet</p>
+					<p class="title">Coro de niños de Carmen</p>
+                                        <div class="clear"></div>
+
+					<p class="composer">J. Offenbach</p>
+					<p class="title">Barcarolla</p>
+                                        <div class="clear"></div>
+
+					<p class="composer">P. Villaroig</p>
+					<p class="title">Hodie Christus Natus Est
+                                        <br/>
+                                        O Magnum Misterium
+                                        </p>
+                                        <div class="clear"></div>
+
+					<p class="composer">J. F. Händel</p>
+					<p class="title">Aleluya</p>
+                                        <div class="clear"></div>
+				</div><!-- // #box-program -->
+			</div><!-- // .sixteen -->
+
+			<div class="clear"></div>
+		</div><!-- // .container -->
+	</div><!-- // #section-program -->
+
+
+	<!-- Event Information - About The Trio
+	================================================== -->
+	<div id="section-about">
+		<div class="container">
+			<div class="three columns">
+				<h2>Intérpretes</h2>
+                <p>&nbsp;</p>
+			</div><!-- // .three -->
+   		    <div class="clear"></div>
+                        
+			<div class="fourteen columns">
+				<div class="item">
+					<img src="images/interpretes.jpg" alt="" />
+                    <p>&nbsp;</p>
+				</div><!-- // .item -->
+			</div><!-- // .eight -->
+
+			<div class="clear"></div>
+
+			<div class="five columns">
+				<div class="item">
+                    <ul>
+                    <li><h3>Eva Del Moral &nbsp; <span class="speaker-title">Soprano</span></h3></li>
+					<li><h3>Marta Caamaño &nbsp; <span class="speaker-title">Contralto</span></h3></li>
+					<li><h3>Ignacio Álvarez Bas &nbsp;<span class="speaker-title">Tenor</span></h3></li>
+					<li><h3>Fabio Barrutia &nbsp;<span class="speaker-title">Bajo</span></h3></li>
+                    </ul>                    
+				</div><!-- // .item -->
+			</div><!-- // .eight -->
+            
+   			<div class="four columns">
+				<a href="http://www.matritumcantat.org/" title=""><img src="images/matritum.jpg" alt="Matritum Cantat" height="100px" /></a>
+			</div><!-- // .three -->
+
+			<div class="four columns">
+				<a href="http://www.upcomillas.es/" title=""><img src="images/comillas.jpg" alt="" /></a>
+			</div><!-- // .three -->
+
+			<div class="four columns">
+				<a href="http://stmichaelsschool.es/" title=""><img src="images/michaels.jpg" alt="" /></a>
+			</div><!-- // .three -->
+
+			<div class="four columns">
+				<a href="http://mushi.es/" title=""><img src="images/mushi.jpg" alt="" /></a>
+			</div><!-- // .three -->
+            
+<?php /*
+			<div class="four columns">
+				<div class="item">
+					<img src="images/player3.jpg" alt="" />
+					<h3>Marta Caamaño &nbsp; <span class="speaker-title">Contralto</span></h3>
+				</div><!-- // .item -->
+			</div><!-- // .eight -->
+
+			<div class="four columns">
+				<div class="item">
+					<img src="images/player2.jpg" alt="" />
+					<h3>Ignacio Álvarez Bas &nbsp;<span class="speaker-title">Tenor</span></h3>
+				</div><!-- // .item -->
+			</div><!-- // .eight -->
+
+			<div class="four columns">
+				<div class="item">
+					<img src="images/player3.jpg" alt="" />
+					<h3>Fabio Barrutia &nbsp;<span class="speaker-title">Bajo</span></h3>
+				</div><!-- // .item -->
+			</div><!-- // .eight -->
+
+*/?>
+			<div class="clear"></div>
+		</div><!-- // .container -->
+	</div><!-- // #section-about -->
+
+
+	<!-- Event Information - Fees (Tickets)
+	================================================== -->
+	<div id="section-fees">
+		<div class="container">
+			<div class="sixteen columns">
+				<h2>Entradas</h2>
+				<p class="desc">Reserva tus entradas</p>
+			</div><!-- // .sixteen -->
+
+			<div class="clear"></div>
+
+			<div class="eight columns">
+				<div class="item entradas">
+					<span class="price">entradas.com</span>
+					<span class="date">Entradas ya a la venta</span>
+					<p>
+						Haz la compra de tus entradas en <a target="_blank" href="http://www.entradas.com/entradas/novena-sinfonia-beethoven---concierto-en-familia-evento_1_2_28_76422">ENTRADAS.COM</a><br /><br />
+						<a target="_blank" href="http://www.entradas.com/entradas/novena-sinfonia-beethoven---concierto-en-familia-evento_1_2_28_76422" title="Compra tus entradas" class="button">Comprar</a>
+					</p>
+				</div><!-- // .item -->
+			</div><!-- // .eight -->
+
+			<div class="eight columns">
+				<div class="item taquilla">
+					<span class="price">Taquilla del teatro</span>
+					<span class="date">Entradas ya a la venta</span>                                        
+					<p>
+						Compra tus entradas en la <a target="_blank" href="#section-map">taquilla del teatro</a><br /><br />
+						<a href="#section-map" title="Comprar las entradas en taquilla" class="button">Cómo llegar</a>
+					</p>
+				</div><!-- // .item -->
+			</div><!-- // .eight -->
+
+			<div class="clear"></div>
+		</div><!-- // .container -->
+	</div><!-- // #section-fees -->
+
+
+	
+	<!-- Map
+	================================================== -->
+	<div id="section-map">
+
+		<div class="container">
+			<div class="sixteen columns">
+				<div id="box-map">
+					<h2>Cómo llegar</h2>
+				</div><!-- // .box-map -->
+			</div><!-- // .sixteen -->
+
+			<div class="clear"></div>
+		</div><!-- // .container -->
+
+                <!-- https://maps.google.com/maps?f=q&amp;source=s_q&amp;hl=en&amp;geocode=&amp;q=McCormick+Place,+Chicago,+IL&amp;aq=0&amp;oq=mccormick+place,+chicago&amp;sll=41.921231,-87.715509&amp;sspn=0.01314,0.026522&amp;ie=UTF8&amp;hq=McCormick+Place,+Chicago,+IL&amp;hnear=&amp;radius=15000&amp;t=m&amp;ll=41.851406,-87.61631&amp;spn=0.044753,0.072956&amp;z=18&amp;output=embed -->
+
+		<div id="map-wrap">
+			<iframe width="100%" height="100%" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="https://maps.google.com/maps?f=q&amp;source=s_q&amp;hl=es&amp;geocode=&amp;q=Teatro+Monumental&amp;aq=&amp;sll=37.0625,-95.677068&amp;sspn=58.206849,135.263672&amp;t=m&amp;ie=UTF8&amp;hq=Teatro+Monumental&amp;cid=14353968132725877547&amp;hnear=&amp;z=18&amp;iwloc=A&amp;output=embed"></iframe>
+		</div><!-- // #map-wrap -->
+	</div><!-- // #section-map -->
+
+        <?php 
+        /*
+
+	<!-- Contact
+	================================================== -->
+	<div id="section-contact">
+		<div class="container">
+			<div class="eleven columns">
+				<h2>Contacto</h2>
+				<p class="desc">Feel free to e-mail us if you have any questions</p>
+
+				<?php 
+					// Edit your e-mail and contact form title in incldues/include.emailSender.php
+					include_once('includes/include.contactForm.php'); 
+				?>
+			</div><!-- // .twelve -->
+
+			<div class="five columns">
+				<div id="box-contact">
+					<h3>Dirección</h3>
+					<p class="address">
+						<strong class="font-color-white underline-color-primary">John Doe</strong><br />
+						Event Camp, Inc.<br />
+						110 E John Ave STE305<br />
+						Normandy IL 61820 US<br />
+						<span class="font-white">(123) 456-7890</span>
+					</p>
+
+					<h3>Email</h3>
+					<a href="#" class="link-email" title="Email">register@eventcamp.com</a>
+				</div><!-- // .box-contact -->
+
+				<a href="#" class="link-pdf"><span>Download</span><br /><span>Brochure</span></a>
+			</div><!-- // .four -->
+
+			 <div class="clear"></div>
+		</div><!-- // .container -->
+	</div><!-- // #section-contact -->
+
+	<!-- Sponsors
+	================================================== -->
+	<div id="section-sponsors">
+		<div class="container">
+			<!--div class="four columns">
+				<h2>Sponsors</h2>
+			</div><!-- // .four -->
+
+			<div class="four columns">
+				<a href="http://www.matritumcantat.org/" title=""><img src="images/matritum.jpg" alt="Matritum Cantat" height="100px" /></a>
+			</div><!-- // .three -->
+
+			<div class="four columns">
+				<a href="http://www.upcomillas.es/" title=""><img src="images/comillas.jpg" alt="" /></a>
+			</div><!-- // .three -->
+
+			<div class="four columns">
+				<a href="http://mushi.es/" title=""><img src="images/mushi.jpg" alt="" /></a>
+			</div><!-- // .three -->
+
+			<div class="four columns">
+				<a href="http://stmichaelsschool.es/" title=""><img src="images/michaels.jpg" alt="" /></a>
+			</div><!-- // .three -->
+
+			<div class="clear"></div>
+		</div><!-- // .container -->
+	</div><!-- // #section-sponsors -->
+
+ */
+        ?>
+       
+
+	<!-- Footer
+	================================================== -->
+	<div id="section-footer">
+		<div class="container">
+			<div class="eight columns">
+				<p id="copytext">Concierto en Familia, 10º Aniversario.</p>
+			</div><!-- // .eight -->
+
+			<div class="eight columns">
+                <ul id="social">
+					<li><a href="http://www.facebook.com/pages/Matritum-Cantat/336254999823000?id=336254999823000&sk=events" title="" target="new"><img src="images/icons/icon_facebook.png" alt="Facebook" /></a></li>
+					<!--li><a href="http://www.twitter.com" title=""><img src="images/icons/icon_twitter.png" alt="Twitter" /></a></li-->
+					<li><a href="https://www.youtube.com/user/matritumcantat" title="" target="new"><img src="images/icons/icon_youtube.png" alt="Youtube" /></a></li>
+				</ul><!-- // ul#social -->
+			</div><!-- // .eight -->
+
+			<div class="clear"></div>
+		</div><!-- // .container -->
+	</div><!-- // #section-footer -->
+
+
+
+	<!-- Javascript files
+	================================================== -->
+	<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
+	
+	<script src="js/selectnav.min.js"></script>
+	<script src="js/bootstrap-scrollspy.js"></script>
+	<script src="js/jquery.custom.js"></script>
+
+        <script>
+          (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
+          (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
+          m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
+          })(window,document,'script','//www.google-analytics.com/analytics.js','ga');
+
+          ga('create', 'UA-297093-34', 'conciertoenfamilia.com');
+          ga('send', 'pageview');
+
+        </script>        
+        
+<!-- End Document
+================================================== -->
+</body>
+</html>

js/bootstrap-scrollspy.js

@@ -0,0 +1,7 @@
+/**
+* Bootstrap.js by @fat & @mdo
+* plugins: bootstrap-scrollspy.js
+* Copyright 2012 Twitter, Inc.
+* http://www.apache.org/licenses/LICENSE-2.0.txt
+*/
+!function(a){function b(b,c){var d=a.proxy(this.process,this),e=a(b).is("body")?a(window):a(b),f;this.options=a.extend({},a.fn.scrollspy.defaults,c),this.$scrollElement=e.on("scroll.scroll-spy.data-api",d),this.selector=(this.options.target||(f=a(b).attr("href"))&&f.replace(/.*(?=#[^\s]+$)/,"")||"")+" .nav li > a",this.$body=a("body"),this.refresh(),this.process()}b.prototype={constructor:b,refresh:function(){var b=this,c;this.offsets=a([]),this.targets=a([]),c=this.$body.find(this.selector).map(function(){var c=a(this),d=c.data("target")||c.attr("href"),e=/^#\w/.test(d)&&a(d);return e&&e.length&&[[e.position().top+b.$scrollElement.scrollTop(),d]]||null}).sort(function(a,b){return a[0]-b[0]}).each(function(){b.offsets.push(this[0]),b.targets.push(this[1])})},process:function(){var a=this.$scrollElement.scrollTop()+this.options.offset,b=this.$scrollElement[0].scrollHeight||this.$body[0].scrollHeight,c=b-this.$scrollElement.height(),d=this.offsets,e=this.targets,f=this.activeTarget,g;if(a>=c)return f!=(g=e.last()[0])&&this.activate(g);for(g=d.length;g--;)f!=e[g]&&a>=d[g]&&(!d[g+1]||a<=d[g+1])&&this.activate(e[g])},activate:function(b){var c,d;this.activeTarget=b,a(this.selector).parent(".active").removeClass("active"),d=this.selector+'[data-target="'+b+'"],'+this.selector+'[href="'+b+'"]',c=a(d).parent("li").addClass("active"),c.parent(".dropdown-menu").length&&(c=c.closest("li.dropdown").addClass("active")),c.trigger("activate")}};var c=a.fn.scrollspy;a.fn.scrollspy=function(c){return this.each(function(){var d=a(this),e=d.data("scrollspy"),f=typeof c=="object"&&c;e||d.data("scrollspy",e=new b(this,f)),typeof c=="string"&&e[c]()})},a.fn.scrollspy.Constructor=b,a.fn.scrollspy.defaults={offset:10},a.fn.scrollspy.noConflict=function(){return a.fn.scrollspy=c,this},a(window).on("load",function(){a('[data-spy="scroll"]').each(function(){var b=a(this);b.scrollspy(b.data())})})}(window.jQuery)

js/jquery.custom.js

@@ -0,0 +1,84 @@
+// checks that an input string looks like a valid email address.
+var isEmail_re       = /^\s*[\w\-\+_]+(\.[\w\-\+_]+)*\@[\w\-\+_]+\.[\w\-\+_]+(\.[\w\-\+_]+)*\s*$/;
+function isEmail (s) {
+   return String(s).search (isEmail_re) != -1;
+}
+
+$(document).ready(function(){
+
+	// Smooth scrolling to internal anchors
+	$('a[href*=#]:not([href=#])').click(function() {
+	    if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') 
+	        || location.hostname == this.hostname) {
+
+	        var target = $(this.hash);
+	        target = target.length ? target : $('[name=' + this.hash.slice(1) +']');
+	           if (target.length) {
+	             $('html,body').animate({
+	                 scrollTop: target.offset().top
+	            }, 600);
+	            return false;
+	        }
+	    }
+	});
+
+	// ScrollSpy automatically updates nav targets based on scroll position
+	// http://twitter.github.com/bootstrap/javascript.html#scrollspy
+	$('#nav').scrollspy();
+
+	// SelectNav.js is a JavaScript plugin that lets you convert your website navigation into a select drop-down menu. Used together with media queries it helps you to create a space saving, responsive navigation for small screen devices.
+	// https://github.com/lukaszfiszer/selectnav.js
+	selectnav('nav');
+
+	// Handle Contact Form Submission
+	$('form#contactForm button.submit').click(function() {
+		var contactName = $('form#contactForm input#contactName').val();
+		var contactEmail = $('form#contactForm input#contactEmail').val();
+		var contactMessage = $('form#contactForm #contactMessage').val();
+		var contactCaptcha = $('form#contactForm input#contactCaptcha').val();
+		var contactCaptchaAnswer = $('form#contactForm input#contactCaptchaAnswer').val();
+
+		var dataString = 'contactName=' + contactName + '&contactEmail=' + contactEmail + '&contactMessage=' + contactMessage;
+		
+		var contactError = '';
+		
+		// Check name
+		if( contactName == '' ) {
+			contactError += 'Please enter your name<br />';
+		}
+		
+		// Check e-mail
+		if ( contactEmail == '') {
+			contactError += 'Please enter your e-mail<br />';
+		} else if ( isEmail(contactEmail) !== true ) {
+			contactError += 'Please enter a valid e-mail address<br />';
+		}
+
+		if( contactMessage == '' ) {
+			contactError += 'Please enter your message<br />';
+		}
+		
+		if ( contactCaptcha !== contactCaptchaAnswer ) {
+			contactError += 'Please enter the correct validation value <br />';
+		}
+		
+		if ( contactError == '' ) {
+			$.ajax({
+				type: "POST",
+				url: "includes/include.emailSender.php",
+				data: dataString,
+				success: function() {
+					$('#contact-success').fadeIn();
+					$('form#contactForm').fadeOut();
+					$('#contact-warning').hide();
+				}
+			});
+		} else {
+			$('#contact-warning').html(contactError);
+			$('#contact-warning').fadeIn();
+		}
+
+		return false;
+		
+	});
+});

js/selectnav.min.js

@@ -0,0 +1,8 @@
+/*
+ SelectNav.js (v. 0.1)
+ Converts your <ul>/<ol> navigation into a dropdown list for small screens
+ https://github.com/lukaszfiszer/selectnav.js
+*/
+window.selectnav=function(){return function(p,q){var a,h=function(b){var c;b||(b=window.event);b.target?c=b.target:b.srcElement&&(c=b.srcElement);3===c.nodeType&&(c=c.parentNode);c.value&&(window.location.href=c.value)},k=function(b){b=b.nodeName.toLowerCase();return"ul"===b||"ol"===b},l=function(b){for(var c=1;document.getElementById("selectnav"+c);c++);return b?"selectnav"+c:"selectnav"+(c-1)},n=function(b){g++;var c=b.children.length,a="",d="",f=g-1;if(c){if(f){for(;f--;)d+=r;d+=" "}for(f=0;f<
+c;f++){var e=b.children[f].children[0];if("undefined"!==typeof e){var h=e.innerText||e.textContent,i="";j&&(i=-1!==e.className.search(j)||-1!==e.parentElement.className.search(j)?m:"");s&&!i&&(i=e.href===document.URL?m:"");a+='<option value="'+e.href+'" '+i+">"+d+h+"</option>";t&&(e=b.children[f].children[1])&&k(e)&&(a+=n(e))}}1===g&&o&&(a='<option value="">'+o+"</option>"+a);1===g&&(a='<select class="selectnav" id="'+l(!0)+'">'+a+"</select>");g--;return a}};if((a=document.getElementById(p))&&k(a)){document.documentElement.className+=
+" js";var d=q||{},j=d.activeclass||"active",s="boolean"===typeof d.autoselect?d.autoselect:!0,t="boolean"===typeof d.nested?d.nested:!0,r=d.indent||"\u2192",o=d.label||"- Navigation -",g=0,m=" selected ";a.insertAdjacentHTML("afterend",n(a));a=document.getElementById(l());a.addEventListener&&a.addEventListener("change",h);a.attachEvent&&a.attachEvent("onchange",h)}}}();