/*
	=====================================
	project: PopFizz Design
	author:  Irshaad Hussain (www.popfizzdesign.com)
	-------------------------------------
	2011. popfizz design
	=====================================
*/

/* css resets */
*{margin:0;padding:0}:focus,:active {outline:0}img{border: 0}*

/* baseline styles */
body { font: 16px "lucida grande","lucida sans unicode","lucida sans",arial,sans-serif; 
    background: #000000;
	color: #777; 
	text-align: center;
    margin: auto;
    }
    
body { background-image: url("../images/bg.jpg");
    background-position: center top;
    background-repeat: no-repeat;
    background-attachment: fixed;
    /* overflow: scroll; */

    }
  

a:link a:visited a:active {text-decoration: none;
    font-style: normal;
    color: #ffffff;
    }
    
a:link a:hover a:active {
	-webkit-transition: color .7s ease-in-out;
	}

a:hover { color: #a26200;
    text-shadow:2px 4px 34px #0e0e0c;}
    
a:active {text-decoration: none;
    font-style: normal;
    color: #fff;}

h1 {font-family: Helvetica, Tahoma, Verdana;
    font-size: 230px;
	font-weight: normal; 
	color: red;
	margin-bottom: 15px;
    }
    
/*	
h1 a:link { color: red; 
	font-size: 190px;
    font-style: normal;
     opacity: 1;
    -webkit-transition: opacity 0.7s ease-in-out;
	-moz-transition: opacity 0.7s ease-in-out;
	-o-transition: opacity 0.7s ease-in-out;
	transition: opacity 0.7s ease-in-out;}
    
h1 a:hover { 
    filter:alpha(opacity=30);
    -moz-opacity:0.3;
    -khtml-opacity: 0.3;
    opacity: 0.3;
    }
*/

h2 { font-size: 16px;
	margin-bottom: 5px;}

h3 {text-decoration: none; 
    font-size: 20px;  
	font-weight: normal;
    color: red; 
    text-shadow: 0px 1px 1px #000;}

h4 { margin: 0 0 15px; 
	color: #555; 
	font-weight: normal; 
	font-size: 20px; 
	font-weight: normal; }

p { clear: both; 
    font-size: 13px;  
	font-weight: normal;
	color: #ffffff;
	line-height: 22px; 
	margin: 0 0 15px; }
    
em { color: #0085b2;
    font-style: normal;
    font-size: 16px;}
	
ul { list-style: none; }

ul a { text-decoration: none; 
    font-style: italic;
    color: #fff;}

/*li { display: block; }

li a { display: block; 
	color: #777; }*/

/*	
figure { display: block;
	border: 1px solid #777;
	width: 980px;
	height: 500px;
	overflow: hidden;
	-moz-border-radius: 7px;
    -webkit-border-radius: 7px;
    border-radius: 7px;
    -moz-box-shadow:2px 2px 3px #999;
    -webkit-box-shadow:2px 2px 3px #999;
    box-shadow:2px 2px 3px #999; }


.line { clear: both; 
	border-bottom: 1px solid #ddd;
	margin: 1px 0 1px; }
*/

.clear { clear: both; }

.black {color: #000;
    text-shadow:1px 1px 33px #fff;}

span { font-style: normal;
    color: red;
    opacity: 1;
    -webkit-transition: opacity 0.7s ease-in-out;
	-moz-transition: opacity 0.7s ease-in-out;
	-o-transition: opacity 0.7s ease-in-out;
	transition: opacity 0.7s ease-in-out;}
    
span:hover { 
    filter:alpha(opacity=30);
    -moz-opacity:0.3;
    -khtml-opacity: 0.3;
    opacity: 0.3;
}

/* main styles start here */

/* center the page in browser window */
#content { /* width: 920px; */
    width: 716px;
    height: 660px;
	text-align: left;
	margin: 0 auto;
	padding: 8px;
   }
    
    
/* bg pic set to size of browser window in body tag  

img.bg {
    
        min-height: 100%;
        min-width: 1920px;

        width: 100%;
        height: auto;

        
        position: fixed;
        top: 0;
        left: 0;
}

@media screen and (max-width: 1920px) { 
        img.bg {
                left: 50%;
                margin-left: -960px;   
        }
}
*/

/* styling for popfizz title  */
header {float: left; 
        text-align: center;
        text-shadow:1px 1px 33px #000;
        margin-top: 15px;
        /* margin-left: 105px; */
        } 

header h1 a {text-decoration: none;}

header h3 a {text-decoration: none;}
        

nav li { display: block;
	float: right;
	margin: 57px 20px 5px 5px;
	line-height: 30px;}

/* styling for 3 information panel columns and the rounded corner box */
#features { 
    width: 720px;
	overflow: hidden;
	margin-top: 20px;
    /* margin-left:108px; */
	border: 1px solid #000;
	-moz-border-radius: 7px;
    -webkit-border-radius: 7px;
    border-radius: 7px;
    -moz-box-shadow:2px 2px 3px #1a1a1a;
    -webkit-box-shadow:2px 2px 3px #1a1a1a;
    box-shadow:2px 2px 3px #1a1a1a; 
    background-color: #000;
    filter:alpha(opacity=60);
        -moz-opacity:0.6;
        -khtml-opacity: 0.6;
        opacity: 0.6;
    -webkit-transition: opacity 0.8s ease-in-out;
	-moz-transition: opacity 0.8s ease-in-out;
	-o-transition: opacity 0.8s ease-in-out;
	transition: opacity 0.8s ease-in-out;
    /* z-index: 90500; */
    }
	
#features li {display: block;
	float: left;
	width: 200px;
    margin-top: 10px;
	margin-left: 20px;
	padding: 8px 8px 8px 8px;
    filter:alpha(opacity=100);
        -moz-opacity:1;
        -khtml-opacity: 1;
        opacity: 1;
    /* text-shadow: 0px 1px 1px #000; */
    }
        
#features li p {margin-top: 10px;
    margin-bottom: 5px;
    }
    

/* change opacity of features background
#features:hover {
    filter:alpha(opacity=70);
        -moz-opacity:0.7;
        -khtml-opacity: 0.7;
        opacity: 0.7;
    }
*/

#features li.infobutton {
    display:block;
    width: 720px;
    overflow: visible;
    margin-top: 0px;
    }

