/*********************************************************************************************

Project : rwdgrid - responsive grid system for your next project
URI: http://rwdgrid.com/
Version: 1.0
Author: Vineeth G S 
Author URI: http://www.gsvineeth.com
Github URI: https://github.com/gsvineeth/rwdgrid/

**********************************************************************************************

1.  Default / for Grid 1200px             
2.  960px 
3.  720px
4.  lt 720px 


**********************************************************************************************/


/********************************************************************************************* 

1.  Default / for Grid 1200px             

*********************************************************************************************/   

/* Style for demo REMOVE THIS SECTION */
.grid-1, .grid-2, .grid-3, .grid-4, .grid-5, .grid-6, .grid-7, .grid-8, .grid-9, .grid-10, .grid-11, .grid-12,  .grid-13,  .grid-14,  .grid-15,  .grid-16 {
	
	/*height:50px;*/
	color:#333;
	margin-bottom:15px; z-index: 0;
}

::selection {
	background: rgb(255,0,66); 
	color: #fff; /* Safari */
	text-shadow:1px 1px 1px #000;
	}
::-moz-selection {
	background: rgb(255,0,66); 
	color: #fff; /* Firefox */
	text-shadow:1px 1px 1px #000;
}

body {
	background:#f5f5f5; background: url(imgs/bg_dots.png) repeat 0 0;
	font-size: 100%;
	/*background: url(imgs/bg_test.png) repeat-x 0 0;
	background-size: 100% 10%;*/
}


h1 {
	font-size:3em; 
	background: rgb(255,0,66); 
	color: #fff; /* Safari */
	text-shadow:1px 1px 1px #000!important;
	margin-top: 0.35em;
	padding-bottom: 0.5em!important;
	line-height: 0.4em;
	margin-left: 0.1em;
	padding-left: 0em!important;
	padding-right: 0em!important;
	padding-top: 0.3em!important;
	width:12.2em;
	/*width:486px;*/
}

h1::selection {
	background: #fff; 
	color: #000; /* Safari */
	text-shadow:1px 1px 1px rgb(255,0,66);
	}
h1::-moz-selection {
	background: #fff; 
	color: #000; /* Firefox */
	text-shadow:1px 1px 1px rgb(255,0,66);
}

header h2 { font-size: 1em; margin-top: -0.2em;}
header h2 a {color:rgb(255,0,66)}
header h2 a:hover { color:rgb(153,153,153)!important;}

