/*   
Theme Name: Alvin
Description: Theme created specifically for Alvin Convention & Visitors Bureau
Author: Byte-Werx
Author URI: http://www.byte-werx.com
*/

/* IMPORT */
@import url(//fonts.googleapis.com/css?family=Niconne|Oswald:400,300|Rosario:400,700);

/* SETUP */

html {
  background: #fff8e2; /* Old browsers */
  /* IE9 SVG, needs conditional override of 'filter' to 'none' */
  background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2ZmZjhlMiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNlNmI5OTEiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
  background: -moz-linear-gradient(top,  #fff8e2 0%, #e6b991 100%); /* FF3.6+ */
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#fff8e2), color-stop(100%,#e6b991)); /* Chrome,Safari4+ */
  background: -webkit-linear-gradient(top,  #fff8e2 0%,#e6b991 100%); /* Chrome10+,Safari5.1+ */
  background: -o-linear-gradient(top,  #fff8e2 0%,#e6b991 100%); /* Opera 11.10+ */
  background: -ms-linear-gradient(top,  #fff8e2 0%,#e6b991 100%); /* IE10+ */
  background: linear-gradient(to bottom,  #fff8e2 0%,#e6b991 100%); /* W3C */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fff8e2', endColorstr='#e6b991',GradientType=0 ); /* IE6-8 */
  line-height:1.5;
}

body {
  background:url('images/body-shadow.png'), url('images/background-full.jpg');
  background-position:center top;
  background-repeat:repeat-y;
  margin:0;
  padding:0;
}

 img { border:0; }

.wrapper {
  width:100%;
}

.container {
  width:1000px;
  position:relative;
  margin:0 auto;
}

.clear {
  clear:both;
}

h1 {
  font-size:80px;
  font-family:Niconne, Arial, Helvetica, Sans-serif;
  color:#8c1d2c;
  margin:0px;
}

h2 {
  color:#8c1d2c;
  font-size:40px;
  font-family:Niconne, Arial, Helvetica, Sans-serif;
  margin:0px;
}

h3 {
  color:#8c1d2c;
  font-size:24px;
  font-family:Niconne, Arial, Helvetica, Sans-serif;
  margin:0px;
}

h4 {
  color:#8c1d2c;
  font-size:24px;
  font-family:Arial, Helvetica, Sans-serif;
  margin:0px;
}

/* HEADER */
.header .container {
  background:url('images/header-background.jpg');
}

.header .logo {
  padding:10px 0px 0px 8px;
}

.tagline-wrapper {
  position:absolute;
  right:0px;
  bottom:0px;
}

.tagline-container {
  font-family:Niconne, Arial, Helvetica, Sans-serif;
  font-size:36px;
  color:#fff;
  background:#8c1d2c;
  padding:6px 16px;
}

.header .social {
  position:absolute;
  right:13px;
  top:25px;
}

/* NAVBAR */
.navbar-wrapper {
  position:absolute;
  right:0px;
  top:88px;
  background:url('images/black-pixel.png');
}

ul#navbar {
  list-style-type:none;
  padding:0;
  margin:0;
}

ul#navbar li {
  float:left;
  position:relative;
}

ul#navbar li a {
  font-family:oswald, arial, helvetica, sans-serif;
  color:#fff;
  text-decoration:none;
  padding:10px 16px 10px 10px;
  font-size:18px;
  display:block;
  text-transform:uppercase;
  font-weight:300;
}

ul#navbar li a:hover {
  text-decoration:underline;
}

ul#navbar ul {
  position:absolute;
  left:0px;
  top:45px;
  display:none;
  z-index:9;
  margin:0;
  padding:0;
  list-style-type:none;
}

ul#navbar ul li {
  font-family:oswald, arial, helvetica, sans-serif;
  color:#fff;
  text-decoration:none;
  text-transform:uppercase;
  font-weight:300;
  background:url('images/black-pixel.png');
  float:none;
  width:240px;
}

