/* DRINCAKOLA.SCSS - Written by Steve Villanueva 01.24.2016 */

/* Table of Contents */
/*
 * BODY 
 * HEADER
 * BUTTONS
 * CONTENT
 * FORM
 * FOOTER
 * RESPONSIVE STRUCTURE
 * MEDIA QUERIES
 */

/* BODY BEGIN */
@import url(http://fonts.googleapis.com/css?family=Open+Sans);

html 
{
	min-width: 320px;
}

body 
{ 
	font-family: 'Open Sans', sans-serif;
	color: #666;
	font-size:18px;
	font-weight:bold;
	background-color:#FEE693;
	background-image:url('../images/Bubbles.png');
}
/* BODY END */

/* HEADER BEGIN */
div.Banner
{
	background-image:url('../images/Banner.jpg');
	background-size:contain;
	background-repeat:no-repeat;
	width:100%;
	height: 0;
	padding-top: 25%;
}

div.SocialNav
{
	height:30px;
	background-color:#D14500;
	width:100%;
	text-align:right;
}

div.SocialNavButtons
{
	height:20px;
	width:25px;
	float:right;
	padding-right:20px;
}

div.SocialNavIcons
{
	width:25px;
	height:20px;
	padding:5px;
}

div.SocialNavIcons:hover
{
	background-color:#FF5400;
}

div.PrimaryNavDrop
{
	height:15px;
	background-image:url('../images/DropShadow.png');
	background-repeat:repeat-x;
}

div.MobileSocialNav
{
	height:80px;
	background:#D14500;
	width:100%;
	margin:auto;
	text-align:center;
}

div.MobileSocialNavAlign
{
	width:240px;
	float:center;
	display:inline-block;
}

div.MobileSocialNavIcons
{
	float:left;
}

div.MobileSocialNavIcons:hover
{
        background-color:#FF5400;
}


div.SocialNavButtons
{
        height:20px;
        width:25px;
        float:right;
        padding-right:20px;
}

div.MobileNavLogo
{
	width:100%;
	height:75px;
	background-color:#FDDD4A;
	text-align:center;
}

div.MobileNavPanel
{
	width:100%;
	text-align:center;
	background-color:#FFAE00
}

div.MobileNavLine
{
	width:100%;
	height:62px;
	padding-top:30px;
}

div.MobileNavLine:hover
{
	background-color: #FE5502;
}

a.MobileNavText
{
	color:#fff;
	font-weight:bold;
	text-decoration:none;
	font-size:24px;
	text-transform:uppercase;
}

/* HEADER END */

/* BUTTONS BEGIN */

div.HomeButton
{
	padding-top:7px;
	width:20%;
	float:left;
	height:100%;
	background-color:#FDDD4A;
	text-align:center;
}

div.PrimaryNav
{
	width:40%;
	height:100%;
}

div.PrimaryNavButton
{
	width:80px;
	height:100%;
	padding:35px;
	text-align:center;
	text-transform:uppercase;
}

div.PrimaryNavButton:hover
{
        background-color:#FF5400;
}

a.PrimaryNavButtonLabel
{
	color:#fff;
	font-weight:bold;
	text-decoration:none;
	font-size:14px;
}

input.ButtonSubmit
{
        width:100%;
        height:40px;
        position:relative;
        color:#fff;
        font-family:helvetica;
        font-size:22px;
        font-weight:bold;
        text-decoration:none;
	border:0;
	background-color:orange;
	text-transform:uppercase;
}

input.ButtonSubmit:hover
{
	background-color:#FE5502;
}

/* BUTTONS END */

/* CONTENT BEGIN */

div.Can
{
	background-image:url('../images/Can.png');
	background-size:contain;
	background-repeat:no-repeat;
	width:100%;
	height:100%;
	background-position:center;
}

div.Shipit
{
	background-image:url('../images/Shipit.png');
	background-size:contain;
	background-repeat:no-repeat;
	width:100%;
	height:100%;
	background-position:center;
}

/* CONTENT END */

/* FORM BEGIN */

div.CallToAction
{
	padding:10px;
	text-align:left;
}

div.FormInputLine
{
	padding:5px 10px 5px 10px;
	height:40px;
}

div.FormInputLineStandard
{
	width:100%;
	text-align:right;
}

div.FormInputLineCity
{
	width:45%;
	text-align:left;
	float:left;
}
div.FormInputLineState
{
	width:20%;
	text-align:left;
	float:left;
	padding-left:10px;
}
div.FormInputLineZip
{
	width:25%;
	text-align:right;
	float:right;
}
div.FormInputLinePick
{
	width:30%;
	text-align:right;
	float:right;
}

div.FormInputLinePickLabel
{
	width:70%;
	text-align:left;
	float:left;
	padding-top:8px;
	height:40px;
}

select.SelectPick
{
	border:1px solid #FFAA00;
	height:40px;
	width:100%;
	color:#b1b1b1;
	font-size:20px;
	font-family:helvetica;
	padding-left:5px;
}

select.SelectPick:focus
{
        background-color:#FBF4E5;
        border:1px solid #D14500;
}

div.FormInputLineTotalLabel
{
	width:80%;
	text-align:left;
	float:left;
	padding-top:8px;
}

div.FormInputLineCostLabel
{
	width:20%;
	text-align:right;
	float:right;
	padding-top:8px;
}

div.FormInputLineExpLabel
{
	text-align:left;
	float:left;
	padding-top:8px;
}

div.FormInputLineMonth
{
	text-align:left;
	float:left;
	display:inline-flex;
}

select.SelectMonth
{
	border:1px solid #FFAA00;
	height:40px;
	color:#b1b1b1;
	font-size:20px;
	font-family:helvetica;
	padding-left:5px;
}

div.FormInputLineDay
{
	text-align:left;
	float:left;
	padding-left:10px;
	padding-right:10px;
}

select.SelectDay
{
	border:1px solid #FFAA00;
	height:40px;
	color:#b1b1b1;
	font-size:20px;
	font-family:helvetica;
	padding-left:5px;
}



div.FormInputLineYear
{
	text-align:right;
	float:left;
}

select.SelectYear
{
	border:1px solid #FFAA00;
	height:40px;
	color:#b1b1b1;
	font-size:20px;
	font-family:helvetica;
	padding-left:5px;
}

select.SelectDay:focus, select.SelectMonth:focus, select.SelectYear:focus
{
	background-color:#FBF4E5;
        border:1px solid #D14500;
}

div.FormInputCode
{
	text-align:left;
	font-size:18px;
	font-weight:bold;
	float:left;
	padding-top:8px;
}

div.FormInputLineCode
{
	width:20%;
	text-align:right;
	float:right;
}

input.FormInputTextStandard
{
	border:1px solid #FFAE00;
	height:40px;
	width:100%;
	color:#b1b1b1;
	font-size:20px;
	font-family:helvetica;
	padding-left:5px;
}

input.FormInputTextStandard:focus
{
	background-color:#FBF4E5;
	border:1px solid #D14500;
}


div.FormInputLineSubmit
{
	width:300px;
	text-align:right;
	float:right;
}

/* FORM END */

/* FOOTER BEGIN */

div.FooterBanner
{
	background-image:url('../images/Footer.jpg');
	background-size:contain;
	background-repeat:no-repeat;
	width:100%;
	height:0;
	padding-top:25%;
}

div.FooterZone
{
	width:100%;
	height:300px;
	background-color:#FFAE00;
	margin-top:0;
}

div.FooterZoneNav
{
	width:50%;
	padding-top:20px;
}

a.FooterZoneNavLinkText
{
        color:#fff;
	text-decoration:none;
}

a.FooterZoneNavLinkText:hover
{
	color:#D14500;
}

div.FooterZoneNavLinks
{
	float:left;
	padding-right:20px;
	text-transform:uppercase;
	font-size:16px;
}

div.FooterZoneNavCopyright
{
	float:right;
	color:#fff;
	padding-right:20px;
	font-size:16px;
}

div.MobileFooter
{
	margin-top:20px;
	height:140px;
	background-color:#D14500;
	text-align:center;
	padding-top:20px;
	color:#FFF
}

/* FOOTER END */

/* RESPONSIVE STRUCTURE BEGIN */

#pagewrap {
	width: 100%;
	margin: auto;
}
header {
	height: 120px;
	top:-200px;
	border:0;
	background-color:#FFAE00;
	overflow:hidden;
}
mobilenav {
	display:none;
}
#slotleft {
	width: 33%;
	float: left;
}

