@charset "utf-8";

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

Site Name:  Alpa Productions
Site URL:  http://www.alpaproductions.com
Description:  
Version:  1
Author:  Eddie Potros - E11World Multimedia Design & Development
Author URL:  http://www.e11world.com

COLORS

Body Background:
Main Text:
Links:

***************************/
/*************************  NAV MENU  ***************************/

ul#nav {
	margin: 50px 0 0 0;
	padding: 0;
	list-style-type: none;
	background: transparent url(../imgs/nav-bg.png) no-repeat;
	/*width: 361px;*/
	width: 500px;
	height:	47px;
	float: right;
	font-size:14px;
	font-weight: bold;
	font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
}
ul#nav li:first-child {
	margin-left: 18px;
}
ul#nav li {
	display: block;
	float: left;
	margin: 0;
	/*padding: 18px 20px 18px 38px;*/
	position: relative;
}
ul#nav li a {
	display: block;
	float: left;
	color: #7aa374;
	padding: 18px 8px 13px 8px;
	text-decoration: none;
	font-weight: bold;
	letter-spacing: 0;
	z-index: 10;
	position: relative;
	overflow: hidden;
}
ul#nav li a:hover, ul#nav li a:active, ul#nav li a:visited {
	border: none;
}
ul#nav li a:hover {
	color :#fff;
	/*height: 22px;
	background:transparent url(images/nav_bg.png) 0px -30px no-repeat;*/
}
ul#nav li a.current {
	color: #fff;
}
ul#nav li.backLava {
	border-bottom: 2px solid #fff;
	/*width: 9px;
	height: 10px;*/
	z-index: 8;
	position: absolute;
}
ul#nav li ul.dropdown {
	margin-top: -10px;
}
ul#nav li ul.dropdown li {
	padding-bottom: 0;
	margin-top: -4px;
}

body.home ul#nav li.home a,
body.video ul#nav li.video a,
body.web ul#nav li.web a,
body.print ul#nav li.print a,
body.services ul#nav li.services a,
body.contact ul#nav li.contact a {
	color: #fff;
	/*border-bottom: 1px solid #ff3;*/
}

ul.dropdown {
	margin: 0;
	padding: 0;
	display: block;
	width: 200px;
	display: none;
	left: 0;
	position: absolute;
	z-index: 999;
	top: 100%;
	font-size: 12px;
	/*background: #333;*/
}
ul.dropdown li {
	margin: 0;
	padding: 0;
	float: none;
	position: relative;
	list-style: none;
	display: block;
}
ul.dropdown li a {
	display: block;
}
.hasmore {
	background: transparent url(../imgs/nav/drophighlight.png) no-repeat 52px 46px;
}

/*************************  GLOBAL ELEMENTS  ***************************/

p {
	font: Arial, Helvetica, sans-serif;
	font-size: 16px;
	line-height: 20px;
	color: #354f30;/*588351 44623f 283b25*/
	text-align: left;
	margin-bottom: 12px;
}
h1 {
	font-family: Steinem, Georgia, "Times New Roman", Times, serif;
	font-size: 34px;
	color: #7aa374;
	letter-spacing:2px;
	margin-bottom: 24px;
	text-shadow: 0px 1px 2px #000;
}
h2 {
	font: 24px Helvetica, Arial, sans-serif;
	letter-spacing: -1px;
	color: #44623f;
	margin: 16px 0 6px 0;
	text-shadow: 2px 2px 2px #000;
	/*color: rgba(0,0,255,0.5); */
}
h3 {
	font: 26px Helvetica, Sans-Serif;
	color: #ccc;
}
h4 {
	font: 26px Helvetica, Sans-Serif;
	color: #ccc;
}
a:link {
	color: #83a37d;
	text-decoration: none;
}
a:visited {
	color: #83a37d;
	text-decoration: none;
}
a:hover, a:active , a:focus {
	color: #c3dcbf;
	text-decoration: none;
	/*text-shadow: 0 3px 5px rgb(0,0,0);*/
}
#content a:hover {
	text-shadow: 0px 1px 1px #aaa;
}
input[type="submit"]:hover{
    
}

