/* -----------------------------------------------
    calgarytower.com Stylesheet
    Author: Jamie Totten
    Created on: January 18, 2011

    - GLOBAL RESET
    - BASIC ELEMENTS
    - @FONT-FACE
    - SKYPANORAMA
    - LAYOUT
    -
    - CUSTOM CLASSES
-------------------------------------------------- */


/* GLOBAL RESET
------------------------------------------------- */

/* v1.0 | 20110118 */

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    font-size: 100%;
    vertical-align: baseline;
    background: transparent;
}
body {
    line-height: 1;
}

/*html, body {
    height: 100%
}*/

ol, ul {
    list-style: none;
}

blockquote, q {
    quotes: none;
}

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

/* remember to define focus styles! */
:focus {
    outline: 0;
}

/* remember to highlight inserts somehow! */
ins {
    text-decoration: none;
}
del {
    text-decoration: line-through;
}

hr {
    border: 0;
    color: #999;
    background-color: #999;
    height: 1px;
    width: 100%;
    text-align: left;
    margin-bottom: 23px;
    margin-top: 25px;
}

/* tables still need 'cellspacing="0"' in the markup */
table {
    border-collapse: collapse;
    border-spacing: 0;
}

/* BASIC ELEMENTS
------------------------------------------------- */
body {
    color: #eee;
    /*height: 100px;*/ /*COMMENTED OUT TO TEST BG IMAGE ON APRIL 18, 2011*/
/*    background-color: #fff;*/

/*    UPDATED ON FRIDAY JUNE 9TH, 2011*/
    background-color: #666666; 
}
th {
    text-align: left;
}

/* @FONT-FACE
----------------------------------------- */
@font-face {
    font-family: 'LeagueGothicRegular';
    src: url('type/league_gothic-webfont.eot');
    src: local('☺'),
        url('type/league_gothic-webfont.woff') format('woff'),
        url('type/league_gothic-webfont.ttf') format('truetype'),
        url('type/league_gothic-webfont.svg#webfontu35Ct6B1') format('svg');
    font-weight: normal;
    font-style: normal;
}

/* SMOOTHSCROLL
----------------------------------------- */
#makeMeScrollable {
    width:100%;
    height: 1100px;
    /*position: relative;*/
    position: fixed;
}

#makeMeScrollable div.scrollableArea * {
    position: relative;
    display: block;
    float: left;
    padding: 0;
    margin: 0;
}

/* You can alter this CSS in order to give SmoothDivScroll your own look'n'feel */

/* Invisible left hotspot */
div.scrollingHotSpotLeft {
	/* The hotspots have a minimum width of 75 pixels
	   and if there is room the will grow and occupy 10%
	   of the scrollable area (20% combined).
	   Adjust it to your own taste. */
	min-width: 75px;
	width: 5%;
	/*height: 100%;*/
        height: 900px;
	/* There is a big background image and it's used to
	solve some problems I experienced in Internet Explorer 6. */
	background-image: url(../images/big_transparent.gif);
	background-repeat: repeat;
	background-position: center center;
	position: absolute;
	z-index: 200;
	left: 0;
	/*  The first cursor url is for Firefox and other
	    browsers, the second is for Internet Explorer */
	/*cursor: url(../images/cursors/cursor_arrow_left.cur), url(images/cursors/cursor_arrow_left.cur),w-resize;*/
}

/* Visible left hotspot */
div.scrollingHotSpotLeftVisible {
	background-image: url(../images/arrow_left.gif);
	background-color: #fff;
	background-repeat: no-repeat;
	/* Standard CSS3 opacity setting */
	/*opacity: 0.35;*/
	/* Opacity for really old versions of
	   Mozilla Firefox (0.9 or older) */
	/*-moz-opacity: 0.35;*/
	/* Opacity for Internet Explorer. */
	/*filter: alpha(opacity = 35);*/
	/* Use zoom to Trigger "hasLayout" in
	   Internet Explorer 6 or older versions */
	zoom: 1;
}

/* Invisible right hotspot */
div.scrollingHotSpotRight {
	min-width: 75px;
	width: 5%;
	/*height: 100%;*/
        height: 900px;
	background-image: url(../images/big_transparent.gif);
	background-repeat: repeat;
	background-position: center center;
	position: absolute;
	z-index: 200;
	right: 0;
	/*cursor: url(../images/cursors/cursor_arrow_right.cur), url(images/cursors/cursor_arrow_right.cur),e-resize;*/
}

