/*
		File: 	style.css
		Date: 	2011
		Auth:	Creativeink Design Group | web@creativeink.ca
		~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
*/
/*---------------------------------------------------------------------------- 
CORE HTML TAGS
-----------------------------------------------------------------------------*/
@import url("../variables/font.css");
@import url("../variables/bg.css");

body {
	margin: 1px auto 0px auto;
	padding: 0px;
	text-align:center;
}
html {
	overflow-x: hidden;
}
a { text-decoration:none; outline:none; }
a:link { color:#000000;  }
a:visited { color:#000000; }
a:hover { color:#000000; }

.wrapper {
	position: relative;
	min-height: 100%; height: auto !important; height: 100%;
	-webkit-box-shadow:1px 1px 15px rgba(0,0,0,0.8);
	-moz-box-shadow:1px 1px 15px rgba(0,0,0,0.8);
	border-left:2px solid #000000;	
	border-right:2px solid #000000;
	background-color:#FFFFFF;
	margin: 0 auto -125px; /* FOOTER HEIGHT */
}
.wrapper, .FooterStyle {
	width: 902px !important; /* WEBSITE WIDTH */
}
.footer, .push, .FooterStyle {
	height: 125px; /* FOOTER HEIGHT */
}
.footer { 
	position:relative;
	width:100%;
	margin: 0 auto;
}
#cornerL { position:absolute; width:40px; height:40px; z-index:99; left:0px; top:0px; }
#cornerR { position:absolute; width:40px; height:40px; z-index:99; right:0px; top:0px; }

#social_media_side { position:fixed; width: 30px; z-index: 1000000 !important; right: 0px; top: 145px; }

.header {
	height: 145px;	max-height:145px;	min-height:145px; height: expression(this.height > 145 ? 145: true);	
	background-color:#000000;
	overflow:hidden;
	table-layout:auto;
}

.HeaderGraphic {
	border-bottom:2px solid #000000;
}


.LeftWidth, #nav a, #nav li ul a, .nav_selected {
	width:200px; max-width:200px !important;
}
.LeftWidth {
	border-right:2px solid #000000;
	padding:0; margin:0;
}
.RightWidth, .HeaderGraphic {
	width:700px; max-width:700px !important;
	padding:0; margin:0;
}

.contentR {
	font-family: 'Ubuntu', Tahoma, sans-serif;
	font-size:16px; line-height:20px;
	color:#333333;
	text-align:left;
}

#container  { min-height:100%; } * html #container { height:100%; }

/*---------------------------------------------------------------------------- 
FONTS
-----------------------------------------------------------------------------*/

.Content { 
	padding:20px 20px 30px 20px; /* T R B L */
}
.Content p {
	padding-bottom:5px;
}

.title_content { 
	margin:10px 0 0 0;
	font-size:26px;
	color:#222222;
	font-weight:bold;
}

/*---------------------------------------------------------------------------- 
TABLE
-----------------------------------------------------------------------------*/
.TableStyle { 
	border:2px solid #000000;
	-moz-box-shadow: 1px 1px 10px rgba(0, 0, 0, 0.6);
	-webkit-box-shadow: 1px 1px 10px rgba(0, 0, 0, 0.6);
	box-shadow: 1px 1px 10px rgba(0, 0, 0, 0.6);
	margin-top:30px;
	margin-bottom:10px;

}
.TableTitle { 
	height:45px;
	font-size:28px;
	letter-spacing:0.05em;
	color:#FFFFFF;
	font-weight:normal;
	text-decoration:none;
	text-transform:capitalize;
	padding:0px 0px 0px 15px;
	border-bottom:2px solid #000000;
	width:100%;
	background-color:#013298;
}
.TableContent {
	padding:10px 15px 10px 15px;
}


/*---------------------------------------------------------------------------- 
STYLES
-----------------------------------------------------------------------------*/

.capitalize { text-transform:capitalize; }
.uppercase { text-transform:uppercase; }

.shadow { text-shadow:1px 1px 1px #222222; }  /* NEEDS TO MATCH SHADOW IN IE CSS SHEET */

iframe { padding:0; margin:0; background-color:transparent !important; }

.gradient {
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#cccccc', endColorstr='#000000'); /* for IE */
background: -webkit-gradient(linear, left top, left bottom, from(#ccc), to(#000)); /* for webkit browsers */
background: -moz-linear-gradient(top,  #ccc,  #000); /* for firefox 3.6+ */ 
}

/* ROLLOVER */
.rollover img{
	filter:progid:DXImageTransform.Microsoft.Alpha(opacity=100);
	-moz-opacity: 1;
	opacity: 1;
}
.rollover:hover img{
	filter:progid:DXImageTransform.Microsoft.Alpha(opacity=80);
	-moz-opacity: 0.8;
	opacity: 0.8;
}

/* HIGHLIGHT TEXT COLOR */
::selection {
	background: #e6e5e5; /* Safari */
	}
::-moz-selection {
	background: #e6e5e5; /* Firefox */
}

/*---------------------------------------------------------------------------- 
BTM SPRITES
-----------------------------------------------------------------------------*/
#ContactBtn  {
	padding:5px 0px;
	border-bottom:1px solid #000000;
	width:100%;
}
#ContactBtn a {
       display: block;
       background: url(../images/contact.png) no-repeat;
       height: 24px;
       width: 150px;
}
#ContactBtn a:hover {
       background-position: 0 -24px;
}



#SocialMedia_Facebook a {
       display: block;
       background: url(../images/social_media/facebook_sprite.png) no-repeat;
       height: 26px;
       width: 26px;
	   background-position: 0 -26px;
}
#SocialMedia_LinkedIn a {
       display: block;
       background: url(../images/social_media/linkedin_sprite.png) no-repeat;
       height: 26px;
       width: 26px;
	   background-position: 0 -26px;
}
#SocialMedia_Twitter a {
       display: block;
       background: url(../images/social_media/twitter_sprite.png) no-repeat;
       height: 26px;
       width: 26px;
	   background-position: 0 -26px;
}
#SocialMedia_YouTube a {
       display: block;
       background: url(../images/social_media/youtube_sprite.png) no-repeat;
       height: 26px;
       width: 26px;
	   background-position: 0 -26px;
}