input:focus {
	
}

::selection {
	background: #ffb7b7; /* Safari */
	}
::-moz-selection {
	background: #ffb7b7; /* Firefox */
}

/*************************  OTHER  ***************************/
body.terms h2 {
	
	margin: 18px 0 6px; 0;
	padding: 0;
	text-shadow: #222 3px 2px 5px;
	text-transform:uppercase;
}
#content ul {
	list-style: circle;
	margin: 0 0 18px 20px;
	padding: inherit;
	line-height: 20px;
}
#content {}
#content h2 {}
#content h3 {}
#content p {}

#sidebar h2 {}
#sidebar ul {}
#sidebar li {}

/*************************  FOOTER  ***************************/

#footer { 
	color: #676767;
	background: url(../imgs/bg-footer.png) no-repeat top center;
	margin: 30px auto;
	padding-top: 14px;
	font: 11px Arial, Helvetica, sans-serif;
}

#footer a, #footer a:link, #footer a:active { color: #676767; }
#footer a:hover, { color: #9e9e9e; }
#footer a:visited { color: #676767; }
#footer h2 {}
#footer p {font: 11px Arial, Helvetica, sans-serif; }
.copyrights { float: right;}

#footer ul.footernav li {
	display: block;
	float: left;
	margin: 0;
	padding: 0 10px 0 0;
}
#footer ul.footernav li a {
	display: block;
	float: left;
	color: #676767;
	text-decoration: none;
}
#footer ul.footernav li a:hover {
	color :#9e9e9e;
	height: 22px;
	/*background:transparent url(images/nav_bg.png) 0px -30px no-repeat;*/
}
#footer ul.footernav li a:visited {
	color: #676767;/*74413c*/
}
/*************************  DEFAULT STYLES  ***************************/

.alignleft {float: left;}
.alignright {float: right;}

.alignleft-padding {float: left; padding: 0 12px 12px 0;}
.alignright-padding {float: right; padding: 0 0 12px 12px;}

.center {text-align: center; margin: 0 auto;}
.left {text-align: left;}
.right {text-align: right;}

