/*
		File: 	styles.css
		Auth:	Creativeink Design Group | web@creativeink.ca
		~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
----------------------------------------------------------------------------
*/	

/*---------------------------------------------------------------------------- 
    USERS
-----------------------------------------------------------------------------*/
.NavBorder, .NavBtns {
	border:1px solid #DEDEDE;
}
.NavBtns, .NavBox {
	background: #F5F5F5; 
	background-color: #F5F5F5;
	font-family: 'Oswald', sans-serif;
	font-weight: 700;
}

.NavBtns {
	font-size:22px; line-height: 22px;
	padding:20px 10px;
	cursor: pointer;
	position: relative;
}

td .NavBtns, .NavBtns td {
	vertical-align: middle;
}

td .NavBtns:hover, .NavBtnSelected {
	background-color: #DEDEDE;
	-webkit-box-shadow: 0 8px 6px -6px #999999;
	-moz-box-shadow: 0 8px 6px -6px #999999;
	box-shadow: 0 8px 6px -6px #999999;
	-webkit-transition:all .15s ease-in;
}



/*--- 1.CONTAINER ---*/
.wrapper {
	background-color:transparent;
}
.container {
}




/*--- 2.HEADER ---*/
.header img {	
	height:220px;
}
.header {
	/* position:absolute; top:0px; left:-50px; z-index:10000 !important; */
	padding:5px 0px;
	background-color:#FFF;
}
#fadeshow_wrapper {
	background-color:#FFFFFF;
	border:0px solid #000000;	
	margin:0px 0px 0px 0px;
}
.nivo-controlNav, #slideButtons {
	bottom:-35px;
	right:15px;
}



/*--- 3a.CONTENT - TEXT ---*/
#columnNav {
}
#columnContent {
}

.Content table {
	width: 100%;
	border-collapse: collapse; /* Removes double borders */
	margin-top: 20px;
	margin-bottom: 40px;
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05); /* Subtle shadow for the table */
	border-radius: 8px; /* Rounded corners for the table */
	overflow: hidden; /* Ensures rounded corners are applied */
}

.Content tr td:first-child, .Content td {
	padding: 15px;
	text-align: left;
	border-bottom: 1px solid #dee2e6; /* Light border for rows */
}

.Content tr td:first-child {
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.05em;
}

.Content tr:nth-child(even) {
	background-color: #f2f2f2; /* Light stripe for even rows */
}

.Content tr:hover {
	background-color: #e9ecef; /* Highlight row on hover */
	cursor: pointer;
}




/*--- 3b.CONTENT - IMAGE + COLORS ---*/
.Content p a:link, .Content p a:visited {
	color: #BF2331;
    text-decoration: none;
	border-bottom: thin dotted #202020;
}
a img.ImageContent:hover { /* CONTENT IMG ROLLOVER IF LINK */
	filter:alpha(opacity=70); opacity:0.7;
}
img.ImageContent { 
	border-color:#000000; /* CONTENT IMAGE BORDER */
}
img.ImageContent:hover { /* CONTENT IMAGE BORDER = HOVER */
	border-color:#a92d34;
}





/*--- 4.BOTTOM ---*/
.btm {
	background-color:#666666;
	padding:10px 0px;
	margin:0px 0px 0px 0px;
	border-top:1px solid #000000;
}
.btm, .btm a:link, .btm a:visited {
	color:#FFFFFF;
	font-size:18px;
}
.btm a:hover {
	color:#CCCCCC;
	filter: alpha(opacity=60);opacity:0.6;
	-webkit-transition:all .15s ease-in;
}




/*--- 5.FOOTER ---*/
.wrapper { margin: 0 auto -0px; } /* NUMBER MUST EQUAL */
.footer, .push { height: 0px; } /* NUMBER MUST EQUAL */






/*---------------------------------------------------------------------------- 
	EXTRA
-----------------------------------------------------------------------------*/
#share-buttons img {
	width: 35px;
	padding: 5px;
	border: 0;
	box-shadow: 0;
	display: inline;
}

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

