/*
* Skeleton V1.2
* Copyright 2011, Dave Gamache
* www.getskeleton.com
* Free to use under the MIT license.
* http://www.opensource.org/licenses/mit-license.php
* 6/20/2012
*/

/* Table of Content
==================================================
	#Site Styles
	#Page Styles
	#Media Queries
	#Font-Face */

/* #Site Styles
================================================== */

/* #Page Styles
================================================== */
#top    {
	width: 100%;
	padding: 0px;
	margin: 0px;
	height:auto;
	position:relative;
}

.topmenulink, .topmenulink:link, .topmenulink:visited {
	color: #D8D9DA;
	font-size: 14px;
	text-decoration:none;
	font-weight: bold;
	margin-right:36px;
	white-space:nowrap;
}

.bottommenulink, .bottommenulink:link, .bottommenulink:visited {
	color: #58585A;
	font-size: 14px;
	text-decoration:none;
	font-weight:bold;
	margin-right:36px;
	white-space:nowrap;
}

.mainmenulinks {
    padding-top: 10px;
    padding-left: 10px;
    float:left;
}
.mainmenulinks a:last-child {
    margin-right:0 !important;
}
.topmenulink:hover, .topmenulink:focus {
	text-decoration:underline;
	color:#FFF;
}
.bottommenulink:hover, .bottommenulink:focus {
	text-decoration:underline;
}
#artistlink, #artistlink:hover, #artistlink:active {
    text-decoration: none;
    color: inherit;
}
.footer {
	width: 100%;
	margin: 0 auto 0 auto;
}

.menu-button {
	padding:2px; 
	cursor:pointer;
	display:inline-block; 
	height:22px;  /*34*/
	line-height:20px; /*34*/
	padding-right:5px; 
	padding-left:5px;
	font-family:Harabara;
	letter-spacing:2px;
    font-size: 18px;
    text-wrap: normal;
    width: 190px;
    text-align: center;
}

.menu-group{
	text-align:center;
	display:inline-block;
	padding:2px;
	float:left; 
	height:45px;  /*34*/
	border-left:solid 4px #CACACB;
	font-family: Harabara, sans-serif;
	letter-spacing:1px;
}

#miscbanner {
    top:84px;
}

.menugroupspan {
	text-align:center;
	font-family: Harabara, sans-serif;
	font-size:16px; 
	letter-spacing:1px; 
	line-height:20px; 
	padding-left:5px;
	padding-right:5px;
}

#shortlist_container {
    float: right;
}

#shortlist {
    color:#333;
    font-size: 26px;
    width: auto !important;
    text-align: left !important;
}
#mshortlist {
	color:#333;
	font-size: 20px;
	text-align: center !important;
}

.resultscontainer {
	margin: 15px;
}
.aresultscontain {
	padding: 25px;
}
#artistprevbox{
	height: 290px;
}
#artistprevtxt{
	display:inline-block;
	padding-left:10px;
	padding-right:10px;
	max-width:280px;
	vertical-align:top;
}
.video-container {
    height: 0;
    overflow: hidden;
    padding-bottom: 56.25%;
    padding-top: 30px;
    position: relative;
}
.video-container iframe {
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    width: 100%;
}
body {
    overflow-y:scroll;
    height: 100vh;
}
.mm-page {
    background-color: #fff;
}

.fb-page,
.fb-page span,
.fb-page span iframe[style] {
    width: 100% !important;
}

.mewrapper {
	width:95%;
	max-width: 640px;
	min-height: 200px;
	margin: 0 auto;
}

/* Shortlist Stuff */
.demo_box .shortlist_toggle {
	position: absolute;
	right:2px;
	bottom:2px;
	z-index:50;
}
.artist_box .fa-stack {
    font-size: 10px !important;
}
.slbackg {
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
   text-shadow: none !important;
}
.slicon_1 .slbackg {
    color: #C1022C;
}
.slicon_2 .slbackg {
    color: #F09100;
}
.slicon_3 .slbackg {
    color: #5EA14E;
}
.slicon_4 .slbackg {
    color: #004C93;
}
.slicon {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    color: #e7e8ea;
    opacity: 0.9;
    text-shadow: none !important;
}
.shortlist_toggle:hover .slicon {
    opacity: 0.7;
}
.slactive .slicon {
    opacity: 0 !important;
}

.shortlist_count {
    display: inline-block;
    width: 20px;
    height: 20px;
    background: #C1022C;
    color: #FFF;
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    border-radius: 10px;
    box-shadow: 0 0 2px black;
	text-align: center;
}

.hide {
    display: none !important;
}
.mobile-menu {
    display: none;
}

