/*
* Skeleton V1.2
* Copyright 2011, Dave Gamache
* www.getskeleton.com
* Free to use under the MIT license.
* https://www.opensource.org/licenses/mit-license.php
* 6/20/2012
*/


/* 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: 10px; margin-right: 10px; }
    .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: 40px;  }
    .container .two.columns                     { width: 100px; }
    .container .three.columns                   { width: 160px; }
    .container .four.columns                    { width: 220px; }
    .container .five.columns                    { width: 280px; }
    .container .six.columns                     { width: 340px; }
    .container .seven.columns                   { width: 400px; }
    .container .eight.columns                   { width: 460px; }
    .container .nine.columns                    { width: 520px; }
    .container .ten.columns                     { width: 580px; }
    .container .eleven.columns                  { width: 640px; }
    .container .twelve.columns                  { width: 700px; }
    .container .thirteen.columns                { width: 760px; }
    .container .fourteen.columns                { width: 820px; }
    .container .fifteen.columns                 { width: 880px; }
    .container .sixteen.columns                 { width: 940px; }

    .container .one-third.column                { width: 300px; }
    .container .two-thirds.column               { width: 620px; }

    /* 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; }


	/* TIME COUNTER CSS */
	.counter_info{
		font-size:14px;;
		color:#333333;
		margin:10px 0px 5px 10px;
		font-weight:bold;
		float:left;
		width:20%;
	}
	.divcounter{
		width:100%;
		border:solid 1px #EBEBEB;
		height:35px;		
	}
	/* TIME COUNTER CSS */
	
	/* Travel and Housing Page CSS */
	.top-layout{ width: 100%; }
		
	.middle-image{ float:left; }
	.middle-map{ float:right; }
	.middle-map iframe{ width:450px;}
			
	.outer-container  { width: 100%; }
	.housing-table-layout{ border:solid 1px #000; height:auto; }
	.content-container{ width:100%; border-top:solid 1px #000;}
	.left-container{ width:22%;float:left; padding:10px; position:relative; height:auto; font-size:12px;}
	.left-container img{ float:none; }
	.right-container{ width:62%;float:right; padding:10px; border-left:solid 1px #000; }
	.clearclass{ clear:both; }
	
	.bottom-layout-title{ background: none repeat scroll 0 0 #CCCCCC;border: 1px solid #999999;color: #666666;font-weight:bold; font-size:24px; margin:10px 0px; padding:10px; }
	.bottom-layout-image{ width:900px; height:809px;}
	/* Travel and Housing Page CSS */	

/* #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; }

        .container .one-third.column                { width: 236px; }
        .container .two-thirds.column               { width: 492px; }

        /* 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: 384px; }
        .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; }
		
		/* TIME COUNTER CSS */
		.counter_info{
			font-size:14px;;
			color:#333333;			
			font-weight:bold;			
			width:98%;					
		}
		.divcounter{
			width:70%;
			border:solid 1px #EBEBEB;
			height:50px;		
		}
		/* TIME COUNTER CSS */
		
		/* GENERAL CSS */
		#contactform_main input.text {
			width: 55%;
		}
		#contactform_main li.buttons input { 
			margin:0px; 
		}
		/* GENERAL CSS */
		
		/* Travel and Housing Page CSS */
		.top-layout{ width: 100%; }
		.top-layout img{ width:100%; }
		
		.middle-image{ float:none; }
		.middle-image img{ width:100%; }
		.middle-map{ float:none; margin:10px 0px; }
		.middle-map iframe{ width:725px;}
		
		.outer-container  { width: 100%; }
		.housing-table-layout{ border:solid 1px #000; height:auto; }
		.content-container{ width:100%; border-top:solid 1px #000;}
		.left-container{ width:30%;float:left; padding:10px; position:relative; height:auto;}
		.left-container img{ float:none; }
		.right-container{ width:50%; padding:10px; border-left:solid 1px #000; }
		.clearclass{ clear:both; }
		
		.bottom-layout-title{ background: none repeat scroll 0 0 #CCCCCC;border: 1px solid #999999;color: #666666;font-weight:bold; font-size:24px; margin:10px 0px; padding:10px; }
		.bottom-layout-image{ width:725px; height:429px;}
		/* Travel and Housing Page CSS */
		
		/* Participant Page CSS */
		.divider {			
			margin-bottom:15px;
			margin-top:15px;			
		}
		.divider:after {
			background-color:#CC5B48;
			color:#FFFFFF;
			content:attr(data-text);
			font-size:16px;
			font-weight:bold;
			padding:6px 10px;
		}
		.subdivider {			
			margin-bottom:15px;
			margin-top:15px;			
		}
		.subdivider:after {
			background-color: #282828;
			color: #FFFFFF;
			content:attr(data-text);
			font-size:14px;	
			font-weight:bold;
			padding:5px 15px;
		}
		/* Participant Page CSS */
    }


/*  #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,
        .container .one-third.column,
        .container .two-thirds.column  { 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; }
		
		/* TIME COUNTER CSS */
		.counter_info{
			font-size:14px;;
			color:#333333;			
			font-weight:bold;			
			width:98%;
		}		
		.divcounter{
			width:80%;
			border:solid 1px #EBEBEB;
			height:50px;		
		}		
		/* TIME COUNTER CSS */
		
		/* GENERAL CSS */	
		#contactform_main input.text {
			width: 55%;
		}
		#contactform_main li.buttons input { 
			margin:0px; 
		}
		/* GENERAL CSS */
		
		/* Travel and Housing Page CSS */
		.top-layout{ width: 100%; }
		.top-layout img{ width:100%; }
		
		.middle-image{ float:none; }
		.middle-image img{ width:100%; }
		.middle-map{ float:none; margin:10px 0px; }
		.middle-map iframe{ width:290px;}
		
		.outer-container  { width: 100%; }
		.housing-table-layout{ border:solid 1px #000; padding:0px; height:auto; }
		.content-container{ width:100%;border-top:solid 1px #000;border-bottom:solid 0px #000;}
		.left-container{ width:95%;float:left; padding:10px; position:relative; height:auto;}
		.right-container{ width:95%;float:right; padding:5px; border-left:solid 0px #000; }
		.clearclass{ clear:both; }
		
		.bottom-layout-title{ background: none repeat scroll 0 0 #CCCCCC;border: 1px solid #999999;color: #666666;font-weight:bold; font-size:24px; margin:10px 0px; padding:10px; }
		.bottom-layout-image{ width:290px; height:229px;}
		/* Travel and Housing Page CSS */
		
		/* Participant Page CSS */
		.divider {			
			margin-bottom:15px;
			margin-top:15px;			
		}
		.divider:after {
			background-color:#CC5B48;
			color:#FFFFFF;
			content:attr(data-text);
			font-size:13px;
			font-weight:bold;
			padding:6px 10px;
		}
		.subdivider {			
			margin-bottom:15px;
			margin-top:15px;			
		}
		.subdivider:after {
			background-color: #282828;
			color: #FFFFFF;
			content:attr(data-text);
			font-size:12px;	
			font-weight:bold;
			padding:5px 15px;
		}
		/* Participant Page CSS */

    }


/* #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,
        .container .one-third.column,
        .container .two-thirds.column { width: 420px; }
		
		
		/* TIME COUNTER CSS */
		.counter_info{
			font-size:14px;;
			color:#333333;			
			font-weight:bold;			
			width:98%;
		}			
		.divcounter{
			width:70%;
			border:solid 1px #EBEBEB;
			height:50px;		
		}
		/* TIME COUNTER CSS */
		
		/* GENERAL CSS */
		#contactform_main input.text {
			width: 55%;
		}
		#contactform_main li.buttons input { 
			margin:0px; 
		}
		/* GENERAL CSS */
		
		/* Travel and Housing Page CSS */
		.top-layout{ width: 100%; }
		.top-layout img{ width:100%; }
		
		.middle-image{ float:none; }
		.middle-image img{ width:100%; }
		.middle-map{ float:none; margin:10px 0px; }
		.middle-map iframe{ width:450px;}
		
		.outer-container  { width: 100%; }
		.housing-table-layout{ border:solid 1px #000; height:auto; }
		.content-container{ width:100%; border-top:solid 1px #000;}
		.left-container{ width:30%;float:left; padding:10px; position:relative; height:auto;}
		.left-container img{ float:none; }
		.right-container{ width:60%; padding:10px; border-left:solid 1px #000; }
		.clearclass{ clear:both; }
		
		.bottom-layout-title{ background: none repeat scroll 0 0 #CCCCCC;border: 1px solid #999999;color: #666666;font-weight:bold; font-size:24px; margin:10px 0px; padding:10px; }
		.bottom-layout-image{ width:450px; height:429px;}
		/* Travel and Housing Page CSS */
		
		/* Participant Page CSS */
		.divider {			
			margin-bottom:15px;
			margin-top:15px;			
		}
		.divider:after {
			background-color:#CC5B48;
			color:#FFFFFF;
			content:attr(data-text);
			font-size:13px;
			font-weight:bold;
			padding:6px 10px;
		}
		.subdivider {			
			margin-bottom:15px;
			margin-top:15px;			
		}
		.subdivider:after {
			background-color: #282828;
			color: #FFFFFF;
			content:attr(data-text);
			font-size:12px;	
			font-weight:bold;
			padding:5px 15px;
		}
		/* Participant Page CSS */
    }


/* #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;
    }