/* GRAYSCALE */
img.grayscale {
    filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale"); /* Firefox 10+ */
    filter: gray; /* IE6-9 */
    -webkit-filter: grayscale(100%); /* Chrome 19+ & Safari 6+ */
    -webkit-transition: all .6s ease; /* Fade to color for Chrome and Safari */
    -webkit-backface-visibility: hidden; /* Fix for transition flickering */
}
img.grayscale:hover {
    filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'1 0 0 0 0, 0 1 0 0 0, 0 0 1 0 0, 0 0 0 1 0\'/></filter></svg>#grayscale");
    -webkit-filter: grayscale(0%);
}

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

/* OUTLINE */
area:focus, map:focus, button:focus, input:focus, select:focus, textarea:focus{ outline:0; }

/* IFRAME */
iframe { padding:0; margin:0; }

/* Z-INDEX */
.modalwindow, .lightbox { z-index:1000000 !important; }

/* LINE */
hr {
	border:0; zoom:1;
	filter: alpha(opacity=80); opacity:0.8;
	background-color:#000000;
	height:1px;
	margin:5px 0px;
}

/* BLINKING TEXT */
.blink_me {
  animation: blinker 5s linear infinite;
}
@keyframes blinker {  
  60% { opacity: 0; }
}

/*---------------------------------------------------------------------------- 
	FADE IN CONTENT
-----------------------------------------------------------------------------*/
#TextContent {
	opacity:0;
	-webkit-animation:fadeIn ease-in 1;
	-moz-animation:fadeIn ease-in 1;
	-o-animation:fadeIn ease-in 1;
	animation:fadeIn ease-in 1;
	-webkit-animation-fill-mode:forwards;
	-moz-animation-fill-mode:forwards;
	-o-animation-fill-mode:forwards;
	animation-fill-mode:forwards;
}
#TextContent {
	-webkit-animation-duration:1s;
	-moz-animation-duration:1s;
	-o-animation-duration:1s;
	animation-duration:1s;
}
@-webkit-keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
@-moz-keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
@-o-keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
@keyframes fadeIn { from { opacity:0; } to { opacity:1; } }





/*---------------------------------------------------------------------------- 
 GRAYSCALE
-----------------------------------------------------------------------------*/
img.grayscale {
  filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale"); /* Firefox 3.5+ */
  filter: gray; /* IE6-9 */
  -webkit-filter: grayscale(100%); /* Chrome 19+ & Safari 6+ */
}

img.grayscale:hover {
  filter: none;
  -webkit-filter: grayscale(0%);
}


/*---------------------------------------------------------------------------- 
 BUTTONS
-----------------------------------------------------------------------------*/
.button {
	display: inline-block;
	zoom: 1; /* zoom and *display = ie7 hack for display:inline-block */
	*display: inline;
	vertical-align: baseline;
	margin: 0 2px;
	outline: none;
	cursor: pointer;
	text-shadow: 0 1px 1px rgba(0,0,0,.3);
	text-align: center;
	text-decoration: none;	
	-webkit-box-shadow: 0 1px 2px rgba(0,0,0,.2);
	-moz-box-shadow: 0 1px 2px rgba(0,0,0,.2);
	box-shadow: 0 1px 2px rgba(0,0,0,.2);	
	
	font: Arial, Helvetica, sans-serif;
	font-size: 18px !important; line-height:102%; /* FONT SIZE */
}

.button:hover {
	text-decoration:none;
}
.button:active {
}

/* LINKS */
.button_link a:link, .button_link a:visited {
	color:#FFFFFF;
}
.button_link a:hover {
	color:#000000;
}

/* IMAGE ICON */
.button img {
	position:relative;
	padding:0px 5px 0px 0px;
}


/* RED */
.red {	
	font-size:14px; /* FONT SIZE */
	padding:10px 15px !important;
	
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;
}
.red {
	text-decoration:none;
	border: solid 1px #980c10;
	background: #A9001D;
	background-color: #A9001D;
}
.red:hover, .red:active  {
	background: -webkit-gradient(linear, left top, left bottom, from(#fd000a), to(#c70106));
	background: -moz-linear-gradient(top,  #fd000a,  #c70106);
	filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#fd000a', endColorstr='#c70106');
}
.red:hover, .red:active {
	color: #FFFFFF !important;
}