ul#navbar ul li a {
  font-size:16px;
}

/* BANNER */
.banner {
  padding-top:18px;
}

.banner .container {
  
}

#rotate {
  width:968px;
  height:350px;
  margin:0 auto;
  background:url('images/content-border.jpg');
}

#rotate .slide {
  margin:12px 0px 0px 12px;
}

#left-controller {
  position:absolute;
  background:url('images/black-pixel.png');
  border-radius: 50%;
  padding:8px;
  z-index:99;
  line-height:0;
  left:2px;
  top:128px;
  cursor:pointer;
}

#right-controller {
  position:absolute;
  background:url('images/black-pixel.png');
  border-radius: 50%;
  padding:8px;
  z-index:99;
  line-height:0;
  right:2px;
  top:128px;
  cursor:pointer;
}

#left-controller img,
#right-controller img {
  opacity:0.5;
  filter:alpha(opacity=50);
  -webkit-transition: all 0.3s ease;
     -moz-transition: all 0.3s ease;
       -o-transition: all 0.3s ease;
      -ms-transition: all 0.3s ease;
          transition: all 0.3s ease;
}

#left-controller:hover > img,
#right-controller:hover > img {
  opacity:1;
  filter:alpha(opacity=100);
}

/* FEATURETTE */
.featurette {
  padding:18px 0px 0px;
}

.featurette .container {
  height: 177px;
  width:968px;
  text-align: justify;
  -ms-text-justify: distribute-all-lines;
  text-justify: distribute-all-lines;
}

.featurette .container div {
  width:305px;
  height:177px;
  vertical-align:top;
  display:inline-block;
  *display:inline;
  zoom:1;
  position:relative;
}

.featurette .container div a {
  color:#fff;
  font-size:24px;
  position:absolute;
  bottom:6px;
  left:13px;
  font-family:Oswald, Arial, Helvetica, Sans-serif;
  text-transform:uppercase;
  text-decoration:none;
}

.featurette .container div a:hover {
  text-decoration:underline;
}

.stretch {
  width:100%;
  display:inline-block;
  font-size:0;
  line-height:0;
}

.f1 {
  background:url('images/feature-1.jpg');
}

.f2 {
  background:url('images/feature-2.jpg');
}

.f3 {
  background:url('images/feature-3.jpg');
}

/* CONTENT */
.content {
  background:url('images/content-bottom.jpg');
  background-position:center bottom;
  background-repeat:no-repeat;
  padding-top:16px;
  padding-bottom:32px;
}

.content .container {
  background:url('images/content-border.jpg');
  width:968px;
  -webkit-box-sizing:border-box;
  -moz-box-sizing:border-box;
  box-sizing:border-box;
  padding:16px;
}

.page-wrap {

  -webkit-box-sizing:border-box;
  -moz-box-sizing:border-box;
  box-sizing:border-box;
  margin:0 auto;
  padding:16px;
}

.entry {
  float:left;
  width:634px;
  font-family:rosario;
}

/* SIDEBAR */
.sidebar-wrapper {
  width:241px;
  float:right;
}

.sidebar-wrapper .box1 {
  background:url('images/sidebar-box-1.jpg');
  height:214px;
}

.sidebar-wrapper .box2 {
  background:url('images/sidebar-box-2.jpg');
  height:214px;
  margin:16px 0px;
}

.sidebar-wrapper .box3 {
  background:url('images/sidebar-box-3.jpg');
  height:172px;
}

.sidebar-wrapper .box4 {
  background:url('images/sidebar-box-4.jpg');
  height:172px;
  margin:16px 0px;
}

.sidebar-wrapper .sbbox {
  position:relative;
}

.sidebar-wrapper .sbbox a {
  position:absolute;
  bottom:6px;
  left:13px;
  color:#fff;
  font-family:Niconne, Arial, Helvetica, Sans-serif;
  font-size:26px;
  text-decoration:none;
}