/* Visible right hotspot */
div.scrollingHotSpotRightVisible {
	background-image: url(../images/arrow_right.gif);
	background-color: #fff;
	background-repeat: no-repeat;
	/*opacity: 0.35;*/
	/*filter: alpha(opacity = 35);*/
	/*-moz-opacity: 0.35;*/
	zoom: 1;
}

/* The scroll wrapper is always the same width and
   height as the containing element (div). Overflow
   is hidden because you don't want to show all of
   the scrollable area.
*/
div.scrollWrapper {
	position: relative;
	overflow: hidden;
	width: 100%;
	height: 100%;
}

div.scrollableArea {
	position: relative;
	width: auto;
	height: 100%;
}


/* HOMEPAGE SPECIFIC
----------------------------------------- */

html body#home {
    background-color: #666;
}

#home #ContainerWrapper {
    background: url(../images/sky-only.jpg) no-repeat center center fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

/*#home table#Footer-home {
    position: absolute;
    z-index: 200;
}*/
/*#home table#Footer-home {*/
#home #Footer-home {
/*    position: absolute;*/
    position: fixed;
    z-index: 200;
    bottom: 0;
    width: 100%;
}

#home #Footer-gradient {
    background-image: url(../images/bottom-gradient.png);
    background-color: transparent;
    background-position: 0 0;
    background-repeat: repeat-x;
    padding-top: 116px;
    margin-top: -116px;
    z-index: 100;
}

#home #Container {
    margin: 0 auto;
/*    background: transparent url(../images/tower-only.png) no-repeat scroll 649px -9px;*/
    background: transparent url(../images/tower-only.png) no-repeat scroll 649px 16px;
    padding-bottom: 80px;
}

#home #LayoutWrapper { 
    background: none;
}

#home table tr td img,
#home table tr td a img {
    border: 1px solid #fff;
}

#home #Layout {
    background: none;
}

#home #Content-Inner {
    margin-left: 12px;
    width: 425px;
}

#home .typography * {
    color: #fff;
}

#home .typography h2 {
    font-size: 20px;
}

/*#home .typography a {
    color: #B8172A;
}

#home .typography span.callout a {
    color: #fff;
}*/

#home table#hometable {
    margin-top: 20px;
}
#home table#hometable td {
    width: 240px;
    padding: 10px 0 0 0;
}

#home table#hometable td:first-child {
    width: 250px;
    padding-right: 5px;
}

#home table#hometable td:first-child p {
    width: 220px;
    margin-right: 26px;
}

#home table#hometable td p {
    width: 205px;
    margin: 0;
}
/* CONTAINER / CONTENT / LAYOUT
----------------------------------------- */

#ContainerWrapper{
    width:100%; 
    position:absolute;
    top:0;
    left: -3px; /* seems to fix ie at 1024*/
    z-index:4;
    text-align: left;
}

#Container {
    margin: 0 auto 50px auto;
    position: relative;
    /*width: 1024px;*/
    /*width: 994px;*/
    width: 1005px;
    z-index: 5;
    padding-bottom: 33px;
}

#Container .scroll-control {
    position: absolute;
    display: block;
    width: 29px;
    height: 29px;
    cursor: pointer;
    text-indent: -5000px;
}
#Container a#prev {
    top: 160px;
    left: 147px;
    background: transparent url(../images/arrow_left_kg.png) no-repeat 0 0 scroll;
}
#Container a:hover#prev { background: transparent url(../images/arrow_left_kg_over.png) no-repeat 0 0 scroll;}

#Container a#next {
    top: 160px;
    /*right: 40px;*/
    right: 0px;
    background: transparent url(../images/arrow_right_kg.png) no-repeat 0 0 scroll;
}
#Container a:hover#next {background: transparent url(../images/arrow_right_kg_over.png) no-repeat 0 0 scroll;}

#LayoutWrapper {
    width: 793px;
    margin: 10px 0 0 205px;
    padding: 643px 0 0 0;
    background: transparent url(../images/layout-bg.png) no-repeat 0 0 scroll;
}

#LayoutWrapper.pageWide {
    /*width:*/ 
    background: transparent url(../images/layout-wide-bg.png) no-repeat 0 0 scroll;
}

#Layout {
    width: 523px;
    overflow: visible;
    /*margin: 4px 0 0 0;*/
    margin: 0px 0 0 0;
	
    padding: 1px 0 20px 0;
    background: transparent url(../images/content-repeater-bg.png) repeat-y 0 0 scroll;
}

#Layout.pageWide {
    width: 741px;
    background: transparent url(../images/content-repeater-wide-bg.png) repeat-y 0 0 scroll;
}

#PageContent { 
    /*margin-top: -593px;*/ 
    margin-top: -627px;
    width: 793px;
	position: relative;
}

