@import 'reset.css';

body {
	min-width: 958px;
	font-family: Arial;
	font-size: 12px;
	text-align: center;
	line-height: 16px;
	background: url('../images/bg.png') top left repeat-x #f5f5f5;
}

a {
	color: #000;
	text-decoration: none;
}

a:hover {
	text-decoration: underline;
}

p {
	margin: 0 0 10px 0;
}

li > ul {
	top: auto;
	left: auto;
}

.left {
	float: left;
}

.right {
	float: right;
}

.clear {
	clear: both;
}

.topBorder {
	width: 928px;
	height: 25px;
	background: url('../images/content_top.png') top center no-repeat;
	color: #eee;
	padding: 33px 15px 0 15px;
}

#page {
	width: 958px;
	max-width: 958px;
	margin: 0 auto;
	text-align: left;
}

#page .grey {
	background: url('../images/content_bg_grey.png') top center repeat-y;
}

#page .white {
	background: url('../images/content_bg_white.png') top center repeat-y;
}

#header {
	height: 60px;
}

#header .logo {
	float: left;
	display: block;
	padding: 15px 5px 10px 5px;
}

#menu {
	padding: 0;
	margin: 0;
	list-style: none;
	float: right;
	height: 60px;
}

#menu li {
	float: left;
	position: relative;
	width: 10em;
}

#menu li a {
	width: 120px;
	height: 36px;
	padding: 24px 0 0 0;
	font-size: 10px;
	display: block;
	text-align: center;
	color: #333;
	position: relative;
}

#menu li a:hover {
	background: url('../images/menu_bg_hover.png') bottom left repeat-x;
	text-decoration: none;
}

#menu li a:active {
	background: url('../images/menu_bg_click.png') bottom left repeat-x;
	text-decoration: none;
}

#menu li a.active {
	background: url('../images/menu_bg_click.png') bottom left repeat-x;
}

#menu li ul {
	display: none;
	position: absolute;
	top: 60px;
	right: 0;
}

#menu li>ul {
	top: auto;
	right: auto;
}

#menu li:hover ul,
#menu li.sfhover ul {
	display: block;
}

#menu li ul li a {
	background: #111;
	border-bottom: 1px solid #222;
	height: auto;
	padding: 5px 10px;
	width: 100px;
	text-align: left;
	color: #aaa;
	font-size: 11px;
}

#menu li ul li a:hover {
	background: #222;
	border-bottom: 1px solid #252525;
}

#homeTitle {
	background: url('../images/home/header.png') top center no-repeat;
	height: 269px;
	width: 958px;
	text-align: right;
    position: relative;
}

#homeTitle img {
    position: absolute;
    bottom: 4px;
    right: 3px;
    z-index: 8;
}

#homeTitle img.active {
    z-index: 10;
}

#homeTitle img.last-active {
    z-index: 9;
}

#homeContent ul {
	overflow: auto;
	margin: 4px 0 0 0;
	display: inline;
}

#homeContent ul li {
	float: left;
	margin: 9px 0 0 0;
	width: 311px;
	height: 139px;
}

#homeContent ul li {
	background: url('../images/home/small.png') top left no-repeat;
	width: 311px;
	height: 139px;
	font-size: 11px;
	color: #555;
}

#homeContent ul li h2 {
	font-size: 18px;
	font-weight: normal;
	margin: 20px 0 10px 20px;
}

#homeContent ul li p {
	margin: 0 0 0 20px;
}

#homeContent ul li p a {
	color: #555;
	margin: 0 0 0 20px;
}

#homeContent ul li a.imageLink {
	margin: 4px 4px 4px 0;
	height: 125px;
	float: right;
}

#homeContent ul li .blurb {
	width: 100px;
}

#homeContent ul li .learnMore {
	margin: 10px 0 0 0;
}

#homeContent ul li .learnMore a {
	width: 70px;
	display: block;
	background: url('../images/home/learnMore.png') right center no-repeat;
}

#homeContent ul li.center {
	float: left;
	margin: 9px 12px 0 12px;
}

#homeContent ul li.services .blurb {
	width: 95px;
}

#homeContent ul li.websites .blurb {
	width: 120px;
}

#homeContent ul li.wherearewe {
	padding: 4px;
	width: 303px;
	height: 131px;
}