/* this is to center the info icon */
.infobutton a {display: block;
	width: 720px;
    margin-left:30px;
    filter:alpha(opacity=30);
        -moz-opacity:0.3;
        -khtml-opacity: 0.3;
        opacity: 0.3;
        -webkit-transition: opacity 0.8s ease-in-out;
	-moz-transition: opacity 0.8s ease-in-out;
	-o-transition: opacity 0.8s ease-in-out;
	transition: opacity 0.8s ease-in-out;
	}
       
/*
.bigger { 
    margin-left:24px;
    filter:alpha(opacity=30);
        -moz-opacity:0.3;
        -khtml-opacity: 0.3;
        opacity: 0.3;
        -webkit-transition: opacity 0.8s ease-in-out;
	-moz-transition: opacity 0.8s ease-in-out;
	-o-transition: opacity 0.8s ease-in-out;
	transition: opacity 0.8s ease-in-out;
    display: block;
    }


#features .bigger:hover .icon2 { 
    filter:alpha(opacity=100);
        -moz-opacity:1;
        -khtml-opacity: 1;
        opacity: 1;
        }
*/
        
/* change opacity of info icon on hover */
.infobutton a:hover { filter:alpha(opacity=100);
        -moz-opacity:1;
        -khtml-opacity: 1;
        opacity: 1;}
        

/* style the 1st slideout */