.small {font-size: 0.8em;}
.hidden {display: none;}
.bold {font-weight: bold; color: #3f5c3a; /*border-bottom: 1px solid #496d43;*/}
.important { }
.note { }

.clear{
		clear: both;
		width: 100%;
}
/* slightly enhanced, universal clearfix hack */
.clearfix:after {
     visibility: hidden;
     display: block;
     font-size: 0;
     content: " ";
     clear: both;
     height: 0;
     }
.clearfix { display: inline-block; }
/* start commented backslash hack \*/
* html .clearfix { height: 1%; }
.clearfix { display: block; }
/* close commented backslash hack */


/*************************  CAPTIONS  ***************************/

.caption-top, .caption-bottom {
	color: #ffffff;	
	padding: 12px 8px;
	font-weight: bold;
	font-size: 13px;	
	font-family: arial;	
	cursor: default;
	border: 0px solid #334143;
	background: #000000;
	text-shadow: 1px 1px 0 #202020;
}
.caption-top {
   border-width: 0px 0px 3px 0px;
}
.caption-bottom {
   border-width: 3px 0px 0px 0px;
}
.caption a, .caption a {
	border: 0 none;
	text-decoration: none;
	background: #000000;
	padding: 0.3em;
}
.caption a:hover, .caption a:hover {
	background: #202020;
}
.caption-wrapper {
	float: left;
}
br.c { clear: both; }



/*************************  FONTS  ***************************/

@font-face {
	font-family: 'Steinem';
	src: url('steinem.eot');
	src: local('☺'), url('../inc/steinem.woff') format('woff'), url('../inc/steinem.ttf') format('truetype'), url('../inc/steinemsvg#webfont') format('svg');
	font-weight: normal;
	font-style: normal;
}

.special {font-weight: normal; font-style: normal; line-height: 22px; letter-spacing:1px; font-family: 'Steinem', sans-serif; font-size: 33px;}

/*************************  TOOLTIP  ***************************/
.toolTip { /* This is the hook that the jQuery script will use */
	/*padding-right: 20px; *//* This is need to make sure that the help icon is always visible */
	/*background: transparent url(../imgs/help.gif) no-repeat right;*/
	color: #3366FF;
	cursor: help;
	position: relative; /* This contains the .toolTipWrapper div that is absolutely positioned  */
}
.toolTipWrapper { /* The wrapper holds its insides together */
	width: 175px;
	position: absolute; /* Absolute will make the tooltip float above other content in the page */
	z-index: 33; /* to position the bubble on top of other things */
	top: 11px;
	line-height: 15px;
	display: none; /* It has to be displayed none so that the jQuery fadein and fadeout functions will work */
	color: #000;
	font-weight: bold;
	font-size: 9pt; /* A font size is needed to maintain consistancy */
}
.toolTipTop { /* Top section of the tooltip */
	width: 175px;
	height: 30px;
	background: transparent url(../imgs/bubbleTop.png) no-repeat;
}
.toolTipMid { /* Middle section of the tooltip */
	padding: 8px 15px;
	background: #A1D40A url(../imgs/bubbleMid.png) repeat-x top;
}
.toolTipBtm { /* Bottom Section of the tooltip */
	height: 13px;
	background: transparent url(../imgs/bubbleBtm.png) no-repeat;
}
.toolTip2 { /* This is the hook that the jQuery script will use */
	/*padding-right: 20px; *//* This is need to make sure that the help icon is always visible */
	/*background: transparent url(../imgs/help.gif) no-repeat right;*/
	color: #3366FF;
	cursor: help; 
	position: relative; /* This contains the .toolTipWrapper div that is absolutely positioned  */
	
}
.toolTipWrapper2 { /* The wrapper holds its insides together */
	width: 175px;
	position: absolute; /* Absolute will make the tooltip float above other content in the page */
	z-index: 43; /* to position the bubble on top of other things */
	top: 15px;
	line-height: 15px;
	display: none; /* It has to be displayed none so that the jQuery fadein and fadeout functions will work */
	color: #000;
	font-weight: bold;
	font-size: 9pt; /* A font size is needed to maintain consistancy */
}
.toolTipTop2 { /* Top section of the tooltip */
	width: 175px;
	height: 30px;
	background: transparent url(../imgs/bubbleTop2.png) no-repeat;
}
.toolTipMid2 { /* Middle section of the tooltip */
	padding: 8px 15px;
	background: transparent url(../imgs/bubbleMid2.png) repeat-x top;
}
.toolTipBtm2 { /* Bottom Section of the tooltip */
	height: 13px;
	background: transparent url(../imgs/bubbleBtm2.png) no-repeat;
}
#content ul.friends {
	/**display: block;*/
	list-style: none;
	margin: 0;
	padding: 0;
	line-height: normal;
	position: relative;
}
#content ul.friends li {
	line-height: 22px;
}		
.social {
	font-size: 22px;
	/**/background: url(../imgs/social.png) no-repeat -38px top;
	width: 36px;
	height: 150px;
	margin:0;
	padding:0;
	position: relative;
    list-style: none;
}
.social li {
	
}
.social li, .social a {
    display: block;
	_margin-bottom: 7px;
	*margin-bottom: 7px;
}
.facebook, .twitter, .youtube, .email {
	padding-left: 46px;
	width: 32px;
}
#content .threeboxes-footer .boxright ul.social {
	list-style: none;
	margin: 0;
	padding-top: 6px;
	line-height: 22px;
	/*border: 1px solid #ff0;*/
}/*
.facebook {
	background: url(../imgs/social.png) no-repeat -38px 0;
}
.twitter {
	background: url(../imgs/social.png) no-repeat -38px -38px;
}
.youtube {
	background: url(../imgs/social.png) no-repeat -38px -76px;
}
.email {
	background: url(../imgs/social.png) no-repeat -38px -114px;
}
*/
.facebook a:hover {
	padding-left: 4px;
}
.twitter a:hover {
	padding-left: 4px;
}
.youtube a:hover{
	padding-left: 4px;
}
.email a:hover{
	padding-left: 4px;
}

