/* General Demo Style */
body{
	font-family: 'Lora', serif;
	font-weight: 400;
	font-size: 16px;
	background-color: #CCC;
	color: #333;
	-webkit-font-smoothing: antialiased;
	-moz-font-smoothing: antialiased;
	font-smoothing: antialiased;
}
a{
	color: #555;
	text-decoration: none;
}
h1{
	font-size: 36px;
}
h2{
	font-size: 18px;
}
h3{
	font-size: 16px;
}
h6{
	font-size: 14px;
	margin-top: -8px;
}
/* Header Style */
.codrops-top{
	font-size: 18px;
	background-image:url("http://static.winterwolves.com/assets/images/navbar.jpg");
	z-index: 999;
	position: fixed;
	top: 0px;
	width:100%;
	font-family: 'Lora', serif;
	font-weight: 400;
	box-shadow: 0 2px 6px rgba(0, 0, 0, .2);
	text-align: center;
	height: 64px;
    margin-left: auto;
    margin-right: auto;	
}
.codrops-top a{
	vertical-align:middle;
	padding: 0px 10px;
	letter-spacing: 1px;
	color: #AAA;
	display: inline-block;
	font-variant:small-caps
}
.codrops-top a:hover{
	color: #FFF;
}
.codrops-top span.right{
	float: right;
}
.codrops-top span.right a{
	float: left;
	display: block;
}