#Content {
    position: relative;
    width: 656px;
    /*margin: 34px 0 0 0;*/
    margin: 0;
    padding: 0;
    clear: both;
}

.paddingFix {
    padding-top: 34px;
}

div#Content {
    margin-top: 34px;
}

table#Content td {vertical-align: top;}

table#Content td:first-child.paddingFix {
    /*width: 333px;*/
    width: 363px;
    padding-left: 63px;
    /*vertical-align: top;*/
}

table#Content #Content-Inner td:first-child.paddingFix {
    /*width: 333px;*/
    width: 348px;
    padding-left: 0px;
    vertical-align: top;
}

table#Content #Content-Inner ul#pagination-blog,
table#Content #Content-Inner ul#pagination-imagegallery {
    /*margin: -14px 0 18px 3px;*/
    margin: -52px 0 24px 3px;
	margin-top: 0px;
}
table#Content #Content-Inner div#pagination-blog-bottom ul#pagination-blog { 
    margin: 0 0 -14px 0;
}

table#Clean td:first-child {
    width: 0;
}

table#Clean td.odd { background-color: red; }
table#Clean td.even { background-color: yellow; }


#Content-Inner {width: 363px; /*margin-top: 34px;*/ }
#Content-Inner.wide {width: 555px; /*margin-top: 34px;*/ }

#Content.wide {width: 587px; margin-left: 68px;}

#ContentBottom {
    float: left;
    margin: 0 0 0 0;
    padding: 0;
    display: block;
    width: 523px;
    height: 17px;
    background: transparent url(../images/content-bottom-bg.png) no-repeat 0 0 scroll;
    position: relative;
}
#ContentBottom.pageWide {
    width: 741px;
    background: transparent url(../images/content-bottom-wide-bg.png) no-repeat 0 0 scroll;
}

/* RIGHTSIDEBAR
----------------------------------------- */

#RightSideBar {
    margin-left: 50px;
    width: 200px;
    display: inline;
    float: left;
    margin-top: 3px;
}

/* HEADER
----------------------------------------- */
#Header {
    /*width: 1024px;*/
    /*width: 994px;*/
    width: 1005px;
    margin: 0 auto;
    overflow: hidden;
    height: 225px;
}

    #Header h1 {
        font-size: 125px;
        font-weight: normal;
        line-height: 120px;
        letter-spacing: .1px;
        text-transform: uppercase;
        padding: 0 0 0 215px;
        font-family: 'LeagueGothicRegular', 'Arial Narrow', 'Impact';
        color: #FFF;
    }
        #Header h1 span {
            color: #B8172A;
        }

    #Header h2 {
        font-size: 62px;
        font-weight: normal;
        line-height: 33px;
        text-transform: uppercase;
        color: #fff;
        padding: 78px 0 0 217px;
        font-family: 'LeagueGothicRegular', 'Arial Narrow', 'Impact';
        margin-bottom: 7px;
	
    }

/* MAIN NAVIGATION
----------------------------------------- */
#Navigation {
    width: 176px;
    height: 144px;
    position: absolute;
    top: 0;
    left: 0;
    overflow: visible;
    background: transparent url(../images/nav-tower-bg.png) no-repeat 0 0 scroll;
}
    #Navigation #Logo {
        position: absolute;
        top: 0;
        left: 0;
        height: 144px;
        width: 50px;
    }

        #Navigation #Logo h1 {
            height: 144px;
            width: 50px;
        }

            #Navigation #Logo h1 a {
                text-indent: -5000px;
                display: block;
                top: 0;
                left: 0;
                height: 144px;
                width: 50px;
                padding: 0;
                cursor: pointer;
            }
            #Navigation #Logo h1 a:hover,  #home #Navigation #Logo h1 a {
                background: transparent url(../images/nav-tower-bg-hover2.png) no-repeat 0 0 scroll;
            }
    #Navigation ul {
        width: 176px;
        height: 144px;
        border: 0 none;
        list-style-type: none;
        margin: 0;
        padding: 0;

    }

        #Navigation ul li {
            list-style: none outside none;
            margin: 0 0 0 63px;
            padding: 0;
            text-align: left;
            line-height: 18px;
        }

            #Navigation ul li.first { padding-top: 10px; }

            #Navigation ul li a {
                display: inline-block;
                margin: 0;
                padding: 0;
                font-family: Arial;
                text-transform: uppercase;
                font-size: 11px;
                text-decoration:none;
            }

            #Navigation ul li a.link {
                color: #000;
            }

            #Navigation ul li a.current,
            #Navigation ul li a.section,
            #Navigation ul li a.link:hover,
            #Navigation ul li a.section:hover,
            #Navigation ul li a.current:hover {
                color: #B8172A;
            }