.social { min-height:6em; padding-top:1em; }
.social ul {background-color:rgb(255,255,255); }
.social li a { display:block; float:left; margin:0 0.8em; border:0.3em solid #FFF; cursor:pointer;}
.social li a:hover { border:0.3em solid #000;}
a.facebook { background:url(imgs/icon_facebook.png) no-repeat 0 0; width:48px; height:48px; background-size:48px 48px;}
a.twitter { background:url(imgs/icon_twitter.png) no-repeat 0 0; width:48px; height:48px; background-size:48px 48px;}
a.soundcloud { background:url(imgs/icon_soundcloud.png) no-repeat 0 0; width:48px; height:48px; background-size:48px 48px;}

h2 {font-size:1.5em;}

p { font-size: 0.8em;}

p {
	padding:0.5em 1em 0.5em 1em;
	text-shadow:1px 1px 1px #FFF;
}

h1, h2, h3, h4 {
	font-family: 'ProximaNovaLight', sans-serif;
	text-shadow:1px 1px 1px #FFF;
	padding:0.7em 0.6em 0.2em 0.6em;
}

img { border: 0; width: 100%; display: block; max-width: 100%; } /* For the responsive images js plugin */

.main { background: url(imgs/head.png) no-repeat top right; background-size: 31.9em 43.2em; width:100%; height:852px;}
.scottmac { background: url(imgs/scott.jpeg) no-repeat 0px 0px;  float:right; position: relative;}

.nbg {background: transparent!important;}

a {text-decoration: none}
a:hover {color:rgb(255,0,66)!important;}
a:visited {color:#000;}

a.download { 
	background:url(imgs/download_icon_sml.png) no-repeat 0 0; 
	display:block; 
	width:15px; 
	height:27px; 
	float:right; 
	margin:0 1em 0 0; 
	position:relative; 
	bottom:1.5em;
	cursor:pointer;
}
a.download:hover { 
	background:url(imgs/download_icon_sml_hover.png) no-repeat 0 0;
}

.tooltip div, .tooltip_download div {  
        /* hide tool tip box */  
        display: none; 
}  
      
.tooltipHover, .tooltip_download_Hover {  
        position:relative;   
        color:#069;  
        cursor: default; 
}  
	
    /* style the tool tip */  
.tooltipHover div, .tooltip_download_Hover div{   
        /* you can change anything in the styling attributes below */  
		font-family: 'ProximaNovaLight', sans-serif;
		min-width:5em;
        font-size: 0.7em;   
        font-weight: normal;      
        padding:10px;      
        background-color:rgb(51,51,51);   
        color:rgb(255,255,255);  
        /* DON'T CHANGE ANYTHING BEYOND THIS LINE */  
        /* making round corners for Moziall Firefox and Safari. IE dosen't support */  
        -moz-border-radius: 3px;   
        -webkit-border-radius: 3px;   
        position:absolute;   
        display:block;   
        text-align: left;    
        /* make it visible above the all elment, z-index decide the order of elements we show on page. 5000 is much higher value and tool tip will always come above of all elements */  
        z-index:5000;	
}

.tooltipHover div {
        left:10px; /* correct positioning*/  
        top:45px; /* adjust positioning from top so that tool tip will come above the elemnt */  
}

.tooltip_download_Hover div{  
		width:6.78em;
		background-color:rgb(255,0,66);    
        left:12px; /* correct positioning*/  
        top:8px; /* adjust positioning from top so that tool tip will come above the elemnt */  
}  

/* Fonts
/*---------------------------*/

@font-face {
    font-family: 'ProximaNovaBlack';
    src: url('../fonts/proximanova-black-webfont.eot');
    src: url('../fonts/proximanova-black-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/proximanova-black-webfont.woff') format('woff'),
         url('../fonts/proximanova-black-webfont.ttf') format('truetype'),
         url('../fonts/proximanova-black-webfont.svg#ProximaNovaBlack') format('svg');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'ProximaNovaLight';
    src: url('../fonts/proximanova-regular-webfont.eot');
    src: url('../fonts/proximanova-regular-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/proximanova-regular-webfont.woff') format('woff'),
         url('../fonts/proximanova-regular-webfont.ttf') format('truetype'),
         url('../fonts/proximanova-regular-webfont.svg#ProximaNovaLight') format('svg');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'ProximaNovaSemibold';
    src: url('../fonts/proximanova-semibold-webfont.eot');
    src: url('../fonts/proximanova-semibold-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/proximanova-semibold-webfont.woff') format('woff'),
         url('../fonts/proximanova-semibold-webfont.ttf') format('truetype'),
         url('../fonts/proximanova-semibold-webfont.svg#ProximaNovaSemibold') format('svg');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'ProximaNovaLight';
    src: url('../fonts/proximanova-light-webfont.eot');
    src: url('../fonts/proximanova-light-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/proximanova-light-webfont.woff') format('woff'),
         url('../fonts/proximanova-light-webfont.ttf') format('truetype'),
         url('../fonts/proximanova-light-webfont.svg#ProximaNovaLight') format('svg');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'ProximaNovaBold';
    src: url('../fonts/proximanova-bold-webfont.eot');
    src: url('../fonts/proximanova-bold-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/proximanova-bold-webfont.woff') format('woff'),
         url('../fonts/proximanova-bold-webfont.ttf') format('truetype'),
         url('../fonts/proximanova-bold-webfont.svg#ProximaNovaBold') format('svg');
    font-weight: normal;
    font-style: normal;

}	
	
/********************************************************************************************* 

1.  Default / for Grid 1200px             

*********************************************************************************************/  

body{
	font-family:sans-serif;
	font-size: 120%;
}
	
header {height: 100px;}

/* 
h1 {font-size:120%;}
h2 {font-size:120%;}
p { font-size: 120%;}
*/

.scottmac { background-size:280px 280px;  width:280px; height:280px; top:-115px; }
.mixinfo { min-height: 5em; }
.mixinfo p { width:12em;}
.mix {
	background:#f5f5f5; background: url(imgs/bg_dots.png) repeat 0 0;
	box-shadow: inset 0px 0px 0px 5px white;
	-moz-box-shadow: inset 0px 0px 0px 5px white;
	-webkit-box-shadow: inset 0px 0px 0px 5px white;
	
	-webkit-box-shadow: 0px 17px 26px -18px black;
	   -moz-box-shadow: 0px 17px 26px -18px black;
	        box-shadow: 0px 17px 26px -18px black;
}

/********************************************************************************************* 

2.  960px 

*********************************************************************************************/  

@media only screen and (min-width: 960px) and (max-width: 1199px) {

body { font-size: 100%;}
header {height: 80px;}

/*
h1 {font-size: 100%;}
h2 {font-size:100%;}
p {font-size: 12px;}
*/

.scottmac { background-size:220px 220px;  width:220px; height:220px; top:-95px;}
.mixinfo { min-height: 8.3em;}
}
	

/********************************************************************************************* 

3.  720px 

*********************************************************************************************/ 

@media only screen and (min-width: 720px) and (max-width: 959px) {

body {font-size: 70%}
header { height: 70px;}

/*
h1 { font-size: 30px;}
h2 {font-size:14px;}
p {font-size: 10px;}
*/

.scottmac { background-size:160px 160px;  width:160px; height:160px; top:-85px;}
/*.mixinfo { min-height: 106px;}*/
}
 
 

/********************************************************************************************* 

4.  lt 720px 

*********************************************************************************************/ 

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

body { font-size:80%}
header { height: 60px;}

h1 { font-size:1.7em;}

header h2 {margin-left: 0.3em; margin-top:0.2em;}
header h2 a {color:rgb(0,0,0)}

.social li a { margin:0 1.6em;}

.scottmac { background-size:60px 60px;  width:60px; height:60px; top:-468px;}
/*.mixinfo { min-height: 60px;}*/
}


/**
 *
 * Tracklisting Pop-Up
 *
 */


.tracklist {
	background:url(imgs/tracklist_icon.png) no-repeat 0 0;
    cursor: pointer;
	width:1.3em;
	height:1.1em;
	display:block;
	float:right; 
	margin:0.2em 0.6em 0 0; 
	position:relative; 
	bottom:1.5em;
}
.tracklist:hover {background:url(imgs/tracklist_icon_hover.png) no-repeat 0 0;}

.tracklist.small{
  
}

.tracklistButton > span{
    font-size:84%;
	color:rgb(255,255,255);
}

.tracklistButton.bClose{
	background: rgb(255,0,66); 
    border-radius: 0px;
    box-shadow: none;
    font: bold 131% sans-serif;
    padding: 0 6px 2px;
    position: absolute;
    right: -7px;
    top: -7px;
	cursor:pointer;
	font-family: 'ProximaNovaLight', sans-serif;
}



#popup,#popup2,.bMulti{
    background-color:rgb(0,0,0);
    /*color: #2B91AF;*/
	color:rgb(255,255,255);
    display: none;
    min-width:20em;
    padding: 25px;
	font-family: 'ProximaNovaLight', sans-serif;
	font-size:90%;
	line-height:2em;
}
.lt-ie9 .bModal{
	background-color:#000;
}



/**
 *
 * Add to home screen for Apple devices - Main container
 *
 */
#addToHomeScreen {
	z-index:9999;
	-webkit-user-select:none;
	-webkit-box-sizing:border-box;
	width:240px;
	font-size:15px;
	padding:12px 14px;
	text-align:left;
	font-family:helvetica;
	background-image:-webkit-gradient(linear,0 0,0 100%,color-stop(0,#fff),color-stop(0.02,#eee),color-stop(0.98,#ccc),color-stop(1,#a3a3a3));
	border:1px solid #505050;
	-webkit-border-radius:8px;
	-webkit-background-clip:padding-box;
	color:#333;
	text-shadow:0 1px 0 rgba(255,255,255,0.75);
	line-height:130%;
	-webkit-box-shadow:0 0 4px rgba(0,0,0,0.5);
}

#addToHomeScreen.addToHomeIpad {
	width:268px;
	font-size:18px;
	padding:14px;
}

/**
 *
 * The 'wide' class is added when the popup contains the touch icon
 *
 */
#addToHomeScreen.addToHomeWide {
	width:296px;
}