#homeContent ul li.wherearewe h2 {
	float: left;
	padding: 10px 0 11px 15px;
	margin: 0;
}

#homeContent ul li.wherearewe .view {
	float: right;
	padding: 8px 10px 11px 0;
	margin: 0;
	line-height: 11px;
}

#homeContent ul li.wherearewe p.image {
	margin: 0;
	clear: both;
	display: inline;
}

#homeContent ul li.wherearewe .image a {
	margin: 0;
	display: block;
}

#homeContent ul li.thepanicbutton p {
	width: 150px;
}

#content {
	clear: both;
	padding: 0 4px;
}

#content.home .tri {
	margin: 0 29px;
	padding: 20px 0 0 0;
	overflow: auto;
}

#content.home .tri li {
	float: left;
	width: 286px;
}

#content.home .tri li p {
	color: #555;
}

#content.home .tri li.middle {
	margin: 0 10px;
	padding: 0 10px;
	border-left: 1px solid #ccc;
	border-right: 1px solid #ccc;
}

#content.wherearewe {
	overflow: auto;
}

#content.wherearewe iframe {
	margin: 20px 20px 20px 0 !important;
	margin: 10px 10px 10px 0;
	padding: 0;
	float: right;
	border: 3px solid #ddd;
}

#content.wherearewe h2.north {
	margin: 20px 0 0 20px;
}

#content.wherearewe h2.south {
	margin: 0 0 0 20px;
}

#content.wherearewe ol {
	width: 390px;
	margin: 0 0 20px 20px;
	list-style: decimal;
}

#content.wherearewe ol.north {
	border-bottom: 1px solid #ddd;
	margin: 0 0 20px 20px;
	padding: 0 0 20px 0;
}

#content.wherearewe ol li {
	margin: 10px 0 0 30px;
	padding: 0 0 0 10px;
	list-style: decimal;
}

#content .introImg {
	background-color: #eee;
}

#content .menu {
	width: 950px;
	height: 33px;
	overflow: auto;
	background: url('../images/submenu.png') top center no-repeat;
}

#content .menu li {
	float: left;
	background: url('../images/submenu_side.png') top right no-repeat;
	padding-right: 2px;
}

#content .menu li a,
#content .menu li h1 a {
	display: block;
	padding: 6px 30px 0 30px;
	font-weight: bold;
	font-size: 11px;
	height: 27px;
	float: left;
}

#content .menu li a:hover,
#content .menu li h1 a:hover,
#content .menu li a.active,
#content .menu li h1 a.active {
	text-decoration: none;
	background: url('../images/submenu_hover.png') top left repeat-x;
}

#content .menu li a:active,
#content .menu li h1 a:active {
	background: url('../images/submenu_click.png') top left repeat-x;
}

#content .list {
	background: url('../images/content_bg_white.png') top center repeat-y;
	padding: 30px 30px 0 30px;
	overflow: auto;
}

#content .list li {
	width: 420px;
	clear: left;
	margin: 0 0 20px 0 !important;
	margin: 0 0 10px 0;
	float: left;
	line-height: 18px;
}

#content .list li.alt {
	clear: none;
	margin: 0 0 20px 50px !important;
	margin: 0 0 10px 50px;
	float: left;
}

#content.products .productList {
	overflow: auto;
	margin: 20px 0 0 20px;
}

#content.products .productList li {
	float: left;
	margin: 0 0 5px 0;
	padding: 15px 15px 10px 15px;
	border: 2px solid #ddd;
	clear: both;
	height: 134px;
	width: 405px;
	overflow: auto;
}

#content.products .productList li.alt {
	margin: 0 0 5px 30px;
	clear: none;
}

#content.products .productList li h2 {
	font-size: 18px;
	font-weight: normal;
	line-height: 18px;
	margin: 0 0 10px 0;
}

#content.products .productList li .img {
	float: left;
	margin: 0 15px 10px 0;
}

#content.products .productList li p.view {
	margin: 0;
}

#content.products .productList li p.view a {
	padding-right: 12px;
	background: url('../images/home/learnMore.png') right center no-repeat;
}

#content.laptops h2 {
	font-size: 24px;
 	font-weight: normal;
 	margin: 25px 25px 10px 25px;
 	line-height: 24px;
 	padding: 0 0 10px 0;
 	background-color: #fff;
	clear: both;
}