/* SUBNAVBAR
-------------------------------------- */
ul#SubNavBar {
    list-style-type: none;
	float: left;
    position: relative;
    width: 610px;
    /*height: 100px;*/

    /*height: 66px;*/
    /*margin: 0 0 0 68px;*/
	margin: 34px 0 0 64px;
    /*background: transparent url(../images/subnav-ul-line-repeater.gif) repeat-x 0 40px scroll;*/
    background: transparent url(../images/subnav-ul-line-repeater.gif) repeat-x 0 33px scroll;
    display: inline;
}

    ul#SubNavBar li {
        list-style: none outside none;
        height: 21px;
        float: left;
        display: inline-block;
        padding: 0 40px 20px 0;
    }

        ul#SubNavBar li a {
            font-size: 14px;
            line-height: 18px;
            font-family: Arial;
            color: #000;
            text-decoration: none;
            float: left;
            display: inline-block;
        }

        ul#SubNavBar li a:hover,
        ul#SubNavBar li a.current,
        ul#SubNavBar li a.section {
            color: #B8172A;
        }

ul#SubNavBar li.current,
ul#SubNavBar li.section {
    /*background: transparent url(../images/subnav-li-arrow.gif) no-repeat 30% 34px scroll;*/
    /*background: transparent url(../images/subnav-li-arrow.gif) no-repeat 30% 27px scroll;*/
    background: transparent url(../images/subnav-li-arrow-a.gif) no-repeat 30% 26px scroll;
}

#SubNavBar li a {
    float: left;
    display: block;
}

ul.sub {
    display: inline;
    margin: 10px 0 0 68px;
    float: left;
    /*clear: both;*/
    position: relative;
}

ul.sub li {
    float: left;
    margin: 0;
    /*display: block;*/
    padding: 0 30px 0 0;
    border-bottom: none;
}

ul.sub li a {
    font-size: 12px;
    /*line-height: 18px;*/
    font-family: Arial;
    color: #000;
    text-decoration: none;
    float: left;
    /*display: block;*/
}

ul.sub li a.current {
    background: none;
}

ul.sub li a:hover,
ul.sub li a.current,
ul.sub li a.section {
    color: #B8172A;
}

/* FOOTER
----------------------------------------------- */

#Footer {
    clear: both;
    margin: 0 auto;
    background-color: #666;
    /*background-color: #fff;*/
    position: relative;
    /*bottom: 0;*/
    height: 73px;
    width: 100%;
    font-family: Arial;
    font-size: 10px;
    text-align: left;
}

    #FooterContent {
        /*width: 1024px;*/
        /*width: 994px;*/
        width: 1005px;
        height: 50px;
        margin: 0 auto;
        padding-top: 23px;
    }

        #FooterLinks a, #FooterLinks div {
            display: block;
            float: left;
            /*line-height: 1em;*/
            margin: 0 9px 0 0;
            text-decoration: none;
            color: #FFF;
        }
        #FooterLinks a:hover {text-decoration: underline;}

        #FooterLinks {
            /*width: 50%;*/
            float: right;
            width: 400px;
            /*text-align: right;*/
        }

        #FooterDetails {
            background: transparent url(../images/aspen-properties.gif) no-repeat right -1px scroll;
/*            width: 153px;*/
            height: 34px;
            float: left;
            padding-right: 103px;
            margin-left: 217px;
            display: block;
        }
        
        #FooterDetails a {
            position: absolute;
            width: 250px;
            height: 35px;
            bottom: 15px;
            text-indent: -9999px;
        }
		#FooterContent .SocialLinks {
			float: right;
		}
			#FooterContent .socialButton {
				float: left;
				display: block;
				width: 18px;
				height: 18px;
				padding: 2px;
				background-repeat: no-repeat;
				text-indent: -9999px;
			}
				#FooterContent .socialButton.facebook {
					background-image: url(../images/social-icons.png);
					background-position: -96px -4px;
				}
				#FooterContent .socialButton.facebook:hover {
					background-position: -96px -27px;
				}
				#FooterContent .socialButton.twitter {
					background-image: url(../images/social-icons.png);
					background-position: -4px -4px;
				}
				#FooterContent .socialButton.twitter:hover {
					background-position: -4px -27px;
				}
				#FooterContent .socialButton.youTube {
					background-image: url(../images/social-icons.png);
					background-position: -27px -4px;
				}
				#FooterContent .socialButton.youTube:hover {
					background-position: -27px -27px;
				}


/* CUSTOM CLASSES
----------------------------------------------- */

/*.dropIt{
    text-shadow: 2px 2px 2px #333;
}*/