#slideout {display: none;
    margin-top: 1px;
    /* margin-left: 108px; */
    padding-bottom: 60px;
    overflow: hidden;
    width:718px;
    border: 2px solid #15080a;
	-moz-border-radius: 7px;
    -webkit-border-radius: 7px;
    border-radius: 7px;
    -moz-box-shadow:2px 2px 3px #1a1a1a;
    -webkit-box-shadow:2px 2px 3px #1a1a1a;
    box-shadow:2px 2px 4px #1a1a1a; 
    background-color: #1a1728; 
    filter:alpha(opacity=85);
        -moz-opacity:0.85;
        -khtml-opacity: 0.85;
        opacity: 0.85;
      /* z-index:90000; */
    }
    
    
/* style the columns in the slideout */
    
.column h3 {
    text-shadow: 0px 0px 1px #000;
    margin-bottom: 15px;
    }
    
    
.column p { margin-top: 5px;
    margin-bottom: 5px;
    padding-bottom: 10px;
    
    font-size: 12px;
    text-shadow: 0px 0px 1px #000;
    }
    
.column {display: block;
	float: left;
	width: 200px;
    margin-top: 10px;
	margin-left: 20px;
    padding: 8px;
    filter:alpha(opacity=90);
        -moz-opacity:0.9;
        -khtml-opacity: 0.9;
        opacity: 0.9;
    }
    
#gallery { display: block;
    clear: both;
    margin: 3px 10px 0px 10px;
    border-top: 1px solid #8a8a8a;
    }
    
#gallery h3 { 
    margin-top: 14px;
    margin-left: 15px;
    margin-bottom: 15px;
    text-shadow: 0px 0px 1px #000;
    }
    
#gallery p { 
    margin-top: 8px;
    margin-left: 15px;
    font-size: 13px;
    text-shadow: 0px 0px 1px #000;
    }

.lastp { width: 500px;}    
        
#features li p {margin-top: 10px;
    margin-bottom: 5px;
    }
    
#html5badge {
    text-align: center;
    margin-bottom: -50px;
    -moz-box-shadow: 0px 5px 5px #ffffff;
    -webkit-box-shadow: 0px 5px 5px #ffffff;
    box-shadow: 0px 5px 5px #ffffff;
    }
    
#html5badge:hover {
    text-shadow: 1px 1px 12px #ffffff;
    }
    
#centerframe {
    text-align: center;
    margin-top: 70px;
    margin-bottom: -40px;
    margin-left: 50px;
    width: 100%;
    }

/*
#slideout .bigger { margin-top: 0px;
    margin-left: 53px;}
  */  

#call { margin-top: 1px;
    /* margin-left: 108px; */
    padding: 5px 15px 0px 15px;
    overflow: hidden;
    width:688px;
    text-decoration: none;
    border: 2px solid #15080a;
	-moz-border-radius: 7px;
    -webkit-border-radius: 7px;
    border-radius: 7px;
    -moz-box-shadow:2px 2px 3px #1a1a1a;
    -webkit-box-shadow:2px 2px 3px #1a1a1a;
    box-shadow:2px 2px 4px #1a1a1a; 
    background-color: #000; 
    filter:alpha(opacity=50);
        -moz-opacity:0.50;
        -khtml-opacity: 0.50;
        opacity: 0.50;
    z-index: 90000;
    text-align: center;
    -webkit-transition: opacity 0.8s ease-in-out;
	-moz-transition: opacity 0.8s ease-in-out;
	-o-transition: opacity 0.8s ease-in-out;
	transition: opacity 0.8s ease-in-out;
    }
    
#call:hover { 
    filter:alpha(opacity=70);
        -moz-opacity:0.70;
        -khtml-opacity: 0.70;
        opacity: 0.70;
    }
#call a {text-decoration: none;}
#call a:link a:visited a:active {text-decoration: none;}

.lastp { text-align: center; 
    margin-top: 10px;
    margin-left: 95px;
    *margin-left: 0px;
    *text-decoration: none;
    line-height: 15px; 
    color: #ffffff; 
    }
    
