body
{
   color:#fff;
   background-color:#000;
   
   /*font-family: sans-serif;*/
   font-family: 'Raleway', sans-serif;
   
   padding:20px;margin:20px;
   padding:0px;margin:0px;
   
   background:url(vendor-background.jpg) repeat-y center top;
   
  
   background-repeat: repeat-y;
   
   background-size: 230% 100%;
   background-attachment: fixed;
   
   /*patterson*/
   background:url(media/background_blue.jpg) repeat-x center top;
   background-size: 60% 100%;
   background-repeat: repeat-x;
   
   /*box-shadow: inset 0px 0px 240px rgba(0, 0, 0, 0.58);*/
   
   position:relative;
   min-height: 1300px;
}




.vendor_button {
   
   /*
   background: linear-gradient(to bottom, rgba(222, 222, 222, 1) 0%,rgba(209, 209, 209, 1) 13%,rgba(53, 53, 53, 1) 80%,rgba(74, 74, 74, 1) 100%);
   border-radius: 15px;
   border: 2px solid rgb(126, 126, 126);
   width: 60%;
   margin: auto;
   line-height: 45px;
   background: linear-gradient(to bottom, rgba(222, 222, 222, 1) 0%,rgba(209, 209, 209, 1) 13%,rgba(53, 53, 53, 1) 80%,rgba(153, 132, 153, 1) 100%);
   border-radius: 7px;
   border: 3px solid rgb(126, 126, 126);
   width: 80%;
   margin: 5px;
   margin: auto;
   text-transform: uppercase;
   margin-bottom: 5px;
   line-height: 45px;
   color: #fff;
   font-size: 24px;
   box-shadow: 0px 0px 8px #000;
   margin-bottom: 15px;
   text-align: center;
   
   background: linear-gradient(to bottom, rgba(255, 255, 255, 1) 0%,rgba(219, 219, 219, 1) 13%,rgba(97, 97, 97, 1) 80%,rgba(195, 200, 221, 1) 100%);
   border-radius: 111px;
   border: 1px solid rgb(126, 126, 126);
   line-height: 150px;
  height: 160px;
  font-size: 60px;
   
   */
   
   
   /* patterson */
    min-height: 100px;
    
    border:0px solid rgb(108, 107, 107);
    text-align: center;
    margin: auto;
    border-radius: 0px;
    color: #fff;
    margin: 10px;
    padding: 2px;
    box-shadow: 2px 2px 16px rgba(0,0,0,0.5);
    background: linear-gradient(135deg, rgba(80, 167, 236, 1) 2%,rgba(82, 161, 186, 1) 100%);
    /* border: 1px solid rgb(55, 117, 0); */
    border-bottom: 3px solid rgba(87, 88, 102, 0.75);
    position: relative;
    z-index: 1;
    margin-left:auto;
    margin-right:auto;
    
    transition: opacity 1s linear 0s;
    background: linear-gradient(135deg, rgba(144, 198, 241, 1) 2%,rgba(82, 161, 186, 1) 100%);
    max-width: 80%;
    border-radius:20px;
    line-height: 110px;
    font-size: 50px;
    border-top: 2px solid rgb(255, 255, 255);
    text-shadow: 4px 4px 4px rgba(0, 0, 0, 0.44);
    
    background: linear-gradient(135deg, rgba(150, 147, 197, 1) 2%,rgba(244, 75, 80, 1) 100%);
    
    box-shadow: 8px 8px 8px rgba(0, 0, 0, 0.53);
    
    
    background: linear-gradient(135deg, rgba(131, 122, 255, 1) 2%,rgba(247, 48, 53, 1) 100%);
    
    
    /*v2*/
    
    box-shadow: 0px 8px 8px rgba(0, 0, 0, 0.53);
    background: linear-gradient(135deg, rgba(122, 162, 255, 1) 2%,rgba(48, 102, 247, 1) 100%);
    border-radius: 4px;
    
    background: linear-gradient(to bottom, #7eb7fe 2%,#1d52df 67%,#0a84d6 98%,#1d52df 100%); /* W3C */
    border-top: 2px solid rgb(181, 218, 248);
    border-bottom: 3px solid rgba(35, 46, 202, 0.75);
    border-radius:20px;
    margin:auto;

    /* ie */
    background-image: url("media/button_gradient2.png");
    background-repeat: repeat-x;
    
}


.vendor_button a{
     color: #fff;
  text-transform: uppercase;
}

.vender_botton:hover
{
   
}



.widget
{
   
    min-height: 100px;
    
    border:0px solid rgb(108, 107, 107);
    text-align: center;
    margin: auto;
    border-radius: 0px;
    color: #fff;
    margin: 10px;
    padding: 10px;
    box-shadow: 2px 2px 16px rgba(0,0,0,0.5);
    background: linear-gradient(135deg, rgba(80, 167, 236, 1) 2%,rgba(82, 161, 186, 1) 100%);
    /* border: 1px solid rgb(55, 117, 0); */
    border-bottom: 5px solid rgba(87, 88, 102, 0.75);
    position: relative;
    z-index: 1;
    margin-left:auto;
    margin-right:auto;
    
    transition: opacity 1s linear 0s;
    background: linear-gradient(135deg, rgba(144, 198, 241, 1) 2%,rgba(82, 161, 186, 1) 100%);
    
    
}



.vendor_name {
   
   font-size:35px;
   text-transform: uppercase;
   text-align: center;
   margin-bottom: 15px;
   text-shadow: 4px 4px 1px #757575, 
               14px 14px 10px #000;
   
   

}


.border_ring {
   
  border-radius: 15px;
  border: 3px solid white;
  width: 50%;
  margin: auto;


  box-shadow: 6px 6px 12px rgba(0, 0, 0, 0.43);
  transition:background-color 0.5s;
  cursor: pointer;
}

.border_ring:hover {
   
   background-color:rgba(1,1,1,0.5);
   
}

.half_opacity
{
   opacity: 0.5;
}

.vendor_booth {
   
   font-size:40px;
  
   text-align: center;
   margin-bottom: 40px;
   text-shadow:14px 14px 10px #000;
   
   
   
}

.vendor_description {
   
   font-size:20px;
   text-align: center;
   margin-bottom: 15px;
   text-shadow: 14px 14px 10px #000;
   font-style: italic;
}

.vender_directory {
   
   font-size:30px;
  /* text-transform: uppercase; */
   text-align: center;
   margin:auto;
   /* margin-bottom: 15px; */
   text-shadow: 4px 4px 1px #1B1B1B;
   /*width: 93%;*/
   border-bottom: 1px solid rgba(255, 255, 255, 0.29);
   
    
   

   /*patterson*/
   /*border-radius: 12px;*/
  border-bottom: 3px solid rgba(22, 22, 22, 0.29);
  margin-bottom: 3px;
  border-top: 3px solid #ffffff36;
  text-shadow: 4px 4px 8px #1B1B1B;
   
  transition: background-color 0.4s;
}


.vender_directory:hover {
   
   background-color:rgba(255, 255, 255, 0.22);
   background-color:rgba(0, 0, 0, 0.4);
}


.vender_directory_link a, .vender_directory_link a:visited, .vender_directory_link a:hover, .vender_directory_link a:link {
   color:#fff;
}

.directory_alt_color
{
   /*background-color:rgba(189, 189, 189, 0.24);*/
   
}

.vendor_hours
{
   font-size:22px;
   
}

.description
{
    
    font-size: 55px;
    
}

.content_header
{
   color:#fff;
   font-size:18px;
   text-align:center;
   padding-bottom:10px;
}

.content_subheader
{
   color:#fff;
   font-size:17px;
   text-align:center;
   
}

.content_text
{
   color:#fff;
   font-size:14px;
   text-align:left;
   margin-top: 10px;
   margin-bottom: 16px;
}


.underline
{
  text-decoration:underline;
}

#vendor_zone
{
   border: 0px solid white;
   max-width: 100%;
   
}

.calendar_box
{
    border:3px solid white;
    border-radius: 15px;
    box-shadow: 0px 0px 48px #000;
}

.calendar_month
{
    font-size: 60px;
    background-color:rgba(223,222,222,0.5);
}


.calendar_day
{
 font-size: 82px;
 padding-bottom: 20px;
 padding-top: 20;

}

.calendar_year
{
    font-size:42px;
    
}

.big_icon
{
   font-size:74px;
   margin-left: 13px;
}

.back_button
{
   font-size:40px;
   text-align: center;
   padding: 12px;
}

.pointer
{
   cursor: pointer;
}

.event
{
    width:100%;
}


.summary
{
    font-size:60px;
    
}

#down_arrow
{
   bottom: 20px;
   position: absolute;
}

#debug_readout
{
   position: fixed;
}

#up_arrow
{
   top: 20px;
   position: absolute;
}

#ui_overlay
{
   position: fixed;
   max-width: 100%;
   width: 100%;
   height: 100%;
   border: 0px solid white;
   left: 60px;
}

#qr_zone
{
   background-color:#fff;
   height:0px;
   display: table;
   
}

.top_logo
{
   text-align: center;
   margin: auto;
   position: relative;
   
   max-width: 95%;
}

.top_logo img
{
   width:100%;
}

.qr_text
{
   color: #000;
   padding: 20px;
   text-align: center;
   font-family: sans-serif;
   font-size: 56px;
}

.basic_fade
{
   transition: opacity 1s;
}


.fa-caret-right
{
   /* color:#989898; */
}


.dwg_form input
{
    border-radius:3px;
    border: 2px solid  #C5C5C5;
    padding-top: 10px;
    padding-bottom: 10px;
    margin-bottom: 10px;
    width:100%;
    margin: 5px;
	font-size: 22px;
	padding-left: 10px;
}

.dwg_form_submit
{

    padding-bottom: 10px;
    margin-bottom: 10px;
    border-radius:5px;
    color:#fff;
    text-align: center;
    background: linear-gradient(to bottom, rgba(43,149,219,1) 0%,rgba(40,103,211,1) 28%,rgba(40,103,211,1) 40%,rgba(127,178,232,1) 100%); /* W3C */
    margin: 5px;
    
}

.dwg_form
{
	width: 85%;
	margin: auto;
}


#screen_shadow
{
   position: absolute;
   width: 100%;
   height:100%;
   
   
   background-color:rgba(0,0,0,0.5);
   z-index: 120;
   
   transition: opacity 1.4;
   display: none;
   text-align: center;
   
   
   
}



#app_overlay
{
   width:80%;
   height:auto;
   min-height: 45%;
   
   z-index: 125;
   
   background: linear-gradient(135deg, rgba(80, 167, 236, 1) 2%,rgba(82, 161, 186, 1) 100%);
   border-bottom: 5px solid rgba(87, 88, 102, 0.75);
   background-color:#000;
   border-radius:15px;
   margin: auto;
   
   display: table;
   vertical-align: middle;
   
   
   
   background:url(vendor-background.jpg) repeat-y center top;
   
  
   background-repeat: repeat-y;
   
   background-size: 230% 100%;
   background-attachment: fixed;
   
   /*patterson*/
   background:url(media/background_blue.jpg) repeat-x center top;
   background-size: 60% 100%;
   background-repeat: repeat-x;
   box-shadow: 0px 4px 13px #000;
   
   margin-top: 120px;
   
   transition: opacity 1s;
   opacity: 0;
   

}

#app_overlay_content
{
   display: table-cell;
   vertical-align: middle;
}

.patterson_overlay
{
   font-size:21px;
   
}

.patterson_overlay p
{
   padding:3px;
   margin: 3px;
}

.image_popout img
{
   box-shadow: 0px 0px 15px #000;
}

.image_popout
{
   margin:15px;
}


.patterson_copyright
{
   font-size:16px;
   text-shadow:3px 3px 8px #000;
}
   
.patterson_label_text
{
   font-size: 34px;
   text-shadow: 4px 4px 8px #1B1B1B;
   text-align: center;
   margin: auto;
   padding-bottom:20px;
   text-transform: uppercase;
   
}

.patterson_subtitle {
    
    font-size: 50px;
    line-height: 110px;
    text-align:center;
    text-shadow: 4px 4px 4px rgb(0 0 0 / 44%);
    text-shadow:3px 3px 8px #000;
}

.button_space
{
   height: 20px;
}

.rating_icon
{
  display: inline-block;
  height: 112px;
  vertical-align: middle;
  padding-right:20px;
}


.rating_icon img
{
   height: 100%;
   border:0px solid white;
  
}

.centered
{
   margin: auto;
   text-align: center;
}


.make_icon
{
   max-width: 60%;
   width:318px;
}

.make_icon img
{
   width:100%;
   border:0px solid white;
}

.make_gmc, .logos_make_chrysler_kia
{
   max-width: 90%;
   width:760px;
}

.make_logos_make_dodge2
{

   max-width: 90%;
   width:510px;

}

.logos_make_chrysler_kia
{
  width:660px;
}

/*---- media queries */

@media screen and (max-width: 768px)
{
   .vender_directory
   {
      font-size: 22px;
      padding-top:8px;
   }
   
   .fa-caret-right, .fa-chevron-right
   {
      font-size: 30px !important;
   }
   
   .fa-caret-up, .fa-caret-down, fq
   {
      font-size:64px !important;
   }
   
   #ui_overlay
   {
      left: 2px;
   }
   
   
   .vendor_button
   {
      max-width: 90%;
      font-size:24px;
      line-height: 70px;
      padding: 1px;
      
      /* height:70px; */
      min-height:70px;
      /* border-radius:20px; */
   }
   
   .border_ring
   {
      font-size:21px;
      width:68%;
   }
   
   
   .patterson_big_icon
   {
      max-width: 40%;
   }
   
   
   #app_overlay
   {
      margin-top: 12px;
   }
   
   
   .patterson_label_text
   {
      font-size:24px;
   }
   
   
   .rating_icon
   {
     height:60px;
     padding-right:10px;
   }
   
   body{
      background:url(media/background_blue_mobile.jpg) center top;
      background-size: 100% 100%;
      background-repeat: no-repeat;
   
   }
   
   .make_gmc, .logos_make_chrysler_kia, .make_logos_make_dodge2
   {
    max-width: 90%;
    width:318px;
   }

    
   .vendor_button_spacer_top
   {
     height:32px;
   }


   .vendor_button_spacer_bottom
   {
      height:30px;
   }

   .mobile_only
   {
      display:block;
   }

   .desktop_only
   {
      display:none;
   }

  
}




@media screen and (min-width: 768px)
{
   
   .vender_directory
   {
      font-size: 40px;
      padding-top:10px;
      padding-bottom:10px;
   }
   
    .fa-caret-right, .fa-chevron-right
   {
      font-size: 74px !important;
   }
   
   .fa-caret-up, .fa-caret-down
   {
      font-size:124px !important;
   }
   
    #ui_overlay
   {
      left: 60px;
   }
   
   .patterson_big_icon
   {
      max-width: 230px;
      display: none;
   }
   
   .vendor_button
   {
      width:590px;
      
   }
   
   #app_overlay
   {
      margin-top: 120px;
   }
   
   
   .border_ring
   {
      width:410px;
   }
   
   .copyright
   {
      font-size:16px;
      
   }
   
   
   body{
      box-shadow: inset 0px 0px 240px rgba(0, 0, 0, 0.58);
   }

    .vendor_button_spacer_top
   {
     height:72px;
   }


   .vendor_button_spacer_bottom
   {
      height:70px;
   }


   .make_logos_make_dodge_desktop
   {
       width:1050px;
       max-width: 90%;
   }



   .mobile_only
   {
      display:none;
   }

   .desktop_only
   {
      display:block;
   }


}




/* from http://cssdeck.com/labs/css-checkbox-styles * /

/* SQUARED TWO */
.squaredTwo {
	width: 28px;
	height: 28px;
	background: #fcfff4;

	background: -webkit-linear-gradient(top, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%);
	background: -moz-linear-gradient(top, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%);
	background: -o-linear-gradient(top, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%);
	background: -ms-linear-gradient(top, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%);
	background: linear-gradient(top, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fcfff4', endColorstr='#b3bead',GradientType=0 );
	margin: 20px auto;

	-webkit-box-shadow: inset 0px 1px 1px white, 0px 1px 3px rgba(0,0,0,0.5);
	-moz-box-shadow: inset 0px 1px 1px white, 0px 1px 3px rgba(0,0,0,0.5);
	box-shadow: inset 0px 1px 1px white, 0px 1px 3px rgba(0,0,0,0.5);
	position: relative;
}

.squaredTwo label {
	cursor: pointer;
	position: absolute;
	width: 20px;
	height: 20px;
	left: 4px;
	top: 4px;

	-webkit-box-shadow: inset 0px 1px 1px rgba(0,0,0,0.5), 0px 1px 0px rgba(255,255,255,1);
	-moz-box-shadow: inset 0px 1px 1px rgba(0,0,0,0.5), 0px 1px 0px rgba(255,255,255,1);
	box-shadow: inset 0px 1px 1px rgba(0,0,0,0.5), 0px 1px 0px rgba(255,255,255,1);

	background: -webkit-linear-gradient(top, #222 0%, #45484d 100%);
	background: -moz-linear-gradient(top, #222 0%, #45484d 100%);
	background: -o-linear-gradient(top, #222 0%, #45484d 100%);
	background: -ms-linear-gradient(top, #222 0%, #45484d 100%);
	background: linear-gradient(top, #222 0%, #45484d 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#222', endColorstr='#45484d',GradientType=0 );
}

.squaredTwo label:after {
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
	filter: alpha(opacity=0);
	opacity: 0;
	content: '';
	position: absolute;
	width: 9px;
	height: 5px;
	background: transparent;
	top: 4px;
	left: 4px;
	border: 3px solid #fcfff4;
	border-top: none;
	border-right: none;

	-webkit-transform: rotate(-45deg);
	-moz-transform: rotate(-45deg);
	-o-transform: rotate(-45deg);
	-ms-transform: rotate(-45deg);
	transform: rotate(-45deg);
}

.squaredTwo label:hover::after {
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=30)";
	filter: alpha(opacity=30);
	opacity: 0.3;
}

.squaredTwo input[type=checkbox]:checked + label:after {
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
	filter: alpha(opacity=100);
	opacity: 1;
}


input[type=checkbox] {
	visibility: hidden;
}