#content.laptops .products {
	overflow: auto;
	margin-bottom: 20px;
}

#content.laptops .products li {
	overflow: auto;
	clear: both;
	padding: 25px 0 15px 0;
	margin: 0 25px 10px 25px !important;
	margin: 0 5px 10px 5px;
	border-top: 1px solid #ddd;
	background-color: #fff;
}

#content.laptops .products li .images {
	float: left;
	margin: 0 0 20px 0;
}

#content.laptops .products li .images img {
	padding: 0 10px 10px 0;
	margin: 0 15px 25px 0;
}

#content.laptops .products li h3 {
	font-size: 18px;
	font-weight: normal;
	margin: 0 0 10px 0;
	padding: 0;
	width: 675px;
	float: right;
}

#content.laptops .products li ul {
	padding: 0;
	margin: 0;
	list-style: disc;
	clear: none;
	width: 675px;
	float: right;
}

#content.laptops .products li ul li {
	clear: both;
	width: 300px;
	float: left;
	padding: 3px 0 3px 15px !important;
	margin: 0 20px 0 0 !important;
	border: none;
	background: url('../images/laptops/dot.png') top left no-repeat;
}

#content.laptops .products li ul li.alt {
	clear: none;
}

#content.laptops .products li ul .price {
	padding: 15px 0 2px 0 !important;
	margin: 0 20px 0 0 !important;
	font-size: 24px;
	background: none;
	line-height: 24px;
}

#content.laptops .products li ul .price span {
	display: block;
	font-size: 11px;
	line-height: 11px;
}

#content.laptops .products li ul .price a {
	display: block;
	margin: 10px 0 0 0;
}

#content.services .menu {
	background: url('../images/services/submenu.png') top center no-repeat;
}

#content.homeservice .menu,
#content.smallbusiness .menu {
	background: url('../images/services/subsubmenu.png') top center no-repeat;
}

#content.websites .menu {
	background: url('../images/websites/submenu.png') top center no-repeat;
}

#content.ourportfolio .menu,
#content.print .menu {
	background: url('../images/websites/subsubmenu.png') top center no-repeat;
}

#content.ourportfolio .portfolio {
	background: url('../images/content_bg_white.png') top center repeat-y;
	padding: 15px 30px 30px 30px;
}

#content.ourportfolio .portfolio li {
	padding: 15px 15px 15px 0;
	float: left;
	clear: both;
}

#content.ourportfolio .portfolio li.alt {
	padding: 15px 0 15px 50px;
	clear: none;
}

#content.ourportfolio .portfolio li .image {
	padding: 5px;
	background-color: #eee;
	display: block;
	width: 402px;
	height: 302px;
	margin: 0 0 10px 0;
}

#content.ourportfolio .portfolio li .image img {
	border: 1px solid #ccc;
}

#content.ourportfolio .portfolio li span.image {
	display: block;
}

#content.ourportfolio .portfolio li h2 {
	font-size: 18px;
	font-weight: normal;
	width: 400px;
}

#content.ourportfolio .portfolio li .date {
	color: #999;
	font-size: 11px;
	display: block;
	width: 400px;
}

#content.products .menu {
	background: url('../images/products/submenu.png') top center no-repeat;
}

#content.packagedeals .menu,
#content.laptops .menu {
	background: url('../images/products/subsubmenu.png') top center no-repeat;
}

#content.contactus .menu,
#content.wherearewe .menu {
	background: url('../images/contactus/submenu.png') top center no-repeat;
}

#content.contactus form {
	background: url('../images/content_bg_white.png') top center repeat-y;
}

#content.contactus form h2 {
	padding: 25px 30px 5px 30px;
	background: url('../images/content_bg_white.png') top center repeat-y;
}

#content.contactus form .panicButton {
	margin: 20px 30px 10px 30px;
	width: 890px;
	height: 50px;
	overflow: visible;
}

#content.contactus form .message {
	margin: 15px 0 20px 0;
	padding: 10px 30px;
	background-color: #f5f5f5;
	border-top: 1px solid #ddd;
	border-bottom: 1px solid #ddd;
	font-size: 16px;
	line-height: 24px;
}

