/*-----------------------------------------------

Name:     "Valley of the Sun United Way" responsive styles
Designer: Bohnsack Design
Date:     5, 2013 v1.0

----------------------------------------------- */
@media screen and (max-width: 767px) {
	ul#function-btns li { float: none; }
}




@media screen and (min-width: 768px) {
	
	/* these styles automatically show these elements in case a user hides them in the mobile view then expands the window */
	.main-nav { display: block !important;}
	.footer1{ display: block !important;}
	.footer2{ display: block !important;}
	.footer3{ display: block !important;}

	
	body{min-height: 1240px;}/* this is needed to keep ipad orientation looking correct on short pages */


	}
	

/* #Tablet (Portrait)
================================================== */

    /* Note: Design for a width of 768px */

    @media only screen and (min-width: 768px) and (max-width: 959px) {
    body{min-height: 1240px;}/* this is needed to keep ipad orientation looking correct on short pages */
	
    }



/*  #Mobile (Portrait)
================================================== */

    /* Note: Design for a width of 320px */

    @media only screen and (max-width: 767px) {


/* ----------------------------------------------- 
//////////////////////////////////////////////////
Global styles
//////////////////////////////////////////////////
----------------------------------------------- */

body{-webkit-text-size-adjust:none; background-image:none;}

article{ font-size:.9em;}
	
h1{ font-size:35px;width:auto; padding:10px 0 5px 10px;}
article h2{ font-family:LeagueGothicRegular; font-size:30px; font-weight:normal; color:#7b81b8; margin:30px 0 10px 0;}
article h3{ font-family:LeagueGothicRegular; font-size:24px; font-weight:normal; color:#0f157e; margin:30px 0 10px 0;}
article h4{ font-family:LeagueGothicRegular; font-size:20px; text-transform:uppercase; font-weight:normal; background:url(/images/btn-color-orange.jpg) repeat-x; color:#FFF;  letter-spacing:2px; padding:5px 10px; margin:30px 0 10px 0;
	-webkit-box-shadow:  0px 0px 3px 0px rgba(0, 0, 0, .1);
	box-shadow:  0px 0px 3px 0px rgba(0, 0, 0, .1);
}
article h5{ color:#7b81b8; font-size:18px; margin:30px 0 5px 0;}
article h6{ font-family:mulilight_italic; font-size:18px; font-weight:normal; color:#7b81b8; text-align:center; padding:10px 0; margin:20px 0 20px 0; border-top:1px solid #b8bad5; border-bottom:1px solid #b8bad5;}

#middle-container{ padding:0 10px 20px 10px; min-width:90%;}
#middle{ margin:auto; width:auto;}
#middle ul li a{  padding:10px 40px 10px 10px;}

.right{ float:none; margin:0 0 10px 0px;}
.left{ float:none; margin:0 0px 10px 0;}


/* ----------------------------------------------- 
header styles
----------------------------------------------- */

#header-container{ width:auto; position:static; min-width:90%; padding:10px; background-position:0 -5px;}

header{ height:auto; width:auto; background-image:none;}

a#vsuw-logo{ background:url(/images/vsuw-logo@2x.jpg) no-repeat; background-size: 110px 77px; top:0px; display:block; height:77px; width:110px;} 


ul#function-btns li.btn-donate{ clear:both; float:right; }
li.btn-donate a{}

ul#function-btns li{ margin:0 0 5px 0;}
ul#function-btns{ font-size:12px; top:0px;}

/* enews button */
ul#function-btns .enews{ margin:0 0 0 -193px; width:270px;}
.enews input[type=text]{ width:250px; }


/* donate button */
ul#function-btns li.btn-donate{ margin:0 0 0 10px;}
ul#function-btns li.btn-donate a{ width:100px; height:33px; padding:7px 0 0 0; font-size:18px;}


/* ----------------------------------------------- 
nav styles
----------------------------------------------- */

#nav-container{ padding:100px 0px 0px 0px;}

a.toggleMenu{ display:block; font-family:LeagueGothicRegular; font-size:20px; padding:7px 12px; letter-spacing:1px; color:#FFF; text-decoration:none; text-transform:uppercase; border-radius: 7px 7px 0px 0px; -moz-border-radius: 7px 7px 0px 0px; -webkit-border-radius: 7px 7px 0px 0px; background:url(/images/arrow-down-white.gif) no-repeat 96% 50% #0f157e;}
a.toggleMenu.active{ background:url(/images/arrow-up-white.gif) no-repeat 96% 50% #0f157e;}


nav{ position:static;}

nav ul{ padding:0; margin:0;}
nav ul li{ list-style:none; float:none; margin:0; position:relative; border-top:1px solid #FFF; background-color:#7b81b8; border-radius:0px;
-moz-border-radius:0px; 
-webkit-border-radius:0px; 
}
nav ul li:hover{ background-color:#7b81b8;}
nav ul li a{ display:block; padding:5px 40px 5px 5px;}
nav ul li a:hover{ color:#FFF; background-color:#0f157e;}


/* mobile arrow style */
nav a.parent{ position:relative;}
nav a.parent .touch-btn{ position:absolute; right:0px; top:0px; display:block; background:url(/images/arrow-down-white.gif) 50% 50% no-repeat #4e55a3; text-indent:-9999px; height:90%; width:40px; border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; margin:2px;}
nav ul li ul li a.parent .touch-btn{ } /* adjust arrow position on sub menus */
nav ul li ul li ul li a.parent .touch-btn{} /* adjust arrow position on sub menus */

nav .hover > .parent > .touch-btn{background:url(/images/arrow-up-white.gif) 50% 50% no-repeat #4e55a3;}



/* drop menu -level 1 */
nav ul li ul{ position: static;
	-webkit-transition: all .25s ease;
	-moz-transition: all .25s ease;
	-o-transition: all .25s ease;
	transition: all .25s ease;
	margin:0px;
	opacity:1;
	height:0px;
	overflow:hidden;
	padding:0px 10px;
	width:auto;
}

nav ul li:hover ul{ opacity:1; height:0px;-webkit-box-shadow:none; box-shadow:none; background-color:#7b81b8;} /* this line is added to override styles created so javascript is not needed for non-mobile */

nav ul li.hover ul{ margin:0; opacity:1; display:block; height:auto; width:auto;}
nav ul li ul li{ width:auto; border-top:1px solid #7b81b8;}
nav ul li ul li a{ border-radius:0px; 
-moz-border-radius: 0px; 
-webkit-border-radius: 0px; }

/* hides all menus below the second level for standard width */
nav ul li.hover ul li ul{ display:block;} /* reset to display for mobile */

/* drop menu -level 1 */
nav ul li.hover ul{-webkit-box-shadow:none; box-shadow:none; background-color:#7b81b8; padding:0 10px 10px 10px;}
nav ul li ul li{ background-image:none; background-color:#656bac; margin:0;}

/* drop menu -level 2 */
nav ul li.hover ul li ul{opacity:0; height:0px; overflow:hidden; padding:0 10px; background-color:#656bac;}
nav ul li.hover ul li ul li{ border:none; margin:0 0 1px 0; background:url(/images/bullet-white.gif) 8px 10px no-repeat #656bac; padding:0px 0px 0px 20px;}
nav ul li.hover ul li ul li a{ padding:3px 5px;}
nav ul li ul li.hover ul{opacity:1; height:auto; padding:10px; }

/* drop menu -level 3 */
nav ul li ul li.hover ul li ul{opacity:0; height:0px; overflow:hidden; padding:0 10px;}
nav ul li ul li.hover ul li ul li{ border:none; margin:0 0 1px 0; background:url(/images/bullet-sub-white.gif) 8px 2px no-repeat #656bac; padding:0px 0px 0px 15px;}

nav ul li ul li ul li.hover ul{opacity:1; height:auto; padding:10px;}



/* ----------------------------------------------- 
carousel styles
----------------------------------------------- */

#carousel-wrapper{ height:0px; overflow:hidden;}


/* ----------------------------------------------- 
breadcrumb styles
----------------------------------------------- */

#breadcrumb-container{ display:none;}


/* ----------------------------------------------- 
column styles
----------------------------------------------- */

/* use in tandem with a single .column3 for 2 columns */
.columns2{ float:none; width:auto; margin:0;}

.columns3{ float:none; clear:both; width:auto; margin:0;}

#middle .columns3{ margin:20px 0;}

/* ----------------------------------------------- 
right column styles
----------------------------------------------- */

.right-column{ display:none;}


/* ----------------------------------------------- 
bottom / footer styles
----------------------------------------------- */

#bottom-container{ padding:10px; min-width:90%;}

#bottom{ width:auto;}

#bottom h3{ border-top:1px solid #FFF; border-bottom:none;}
#bottom h3 a{ background:url(/images/arrow-down-blue.gif) no-repeat 96% 44%;}
#bottom h3 a.active{ background:url(/images/arrow-up-blue.gif) no-repeat 96% 44%;}
#bottom .columns3:first-child h3{ border-top:none;}

#bottom .columns3 h3{ position:relative;}
a.footer1-toggle, a.footer2-toggle, a.footer3-toggle{ position:absolute; display:block; height:20px; width:100%;}

.footer1{ display: none; float:none; padding:0 0 20px 0;}
.footer2{ display: none; padding:0 0 20px 0;}
.footer2 .social-icons{ display:none;}
.footer2 .facebook_like{ display:none;}
.footer3{ display: none;}


footer{margin:auto; width:auto; padding:20px 0 50px 0; font-size:10px; min-width:90%;}

#copyright{ float:none; padding:0 0 20px 10px;}

#footer-links{ float:none; padding:0 0 0 5px;}
#footer-links ul li{ padding:2px 5px;}



/* ----------------------------------------------- 
//////////////////////////////////////////////////
Home Page styles
//////////////////////////////////////////////////
----------------------------------------------- */

.promo{ text-align:center; margin:0;}

.btn-211{ display:none;}


/* Get Involved buttons */
.home-page #get-involved{ background-color:none; height:auto; min-width:100%;
	-webkit-box-shadow:none;
	box-shadow:none;
	background:none;
	}
.home-page #get-involved ul{ padding:10px; margin:auto; width:auto;}
.home-page #get-involved ul li{ float:none; margin:0 0 8px 0;}
.home-page #get-involved ul li:last-child{ margin:0;}
.home-page #get-involved ul li a{ width:auto; height:39px; display:block; font-family:LeagueGothicRegular; text-transform:uppercase; font-size:30px; text-decoration:none; color:#FFF; letter-spacing:1px; padding:5px 0 0 10px;
	-webkit-box-shadow:  0px 0px 5px 0px rgba(0, 0, 0, .2);
	box-shadow:  0px 0px 5px 0px rgba(0, 0, 0, .2);
	}
	
/* set min-height on blog and news feeds */
ul.hp-list-news li a{ min-height:1px;}
ul.hp-list-blog li a{ min-height:1px;}


/* ----------------------------------------------- 
//////////////////////////////////////////////////
Landing & Content Page styles
//////////////////////////////////////////////////
----------------------------------------------- */

#story-container{min-width:90%; margin:0 10px 10px 10px;
border-bottom:10px solid transparent;
-webkit-border-image:url(/images/bg-content-pic.png) 0 0 20 0 stretch; /* Safari 5 */
-o-border-image:url(/images/bg-content-pic.png) 0 0 20 0 stretch; /* Opera */
border-image:url(/images/bg-content-pic.png) 0 0 20 0 stretch;
}
#story{ width:auto; height:auto;  padding:5px; background-image:none; background-color:#FFF; position:static;}

#story .image-container-landing{ position:static; width:100%; height:auto;}
#story .image-container-landing img{ width:100%;}

#story h2{ position:static; margin:0; padding:0; font-size:22px; padding:10px 10px 60px 10px;}
#story .story-intro{ position:relative; opacity:1; background-color:#FFF; padding:10px 10px 10px 10px; color:#666; width:auto; font-size:.9em;}
#story .story-intro p{ margin:0;}
#story .story-intro a.btn-orange{ position:absolute; bottom:-30px; float:none; margin:5px 0 0 0;
	-webkit-box-shadow: 1px 0px 2px 1px rgba(0, 0, 0, .1); 
	box-shadow: 1px 0px 2px 1px rgba(0, 0, 0, .1);
}


/* video within content */
.content-video{ }
.content-video iframe{ width:100%; height:200px; margin:0 0 30px 0;}

/* photo within content */
.content-photo{ width:100%;}
.content-photo img{
	width:100%;
}
.content-photo .caption{ border-bottom:1px solid #d8d8d6;}

.content-photo.top{ width:auto;}
.content-photo.top img{ width:100%;}


/* two column div */
article .two-column{ 
	columns:1;
	-webkit-columns:1; /* Safari and Chrome */
	-moz-columns:1; /* Firefox */
	column-gap:0px;
	-webkit-column-gap:0px; /* Safari and Chrome */
	-moz-column-gap:0px; /* Firefox */
	margin:0 0 20px 0;
}
article .two-column ul{ margin:10px 5px;}



/* ----------------------------------------------- 
//////////////////////////////////////////////////

Page Styles for:
 * News Listing
 * News Content
 * Blog Listing
 * Blog Content
 * Listing

//////////////////////////////////////////////////
----------------------------------------------- */

article hgroup{ font-size:12px;}

article hgroup h2{ font-size:20px; margin:10px 0 10px 0;}

/* photo within content */
hgroup .content-photo{ width:135px; float:right;}
hgroup .content-photo img{
	margin:15px 0 0 10px;
	width:125px;
}

/* Intro paragraph styles */
article.intro{ font-size:14px;}
article.intro h2{ font-size:24px;}


/* ----------------------------------------------- 
//////////////////////////////////////////////////
form styles
//////////////////////////////////////////////////
----------------------------------------------- */

#middle form{ margin:0;}
#middle label{ text-align:left; padding:5px 0px 0 0; margin:0; width:100%; }
#middle input[type=text],#middle input[type=email],#middle input[type=textarea],#middle input[type=tel]
{ background-color:#ebe9e6; border:2px #FFFFFF solid; width:280px; padding:5px; font-size:16px; margin:0px 0px 10px 0px; float:left;}
#middle textarea{ background-color:#ebe9e6; border:2px #FFFFFF solid; width:280px; padding:5px; font-size:16px; margin:0px 5px 10px 0; float:left;}




    }


/* #Mobile (Landscape)
================================================== */

    /* Note: Design for a width of 480px */

    @media only screen and (min-width: 480px) and (max-width: 767px) {



    }


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



	}