/* BLOG MODULE
-----------------------------------------------*/

/*NOT SURE IF THIS IS THE BEST WAY TO DO THIS
/==============================================*/
#events #PageContent ul#SubNavBar {
    /*height: 50px;*/
    /*height: 62px;*/
}
/*=============================================*/

.blogSummary {
    clear: left;
    border-bottom: 1px solid #999;
    margin-bottom: 25px;
}

.blogSummary p.blogVitals {
    margin-top: -20px;
    font-size: 12px;
}

.blogSummary p img.leftAlone,
.blogEntry p img.leftAlone {
    padding-bottom: 16px;
    margin-right: 0px;
}

div.blogSummary h1 { margin-bottom: 0;}

.blogSummary h1 a {
    color: #000;
    margin-bottom: 6px;
    font-size: 20px;
    line-height: 30px;
    font-weight: normal;

}

.blogSummary h1 a:hover {color: #B8172A;}

.blogSummary h2.postTitle,
.blogEntry h2.postTitle {
    margin-bottom: 6px;
    font-size: 20px;
    line-height: 30px;
	font-weight: 300;

}

.blogSummary h2.postTitle a {
    color: #000;
    /*font-weight: normal;*/
}

.blogSummary h2.postTitle a:hover {
    color: #B8172A;
}

.blogSummary p.blogDate,
.blogEntry p.blogDate {
    font-size: 12px;
    line-height: 30px;
    margin-bottom: 0px;
}

ul#pagination-blog li,
ul#pagination-blog li a,
ul#pagination-blog li a:link,
ul#pagination-blog li a:visited,
a#pagination-blog-entry{
    font-family: Arial;
    font-size: 12px;
    padding: 5px 3px 5px 0;
    font-weight: normal;
}

table#Content #Content-Inner a#pagination-blog-entry { margin-top: -57px;}

#pagination-blog {border: 0; margin: -2px 0 0 0; padding: 0;clear: both;}
#pagination-blog li{
    border: 0;
    margin:0;
    padding:0;
    font-size: 11px;
    list-style: none;
    margin-right: 2px;
    display: inline;
}

#pagination-blog a{
    margin-right: 2px;
}

#pagination-blog li a:hover { color: #B8172A;}

#pagination-blog .previous-off,
#pagination-blog .next-off {
    color: #888888;
    display: block;
    float: left;
    margin-right: 2px;
}

#pagination-blog .next a,
#pagination-blog .previous a {}
#pagination-blog .active {
    color: #B8172A;
    display: block;
    float: left;
}

#pagination-blog a:link,
#pagination-blog a:visited {
    color: #000;
    display: block;
    float: left;
    padding: 3px 6px;
    text-decoration: none;
}

#pagination-blog a:hover{}

#Form_TourRegistrationForm .middleColumn, #Form_TourSelectionForm .middleColumn
{
    background-color: transparent; color:Yellow;
}

#Form_TourRegistrationForm ul, #Form_TourSelectionForm ul
{
    list-style-type:none;
}
#Form_TourRegistrationForm input.text, #Form_TourRegistration textarea
{
    width:200px;
}
#Form_TourSelectionForm fieldset
{
    width:240px;
}
#Form_TourRegistrationForm select
{
    width:50px;
}
#Form_TourSelectionForm .soldout
{
    color:#666;
}
div.field>label
{
    margin: 10px 0 -10px 0;
    padding-left: 4px;
}
#Form_TourSelectionForm label { margin:5px 0;}

#selectedTour
{
    font-size:12px;
    margin-bottom: 20px;
}
#selectedTour>div
{
    margin-bottom:10px;
}
#calendarList
{
    float:left;
}
#dateList
{
    width:240px;
    float:right;
}

#selectedTour a
{
    font-family: Arial;
    text-transform: uppercase;
    font-size: 11px;
    margin-left:90px;
}

table.calendar caption
{
    margin-bottom:10px;
}
table.calendar
{
    margin-bottom:20px;
    border-left: 1px solid #ccc;
    color: #616B76;
    text-align: center;
    vertical-align: middle;
    background-color: #eee;
}
table.calendar th, table.calendar td
{
    width:32px;
    height:32px;
    border-right: 1px solid #ccc;
    border-bottom: 1px solid #ccc;
    text-align: center;
    vertical-align: middle !important;
}

table.calendar td.day
{
    background-color: #fff;
}

table.calendar td.noOptions
{
    background-color: #eee;
    color:#aaa;
}

table.calendar td.day:hover, table.calendar td.selected
{
    background-color:#B8172A;
    color: #fff;
    cursor: pointer;
}