/* the code below is for the feedback slideout */

#contact { display: none; position: relative;
    margin-top: 1px;
    /* margin-left: 108px; */
    padding: 8px 15px 8px 25px;
    overflow: hidden;
    width:678px;
    height:450px; 
    border: 2px solid #15080a;
	-moz-border-radius: 7px;
    -webkit-border-radius: 7px;
    border-radius: 7px;
    -moz-box-shadow:2px 2px 3px #1a1a1a;
    -webkit-box-shadow:2px 2px 3px #1a1a1a;
    box-shadow:2px 2px 4px #1a1a1a; 
    background-color: #11060c; 
    filter:alpha(opacity=50);
        -moz-opacity:0.50;
        -khtml-opacity: 0.50;
        opacity: 0.50;
    z-index: 90000;
    text-align: center;
    -webkit-transition: opacity 0.8s ease-in-out;
	-moz-transition: opacity 0.8s ease-in-out;
	-o-transition: opacity 0.8s ease-in-out;
	transition: opacity 0.8s ease-in-out;
    }
    
#contact:hover {filter:alpha(opacity=85);
        -moz-opacity:0.85;
        -khtml-opacity: 0.85;
        opacity: 0.85;}



/* The code below is all for the contactable contact form */


table {
	border-collapse:collapse;
	border-spacing:0;
}

fieldset,img { 
	border:0;
    margin:0;
    padding:0;
}


caption,th {
	text-align:center;
}

q:before,q:after {
	content:'';
}

abbr,acronym { border:0;
}

/*
#contactable {
	background-image:url(../images/contact.png);
	color:#FFFFFF;
	background-color:#11060c;
	cursor:pointer;
	height:102px;
	left:0;
	margin-left:-5px; 
	*margin-left:-5px; 
	overflow:hidden;
	position:fixed;
	*position:absolute;
	text-indent:-100000px;
	top:102px;
	*margin-top:10px;
	width:44px;
	z-index:200;
    -moz-box-shadow:2px 2px 3px #1a1a1a;
    -webkit-box-shadow:2px 2px 3px #1a1a1a;
    box-shadow:2px 2px 3px #1a1a1a; 
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=70)";
    filter:alpha(opacity=70);
        -moz-opacity:0.7;
        -khtml-opacity: 0.7;
        opacity: 0.7;
}
*/

#contactForm { margin-left: 165px;
    *margin-left: 0px;
	background-color:#11060c;
	/* border:2px solid #adadad; */
	color:#FFFFFF;
	height:450px;
	left:20;
	/* margin-left:-400px;
	*margin-left:-434px;
	margin-top:-160px; */
	overflow:hidden;
	/* padding-left:30px;
	position:fixed;
	top:200px;
	width:360px;
	*width:394px;
	z-index:200; */
    /* -moz-box-shadow:2px 2px 3px #1a1a1a;
    -webkit-box-shadow:2px 2px 3px #1a1a1a;
    box-shadow:2px 2px 3px #1a1a1a; */
    filter:alpha(opacity=70);
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=70)";
        -moz-opacity:0.7;
        -khtml-opacity: 0.7;
        opacity: 0.7;
}

form#contactForm input, textarea {
	background:#FFFFFF none repeat scroll 0 0;
	outline-style:none;
	outline-width:medium;
	width:325px;
	padding:5px;
	border:1px solid #dfdfdf;
	font-family: georgia;
	font-size:14px;
	margin-bottom:10px;
    color: #000;
}

form#contactForm .submit {
	background: #FF0000 none repeat scroll 0 0;
	outline-style:none;
	outline-width:medium;
	width:338px;
	padding:5px;
	border:3px solid #F52D0F;
	outline-color:-moz-use-text-color;
	font-family: georgia;
	font-size:1em;
	cursor:pointer;
	color:#FFF;
	text-transform:uppercase;
	font-weight:bolder;
	font-family:Helvetica;
	margin-top:10px;
    -moz-box-shadow:2px 2px 3px #1a1a1a;
    -webkit-box-shadow:2px 2px 3px #1a1a1a;
    box-shadow:2px 2px 3px #1a1a1a; 
}

