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

    T-Data Screen CSS
    Copyright 2007 Tripsis | www.tripsis.co.uk
    Author: KW

*****************************************************
    General
****************************************************/

body {
    font: 100%/150% Tahoma, Arial, sans-serif;
    background: #666 url(../images/css/bodybg.gif) repeat-y 50% 0;
}

textarea { font-family: Tahoma, Arial, sans-serif; font-size: 1em; }

strong {
    font-weight: bold;
}		

h1 { font-size: 1.4em; }
h2 { font-size: 1.1em; }
h3 { font-size: 1.0em; }
h4 { font-size: 0.9em; } 
h5 { font-size: 0.8em; }
h6 { font-size: 0.7em; }
								
#topofpage {
margin: 0;
}
/****************************************************
    Layout
****************************************************/

#pageholder {
    float: left;
    width: 760px;
    position: absolute;
    left: 50%;
    top: 0;
    margin-left: -380px;
    background: #050000 url(../images/css/patternbg.jpg) no-repeat 0 0;
    padding-top: 102px;
}

#page {
    float: left;
    width: 760px;
    position: absolute;
    left: 50%;
    top: 0;
    margin-left: -380px;
    background: #050000 url(../images/css/patternbg.jpg) no-repeat 0 0;
    padding-top: 20px;
}

/****************************************************
    Nav
****************************************************/
#nav {
    float: left;
    width: 725px;
    margin: 20px 20px;
    height: 18px;
    display: inline;
}

#nav ul {
    font-size: 0.7em;
    margin: 0 26px;
    
}

    #nav ul li {
        float: left;
        border-right: 2px solid #545252;
        padding: 0 9px;
        text-transform: uppercase;
        height: 18px;
        line-height: 18px;
    }

    #nav ul li.last {
        border: none;
        padding-right: 0;
    }
    
        #nav ul li a {
            color: #afafaf;
            text-decoration: none;
        }
        
        #nav ul li a.selected,
        #nav ul li a:hover {
            color: #fff;
        }
    
        #nav ul li a:hover {
            border-bottom: 1px solid #018ace;
        }
        
    #nav hr {
        display: none;
    }

/****************************************************
    Sub Nav
****************************************************/
#subnav {
    float: left;
    width: 725px;
    margin: 20px 20px;
    height: 18px;
    display: inline;
}

#subnav ul {
    font-size: 0.7em;
    margin: 0px 18px;
    
}

    #subnav ul li {
        float: left;
        border-right: 2px solid #545252;
        padding: 0 12px;
        text-transform: uppercase;
        height: 18px;
        line-height: 18px;
    }

    #subnav ul li.last {
        border: none;
        padding-right: 0;
    }
    
        #subnav ul li a {
            color: #afafaf;
            text-decoration: none;
        }
        
        #subnav ul li a.selected,
        #subnav ul li a:hover {
            color: #fff;
        }
    
        #subnav ul li a:hover {
            border-bottom: 1px solid #018ace;
        }
        
    #subnav hr {
        display: none;
    }
		  
/****************************************************
    Sub-Heading
****************************************************/
#mainwrapper p.subhead {
    position: absolute;
    top: -270px;
    left: 0;
    font-size: 1.83em;
    line-height: 1.8em;
    width: 320px;
    padding: 60px 32px;
    padding-left: 368px;
    color: #afafaf;
    height: 134px;
    background-repeat: no-repeat;
    background-position: 0 0;
    margin: 0;
}

#mainwrapper p.home {
    background-image: url(../images/css/subh/home_1.jpg);
}

#mainwrapper p.package {
    background-image: url(../images/css/subh/package.jpg);
}

/****************************************************
    Main
****************************************************/
#mainwrapper {
    float: left;
    width: 720px;
    background: #fff url(../images/css/mainbgb.png) no-repeat 0 100%;
    margin: 0 20px;
    padding-bottom: 36px;
    position: relative;
    display: inline;
}

#mainwrapper.sub {
    margin-top: 273px;
}

#main {
    float: left;
    width: 720px;
    padding-top: 26px;
    background: #fff url(../images/css/mainbg.png) no-repeat 0 0;
    font-size: 0.8em;
    color: #333334;
}
		 
    #main h1,
    #main h2,
    #main h3,
    #main h4,  
	#main h6,	
    #main p,
    #main ul,
    #main ol {
        margin-left: 36px;
        margin-right: 36px;
    }

    #main h1 {
        color: #0088cc;
        margin-bottom: 0.2em;
    }
    
    #main h2 { 
		color: #050000;
        margin-bottom: 0.5em;
    }

    #main h3 {
        color: #050000;
        font-size: 1.0em;
    }
	

    #main p,
    #main ul,
    #main ol,
    #main table {
        margin-bottom: 30px;
        margin-bottom: 2.3em;
        clear: both;
    }
    
    #main a {
        color: #018ace;
        text-decoration: none;
    }

    #main a:hover { text-decoration: underline; }
    
    #main ul li {
        list-style-type: disc;
        margin-left: 20px;
        padding-left: 9px;
    }
    
    #main .hi {
        background: #dfdfdf;
        color: #333;
        padding: 9px;
    }

/****************************************************
    Section Specific
****************************************************/
#main #homecontent {
    background: url(../images/time-clock.jpg) no-repeat 100% 0;
    padding-right: 174px;
}

