/*
    Document   : layout
    Created on : Aug 10, 2009, 4:08:30 PM
    Author     : rich - ta design
    Description: timeware.co.uk layout
*/

body
{
	text-align:center;
	font-size: 62.5%;
        font-family: Arial, Verdana, Helvetica, 'Trebuchet MS', sans-serif;
	margin: 0;
	padding: 0;
	background: #000000 url(images/visisure/fingerprint.png) no-repeat fixed left top;
}

/* navigation top bar */

#topNav
{
    width: 100%;
    height: 2.9em;
    font-size: 1em;
    list-style-type: none;
    color: #ffffff;
    padding-top: 0.1em;
    background: url(images/gray-nav-repeat.png) repeat-x;
}

#topNav li
{
    font-size: 1em;
    list-style-type: none;
    margin: 0em 2em 0em 2em;
    display: inline;
}

#topNav li a { font-size: 1em; text-decoration: none; }

#topNav li a:hover { font-size: 1em; text-decoration: none; }


#wrapper
{
    margin-left: auto;
    margin-right: auto;
    padding: 0em;
    width: 930px;
    height: auto;
}

#header { position: relative; width: auto; height: 25.5em; }

/* header items */

#logo
{
    position: absolute;
    width: 42.4em;
    height: 10.5em;
    padding: 0;
    top: 0.5em;
    left: -20px;
    text-align: left;
}

#testimonial
{
    position: absolute;
    top: 0.5em;
    right: 0em;
    width: 50.6em;
    height: 14.6em;
    padding: 0;
    text-align: left;
}

#topBanner
{
    float: left;
    width: 65.6em;
    height: 11.1em;
    padding: 0;
    margin: 0;
    text-align: left;
    border: none;
    /* background: url(images/visisure/banner-blank.png) repeat-x; */
}

/* SLIDER ---------------------------------- */

#slider1 {
	padding: 0;
	margin: 0;
	list-style: none;
	overflow: hidden;
	height: 111px;
}

#slider1 li { padding: 0; margin: 0; zoom:1; }

#slider1 img, #slider2 img { float: left; margin-right: 36px; border: 0px; }


#Banner
{
    position: absolute;
    top: 15em;
    left: 22px;
    width: 634px;
    height: 111px;
    padding: 0;
    margin: 0;
    text-align: left;
}

	#Banner a {
          display:block;
          width:100%;
          height:100%;
          color: #000000;
          text-decoration:none;
        }

        #Banner a:hover { text-decoration:none; color: #0071B7; }

#bannerNews
{
    float: left;
    width: 325px;
    height: 110px;
    margin: 0px 0px 0px 80px;
    padding: 0;
}

#bannerPro
{
    float: left;
    width: 250px;
    height: 111px;
    margin: 0;
    padding: 0;
}


#YoutubeTwitter
{
    position: absolute;
    top: 20.6em;
    right: 3em;
    width: 263px;
    height: 118px;
    padding: 0em;
    z-index: 12;
}
		
		.Youtube { border:none; margin:2px 0px 0px 0px; padding: 0px; float:left; }
		
		.Twitter { border:none; margin:0px 0px 0px 10px; padding: 0px; float:left; }


/* Content */

        #contentTop { height: 3.2em; margin: 0; background: url(images/visisure/container-top.png) no-repeat; }

        #content
        {
            height: 39em;
            margin: 0px;
            background-color: white;
            background: url(images/visisure/container-repeat.png) repeat-y;
        }

        #contentAuto { margin: 0; background-color: white; background: url(images/visisure/container-repeat.png) repeat-y; }

                .About { overflow: auto; }

        #contentBottom { height: 3.2em; margin: 0; background: url(images/visisure/container-bottom.png) no-repeat; }

/* Home page section boxes */

/* updated 13th July 2010 */

#css3
{
    height: auto;
    border: 1px solid #000;
    padding: 20px;
    text-align: left; width: 100%;
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    border-radius: 20px;

    background: #ffffff;
    behavior: url(PIE.htc);
}

#boxContainer
{
    float: left;
    width: 88em;
    padding: 0;
    margin: -1em 0em 0em 2.8em;
    text-align: left;
}


/* twitter box */

#twitterBox
{
    float: left;
    width: 379px;
    height: 379px;
    margin-top: 1em;
    margin-left: 0.8em;
    margin-right: 0.8em;
    cursor: pointer;
    cursor: hand;
    
    /* css3 */
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    border-radius: 20px;
    behavior: url(PIE.htc);
}