#addToHomeScreen.addToHomeIpad.addToHomeWide {
	width:320px;
	font-size:18px;
	padding:14px;
}

/**
 *
 * The balloon arrow
 *
 */
#addToHomeScreen .addToHomeArrow {
	position:absolute;
	background-image:-webkit-gradient(linear,0 0,100% 100%,color-stop(0,rgba(204,204,204,0)),color-stop(0.4,rgba(204,204,204,0)),color-stop(0.4,#ccc));
	border-width:0 1px 1px 0;
	border-style:solid;
	border-color:#505050;
	width:16px; height:16px;
	-webkit-transform:rotateZ(45deg);
	bottom:-9px; left:50%;
	margin-left:-8px;
	-webkit-box-shadow:inset -1px -1px 0 #a9a9a9;
	-webkit-border-bottom-right-radius:2px;
}


/**
 *
 * The balloon arrow for iPad
 *
 */
#addToHomeScreen.addToHomeIpad .addToHomeArrow {
	-webkit-transform:rotateZ(-135deg);
	background-image:-webkit-gradient(linear,0 0,100% 100%,color-stop(0,rgba(238,238,238,0)),color-stop(0.4,rgba(238,238,238,0)),color-stop(0.4,#eee));
	-webkit-box-shadow:inset -1px -1px 0 #fff;
	top:-9px; bottom:auto; left:50%;
}


/**
 *
 * Close button
 *
 */
#addToHomeScreen .addToHomeClose {
	-webkit-box-sizing:border-box;
	position:absolute;
	right:4px;
	top:4px;
	width:18px;
	height:18px; line-height:14px;
	text-align:center;
	text-indent:1px;
	-webkit-border-radius:9px;
	background:rgba(0,0,0,0.12);
	color:#707070;
	-webkit-box-shadow:0 1px 0 #fff;
	font-size:16px;
}


/**
 *
 * The '+' icon, displayed only on iOS < 4.2
 *
 */
#addToHomeScreen .addToHomePlus {
	font-weight:bold;
	font-size:1.3em;
}


