﻿/* PRIMARY LAYOUT ELEMENTS   
----------------------------------------------------------*/

body   
{   
    margin: 0px;
    padding: 0px;
    background: #000000; /*Black*/
    font-family: "Helvetica Neue", "Lucida Grande", "Segoe UI", Arial, Helvetica, Verdana, sans-serif;
    font-size: .80em;
    color: #FFFFFF; /*White*/
}

#PageWrapper
{
    width: 800px;
    height: auto;
    margin-left: auto;
    margin-right: auto;
    margin-top: 0;
    padding: 0px 10px 0px 10px;
    text-align: left;
    /*filter: Alpha(opacity=50);*/
    /*filter:progid:DXImageTransform.Microsoft.Alpha(opacity=50);*/
}

#MasterPageWrapper
{
    width: 800px;
    height: auto;
    margin-top: 0;
    overflow:auto;
}

#ContentPanelL
{
    float: left;  /*
    width: 600 (560 + 20 + 20)   */
    width: 560px;
    padding:20px 20px 0px 20px;
    background: #111111;
}

#ContentPanelR
{
    float: left;   /*
    width = 200 (180 + 10 + 5 + 5)  buttons = (4 x 45) */
    width: 180px;
    margin-left: 10px;
    padding:10px 5px 10px 5px;
    background: #111111;
}


/*          LEFT CONTENT ELEMENTS  (Overall Width is 600px)
-----------------------------------------------------------------------*/
#KGQ
{    
    width: 560px;   /*
    height = 323 (283 + 20 + 20)   */
    height: 283px;
    padding: 20px 0px 20px 0px;
    background: transparent url('../img/about/kgq.jpg') no-repeat 0px 20px; /* img 283 high */
}

.UTIWrapper
{   
    width: 560px;  /*
    width = 560 (70 + 420 + 70) */
    height: 413px; /*
    height = 413 (20 373 20 */
    padding-left:70px;
    padding-right:70px;
    padding-top:20px;
    padding-bottom:20px;
}


.PosterWrapper
{   
    width: 560px;  /*
    width = 560 (70 + 420 + 70) */
    height: 634px; /*
    height = 634 (20 594 20 */
    padding-left:70px;
    padding-right:70px;
    padding-top:20px;
    padding-bottom:20px;
}

.VideoWrapper
{   
    width: 560px;  /*
    height = 375 (315 + 20* + 20) (20* = title div)  */
    height: 335px;
    padding-bottom:20px;
}

.VideoEmbed
{
    width: 560px;
    height: 315px;    
}

.VideoTitle
{
    font-family: Impact;
    font-size: 16px;
    width: 560px;
    height: 20px;
    text-align: center;
    vertical-align: middle;
}

.ReleaseWrapper
{
    position:relative;
    width:560px;
    height:290px;
    padding-bottom:20px; 
}

img.release
{
    float:left;     /*  image size = 290px x 290px  */
}

img.buy_release
{
    position:absolute;  
    clear:left; 
    left:335px;    /*  560 - 225  */
    bottom:20px;    /*  image size = 225px x 120px  */
}

p.release
{
    position:absolute;
    width: 225px; 
    left:335px;
    top: 20px;
}

div.about
{
    padding-top: 15px;
    text-align: justify;
}

img.aboutleft
{
    float: left;   /*
    width = 250 (230 + 20)   */
    width: 230px;       /* actual size = 300px x 300px   */
    height: 230px;  
    margin-right: 20px; 
}

img.aboutright
{
    float: right;   /*
    width = 250 (230 + 20)   */
    width: 230px;       /* actual size = 300px x 300px   */
    height: 230px;  
    margin-left: 20px; 
}

div.photosrow
{       /*
    width = 560 (558 + 1 + 1)   */
    width: 558px;    /*
    height = 188 (186 + 1 + 1)   */
    height: 186px;
    margin: 0px 1px 0px 1px;
}

div.photoscell
{
    float: left;
    width: 166px;
    height: 166px;   /*
    background-color: green;   */
    margin: 10px;
    text-align:center;
    vertical-align: middle;
    display: table-cell;
}

img.photoscell
{
    margin: 0px auto;
}

/*          RIGHT CONTENT ELEMENTS
-----------------------------------------------------------------------*/

#comments
{
    width: 150px;
    height: 120px;
    margin: 0px;
}

/*--------------------------*/