.sidebar-wrapper .sbbox a:hover {
  text-decoration:underline;
}

/*** PARKS TRAILS ATTRACTIONS ***/

.area {
	max-width:280px;
	display: inline;
	margin:10px 19px 15px 0;
}

.parks-row {
	display:block;
	width:100%;
	margin-top:10px;
	margin-bottom:10px;

}

.parks-container{
	display:block;
	width:45%;
	margin: 10px 10px 15px 0;
	float: left;
	min-height: 130px;

}
.parks {
	display:block;
	margin-left: auto;
	margin-right:auto;
	text-align:center;
	max-width:85%;
	margin-top:0;
	
}

.park-img {
	display:block;
	margin-left: auto;
	margin-right:auto;
	width:45%;
	max-height:100px;
	margin-bottom:-20px;
}

/***Attraction***/

.attraction  {
	display: block;
	width: 95%;
	margin-bottom: 10px;	
}
.attraction-title{
	display: block;
        margin-left: auto;
        margin-right: auto;
	width: 100%;
}
.attraction-text {
	margin-left: 15px;
	height:150px;
	width: 90%;
	text-align: justify;
}
.attraction-text img{
	float:left;
        margin:7px 15px 28px 0;
	max-width:150px;
	max-height:125px;
	
}
.hotels {
	margin-top:25px;
}
.hotels hr {	
    padding: 0;
    border: none;
    border-top: medium double #333;
    color: #333;
    text-align: center;
    max-width:70%
}
.hotels hr:after {
	font-family: arial;
    content: "§";
    display: inline-block;
    position: relative; 
    top: -0.85em;  
    font-size: 1.3em;
    padding: 0 0.25em;
    background: transparent;
}
.hotels .name{
	margin-top:0px;
        margin-bottom:20px;
	font-weight:bold;
	font-size:16px;
	display: inline-block;
	width:300px;
	text-align:right;
}
.hotels .number {
	width:150px;
	font-weight:bold;
	font-size:15px;
	margin-left:100px;
	font-family:Arial, Helvetica, Sans-serif;
}
/*** RESTAURANTS ***/

.dining{
	margin-bottom: 35px;
}
.restaurants{
	margin-top: -20px;
}
.restaurants hr {	
    padding: 0;
    border: none;
    border-top: medium double #333;
    color: #333;
    text-align: center;
    max-width:70%;
}
.restaurants hr:after {
	font-family: arial;
    content: "§";
    display: inline-block;
    position: relative; 
    top: -0.85em;  
    font-size: 1em;
    padding: 0 0.25em;
    margin-bottom:-15px;
    background: transparent;
}
.restaurants .name{
	margin-top:0px;
        margin-bottom:8px;
	font-weight:bold;
	font-size:12px;
	display: inline-block;
	width:300px;
	text-align:right;
}
.restaurants .number {
	width:150px;
	font-weight:bold;
	font-size:12px;
	margin-left:100px;
	font-family:Arial, Helvetica, Sans-serif;
}

/* FOOTER */
.footer .container {
  background:url('images/footer-background.jpg');
  background-position:center top;
  background-repeat:no-repeat;
  height:145px;
}

.footer .logo {
  text-align:right;
  padding-right:16px;
}

.footer .tagline {
  font-family:Oswald, Arial, Helvetica, Sans-serif;
  font-size:12px;
  position:absolute;
  bottom:12px;
  left:16px;
  color:#fff;
}

.footer .tagline a {
  color:#fff;
}

.footer .address{
  position:absolute;
  left:16px;
  top:7px;
  color:#FFFFFF;
  font-size:14px;
  text-shadow: -2px 0 black, 0 2px black, 2px 0 black, 0 -2px black;
}

.footer .social {
  position:absolute;
  left:320px;
  top:80px;
}
.footer .social img{
	max-width:100px;
}
@media (max-width: 768px) { iframe { display:none; }}