.static_button {
	background: #eee; /* Old browsers */
	background: #eee -moz-linear-gradient(top, rgba(255,255,255,.2) 0%, rgba(0,0,0,.2) 100%); /* FF3.6+ */
	background: #eee -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,.2)), color-stop(100%,rgba(0,0,0,.2))); /* Chrome,Safari4+ */
	background: #eee -webkit-linear-gradient(top, rgba(255,255,255,.2) 0%,rgba(0,0,0,.2) 100%); /* Chrome10+,Safari5.1+ */
	background: #eee -o-linear-gradient(top, rgba(255,255,255,.2) 0%,rgba(0,0,0,.2) 100%); /* Opera11.10+ */
	background: #eee -ms-linear-gradient(top, rgba(255,255,255,.2) 0%,rgba(0,0,0,.2) 100%); /* IE10+ */
	background: #eee linear-gradient(top, rgba(255,255,255,.2) 0%,rgba(0,0,0,.2) 100%); /* W3C */
	border: 1px solid #aaa;
	border-top: 1px solid #ccc;
	border-left: 1px solid #ccc;
	-moz-border-radius: 3px;
	-webkit-border-radius: 3px;
	border-radius: 3px;
	color: #444;
	display: inline-block;
	font-size: 11px;
	font-weight: bold;
	text-decoration: none;
	text-shadow: 0 1px rgba(255, 255, 255, .75);
	cursor: pointer;
	margin-bottom: 20px;
	line-height: normal;
	padding: 8px 10px;
	font-family: "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif;
}
/* #Media Queries
================================================== */
 
	/* Smaller than standard 960 (devices and browsers) */
	@media only screen and (max-width: 959px) {
		#miscbanner {
			top:115px;
		}
		#contentcontain {
			margin-top: 20px;
		}
		.resultscontainer {
			margin: 15px;
		}
		#artistprevbox{
			height: 350px;	
		}
		#artistprevtxt{
			width: 190px;
		}
		#hometxt{
			padding-right:45px;
		}
	}

	/* Tablet Portrait size to standard 960 (devices and browsers) */
	@media only screen and (min-width: 768px) and (max-width: 959px) {
		#miscbanner {
			top:115px;
		}
		#contentcontain {
			margin-top: 20px;
		}
		.resultscontainer {
			margin: 30px;
		}
		#artistprevbox{
			height: 350px;	
		}
		#artistprevtxt{
			width: 190px;	
		}
		.topmenulink, .topmenulink:link, .topmenulink:visited, .bottommenulink, .bottommenulink:link, .bottommenulink:visited {
			margin-right:49px;
		}
		.aresultscontain {
			padding: 8px;
		}
		#hometxt{
			padding-right:45px;
		}
        .menu-button{
            width: auto;
            font-size: 17px;
        }
	}

	/* All Mobile Sizes (devices and browser) */
	@media only screen and (max-width: 767px) {
		#miscbanner {
			top:180px;
		}
		#contentcontain {
			margin-top: 0px;
		}
		.menu-group{
			text-align:left;		
		}
		.resultscontainer {
			margin: 2px;
		}
		#artistprevbox{
			height: 320px;	
		}
		#artistprevtxt{
			width: 280px;	
		}
		.topmenulink, .topmenulink:link, .topmenulink:visited, .bottommenulink, .bottommenulink:link, .bottommenulink:visited {
			margin-right:95px;
		}
        .mainmenulinks a:nth-child(3){
            margin-right: 0 !important;
        }
		.aresultscontain {
			padding: 8px;
		}
		#hometxt{
			padding-right:0px;
		}
        .menu-button{
            width: 212px;
        }
        #shortlist_container {
            float: none;
            text-align: center;
        }
        #shortlist {
            width: 212px !important;
            text-align: center !important;
        }
	}

	/* Mobile Landscape Size to Tablet Portrait (devices and browsers) */
	@media only screen and (min-width: 480px) and (max-width: 767px) {
		#miscbanner {
			top:30px;
		}
		#contentcontain {
			margin-top: 10px;	
		}
		.menu-group{
			text-align:left;		
		}
		.resultscontainer {
			margin: 2px;
		}
		#artistprevbox{
			height: 290px;	
		}
		.topmenulink, .topmenulink:link, .topmenulink:visited, .bottommenulink, .bottommenulink:link, .bottommenulink:visited {
			margin-right:95px;
		}
        .mainmenulinks a:nth-child(3){
            margin-right: 0 !important;
        }
		.aresultscontain {
			padding: 12px;
		}
		#hometxt{
			padding-right:0px;
		}
        .menu-button{
            width: 212px;
        }
        #shortlist_container {
            float: none;
        }
        #shortlist {
            width: 212px !important;
            text-align: center !important;
        }
        #page_wrapper {
            padding-top:50px;
        }
        .mobile-menu {
            display: inline-block;
        }
        .desktop-menu {
            display: none;
        }
	}

	/* Mobile Portrait Size to Mobile Landscape Size (devices and browsers) */
	@media only screen and (max-width: 479px) {
		#miscbanner {
			top:30px;
		}
		#contentcontain {
			margin-top: 10px;	
		}
		.menu-group{
			text-align:left;		
		}
		.resultscontainer {
			margin: 35px;
		}
		#artistprevbox{
			height: 520px;
		}
		.topmenulink, .topmenulink:link, .topmenulink:visited, .bottommenulink, .bottommenulink:link, .bottommenulink:visited {
			margin-right:15px;
			font-size: 14px;
		}
		.aresultscontain {
			padding: 8px;
		}
		#hometxt{
			padding-right:0px;
		}
        .menu-button{
            width: 280px;
        }
        #shortlist_container {
            float: none;
        }
        #shortlist {
            width: 280px !important;
            text-align: center !important;
        }
        #page_wrapper {
            padding-top:50px;
        }
        .mobile-menu {
            display: inline-block;
        }
        .desktop-menu {
            display: none;
        }
	}


/* #Font-Face
================================================== */
/* 	This is the proper syntax for an @font-face file
		Just create a "fonts" folder at the root,
		copy your FontName into code below and remove
		comment brackets */

@font-face {
	    font-family: Harabara;
	    src: url('/assets/fonts/Harabara.ttf') format('truetype');
	    font-weight: normal;
	    font-style: normal; }