#twitter_REL
{
    position: relative;
    width: 376px;
    height: 380px;
    margin: 0em;
    z-index: 1;
    
    /* css3 */
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    border-radius: 20px;
    behavior: url(PIE.htc);
}

#box_TWITTER
{
    position: absolute;
    top: 0;
    left: 0;
    margin: 0em;
    z-index: 2;

    /* css3 */
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    border-radius: 20px;
    behavior: url(PIE.htc);
}


#visisureBox1_Wide
{
    float: left;
    width: 460px;
    height: 89px;
    margin: 0.8em 1em 1em 0em;
    background: url(images/visisure/boxes/timeware-products.png) no-repeat;
}

        #visisureBox1_Wide a {
          display:block;
          width:100%;
          height:100%;
          color: #000000;
          text-decoration:none;
        }

        #visisureBox1_Wide a:hover { text-decoration:none; color: #0071B7; }

#visisureBox2_Wide
{
    float: left;
    width: 460px;
    height: 186px;
    margin: 0em 1em 1em 0em;
    background: url(images/visisure/boxes/big-group-box.png) no-repeat;
}

        #visisureBox2_Wide a {
          display:block;
          width:100%;
          height:100%;
          color: #000000;
          text-decoration:none;
        }

        #visisureBox2_Wide a:hover { text-decoration:none; color: #0071B7; }

 #visisureBox3_Wide
{
    float: left;
    width: 460px;
    height: 89px;
    margin: 0em 1em 0.8em 0em;
    background: url(images/visisure/boxes/timeware-community-box.png) no-repeat;
}

        #visisureBox3_Wide a {
          display:block;
          width:100%;
          height:100%;
          color: #000000;
          text-decoration:none;
        }

        #visisureBox3_Wide a:hover { text-decoration:none; color: #0071B7; }



/* right column */

#rightInfo
{
    float: left;
    width: 24em;
    height: 40em;
    padding: 0em 0em 0em 3em;
    margin: 0em 0em 0em 2em;
    text-align: left;
    background: url(images/column-splitter.png) no-repeat;
}

#drillContainer
{
    float: left;
    width: 80em;
    height: auto;
    padding: 0;
    margin: 0em -1.4em 0em 4em;
    text-align: left;
}

#rightInfoDrill
{
    float: left;
    width: 24em;
    height: auto;
    padding: 6em 0em 0em 4em;
    margin: 0;
    text-align: left;
}

#version { float: left; margin: 0; width: 20.2em; }

#versionTop
{
    float: left;
    width: 20.2em;
    height: 8.7em;
    margin: 0;
    padding-right: 1em;
    text-align: center;
    background: url(images/timeware-version-info.png) no-repeat;
}

#versionInfo
{
    float: left;
    width: 20.2em;
    height: 6.3em;
    margin: 0;
    text-align: center;
    background: url(images/timeware-version-info-mid.png) no-repeat;
}

#versionNotes
{
    float: left;
    width: 20.2em;
    height: 3.4em;
    margin: 0;
    text-align: center;
    background: url(images/timeware-version-notes.png) no-repeat;
}

#versionDownload
{
    float: left;
    width: 20.2em;
    height: 8.1em;
    margin: 0;
    text-align: center;
    z-index: 10;
    background: url(images/download-version.png) no-repeat;
}


            #versionDownload a {
              display:block;
              width:100%;
              height:100%;
              text-decoration:none;
              z-index: 10;
              color: #000000;
            }

            #versionDownload a:hover { text-decoration:none; z-index: 10; color: #000000; }



#featureBOX
{
    width: 50em;
    height: 17em;
    margin: 0em 0em 1em 0em;
    position: relative;
    padding: 1em 2em 0em 2em;
    text-align: left;
}

        .feature1 { background: url(images/new-features/retirement-thumb.png) no-repeat; }

        .feature2 { background: url(images/new-features/years-service-thumb.png) no-repeat; }

        .feature3 { background: url(images/new-features/pip-thumb.png) no-repeat; }

#countdown
{
    float: left;
    width: 20em;
    height: 8em;
    padding: 0;
    margin: 10em;
    text-align: left;
}







/* 2010 Suggestion Form */

#wrapper-suggestion
{
	width:730px;
        text-align: left;
}