form#contactForm p {
	width:325px;
	font-size:0.9em;
}

form#contactForm .disclaimer {
	*margin-left:20px;
}

#contactForm .red {
	color:	#FF0000;
}

/*
#overlay {
	background-color:#ffffff;
	display:none;
	height:100%;
	left:0;
	margin:0;
	padding:0;
	position:absolute;
	top:0;
	width:100%;
	z-index:0;
} 
*/
.error { background-color: #EDBE9C; }

#name.error { background-color: #EDBE9C; } 

#email.error { background-color: #EDBE9C; }

#comment.error { background-color: #EDBE9C; }

form#contactForm label{
	*margin-left:20px;
}

form#contactForm #loading {
	background: url(../images/ajax-loader.gif) no-repeat;
	width:55px;
	height:55px;
	margin: 100px 20px 0px 135px;
    *margin: 100px 20px 0px 20px;
	display:none;
}

#callback {
	font-family: georgia;
	font-size:1.1em;
	color: #FFF;
	width:325px;
	margin: 100px 20px 0px 0px;	
    *margin: 100px 20px 0px -1px;
	display:none;
}


.holder {
	margin: 0 auto;
	/* *margin-left:20px; */
	padding-top:20px;
}	



/* style for gallery popups */

#gallery ul.columns {
	width: 720px;
	list-style: none;
	margin: 0 auto; padding: 0;
}


ul.columns li {
    margin: 15px 15px 60px 15px;
    padding: 0px;
	width: 200px;
	float: left; display: inline;
	position: relative;
    border: 2px solid #000;
        -moz-border-radius: 4px;
    -webkit-border-radius: 7px;
    border-radius: 7px;
    -moz-box-shadow:2px 2px 5px #000;
    -webkit-box-shadow:2px 2px 5px #000;
    box-shadow:2px 2px 3px #000;
    background-color: #000;
}

ul.columns li:hover {z-index: 150;} 


ul.columns li img {
	position: relative;
	filter: alpha(opacity=90);
	opacity: 0.9;
	-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=90)";
    -moz-opacity:0.9;
    -khtml-opacity: 0.9;
     z-index: 100; 
    
}

ul.columns li:hover img{
	z-index: 100;
	filter: alpha(opacity=100);
	opacity: 1;
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
    -moz-opacity: 1;
    -khtml-opacity: 1;
}



ul.columns li .info {
	position: absolute;
	left: -10px; top: -10px;
	padding: 200px 10px 20px;
	width: 200px;
	display: none; 
	background: #000;
	font-size: 12px;
	-webkit-border-radius: 3px;
	-moz-border-radius: 3px;
	border-radius: 3px;
    opacity: 0;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    -moz-opacity: 0;
    -khtml-opacity: 0;
    -webkit-transition: opacity 0.8s ease-in-out;
	-moz-transition: opacity 0.8s ease-in-out;
	-o-transition: opacity 0.8s ease-in-out;
	transition: opacity 0.8s ease-in-out;
}

ul.columns li:hover .info {display: block;
    opacity: 1;
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
    -moz-opacity: 1;
    -khtml-opacity: 1;
}

ul.columns li h2 {
	font-size: 18px;
	font-weight: normal;
	text-transform: uppercase;
	margin: 0; padding: 5px 0;
}

#gallery ul.columns li p { padding: 0; 
    margin: 0; 
    font-size: 10px;
    color: #ffffff;
    text-shadow: 0px 1px 1px #000;
    filter: alpha(opacity=70);
	opacity: 0.7;
	-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=70)";
        -moz-opacity:0.7;
        -khtml-opacity: 0.7;
}
    
ul.columns li p {text-align: center;}