#slotmiddle {
	width: 33%;
	float: left;
}

#slotright {
	width: 34%;
	float: left;
	margin-top:0;
}
footer {
	clear: both;
	padding: 0;
	width:100%;
	color:#fff;
	margin-bottom:0;
}

mobilefooter {
	display:none;
}

/* RESPONSIVE STRUCTURE END */

/* MEDIA QUERIES BEGIN */

/* 980px or less */
@media screen and (max-width: 980px) 
{
	
	#pagewrap
	{
		width: 100%;
	}
	#slotleft
	{
		width: 50%;
		float: left;
	}
	#slotmiddle
	{
		width: 50%;
		float: right;
	}
	
	#slotright
	{
		clear: both;
		width: auto;
		float: none;
	}

	mobilenav
	{
		display:inline;
	}

	mobilefooter
	{
		display:inline;
	}
	
	header
	{
		display:none;
	}
	footer
	{
		display:none;
	}
}

/* 700px or less */
@media screen and (max-width: 600px) 
{
	#slotleft
	{
		width: auto;
		float: none;
	}
	
	#slotmiddle
	{
		width: auto;
		float: none;
	}
	
	#slotright
	{
		width: auto;
		float: none;
	}
}

/* 480px or less */
@media screen and (max-width: 480px)
{
	h1
	{
		font-size: 2em;
	}
	#slotright
	{
                float: none;

	}
}

#pagewrap, header, mobilenav, #slotleft, #slotmiddle, #slotright, footer
{
	border: 0;
}
/* MEDIA QUERIES END */

/* END CSS */
/* END CSS */
/* END CSS */