#SocialMedia_Facebook a:hover, #SocialMedia_LinkedIn a:hover, #SocialMedia_Twitter a:hover, #SocialMedia_YouTube a:hover {
       background-position: 0 0px;
}


/*---------------------------------------------------------------------------- 
TOOLTIP
-----------------------------------------------------------------------------*/
.rss-popup-Facebook {
    padding: 0;
    position: relative;
	z-index:2000;
	opacity:1;filter:alpha(opacity=100);
}
div.rss-popup-Facebook em {
    background: url(../images/social_media/facebook_tooltip.png) no-repeat;
    width: 100px;
    height: 49px;
    position: absolute;
    top: -80px;
    text-align: center;
    text-indent: -9999px;
    z-index: 2;
    display: none;
    left: -40px;
}
#rss-icon-Facebook {
    width: 20px;
    height: 20px;
    background: url(../images/social_media/facebook_footer.png) no-repeat 0 0;
    text-indent: -9999px;
    margin: 0 auto;
    display: block;
	z-index: 2;
}


/*---------------------------------------------------------------------------- 
BUTTONS
-----------------------------------------------------------------------------*/
.buttons a, .buttons button{
	margin:0;
	background-color:#f5f5f5;
	border:1px solid #dedede;
	border-top:1px solid #eee;
	border-left:1px solid #eee;
	text-decoration:none;
	font-weight:bold;
	color:#76b3cb;
	cursor:pointer;
	font-size:11px;

}
.buttons button{
	width:auto;
	overflow:visible;
	padding:4px 10px 3px 7px; /* IE6 */
}
.buttons button[type]{
	padding:5px 10px 5px 7px; /* Firefox */
	line-height:17px; /* Safari */
}
*:first-child+html button[type]{
	padding:4px 10px 3px 7px; /* IE7 */
}
.buttons button img, .buttons a img{
	margin:0 3px -3px 0 !important;
	padding:0;
	border:none;
	width:16px;
	height:16px;
}

/* STANDARD */
button:hover, .buttons a:hover{
	background-color:#dff4ff;
	border:1px solid #c2e1ef;
	color:#336699;
}
.buttons a:active{
	background-color:#6299c5;
	border:1px solid #6299c5;
	color:#ffffff;
}


button.positive, .buttons a.positive{
	color:#999999; /* FONT COLOR REGULAR */
	background-color:#FFFFFF;
}
.buttons a.positive:hover, button.positive:hover{
	background-color:#CCCCCC; /* BTN BG HOVER */
	border:1px solid #000000;
	color:#000000; /* FONT COLOR ROLLOVER */
}
.buttons a.positive:active{
	background-color:#529214;
	border:1px solid #529214;
	color:#ffffff;
}

/* NEGATIVE */
.buttons a.negative, button.negative{
	color:#d12f19;
}
.buttons a.negative:hover, button.negative:hover{
	background:#fbe3e4;
	border:1px solid #fbc2c4;
	color:#d12f19;
}
.buttons a.negative:active{
	background-color:#d12f19;
	border:1px solid #d12f19;
	color:#ffffff;
}


/*---------------------------------------------------------------------------- 
MOBILE DEVICES
-----------------------------------------------------------------------------*/
@media screen and (max-device-width: 480px){
body {
	-webkit-text-size-adjust:none;
	font-size:140%;
}
}