/* CSS Document
    nSytes Blue: #01aff1
    Orange:#fe8a02
 */

@font-face {
    font-family: 'FolioBook';
    src: url('/css/folio_book_bt-webfont.eot');
    src: url('/css/folio_book_bt-webfont.eot?#iefix') format('embedded-opentype'),
         url('/css/folio_book_bt-webfont.ttf') format('truetype'),
         url('/css/folio_book_bt-webfont.woff') format('woff'),
         url('/css/folio_book_bt-webfont.svg#FolioBook') format('svg');
    font-weight: normal;
    font-style: normal;
}

* {margin:0; padding:0}

body {width:100%; background-color:#858585; margin:0 auto; text-align:center; font-family:'FolioBook', Verdana, Arial, sans-serif; color:#333; font-size:62.5%}

#holdall {width:100%; margin:0 auto; text-align:center}

    #holdheader {width:100%; height:130px; background:#5f5f5f url(/images/bg.gif) repeat-x top left; margin:0 auto}

        #header {width:980px; margin:0 auto; text-align:center}
            #logo {float:left; width:300px; height:120px; text-align:left; padding-top:10px}
            
            #navbar {float:right; width:680px; margin-top:10px}
	            div#login, div#anontemp {height:30px; font:1.3em sans-serif; color:#fff; text-align:right; padding:5px 0}            		

		            div#login a:link, div#login a:visited, div#anontemp a:link, div#anontemp a:visited  {color:#ffba01; text-decoration:underline}
		            div#login a:hover, div#login a:active, div#anontemp a:hover, div#anontemp a:active {color:#fff; text-decoration:none}
            		
		            div#anontemp2 {width:300px; margin:0 auto; text-align:center}
		            div#anontemp2 {font-size:1.2em}
		    
		    #intro {font-size:1.4em; color:#fff; text-align:right}
		    
		    #menu {margin:18px auto 0 auto; text-align:right}
		        #myjquerymenu {margin:0 auto; text-align:right}
		    
		    
#content {width:980px; margin:0 auto; text-align:center}

    #top {clear:both; width:980px; height:38px;	background:url(/images/bg-top.gif) no-repeat top center; margin-top:30px}
        #top h2, h2.offerings {text-align:right; font-size:2.6em; color:#01aff1; padding-top:10px; margin:0}

    #mid {clear:both; width:980px; margin:0 auto; min-height:240px; text-align:center; float:left; padding:30px 0; background-color:#fff}
        .mid-1, .mid-2, .mid-3, .mid-4 {float:left}
        .mid-1 {width:300px}
        .mid-2 {width:490px}
        .mid-3 {width:680px}
        .mid-4 {width:980px}
        
        .copy-l {padding:0 20px 0 40px}
        .copy-c {padding:0 40px}
        .copy-r {padding:0 40px 0 20px}
        
        .tag {font-size:1.8em; font-style:italic; margin:10px 0 0 0; color:#fe8a02}


    #bot {clear:both; width:980px; height:38px;	background:url(/images/bg-bot.gif) no-repeat top center; margin-bottom:30px}


div#compare {margin-top:10px; margin-bottom:10px}

div#services {
	border:solid 2px #b1d5ff;
    background-color:#d3e7fe;
    padding:10px 20px;
    margin:20px 0;
    -webkit-border-radius:20px;
    -moz-border-radius:20px;
}

#services p {
	margin:1.8em auto;
	text-align:left;
    font-size:1.4em;
    line-height:1.5em
}