#ContentDeliveryR
{
    height:730px;
    float: left;
    width: 224px;   /*207*/
    padding-left: 19px;
    padding-right: 24px;
    padding-top: 8px;
    font-size: 11px;
    background: #cccc33 url('../img/misc/Delivery.gif') no-repeat right bottom;
}

#buttons
{
    width: 180px;
    height: 45px;
}

.iphone
{
    float: left;   /*
    width = 45 (43 + 1 + 1)   */
    width: 43px;
    margin: 1px;
}

/*          CONTENT STYLES
----------------------------------------------------------*/

p.gigs  /* matches spacing of h4 */
{
    padding-bottom: 0px;
    margin-bottom: 0px;
    padding-top: 0px;
    margin-top: 0px;
    line-height: 20px;
}

p.comment   /* Social - Soundcloud Comments */
{
    margin: 0px;
    padding: 0px;
    line-height: 20px; 
}

p.content
{
    padding-bottom: 0px;
    margin-bottom: 0px;
    padding-top: 0px;
    margin-top: 0px;
    line-height: 17px;
}

/*          HEADER (Banner Menu) / FOOTER 
------------------------------------------------------------------------------------------*/
#SiteHeader     /* Banner and Menu Control */
{
    width: 800px;   /*
    height = 236 (224 + 6 + 6)   */    
    height: 224px;  /* (180 + 44) */
    margin:6px 0px 6px 0px;    
}

#SiteBanner
{    
    width: 800px;   /*
    height = 180 (174 + 6)   */
    height: 174px;
    margin-bottom: 6px;
    background: transparent url('../img/banner.jpg') no-repeat left top; /* img 174 high */
}
                    
#MenuBar
{ 
    width: 800px;    
    height: 44px; 
    background: transparent url('../img/gradmenu.jpg') no-repeat left top;/* img 44 high */
}

.MenuItem
{
    float: left;
    width: 114px;  /*
    height = 44 (33 + 11) */     
    height: 33px;
    padding-top: 11px;
    font-family: Impact;
    font-size: 18px;
    text-align: center;
}

a.MenuAnchor:link, a.MenuAnchor:visited, a.MenuAnchor:hover, a.MenuAnchor:active
{
    color: #FFFFFF;
    text-decoration: none;
}

.FooterBar
{ 
    width: 800px;  /*
    height = 56px (44 + 6 + 6) */     
    height: 44px; 
    margin:6px 0px 6px 0px;
    background: transparent url('../img/grad.jpg') no-repeat left top; /* img 174 high */
    font-family: Impact;
    font-size: 18px;
}

.FooterItem
{
    float: left;
    width: 800px;   /*
    height = 44 (33 + 11) */ 
    height: 33px;/* Tot = 44px -11px*/
    text-align: center;
    padding-top: 11px; /* pads out text to correct height */
    color: #FFFFFF;
}



/*          HEADINGS   
----------------------------------------------------------*/

h1, h2, h3, h4
{
    font-size: 1.5em;
    text-transform: none;
    font-weight: 200;
    padding-bottom: 0px;
    padding-Top: 0px;
    margin-bottom: 0px;
    margin-Top: 0px;
    text-align: center;
}

h1  /*  Page Content Headings    */
{
    font-family: Impact;  
    font-size: 20px;
    font-weight: normal;
    line-height: 100%;
}

h2  /*   Quote Heading - padded at top  */
{
    padding-top: 20px;
    font-size: 14px;
    font-weight: 600;
    font-family: Arial, Helvetica, sans-serif;
    text-align: left;
}

h3  /*    Social - Soundclod feed  */
{
    padding: 18px 0px 10px 0px;
    font-size: 18px;
    font-weight: normal;
    font-family: Impact;    
}

h4  /*   Gig Info - padded at top/bot - matches spacing of p.gigs */
{
    padding-top: 2px;
    padding-bottom: 2px;
    font-size: 14px;
    font-weight: 600;
    font-family: Arial, Helvetica, sans-serif;
    text-align: left;
}

/*          DEFAULTS
----------------------------------------------------------*/

a:link, a:visited
{
    color: #8888FF;
    text-decoration: none;
}

a:hover
{
    color: #8888FF;
}

a:active
{
    color: #8888FF;
    text-decoration: none;
}

p
{
    margin-bottom: 10px;
    line-height: 1.6em;
}

img
{
    border: none; 
}