.addthis_button {
	
}

/*************************  YOUTUBE VIDEO PAGE  ***************************/

.youtube-vids {
	float: left;
	width: 930px;
	margin-bottom: 20px;
	/*margin: 0 auto;
	text-align: center;*/
}
.mychannel {
    padding: 14px auto;
    width: 930px;
    /*background: #000;
    font-family: Arial;
    font-weight: bold;*/
    overflow: hidden;
}

.mychannel a {
    text-decoration: none;
    outline: none;
}

.videos {
    overflow: hidden;
    padding: 2px 0px;
    margin-bottom: 5px;
    position: relative; 
    height: 0px;
}

.videos .scroll {
    overflow: hidden;
    position: relative;
    width: 930px;
	text-align: center;
	/*background: #000;*/
}

.scroll li {
    float: left;
}

.videos .title {
    cursor: pointer;
    float: left;
    width: 120px;
    overflow: hidden;
    /*border: 1px solid #222;*/
	margin: 13px;
	padding: 4px;
}

.title p {
    line-height: 1.3em;
    font-size: 14px;
    color: #44623f;
    /*background-color: #222;*/
    height: 30px;
    overflow: hidden;
    margin-top: 96px;
    padding: 4px 4px 8px 4px;
}

.scroll.title a:hover, a:hover.scroll.title {
	color: #0C0;
	background: #0cf;
}
.mychannel .showVideoPanel {
    text-align: right;
    overflow: hidden;
    height: 0px;
}

.showVideoPanel a {
    color: #3a3a3a;
    display: none;
    font-size: 10pt;
    margin-right: 10px;
    float: right;
}

.showVideoPanel a:hover, a:hover.showVideosBtn {
    color: #83a37d;/*c3dcbf 83a37d*/
}
.showVideoPanel .loading {
    height: 16px;
    width: 16px;
    margin-right: 10px;
    float: right;
}