#main #packageinfoupper {
    background: url(../images/time-clock.jpg) no-repeat 100% 0;
    padding-right: 164px;
}

#main #packageinfolower {
    background: url(../images/timysoft.jpg) no-repeat 100% 0;
    padding-right: 234px;
    margin-right: 20px;
}

#main #programdetails {
    float: left;
    width: 420px;
}

    #main #programdetails ul li {
        margin-bottom: 1.6em;
    }
    
#main #programimages {
    float: right;
    width: 300px;
}

    #main #programimages img {
        padding-bottom: 18px;
    }

#main #programdetails1 {
    float: left;
    width: 500px;
}

    #main #programdetails1 ul li {
        margin-bottom: 1.6em;
    }
    
#main #programimages1 {
    float: right;
    width: 200px;
}

    #main #programimages1 img {
        padding-bottom: 18px;
    }
	
#main #programimages2 {
    float: right;
    width: 230px;
}

    #main #programimages2 img {
        padding-bottom: 18px;
    }
	
#main #termspecs div.col {
    width: 306px;
    float: left;
    padding-left: 36px;
}

#main #termspecs div.spec {
    margin-bottom: 18px;
    padding: 5px 9px;
    background: #efefef;
}

#main #termspecs h3,
#main #termspecs p {
    margin: 0;
    clear: none;
}

#main #termspecs h4,
#main #termspecs p {
    margin: 0;
    clear: none;
}

    #main p.download a {
        display: block;
        background: #efefef;
        width: 14em;
        height: 3em;
        text-align: center;
        line-height: 3em;
        float: left;
        margin-right: 1.6em;
        border: 1px solid #efefef;
    }
    
    #main p.download a:hover {
        border: 1px solid #0088cc;
        text-decoration: none;
    }

/****************************************************
    Operation
****************************************************/
#operation {
    background: #050000;
    float: left;
    width: 758px;
    font-size: 0.8em;
	}

    #operation h1 {
        color: #0088cc;
        margin-left: 20px;
    }
  
    #operation h2 {
        color: #bdc3c6;
        margin-left: 20px;
        margin-bottom: 0.2em;	   
    }
			
	#operation h3 {
        color: #bdc3c6;
        margin-left: 20px;
        margin-bottom: 0.2em;	   
    }

    #operation ol {
        float: left;
        margin-top: 9px;
    }

    #operation ol li {
        background: #0086ce url(../images/css/howtousebottom.png) no-repeat 0 100%;
        float: left;
        width: 165px;
        margin-left: 20px;
        line-height: normal;
        height: 30em;
        padding-bottom: 42px;
        list-style-type: none;
        position: relative;
        display: inline;
    }
    
        #operation ol li div.stepimage {
            float: left;
            width: 165px;
            height: 198px;
            overflow: hidden;
            margin-bottom: 9px;
            background: #050000 url(../images/css/howtousetop.png) no-repeat 0 0;
            padding-top: 42px;
        }
    
        #operation ol li p {
            padding: 9px;
            padding-bottom: 4px;
            color: #fff;
        }
        
            #operation ol li p a {
                color: #fff;
            }
        
        #operation ol li p.stepno {
            padding: 9px;
            position: absolute;
            top: 0;
            right: 0;
            color: #0088cc;
            font-size: 1.4em;
        }

/****************************************************
    Price List
****************************************************/
#pricelist {
    margin: 0 18px;
}

    #pricelist table {
        background: #efefef;
    }
    
    #pricelist table th {
        background: #636563;
        color: #fff;
        font-weight: bold;
    }

    #pricelist table th,
    #pricelist table td {
        padding: 9px 18px;
    }
    
    #pricelist table tr.alt td {
        background: #dfdfdf;
    }
    
    #pricelist table th.price,
    #pricelist table td.price {
        text-align: center;
        width: 8em;
    }

/****************************************************
    Footer
****************************************************/
#footer {
    background: #050000;
    padding: 18px 0;
    padding-bottom: 5px;
    clear: both;
}

    #footer p {
        background: #666;
        color: #fff;
        margin: 0 20px;
        padding: 9px 36px;
        font-size: 0.7em;
        text-align: center;
        line-height: normal;
    }
    
    #footer p span.phone,
    #footer p span.fax {
        margin-right: 8px;
    }
    
    #footer a {
        color: #fff;
        text-decoration: none;
    }
    
    #footer a:hover {
        text-decoration: underline;
    }
    
    #footer hr {
        display: none;
    }
    
/****************************************************
    Contact Form
****************************************************/
div.contactform {
    margin: 18px 36px;
}

	div.contactform div {
		display: inline;
		}

div.contactform img {
    display: none;
}

div.contactform table {
    background: #efefef;
    width: 100%;
}    

    div.contactform table td {
        vertical-align: top;
        padding: 4px 18px;
        width: auto;
    }

/****************************************************
    Copyright
****************************************************/
#copy {
    background: #050000;
    padding-bottom: 36px;
}

    #copy p {
        font-size: 0.7em;
        color: #afafaf;
        margin: 0 56px;
        text-align: center;
    }
    
        #copy p a { color: #018ace; text-decoration: none; }
        #copy p a:hover { color: #afafaf; border-bottom: 1px solid #018ace; }