.options {margin-left:50px}
.compare {float:left; width:278px; margin:0; text-align:center; border:solid 1px #b1d5ff; font-size:1.3em; line-height:20px; padding-bottom:20px}
	.a-left {text-align:right}
	.a-center {text-align:center}
	.compare h2 {font-size:1.4em; color:#fe8a01; font-weight:bold; text-align:center}


div#blogs {clear:both; width:860px; margin:0 auto; text-align:center; line-height:18px}
	.blog-header {width:820px; padding:10px 10px; border-top:double 3px #ededed; font-size:1.5em}
		.blog-date {float:left; width:70px; height:73px; background:url(/images/bg-calendar.png) no-repeat top center; color:#fff; font-size:24px; margin:0 auto; text-align:center; text-align:center}
		.blog-date-sm {font-size:0.6em}
		.blog-title {float:left; width:730px; color:#01aff1; padding:5px 0 10px 20px; line-height:28px}
		.blog-tags {color:#fe8a02; line-height:18px; font-size:0.7em}
	.blog, .blog p {clear:both; width:720px; padding:10px 10px; text-align:left; line-height:20px; margin-left:90px; font-size:1.1em}
	.blog-pager {clear:both; width:840px; text-align:right; padding:5px 0 20px 0; font-size:1.2em}

.sites {width:200px; margin:0 auto; padding:10px; text-align:center; font-size:x-small; text-align:center; background-color:#e2e2e2; border:solid 1px #b1d5ff; line-height:16px}


/************************ Typography ***************/

.inner-content {background-color:#fff; padding:20px 0}

/*.inner-copy p, .home-intro p, .top10 p {
	font-size:1.7em;
	margin:20px 0;
	color:#545454; 
	text-align:left;
	line-height:24px;
	font-weight:normal
}

.home-intro h2 {margin-top:30px}
.home-intro p.home {font-size:1.6em; line-height:22px}*/
.topten h3 {font-weight:normal; font-size:1.6em; margin-top:24px; color:#fe8a01; text-align:left}
.topten ol {}
    .topten li {list-style:none}

h1, h2, h3, h4 {font-family:'FolioBook', Verdana, Arial, sans-serif; text-align:left}

h1 {font-size:2.2em; font-weight:normal; color:#01aff1; line-height:30px}
	h1 img {margin:0; padding:0; border:0}
h2 {font-size:1.8em; font-weight:bold; margin:1.8em auto 0 auto; color:#545454}
h3 {font-size:1.4em; margin-top:.8em; margin-bottom:.8em; color:#01aff1}
h4 {font:bold 1.4em; margin:.8em auto; color:#01aff1}

p {font-family:'FolioBook', Verdana, Arial, sans-serif; font-size:1.5em; margin:1.0em 0 0 0; color:#545454; text-align:left; line-height:22px}

img {padding:0; margin:0; border:0}
.reg {font-size:1.5em}
.sm {font-size:1.1em; line-height:1.5em}
.xsm {font-size:0.8em; line-height:1.3em}
.lg {font-size:2.2em}
.important {color:Red; font-weight:bold}
.red {color:#c00}
.blue {color:#6ca9f2}
.ctr {text-align:center}
.clear {clear:both; height:0}
.divider {border-top:double 3px #efefef; padding:0 0 10px 0; margin:10px auto}

.titlebar {
	font-size:1.3em;
	height:24px;
	color:#545454; 
	background-color:#aed2f3;
	font-weight:bold;
	text-align:center;
	padding:2px 5px;
	border:solid 1px #98cdfe
}
	
.img {padding:6px; border:solid 1px #d7e9fb; background-color:#fff}

.service-item {
        background-color:#e7e7e7; 
        background-image:-moz-linear-gradient(center top, #b6b6b6 0%, #e7e7e7 100%); 
        border:1px solid #ccc; 
        background-attachment:scroll;
        background-clip:padding-box !important;
        background-origin:padding-box;
        background-position:0 0;
        background-repeat:repeat;
        background-size:auto auto;
        border-radius:9px 9px 9px 9px;
        box-shadow:0 2px 4px 0 rgba(0, 0, 0, 0.5);
        color:white;
        margin:10px 0 0 30px;
        padding:15px 40px;
        }
        
    .service-item h2 {font-weight:bold; margin-bottom:10px; color:#01aff1}
    .service-item p {font-size:1.5em}
    
    .show-details {
        width:100px; 
        margin:10px auto 20px auto; 
        text-align:center; 
        padding:10px 20px; 
        background-color:#01aff1; 
        background-image:-moz-linear-gradient(center top, #96caff 0%, #01aff1 100%); 
        border:1px solid #fff;
        background-attachment:scroll;
        background-clip:padding-box !important;
        background-origin:padding-box;
        background-position:0 0;
        background-repeat:repeat;
        background-size:auto auto;
        border-radius:9px 9px 9px 9px;
        box-shadow:0 2px 4px 0 rgba(0, 0, 0, 0.5);
        font-size:1.3em;
        cursor:pointer
    }
    

/*  DATA and FORMS */
    fieldset {
        margin:1em auto;
        padding:20px;
        border:1px solid #01aff1;
        color:#333;
        font-size:1.5em;
        text-align:center;
        -moz-border-radius:8px 8px 8px 8px;
        -webkit-border-top-right-radius:8px;
        -webkit-border-top-left-radius:8px;
        -webkit-border-bottom-right-radius:8px;
        -webkit-border-bottom-left-radius:8px;
    }

    fieldset p {margin:2px 12px 10px 10px}

    legend {
        color:#01aff1;
        font-size:1.4em;
        font-weight:normal;
        padding:0 14px}

	input, .input, select, .msg {
		background-color:#eee; 
		border:solid 1px #01aff1; 
		padding:6px 2px;
		margin:2px;
		font-weight:normal;
		color:#000;
		font-family:'FolioBook', Verdana, Arial, sans-serif
	}
	
	.msg {overflow:auto}
	
	radiobutton {padding-top:10px}	
	
	.form-l {text-align:right; padding-top:14px}
	.form-r {text-align:left; padding:14px 0 0 10px}
	.form-c {text-align:center; padding-top:14px}	
	.chk input {margin:0; padding:0; vertical-align:middle; border:none}	
	select {height:auto}

    .button, .button-logout-small {
        background-attachment:scroll;
        background-clip:padding-box !important;
        background-origin:padding-box;
        background-position:0 0;
        background-repeat:repeat;
        background-size:auto auto;
        border-radius:9px 9px 9px 9px;
        box-shadow:0 2px 4px 0 rgba(0, 0, 0, 0.5);
        color:white;
        cursor:pointer;
        display:inline-block;
        font-size:1.3em;
        line-height:1.6em;
        padding:2px 24px;
        text-decoration:none;
        text-shadow:-1px -1px 0 rgba(0, 0, 0, 0.5);
        height:auto
    }
    
    .button {background-color:#e45b00; background-image:-moz-linear-gradient(center top, #ffb069 0%, #e45b00 100%); border:1px solid #f4bb0f}
    .button-logout-small {padding:3px 12px; background-color:#000; background-image:-moz-linear-gradient(center top, #ccc 0%, #000 100%); border:1px solid #01aff1; border-radius:5px; font-size:0.9em; line-height:1.0;}
    .btn-prev {width:57px; height:31px; background:url(/Images/PC-Back.gif) no-repeat bottom right; cursor:pointer; border:none}
    .btn-next {width:49px; height:31px; background:url(/Images/PC-Next.gif) no-repeat bottom right; cursor:pointer; border:none}

	
.gv {font-family:Verdana, Arial, sans-serif; border:solid 1px #c4b48d; padding:1px 2px}
.gv1, .gv2 {text-align:center; padding:5px 5px; font-size:1.3em}
.gv1 {}
.gv2 {background-color:#e6f1fe }
.gvPics table td, .gvData table td, .copy-l table td, #gvLinks table td {padding:5px 5px; border:solid 1px #ededed}

.home-graphic {width:242px; height:112px; display:block}

    
	.copy-l ul, .copy-r ul, .inner-copy ul, .top10 ol, .options ul {text-align:left; margin-left:20px}
	.copy-l li, .copy-r li, .inner-copy li, .options li {
		list-style:none;
		background:url(/images/tick.gif) 0 5px no-repeat;
		line-height:16px;
		margin-top:.8em;
		padding-left:16px;
		font-size:1.4em
	}
	
	.top10 li {
	    font-size:12px; 
	    color:#fe8a01; 
	    font-weight:bold;
	    /*list-style-type:decimal;*/
		line-height:16px;
		margin-top:1.3em
	}
	
	p.desc  {margin:14px 0 30px 30px; line-height:23px}


/* FEATURES */
    /*#features {width:250px; margin:0 auto; text-align:center}*/
        #features h2 {font-weight:normal; font-size:2.2em; text-align:center}
        #features p {text-align:center}
        #features .title {font-weight:normal}
        #features img {text-align:center}
    
    .web-design-intro, .website, #future {display:none}


#web {display:none}

#copyright {
	width:100%;
	margin:0 auto;
	background-color:#333;
	font:1.0em Verdana, Arial, sans-serif;
	color:#9f9f9f;
	padding:10px 0;
	text-align:center
}
	#copyright h1 {width:100%; margin:0 auto; text-align:center; font:1.0em Verdana, Arial, sans-serif; color:#9f9f9f}

div#appTitle {width:100%; margin:0 auto; background-color:#333; padding:5px 0; text-align:center}
    div#appTitle h3 {width:980px; margin:0 auto; text-align:center; color:#9f9f9f; font-weight:normal; font-size:2.0em; padding:10px 0}

img.resize{
    width:150px;
    height:108px;
    text-align:left;
    position:absolute;
	padding:5px; 
	background-color:#fff
}

.pre-hover {border:solid 3px #d5d5d5; z-index:0; -webkit-border-radius:5px; -moz-border-radius:5px}
.on-hover {border:solid 3px #f00; z-index:4; -webkit-border-radius:8px; -moz-border-radius:8px}


/************scrolling portfolio******************/

div.sc_menu {
  /* Set it so we could calculate the offsetLeft */
  position:relative;
  width:100%;
  height:210px;
  margin:0 auto;
  text-align:center;
  /* Add scroll-bars  */
  overflow:auto
}
ul.sc_menu {
  display:block;
  height:210px;
  /* Max width here, for users without Javascript  */
  width:10225px;
  padding-left:15px;
  /* Remove default margin  */
  margin:0;
  background-color:#333;
  list-style:none
}
.sc_menu li {
  display:block;
  float:left;
  padding:0 4px;
}
.sc_menu a {
  display:block;
  text-decoration:none
}
.sc_menu span {
  display:none;
  margin-top:3px;
  text-align:center;
  font-size:12px;
  color:#e3e3e3
}
.sc_menu a:hover span {
  display:block
}
.sc_menu img {
  border:solid 5px #99ccff;
  -webkit-border-radius:5px;
  -moz-border-radius:5px
}
.sc_menu a:hover img {
  filter:alpha(opacity=50);
  opacity:0.5
}

/***********Links**************/
a:link, a:visited {color:#01aff1; text-decoration:none}
a:hover, a:active {color:#fe8a02; text-decoration:underline}

.service-item a:link, .service-item a:visited {color:#fe8a02; text-decoration:underline}
.service-item a:hover, .service-item a:active {color:#a2a2a2; text-decoration:none}

.show-details a:link, .show-details a:visited, #copyright a:link, #copyright a:visited {color:#fff; text-decoration:none}
.show-details a:hover, .show-details a:active, #copyright a:hover, #copyright a:active {color:#fe8a02; text-decoration:none}

div#websites a:link, div#websites a:visited {font-style:normal; color:#5498e9; text-decoration:none}
div#websites a:hover, div#websites a:active {font-style:normal; color:#a2a2a2; text-decoration:underline}

a.feature:link, a.feature:visited {color:#ffba01; text-decoration:none}
a.feature:hover, a.feature:active {color:#fff; text-decoration:none}

div#features a:link, div#features a:visited {color:#5498e9; text-decoration:none}
div#features a:hover, div#features a:active {color:#a2a2a2; text-decoration:none}