.boxbuttons{
	z-index: 19;
	width: 1000px;
	position: relative;
	top:-100px;
	background-image:url(http://static.winterwolves.com/assets/images/boxes.png);
	height:165px;
    margin-left: auto;
    margin-right: auto;
}

.boxbuttons-wrapper { 
	width: 100%; 
	margin-left: 34px;
}

.boxbuttons img{
	padding: 23px 4px 10px 4px;
}
.boxbuttons img:link { opacity: 1.0; filter: alpha(opacity=100); -moz-opacity: 1.0; width: 180px; height: 110px; }
.boxbuttons img:visited { opacity: .75; -moz-opacity: .75; filter: alpha(opacity=75); width: 180px; height: 110px; }
.boxbuttons img:hover { -moz-opacity: .75; opacity: .75; filter: alpha(opacity=75,finishopacity=75,style=0); width: 180px; height: 110px; }

.countdown{
	z-index: 999;
	width: 420px;
	height:128px;
	background-image:url(http://www.winterwolves.com/images/promobanner.png);
	background-repeat:no-repeat;
	position: absolute;
	left: 0px;
	top: 60px;
    margin-left: 20%;
    margin-right: 65%;
    text-align:center;
    padding-top:12px;
}

.wrapper {
	position: relative;
	top:36px;
	width:1024px;
    margin-left: auto;
    margin-right: auto;	
    text-align:justify;
}
.smallwrapper {
	position: relative;
	top:36px;
	width:640px;
    margin-left: auto;
    margin-right: auto;	
    text-align:justify;
}
.description{
	font-size:16px;
	text-align:justify;
}
.description img{
	margin: 5px 10px 5px 5px;
}
.smallscreen {
	text-align:center;
}
.smallscreen img{
	margin: 0px 0px 0px 0px;
}

.description h2{
	font-size: 26px;
	text-align:center;
}

.features{
	position: relative;
	left:55px;
	top:145px;
	width:540px;
	font-size:14px;
	overflow:hidden;
}
.features span{
	font-size:16px;
}

.featuresS{
	position: relative;
	left:55px;
	top:145px;
	width:355px;
	font-size:14px;
	overflow:hidden;
}
.featuresS span{
	font-size:16px;
}

.infobox{
	position: absolute;
	left:615px;
	top:146px;
	width:360px;
    text-align:center;	
    color:#AAA;
    overflow:hidden;
}
.infobox span{
	color:white;
	text-shadow: 1px 1px 1px #000;
}
.infobox-freedemo{
	margin: -8px 0 0px 0;
}
.infobox img{
	margin: -3px 0px -3px 0px;
}
.infobox-concentrated{
	line-height: 0.95;
}
.infobox img:link { opacity: 1.0; filter: alpha(opacity=100); -moz-opacity: 1.0; }
.infobox img:visited { opacity: .75; -moz-opacity: .75; filter: alpha(opacity=75); }
.infobox img:hover { -moz-opacity: .75; opacity: .75; filter: alpha(opacity=75,finishopacity=75,style=0); }

.infoboxL{
	position: absolute;
	left:55px;
	top:146px;
	width:360px;
    text-align:center;	
    color:#AAA;
    overflow:hidden;
}
.infoboxL span{
	color:white;
	text-shadow: 1px 1px 1px #000;
}
.infoboxL-freedemo{
	margin: -8px 0 0px 0;
}
.infoboxL img:link { opacity: 1.0; filter: alpha(opacity=100); -moz-opacity: 1.0; }
.infoboxL img:visited { opacity: .75; -moz-opacity: .75; filter: alpha(opacity=75);  }
.infoboxL img:hover { -moz-opacity: .75; opacity: .75; filter: alpha(opacity=75,finishopacity=75,style=0);  }

.infoboxM{
	position: absolute;
	left:430px;
	top:146px;
	width:165px;
    text-align:center;	
    color:#AAA;
    overflow:hidden;
}
.infoboxM span{
	color:white;
	text-shadow: 1px 1px 1px #000;
}
.infoboxM-freedemo{
	margin: -8px 0 0px 0;
}
.infoboxM img:link { opacity: 1.0; filter: alpha(opacity=100); -moz-opacity: 1.0; }
.infoboxM img:visited { opacity: .75; -moz-opacity: .75; filter: alpha(opacity=75);  }
.infoboxM img:hover { -moz-opacity: .75; opacity: .75; filter: alpha(opacity=75,finishopacity=75,style=0);  }

#winbuy{
	background-image:url(http://static.winterwolves.com/assets/images/winbuy.jpg);
	background-repeat:no-repeat;
	width:174px;
	height:53px;
	text-align:left;
	padding: 5px 32px 5px 0px;
	line-height:15px;
	text-align:center;
}
#macbuy{
	background-image:url(http://static.winterwolves.com/assets/images/macbuy.jpg);
	background-repeat:no-repeat;
	width:174px;
	height:53px;
	text-align:left;
	padding: 5px 32px 5px 0px;
	line-height:15px;
	text-align:center;
	position:absolute;
	left:174px;
	top:25px;
}

#wintry{
	background-image:url(http://static.winterwolves.com/assets/images/wintry.jpg);
	background-repeat:no-repeat;
	width:174px;
	height:53px;
	text-align:left;
	padding: 5px 32px 5px 0px;
	line-height:15px;
	text-align:center;
}
#mactry{
	background-image:url(http://static.winterwolves.com/assets/images/mactry.jpg);
	background-repeat:no-repeat;
	width:174px;
	height:53px;
	text-align:left;
	padding: 5px 32px 5px 0px;
	line-height:15px;
	text-align:center;
	left:174px;
	top:25px;
}

.footer {
	z-index: 8;
	border-style:solid;
	border-top-style:dotted;
	border-top-color:#000;
	position:fixed;
	left:0px;
	bottom:0px;
	width:100%;
	height:70px;
	background-color:#777;
	color:#FFF;
}
.footer-wrapper{
	width:1024px;
    margin-left: auto;
    margin-right: auto;
}
.footer-wrapper table, td, th {
    	text-align: center;
}   

.extra{
	border-style:solid;
	border-top-style:dotted;
	border-top-color:#000;
	border-bottom-style:dotted;
	border-bottom-color:#000;
	position:absolute;
	left:0px;
	width:100%;
	height:96px;
	background-color:#434343;
	color:#AAA;
	text-align:center;
	font-size: 16px;
	margin: 15px 0 60px 0;
}
.extra span{
	color:white;
	text-shadow: 1px 1px 1px #000;
}

.extra-green{
	border-style:solid;
	border-top-style:dotted;
	border-top-color:#000;
	border-bottom-style:dotted;
	border-bottom-color:#000;
	position:absolute;
	left:0px;
	width:100%;
	height:30px;
	background-color:#509249;
	color:#FFF;
	text-align:center;
	font-size: 16px;
	margin: 15px 0 60px 0;
}
.extra-orange{
	border-style:solid;
	border-top-style:dotted;
	border-top-color:#000;
	border-bottom-style:dotted;
	border-bottom-color:#000;
	position:absolute;
	left:0px;
	width:100%;
	height:30px;
	background-color:#E79223;
	color:#FFF;
	text-align:center;
	font-size: 16px;
}
.extra-red{
	border-style:solid;
	border-top-style:dotted;
	border-top-color:#000;
	border-bottom-style:dotted;
	border-bottom-color:#000;
	position:absolute;
	left:0px;
	width:100%;
	height:30px;
	background-color:#E74423;
	color:#FFF;
	text-align:center;
	font-size: 16px;
	margin: 15px 0 60px 0;
}

.extra-wrapper{
	width:1024px;
    margin-left: auto;
    margin-right: auto;
}

/* column container */
.colmask {
	font-size: 14px;
	position: relative;
	top:-100px;
	width:1024px;
    margin-left: auto;
    margin-right: auto;	
	overflow:hidden;		/* This chops off any overhanging divs */
}
.colmask a{
	border-bottom:thin black dotted;
}
/* common column settings */
.colright,
.colmid,
.colleft {
	float:left;
	width:100%;
	position:relative;
}
.col1,
.col2,
.col3 {
	float:left;
	position:relative;
	padding:0 0 1em 0;
	overflow:hidden;
}
/* 2 Column (double page) settings */
.doublepage {
/*	background:#eee;		/* right column background colour */
}
.doublepage .colleft {
	border-right:thin black dotted;
	right:40%;			/* right column width */
/*	background:#fff;		/* left column background colour */
}
.doublepage .col1 {
	width:56%;			/* left column content width (column width minus left and right padding) */
	left:42%;			/* right column width plus left column left padding */
	text-align:justify;
}
.doublepage .col2 {
	width:36%;			/* right column content width (column width minus left and right padding) */
	left:46%;			/* (right column width) plus (left column left and right padding) plus (right column left padding) */
	text-align:justify;
}

#moreleft {
    float:left;
    width:48%;
}
#moreright {
    float:right;
    width:52%;
}
#moreclear{
	clear:both;
	height:124px;
}
#moreleft2 {
    float:left;
    width:45%;
    text-align:center;
}
#moreright2 {
    float:right;
    width:45%;
    text-align:center;
}