.player {
    display: block;
    overflow: hidden;
    height: 0px;
	margin: 0 auto;
	text-align: center;
	/*background: transparent url(../imgs/play.png) no-repeat;*/
}
#youtube-vids_playerpanel {
	border: 8px solid #000;
}
/*************************  MISC  ***************************/
p.dropcap:first-letter {
	letter-spacing: 0;
	text-transform: uppercase;
	color: #7aa374;
	font-family: "Times New Roman", Times, serif;
	font-size: 78px;
	float: left;
	margin: 4px 2px 0 0;
	line-height: 50px;
	/*display: inline;
	padding: 0;*/
	text-shadow: 0px 0px 8px #000;
}
.alt-h1 {
	font-family: Steinem, Georgia, "Times New Roman", Times, serif;
	font-size: 26px;
	color: #674d34;
	letter-spacing:1px;
}
p.btn-more {
	padding-right: 26px;
	background: transparent url(../imgs/arrow-play.png) no-repeat right center;
}
a p.btn-more, a:link p.btn-more, a:active p.btn-more, a:visited p.btn-more {
	/*color: #fff;*/
}
a:hover p.btn-more {
	color: #eee;
}
.back2top {
	position: relative;
	z-index: 1111;
}
.quote {
	font-style: italic;
	letter-spacing: 1px;
	margin-top: 32px;
	padding-left: 65px;
	padding-right: 65px;
	background: transparent url(../imgs/quote.png) no-repeat top left;
}
.speaker {
	font-size: 120%;
	color: #588351;/*588351 44623f 283b25*/
	display: block;
	margin: 14px 0 0 0;
}
.infoblock {
	padding: 4px 20px;
	margin: 10px auto 22px auto;
	border: 2px solid #333;
	background: #000;
	clear: both;
}
#content .infoblock h2 {
	font-family: Steinem, Georgia, "Times New Roman", Times, serif;
	font-size:26px;
	color: #674d34;
	letter-spacing: 1px;
}
.threeboxes, .threeboxes-video, .threeboxes-web, .threeboxes-print, .threeboxes-footer {
	width: 100%;
	overflow-y: hidden;
	overflow-x: hidden;
	margin: 40px auto;
	/*border: 1px solid #cda;*/
}
.threeboxes a:after, .threeboxes-footer a:after {
	/*content: url(imgs/facebook.png);*/
	content: "";
	display: block;
	margin: 6px;
}
.threeboxes-footer .boxright a:after {
	content: "";
	display: block;
	margin: 18px;
}
.boxleft {
	width: 240px;	
	float: left;
	display: block;	
}
.boxmid {
	width: 240px;	
	float: left;
	display: block;
	margin-left: 104px;
}
.boxright {
	width: 240px;	
	float: right;
	display: block;
	margin-right: 2px;
	/*border: 1px solid #069;*/
}
.boxleft h1, .boxmid h1, .boxright h1 {
	background: transparent url(../imgs/h1-bg.png) no-repeat bottom left;
	height: 50px;
	font-family: Steinem, Georgia, "Times New Roman", Times, serif;
	font-size:30px;
	color: #3a3a3a;
	letter-spacing: 1px;
	margin-bottom: 12px;
}
.threeboxes-video h1, .threeboxes-video .alt-h1, .threeboxes-web h1, .threeboxes-web .alt-h1, .threeboxes-print h1, .threeboxes-print .alt-h1 {
	font-size: 24px;
}
.threeboxes-video p,.threeboxes-web p,.threeboxes-print p {
	clear: left;
	padding-top: 12px;
	line-height: 20px;
	/*border: 4px solid #0c0;*/
}
.btnmore p {
	float: right;
	margin-top: 8px;
}

.threeboxes-footer .boxleft {
	width: 240px;	
	float: left;
	display: block;	
}
.threeboxes-footer .boxmid {
	width: 240px;	
	float: left;
	display: block;
	margin-left: 104px;
}
.threeboxes-footer .boxright {
	width: 240px;	
	float: right;
	display: block;
	margin-right: 2px;
	/*border: 1px solid #069;*/
	height: 280px;
}
/*background-color: expression( (new Date()).getHours()%2 ? "#B8D4FF" : "#F08A00" );*/


/*************************  PARALLAX  ***************************/

#parallax {position:absolute; top:110px; left:0; overflow:hidden; width:100%; height:220px; /* margin-top:36px; */ z-index:1;}
#layer1 { background:url(../imgs/parallax1.png) center top no-repeat; margin: 0 auto; width:1600px; height:300px; }
#layer2 { background:url(../imgs/parallax2.png) center top no-repeat; margin: 0 auto; width:1800px; height:300px; }
#layer3 { background:url(../imgs/parallax3.png) center top no-repeat; margin: 0 auto; width:2000px; height:300px; }

/*************************  OTHER  ***************************/


/*@define oUpdateColor #3f5070;*/
@corporateFont {
	font-size: 10px;
	font-family: "Times New Roman", Times, serif;
	line-height: 20px;
	/*color: {oUpdateColor};  a nice dark blue */
}
p.corporateFont, .corporateFont {
 	@corporateFont;
}




/*
p.red::selection {
	background: #ffb7b7;
}
p.red::-moz-selection {
	background: #ffb7b7;
}
*/

/* #id.class is for elements on the same div and #id .class (with spacing) is for 2 separate divs/elements */

/* drop caps
every paragraph use p:first-letter { }
only first paragraph use p:first-child:first-letter { }
*/