#content.contactus form .message.error {
	border-color: #DC0D41;
	background-color: #FFBABA;
}

#content.contactus form .message.confirmed {
	border-color: #75BA0B;
	background-color: #C6FFBA;
}

#content.contactus form .largeSelect {
	margin: 5px 30px 15px 30px;
	width: 890px;
	font-size: 14px;
}

#content.contactus form div {
	overflow: auto;
	width: 460px;
}

#content.contactus form div.left {
	padding: 5px 0 0 30px;
}

#content.contactus form div.left label {
	display: block;
	clear: both;
}

#content.contactus form div.left .inputbox {
	margin: 3px 0 15px 0;
	width: 426px;
}

#content.contactus form div.right label {
	display: block;
	padding: 5px 0 0 0;
}

#content.contactus form div.right .textarea {
	margin: 3px 0 0 0;
	width: 426px;
	height: 184px;
	font-family: arial;
	font-size: 14px;
}

#content.contactus form div.wideMessage {
	padding: 0 30px 25px 30px;
	width: 890px;
}

#content.contactus form div.wideMessage textarea {
	width: 884px;
	height: 184px;
}

#content.contactus form .submit {
	padding: 0 0 15px 30px;
}

#content .display {
	background: url('../images/display.png') top center no-repeat;
	height: 240px;
}

#content .display ul {
	margin: 0 0 0 140px;
	overflow: auto;
}

#content .display ul li {
	height: 240px;
	float: left;
	width: 192px;
	line-height: 0;
	padding: 0 5px;
	margin: 0;
}

#content .comparison tr.alt td {
	background: #fff;
}

#content .comparison tr th {
	padding: 5px;
	font-size: 14px;
	color: #333;
}

#content .comparison tr th.colOne {
	width: 120px;
	padding: 10px 10px 10px 10px;
}

#content .comparison tr th.colTwo,
#content .comparison tr th.colThree,
#content .comparison tr th.colFour,
#content .comparison tr th.colFive {
	width: 192px;
}

#content .comparison tr td {
	padding: 3px 5px;
	border-top: 1px solid #d5d5d5;
	border-left: 1px solid #ddd;
	font-size: 11px;
	vertical-align: middle;
}

#content .comparison tr td.colOne {
	width: 120px;
	padding: 7px 10px 7px 10px;
	color: #555;
	font-size: 11px;
	border-left: 0;
}

#content .comparison tr td small {
	font-size: 10px;
	display: block;
}

#content .comparison tr.alt td.colOne {
	width: 120px;
	padding: 7px 10px 7px 10px;
	color: #555;
	background: url('../images/colOne_bg.png') top left repeat-y #fff;
}

#content .comparison tr td.colTwo,
#content .comparison tr td.colThree,
#content .comparison tr td.colFour,
#content .comparison tr td.colFive {
	width: 192px;
}

#content .comparison tr.alt td.colFive {
	background: url('../images/colFour_bg.png') top right repeat-y #fff;
}

#content .comparison tr.price td {
	padding-top: 10px;
	font-size: 11px;
	background: none;
	background-color: #fff;
}

#content .comparison tr.price td.colOne {
	background: #fff;
}

#content .comparison tr.price td ul li {
	overflow: auto;
	clear: both;
}

#content .comparison tr.price td ul li span {
	float: left;
}

#content .comparison tr.price td ul li span.padded {
	display: block;
	margin: 12px 0 0 0;
}

#content .comparison tr.price td ul li span strong {
	float: none;
	color: inherit;
}

#content .comparison tr.price td ul li strong {
	float: right;
	color: #333;
}

#content .comparison tr.price td ul li strong.large {
	float: right;
	font-size: 24px;
	line-height: 30px;
}

#content .comparison tr.price td ul li.packageDetails {
	margin-top: 20px;
}

#content .comparison tr.price td ul li.packageDetails strong {
	float: none;
	color: #111;
}

#content .comparison tr.price td ul li.enquire {
	margin-top: 10px;
}

#content .theteam {
	padding: 5px 0 0 20px;
	height: 96px;
}

#content .theteam dl {
	float: left;
	width: 165px;
	margin-right: 20px;
}

#content .theteam dl dd strong {
	color: #333;
	display: block;
	margin-bottom: 3px;
}