/**
 *
 * The 'share' icon, displayed only on iOS >= 4.2
 *
 */
#addToHomeScreen .addToHomeShare {
	display:inline-block;
	width:18px;
	height:15px;
	background-repeat:no-repeat;
	background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABIAAAAPCAQAAABDj1eZAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAUdJREFUKFNtkLtLw1AYxS/qJLhXVKr2ZRulUNtiqgSb3CziICI6ucTFVYcOnaQOFRwUnNTRwUWXgpP/QdHNUEQUHGxofYBTlRs83iZNjKTncOGe7/vx3QchXUWn6FL3jhfKUdCCr5zuifV5oDiHQM+c+CIhiiCSWNu08iq9oHXKLAiqrgR4UXqlOEYZt++ExEL0wW7+OW0G10muLv9gmqfe5FAWKmTMYQYiFL7PYwyLOD8lSjNh2gdnPzMII4QUBxc4OothbAF7GCBKQ0YbSWyPQsIhqvetS+y0ygGMo/KFZfviDvR4AhwgZU9dGYnA0J/6ndc15i3ouYIMcVVUcEXIoOxCeRCfwP8sXBSdjtpUv/1QW+K16kCCIUC4id9Fa0JtkluwVkSfqPL6RwfSDA0aNlx7k/bWgViB7bMS2/1vk5sdsZLN/ALSuL3tylO4RAAAAABJRU5ErkJggg==);
	background-size:18px 15px;
	text-indent:-9999em;
	overflow:hidden;
}