#moreclear2{
	clear:both;
	height:20px;
}
#moreclear3{
	clear:both;
	height:50px;
}


.divscroll{
	width: 100%;
	height:600px;
	overflow:auto;
}

/* THE CSS FILTERING */
.flavor { margin: 0 0 5px 0; clear: both; overflow: hidden; width: 100%; font-size: 14px; border-bottom:thin gray inset; }
.flavor:hover{	background-color:#BBB; }
.flavor img { float: left; margin: 0 5px 0 0; }
.flavor h3 img { float: none;  } 
#flavor-price { background-image:url("http://static.winterwolves.com/assets/images/pricebutton.png"); background-repeat:no-repeat; width: 75px; height:36px; float: right; font-size: 18px; color:white; padding: 2px 0 0 10px; margin-top:-30px;} 
#flavor-nav { margin: 0 0 15px 0; font-size: 14px;}
#flavor-nav a { padding: 2px 6px; border-bottom:thin black dotted; cursor:pointer;}
#flavor-nav a:hover, #flavor-nav a.current { border-bottom:thin blue dotted; color: blue; cursor:pointer;}

/* EXTRA HIDE/SHOW CSS */
.hidden { display: none; }
.unhidden { display: block; }

.flavor2 {
	margin: 0 5px 5px 5px;
	width:310px;
	height:320px;
	float:left;
	font-size: 15px;	
}
.flavor2 h2{
	background-color:#BBB;
	font-size: 22px;
	text-align:center;
}
.flavor2 h3{
	background-color:#BBB;
	font-size: 16px;
	text-align:center;
	padding-top:6px;
	padding-bottom:3px;
}
.flavor2 p{
	margin-top:-8px;
}
#flavor2-price { background-image:url("http://static.winterwolves.com/assets/images/pricebutton.png"); background-repeat:no-repeat; width: 75px; height:36px; float: right; font-size: 18px; color:white; padding: 2px 0 0 10px; margin-top:-36px; margin-right:-5px;} 

.newwhite{
	color:white;
	font-size:12px;
}
.newwhite a{
	color:yellow;
	font-size:12px;
}