#newServices {
	padding: 25px;
}

#newServices ul {
	overflow: auto;
}

#newServices ul li {
	float: left;
	width: 270px;
	margin: 0 45px 25px 0;
}

#newServices ul li.end {
	margin-right: 0;
}

#newServices ul li h3 {
	font-size: 18px;
	font-weight: normal;
}

#newServices ul li .subTitle {
	font-size: 11px;
	display: block;
	margin-bottom: 10px;
}

#newServices ul li .img {
	margin-bottom: 10px;
}

#newServices ul li p {
	margin: 0 0 10px 0;
}

#newServices ul li p.end {
	overflow: auto;
}

#newServices ul li p.end a {
	background-color: #eee;
	display: block;
	float: left;
	margin-top: 5px;
	padding: 3px 5px;
}

#newServices ul li p.end a:hover {
	background-color: #e5e5e5;
	text-decoration: none;
}

#newServices .specificServices {
	background-color: #eee;
	padding: 15px;
	overflow: auto;
}

#newServices .specificServices .title {
	float: left;
}

#newServices .specificServices ul {
	overflow: auto;
	float: left;
}

#newServices .specificServices ul li {
	float: left;
}

#contactForm ul {
	padding: 20px 30px;
	overflow: auto;
}

#contactForm ul li {
	clear: both;
	margin: 0 0 20px 0;
}

#contactForm ul li.quarter {
	clear: none;
	float: left;
	width: 205px;
	margin: 0 20px 20px 0;
}

#contactForm ul li.quarter input {
	width: 195px;
}

#contactForm ul li.quarter select {
	width: 200px;
}

#contactForm ul li.patask {
	background: url('../pa/logo.jpg') top right no-repeat;
	width: 890px;
}

#contactForm ul li.patask input {
	width: 650px;
}

#contactForm ul li.end {
	clear: none;
	margin: 0 0 20px 0;
}

#contactForm ul li label {
	display: block;
	font-weight: bold;
	font-size: 11px;
}

#contactForm ul li input {
	width: 885px;
}

#contactForm ul li textarea {
	width: 882px;
	height: 150px;
}

#contactForm ul li .button {
	width: auto;
}

#footer {
	clear: both;
	overflow: auto;
	background-color: #f5f5f5;
	font-size: 11px;
	color: #555;
}

#footer div {
	padding: 69px 4px 0 4px;
}

#footer div.normal {
	background: url('../images/content_bottom_white.png') top left no-repeat;
}

#footer div.grey {
	background: url('../images/content_bottom_grey.png') top left no-repeat;
}

#footer div.whiteThreeCol {
	background: url('../images/content_bottom_white_threeCol.png') top left no-repeat;
}

#footer div.whiteFourCol {
	background: url('../images/content_bottom_white_fourCol.png') top left no-repeat;
}

#footer div.noContent {
	background: none;
	background-image: none;
	padding: 46px 4px 0 4px !important;
	padding-top: 23px;
}

#footer div ul {
	border-top: 1px solid #ccc;
	overflow: auto;
	padding: 20px 0;
	margin: 0;
	height: 145px;
}

#footer div ul li {
	float: left;
	display: inline;
}

#footer div ul li.left {
	width: 270px;
	margin: 0 3px 0 13px;
}

#footer div ul li.left p strong {
	font-weight: normal;
}

#footer div ul li.center {
	width: 274px;
	margin: 0 51px 0;
}

#footer div ul li.right {
	margin: 0;
}

#footer div ul li h3 {
	color: #333;
}

#footer div ul li h4 {
	display: block;
	color: #333;
	margin: 10px 0 0 0;
}

#footer div ul li dl {
	width: 236px;
	clear: both;
	overflow: auto;
}

#footer div ul li dl dt {
	width: 75px;
	float: left;
	padding: 0 5px 0 0;
}

#footer div ul li dl dd {
	width: 151px;
	float: left;
	padding: 0 3px 0 0;
}

#footer div ul li dl dd address {
	font-style: normal;
}

#endFooter {
	height: 50px;
	padding: 20px;
	margin: 0 4px;
	font-size: 11px;
	color: #555;
	border-top: 1px solid #ccc;
}

#endFooter .right a {
	color: #555;
	font-weight: bold;
}