#header-suggestion
{
        width: auto;
        height: 131px;
	background-image: url(images/timeware-community-logo.png);
	background-repeat: no-repeat
}

#contact-suggestion
{
	width:290px;
        margin: 10px;
	float:right;
}


/* 2010 Contact forms */

/* Pop-up contact page */

#contactformContainerPopup
{
    float:left;
    width: 360px;
    padding: 10px;
    margin: 10px;
    text-align: left;
    border-style: solid;
    border-width: 1px;
    background-color: #ffffff;
}

#contact-area
{
    width: 350px;
    margin-top: 10px;
}

#contact-area input, #contact-area textarea
{
    padding: 5px;
    width: 350px;
    height: auto;
    font-family: Helvetica, sans-serif;
    font-size: 10px;
    margin: 0px 0px 10px 0px;
    border: 1px solid #ccc;
}

#contact-area textarea
{
    height: 90px;
}

#contact-area textarea:focus, #contact-area input:focus
{
    border: 1px solid #900;
}

#contact-area input.submit-button
{
    width: 80px;
    float: left;
}


/* 2010 Contact forms */

/* Non pop-up contact page */

#contactformContainer
{
    width: 360px;
    padding: 10px;
    text-align: left;
    border-style: solid;
    border-width: 1px;
    background-color: #ffffff;
}

#contact-areaNoPop
{
    width: 350px;
    margin-top: 10px;
}

#contact-areaNoPop input, #contact-areaNoPop textarea
{
    padding: 5px;
    width: 350px;
    height: 25px;
    font-family: Helvetica, sans-serif;
    font-size: 10px;
    margin: 0px 0px 10px 0px;
    border: 1px solid #ccc;
}

#contactNoPop-area textarea
{
    height: 90px;
}

#contactNoPop-area textarea:focus, #contact-areaNoPop input:focus
{
    border: 1px solid;
    border-color: #900;
}

#contact-areaNoPop input.submit-button
{
    width: 80px;
    float: left;
}

#contact-areaNoPop textarea.messageArea
{
    width: 350px;
    height: 150px;
    float: left;
}

/* both contact pages */

label
{
    float: left;
    text-align: left;
    margin-right: 15px;
    width: 100px;
    padding-top: 5px;
    padding-bottom: 2px;
    font-size: 10px;
}




/* Easy Slider */

	#slider ul, #slider li,
	#slider2 ul, #slider2 li{
		margin:0;
		padding:0;
		list-style:none;
		}
	#slider2{margin-top:1em;}
	#slider li, #slider2 li{
		/*
			define width and height of list item (slide)
			entire slider area will adjust according to the parameters provided here
            */
                width:634px;
		height:111px;
		overflow:hidden;
		}
	#prevBtn, #nextBtn,
	#slider1next, #slider1prev{
		display:block;
		width:30px;
		height:77px;
		position:absolute;
		left:-30px;
		top:71px;
		z-index:1000;
		}
	#nextBtn, #slider1next{
		left:634px;
		}
	#prevBtn a, #nextBtn a,
	#slider1next a, #slider1prev a{
		display:block;
		position:relative;
		width:30px;
		height:77px;
		background:url(../images/btn_prev.gif) no-repeat 0 0;
		}
	#nextBtn a, #slider1next a{
		background:url(../images/btn_next.gif) no-repeat 0 0;
		}

	/* numeric controls */

	ol#controls{
		margin:0;
		padding:0;
                position:absolute;
                top: 80px;
                right: 14px;
		}
	ol#controls li{
		margin:0 10px 0 0;
		padding:0;
		float:left;
		list-style:none;
                color: #000;
		}
	ol#controls li a{
		float:left;
		padding:0px 5px 5px 5px;
                color: #000;
                background-image: url('images/bullet-off.png');
                background-repeat: no-repeat;
		text-decoration:none;
		}
         ol#controls li a:hover { color: #000; }

	ol#controls li.current a{
		padding:0px 5px 5px 5px;
                color: #fff;
                background-image: url('images/bullet-on.png');
                background-repeat: no-repeat;
		}
	ol#controls li a:focus, #prevBtn a:focus, #nextBtn a:focus{outline:none;}


#specialOfferBox
{
    height: auto;
    border: solid;
    border-width: 1px;
    border-style: dashed;
    border-color: #000;
    padding: 20px;
    text-align: left; width: 300px;

    background: #fec601;

}