/**
 *
 * The touch icon (if available)
 *
 */
#addToHomeScreen .addToHomeTouchIcon {
	display:block;
	float:left;
	-webkit-border-radius:6px;
	-webkit-box-shadow:0 1px 3px rgba(0,0,0,0.5),
		inset 0 0 2px rgba(255,255,255,0.9);
	background-repeat:no-repeat;
	width:57px; height:57px;
	-webkit-background-size:57px 57px;
	margin:0 12px 0 0;
	border:1px solid #333;
	-webkit-background-clip:padding-box;
}


/**
 *
 * The 'share' icon for retina display
 *
 */
@media all and (-webkit-min-device-pixel-ratio: 2) {
	#addToHomeScreen .addToHomeShare {
		background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACQAAAAeCAQAAADu6HTYAAADPElEQVR4Xq3TX2gcRRzA8e/M7mVv2+TSNpc/TZtrY6jUGqgaSAmEChKLrYK0YH0RFC2CSCkEfCghiKU04J8qNigq6os+iQV98MHWFwVBrQQRWs21lBw5cw3NNb1/udu72RGG5Y77IzXW77D7sAwf5scyYoL6BGXSDKFZwaGpLvIUaeoCkvX1MmsM0Ny6oRSQYOLuIS+YZOpfQdqslpUxcZrzTVAz4qPwW2O3CeIwC/RSzeY6Ow1QhUrkr+YOWfEKDkEP8Rij7CHKJmrFSDHBdwGEE5wiGChPN+PnT8VdRtEIl1d4gRj/1EVe5ZSBKGh8iqQpo/Fo5+3C/gz0MYg4zgwbqday1/Q4B8BGQ45d/Hi54lakCrU5obOcidJpu1+Lg9whjabyaOYLnrIBFFaRD+xe2ybMDWY66GmP/WA9cGfGp0CWhy0wkMN8inepFiH2rV1j0NQSNQbFLRQnS8/8YSDBBpadfv4CYDub2fmeHDNAsL1MBWUel0iA+Xik6eHcyvD3vAMSU1TGuA/YRS+dD7ovCQN43GKRFCU20Kd3V/avDVVyAZ5niTEuLA5/zBGWg9EEEhfJKN200Tat8CmRAQb9+wv7soPlHt2tQorsz1uPbr0HTY4sJwrH47zJZwABBAKLMBoQXepwgTwdHCo+fXMkQ4lrxEmQ5AaXipPqDY9V2vn09tgvTPI71EEGYxM+/uMJLJ4svpgaWGKOi/xKgmqLSUGSUd5f2vIVJ/CgBaTIUsZ7ZBsn0+NzfMOXLFCXQyTcybN6ep5ZZgUOHn7jpfUpsZshdugPGf+E5zjbyHTSRyQ8xfRPPM/s63RHeuknSoT22mjmmnAOIMkUZ6D1xSfPPAfd1WFKM3sO2CMaHx8M1NjnXKHaAGGkOW0C02WeYHUz4qMtx+w5gUDS8NckYe5lHsMYwCZEPyEEmjLDZFmAS7CDviMdxyTkMNVBKEmYLvbiQQBIBBbCQG04bGQvFWz6CfsCQLWCigILFwcfkGYBiOpbYuOizTAyYyDdCtrGaRG1LCkIgMYEFhI0WqQZoSlbGRyHKe4qOx7iv2bVQW9dp4dlM/x6kmwnWQcd/Q3FCqwTEiT5s+6D5v/pb0SSHyg7uhMWAAAAAElFTkSuQmCC);
	}
}