/*                                  
----------------------------------------------------              
CONNECT INTERNET SOLUTIONS - HPUX Archive CSS              
AUTHOR:     Andy Walker         
VERSION:    1.1          
DATE:       20/07/2012       
CONTACT: 	andy.walker@connectinternetsolutions.com              
-----------------------------------------------------              
CONTENTS           
1. POSITIONAL ELEMENTS              
2. TYPOGRAPHY              
3. LINKS              
4. TABLES              
5. LOGO              
6. NAVIGATION              
7. HOME PAGE              
8. FOOTER              
9. MISC              
                                 
*/

/* ------------------------------------
	1. POSITIONAL ELEMENTS 
------------------------------------ */

body {
	border-top:10px solid #006;	
	min-width:1100px;	
	font-family:arial,helvetica,sans serif;
}

#backgroundWrap {
	background:url(/images/background.gif) repeat-x;
	background-color:#3d77b2;
	width:100%;
	min-height:600px;
}

.clearfix:after {
	content: ".";
	display: block;
	clear: both;
	visibility: hidden;
	line-height: 0;
	height: 0;
}
.clearfix {
	display: block;
}
 
html[xmlns] .clearfix {
	display: block;
}
 
* html .clearfix {
	height: 1%;
}

#nav-wrap {
	width:1100px;
	margin:0 auto;
}


#mainContentArea {
	width:90%;
	min-width:600px;
	margin:15px 5%;
	position:relative;
	float:left;
}
#contentLeft {
	width:20%;
	position:relative;
	float:left;
}
#contentRight {
	width:80%;
	position:relative;
	float:left;
	color:#FFF;	
}
#contentRight ul li {
	line-height:1.3em;	
}

#categoryContent {
	color: #FFFFFF;
}
#packageContent {
	color: #FFFFFF;
}
#packageDetails {
	margin:10px 0;	
}
#packageDetails li {
	line-height:1.4em;	
}
span.packageDetailTitle {
	width:200px;
	
	position:relative;
	float:left;
	font-weight:bold;
	clear:left;	
}

#dependancies {
	width:100%;
	margin-bottom:20px;
	border-top:1px dashed #FFF;
	border-bottom:1px dashed #FFF;		
}



/* ------------------------------------
	2. TYPOGRAPHY 
------------------------------------ */


p {
	line-height:1.4em;
	margin:0 0 15px 0;	
}

h1, #home-logo h1 {
	text-indent:-9999px;	
}

h2, h3, h4 {
	text-shadow:1px 1px 1px #000066;	
}


#latest-packages h2 a, #most-popular h2 a, #depothelper h2 a {
	color:#FFF;
	text-decoration:none;
	position:relative;
	float:left;
	width:350px;
}


#latest-packages h2 a:hover, #most-popular h2 a:hover, #depothelper h2 a:hover {
	color:#003;	
}
.title {
	position:relative;
	float:left;
}
.link {
	position:relative;
	float:right;
}
/* home page titles */

#latest-packages h2	{
	font-family: 'Bree Serif', serif;
	font-size:1.4em;
	line-height:1.4em;	
	color:#FFF;
	margin:0 0 10px 0;
	background:url(/images/latest-packages-icon.png) no-repeat;
	text-indent:45px;
	height:40px;
}

#most-popular h2 {
	font-family: 'Bree Serif', serif;
	font-size:1.4em;
	line-height:1.4em;	
	color:#FFF;
	margin:0 0 10px 0;
	background:url(/images/most-popular-icon.png) no-repeat;
	text-indent:45px;
	height:40px;
}

#contentRight h2 {
	font-family: 'Bree Serif', serif;
	font-size:3em;
	line-height:2em;
	color:#FFF;	
}
#contentRight h3 {
	font-family: 'Bree Serif', serif;
	font-size:2em;
	line-height:1.6em;
	color:#FFF;	
}
#contentRight h4 {
	font-family: 'Bree Serif', serif;
	font-size:1.4em;
	line-height:1.2em;
	color:#FFF;	
}

#categoryContent h2 {
	font-family: 'Bree Serif', serif;
	font-size:3em;
	line-height:2em;
}
#categoryContent h3 {
	font-family: 'Bree Serif', serif;
	font-size:1.3em;
}

#packageContent h2 {
	font-family: 'Bree Serif', serif;
	font-size:3em;
	line-height:2em;
}
#packageContent h3 {
	font-family: 'Bree Serif', serif;
	font-size:1.3em;
	margin-bottom:20px;
}

p.packageDescription {
	width:100%;
	padding: 10px 0;
	border-top:1px dashed #FFF;
	border-bottom:1px dashed #FFF;	
}

#dependancies p {
	color:#FFFFFF;
	padding:5px 0;
	font-family: 'Bree Serif', serif;
	font-size:1.2em;
}

#dependancies p a {
	color:#003;
	text-decoration:none;
}
#dependancies p a:hover {
	color:#003;
	text-decoration:underline;
}
#dependancies table tr td.dependanciesTitle {
	line-height:2em;
	border-top:1px solid #006666;
}

/* ------------------------------------
	3. LINKS 
------------------------------------ */

a {
	text-decoration:none;
	outline:none;
}
a, a:hover, a:visited {
	color:#012565;
	font-weight:bold;
}
a:hover, a:visited {
	text-shadow:none;	
}
a:hover {
	text-decoration:underline;	
}

a.button {
	background-color: #002464;
	background: -moz-linear-gradient(
    top,
    #002464 0%,
    #001a49);
 	background: -webkit-gradient(
    linear, left top, left bottom, 
    from(#002464),
    to(#001a49));	
	color:#FFF;
	font-family: 'Bree Serif', serif;
	font-size:1em;
	border-radius:10px;
	border:none;
	cursor:pointer;
	vertical-align:middle;
	display:inline-block;
	text-align:center;
	text-decoration:none;
	padding:8px;
	margin:10px 0;
	width:auto;
}

a.button:hover {
	background-color: #001a49;
	background: -moz-linear-gradient(
    top,
    #001a49 0%,
    #002464);
 	background: -webkit-gradient(
    linear, left top, left bottom, 
    from(#001a49),
    to(#002464));	
}

#contentLeft a.button {
	display:block;
	width:80%;	
}

table a.button {
	background-color: #002464;
	background: -moz-linear-gradient(
    top,
    #002464 0%,
    #001a49);
 	background: -webkit-gradient(
    linear, left top, left bottom, 
    from(#002464),
    to(#001a49));	
	color:#FFF;
	font-family: 'Bree Serif', serif;
	font-size:1em;
	border-radius:10px;
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
	border:none;
	cursor:pointer;
	vertical-align:middle;
	display:block;
	text-align:center;
	text-decoration:none;
	padding:2px;
	margin-top:3px;
	width:inherit;
}

table a.button:hover {
	background-color: #001a49;
	background: -moz-linear-gradient(
    top,
    #001a49 0%,
    #002464);
 	background: -webkit-gradient(
    linear, left top, left bottom, 
    from(#001a49),
    to(#002464));	
}

#home-search input.button {
    background: -moz-linear-gradient(center top , #002464 0%, #001A49) repeat scroll 0 0 transparent;
    background: -webkit-gradient(
    linear, left top, left bottom, 
    from(#002464),
    to(#001a49));
    border: medium none;
    border-radius: 10px 10px 10px 10px;
    color: #FFFFFF;
    cursor: pointer;
    display: inline-block;
    font-family: 'Bree Serif',serif;
    font-size: 1em;
    margin-top: 3px;
    padding: 0 10px;
    text-align: center;
    text-decoration: none;
    vertical-align: middle;
    width: inherit;
}

#intro a {
    -moz-text-shadow:none;
    -webkit-text-shadow:none;
    Text-shadow:none;
}

Table a {
    Font-weight:normal;
}

Table a:hover {
    Font-weight:normal;
}

#home-search label {
	-webkit-text-shadow:1px 1px 1px #000066;	
	-moz-text-shadow:1px 1px 1px #000066;	
	text-shadow:1px 1px 1px #000066;		
}
/*
input.button {
	background-color: #002464;
	background: -moz-linear-gradient(
    top,
    #002464 0%,
    #001a49);
 	background: -webkit-gradient(
    linear, left top, left bottom, 
    from(#002464),
    to(#001a49));	
	color:#FFF;
	font-family: 'Bree Serif', serif;
	font-size:1em;
	border-radius:10px;
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
	border:none;
	cursor:pointer;
	vertical-align:middle;
	display:inline-block;
	text-align:center;
	text-decoration:none;
	padding:0px 10px;
	margin-top:3px;
	width:inherit;
}
*/

/* ------------------------------------
	4. TABLES 
------------------------------------ */
table {
	width:100%;
	background:none;	
}
thead {
	color:#FFF;
	text-align:left;
	
	
}
th {
	padding:10px;	
	font-family: 'Bree Serif', serif;
	font-size:1.1em;
	background:#012565;
	border-left:1px solid #FFFFFF;
	/* width:20%; */
}


tbody tr {

}

td {
	padding:10px;
	color:#333;
	border-right:1px solid #FFFFFF;	
	border-left:1px solid #FFFFFF;
	background-color:#EFEFEF;	
}

tr:nth-child(odd) td { 
	background-color:#E6E6E6; 
}
tr:nth-child(even) td { 
	background-color:#EFEFEF; 
}

tr:nth-child(odd) td.white, tr:nth-child(even) td.white { 
        background:#FFF;
}

tr:nth-child(odd) td.yellow, tr:nth-child(even) td.yellow { 
        background:#FFFF00 ;
}

tr:nth-child(odd) td.red, tr:nth-child(even) td.red { 
        background:#ED1C24 ;
        color:#FFF;
}

tr:nth-child(odd) td.green, tr:nth-child(even) td.green { 
        background:#009933 ;
}

td:first-child {
	border-left:none;	
}
td:last-child {
	border-right:none;	
}
table th:first-child {
    -moz-border-radius-topleft: 10px;
    border-top-left-radius: 10px;
	border-left:none;
}

table th:last-child {
    -moz-border-radius-topright: 10px;
    border-top-right-radius: 10px;
}


table tbody tr:last-child td:first-child {
    -moz-border-radius-bottomleft: 10px;
    -webkit-border-bottom-left-radius: 10px;
	border-bottom:none;
	padding-bottom:25px;
}
table tbody tr:last-child td:last-child {
    -moz-border-radius-bottomright: 10px;
    -webkit-border-bottom-right-radius: 10px;
	border-bottom:none;
}


table tbody tr:hover td {
	background:#CCC;	
}

#packageDetails table tr, #packageDetails table tr td {
	background:none;	
	border:none;
	color:#FFF;
}
#dependancies table {
	margin-bottom:10px;	
}
#dependancies table td {
	border:none;
	line-height:0.5em;
}
#dependancies table tbody tr:hover td, #dependancies tr:nth-child(odd) td, #dependancies tr:nth-child(odd) td {
	background:#EFEFEF;	
}

#dependancies th {
	cursor:pointer;	
}

#dependancies table th a {
	color:#FFF;
	display:block;	
}
table td br {
	line-height:2em;	
}


/* ------------------------------------
	5. LOGO 
------------------------------------ */


#home-logo {
	width:320px;
	height:130px;
	margin:0px auto 60px auto;
	background: url(/images/hpux-home-logo.png) no-repeat;	
	position:relative;
}
#home-logo a {
	display:block;
	width:320px;
	height:130px;
	border:none;	
}

#sub-page-logo {
	width:220px;
	height:85px;
	position:relative;
	float:left;
}

/* ------------------------------------
	6. NAVIGATION 
------------------------------------ */

/* HOME NAVIGATION */

#home-nav {
	width:1040px;	
	position:relative;
	margin:20px auto;
}

#home-nav ul {
	margin:0 auto;
	position:relative;
	float:left;
}

#home-nav li {
	display:inline;
	width:140px;
	height:120px;
	display:inline-block;
	float:left;
	margin:0 4px;
	text-align:center;
	position:relative;
}
#home-nav li a {
	color:#FFF;
	text-decoration:none;
	cursor:pointer;
	width:140px;
	height:100px;
	display:block;
	vertical-align:bottom;
	font-family: 'Bree Serif', serif;	
	font-weight:normal;
}

#home-nav li a p {
	top:90px;
	position:relative;	
}
#home-nav li a:hover {
	color:#003;
}
#home-nav li#categories a {
	background:url(/images/home-navigation-icons.png) 30px 0px no-repeat;
}
#home-nav li#categories a:hover  {
	background:url(/images/home-navigation-icons.png) 30px -100px no-repeat;
}
#home-nav li#packages a {
	background:url(/images/home-navigation-icons.png) -124px 0px no-repeat;
}
#home-nav li#packages a:hover  {
	background:url(/images/home-navigation-icons.png) -124px -100px no-repeat;
}
#home-nav li#whats_new a {
	background:url(/images/home-navigation-icons.png) -280px 0px no-repeat;
}
#home-nav li#whats_new a:hover  {
	background:url(/images/home-navigation-icons.png) -280px -100px no-repeat;
}
#home-nav li#faq a {
	background:url(/images/home-navigation-icons.png) -440px 0px no-repeat;
}
#home-nav li#faq a:hover  {
	background:url(/images/home-navigation-icons.png) -440px -100px no-repeat;
}
#home-nav li#links a {
	background:url(/images/home-navigation-icons.png) -590px 0px no-repeat;
}
#home-nav li#links a:hover  {
	background:url(/images/home-navigation-icons.png) -590px -100px no-repeat;
}
#home-nav li#mailing_list a  {
	background:url(/images/home-navigation-icons.png) -745px 0px no-repeat;
}
#home-nav li#mailing_list a:hover  {
	background:url(/images/home-navigation-icons.png) -745px -100px no-repeat;
}
#home-nav li#contact a  {
	background:url(/images/home-navigation-icons.png) -895px 0px no-repeat;
}
#home-nav li#contact a:hover  {
	background:url(/images/home-navigation-icons.png) -895px -100px no-repeat;
}


/* SUB PAGE NAVIGATION */

#sub-nav {
	width:880px;	
	height:100px;
	position:relative;
	float:left;
	margin:20px auto;
}

#sub-nav ul {
	margin:0 auto;
	position:relative;
	float:left;
}

#sub-nav li {
	display:inline;
	width:120px;
	height:100px;
	display:inline-block;
	float:left;
	margin:0 2px;
	text-align:center;
	position:relative;
}

#sub-nav li a {
	color:#FFF;
	text-decoration:none;
	cursor:pointer;
	width:120px;
	height:100px;
	display:block;
	vertical-align:bottom;
	font-family: 'Bree Serif', serif;	
	font-weight:normal;
}

#sub-nav li a p {
	top:60px;
	position:relative;	
}
#sub-nav li a:hover {
	color:#003;
}
#sub-nav li a.active {
	color:#003;	
}

#sub-nav li#categories a {
	background:url(/images/sub-navigation-icons.png) 30px -140px no-repeat;
}
#sub-nav li#categories a:hover, #sub-nav li#categories a.active {
	background:url(/images/sub-navigation-icons.png) 30px 0px no-repeat;
}
#sub-nav li#packages a {
	background:url(/images/sub-navigation-icons.png) -88px -140px no-repeat;
}
#sub-nav li#packages a:hover, #sub-nav li#packages a.active  {
	background:url(/images/sub-navigation-icons.png) -88px 0px no-repeat;
}
#sub-nav li#whats_new a {
	background:url(/images/sub-navigation-icons.png) -210px -140px no-repeat;
}
#sub-nav li#whats_new a:hover , #sub-nav li#whats_new a.active {
	background:url(/images/sub-navigation-icons.png) -210px 0px no-repeat;
}
#sub-nav li#faq a {
	background:url(/images/sub-navigation-icons.png) -330px -140px no-repeat;
}
#sub-nav li#faq a:hover , #sub-nav li#faq a.active {
	background:url(/images/sub-navigation-icons.png) -330px 0px no-repeat;
}
#sub-nav li#links a {
	background:url(/images/sub-navigation-icons.png) -445px -140px no-repeat;
}
#sub-nav li#links a:hover, #sub-nav li#links a.active  {
	background:url(/images/sub-navigation-icons.png) -445px 0px no-repeat;
}
#sub-nav li#mailing_list a  {
	background:url(/images/sub-navigation-icons.png) -570px -140px no-repeat;
}
#sub-nav li#mailing_list a:hover , #sub-nav li#mailing_list a.active {
	background:url(/images/sub-navigation-icons.png) -570px 0px no-repeat;
}
#sub-nav li#contact a  {
	background:url(/images/sub-navigation-icons.png) -680px -140px no-repeat;
}
#sub-nav li#contact a:hover, #sub-nav li#contact a.active  {
	background:url(/images/sub-navigation-icons.png) -680px 0px no-repeat;
}

/* Breadcrumb */

#breadcrumb {
        width:90%;
        border-bottom:1px dashed #FFF;
        border-top:1px dashed #FFF;
        position:relative;
        float:left;
        margin:0 5%;
        padding:13px 0 0 0;   
}

#breadcrumb p {
	float:left;
	color:#FFF;
	margin:0 5px 0 0;
	position:relative;
	top:-3px;	
}
#breadcrumb a {
	font-weight:bold;
}

#breadcrumb form {
	float:right;
        margin:-4px 0 10px 0;
}


#breadcrumb form label {
	color:#FFF;
	font-family: 'Bree Serif', serif;
	font-size:1.4em;
	vertical-align:middle;
	margin:0 5px 0 0;
	position:relative;
	float:left;
}
#breadcrumb form input {
	
}
#breadcrumb form input.button {
	background: -moz-linear-gradient(
    top,
    #002464 0%,
    #001a49);
 	background: -webkit-gradient(
    linear, left top, left bottom, 
    from(#002464),
    to(#001a49));
  	background-color: #002464;	
	color:#FFF;
	font-family: 'Bree Serif', serif;
	font-size:1em;
	border-radius:10px;
	-moz-border-radius:10px;
	-webkit-border-radius:10px;
	border:none;
	padding:0px 10px;
	cursor:pointer;
	vertical-align:middle;
}
#breadcrumb form input.button:hover {
	background-color: #001a49;
	background: -moz-linear-gradient(
    top,
    #001a49 0%,
    #002464);
 	background: -webkit-gradient(
    linear, left top, left bottom, 
    from(#001a49),
    to(#002464));
}



/* ------------------------------------
	7. HOME PAGE 
------------------------------------ */



/* HOME PAGE ELEMENTS */

#intro {
	width:90%;
	margin:0 auto 40px;
	font-family: 'Bree Serif', serif;	
	color:#FFF;
	font-size:2.4em;
	text-align:center;
	line-height:1.3em;
	position:relative;
	
}

#intro h2 span.darkblue {
	color:#003;	
}
#home-search-section {
	width:1000px; /* change to 90% if you want to stretch across full screen */
	height:60px;
	margin:40px auto 0;
	position:relative;	
}

#home-search {
	width:60%;
	position:relative;
	float:left;
	
}

#browse-btn {
	width:40%;
	position:relative;
	float:left;
	margin-top:-9px;
}

#home-search label {
	color:#FFF;
	font-family: 'Bree Serif', serif;
	font-size:1.4em;
	vertical-align:middle;
}

#home-search input {
	height:30px;
	width:250px;
	border-radius:5px;
	margin:0 5px 0 0;	
	vertical-align:middle;
	font-size:1.4em;
	color:#666666;
	padding-left:5px;
	font-style:normal;
	font-size:1.2em;

}
#home-search button {
	background: -moz-linear-gradient(
    top,
    #002464 0%,
    #001a49);
 	background: -webkit-gradient(
    linear, left top, left bottom, 
    from(#002464),
    to(#001a49));
  	background-color: #002464;	
	color:#FFF;
	font-family: 'Bree Serif', serif;
	font-size:1em;
	border-radius:5px;
	border:none;
	padding:5px 10px;
	cursor:pointer;
	vertical-align:middle;
}
#home-search button:hover {
	background-color: #001a49;
	background: -moz-linear-gradient(
    top,
    #001a49 0%,
    #002464);
 	background: -webkit-gradient(
    linear, left top, left bottom, 
    from(#001a49),
    to(#002464));
}
#home-search input .button {
        background: -moz-linear-gradient(
    top,
    #002464 0%,
    #001a49);
        background: -webkit-gradient(
    linear, left top, left bottom,
    from(#002464),
    to(#001a49));
        background-color: #002464;       
        color:#FFF;
        font-family: 'Bree Serif', serif;
        font-size:1em;
        border-radius:5px;
        border:none;
        padding:5px 30px;
        cursor:pointer;
        vertical-align:middle;
}

#browse-btn a {
	background-color: #002464;
	background: -moz-linear-gradient(
    top,
    #002464 0%,
    #001a49);
 	background: -webkit-gradient(
    linear, left top, left bottom, 
    from(#002464),
    to(#001a49));	
	color:#FFF;
	font-family: 'Bree Serif', serif;
	font-size:1em;
	border-radius:5px;
	border:none;
	cursor:pointer;
	vertical-align:middle;
	display:block;
	text-align:center;
	text-decoration:none;
	padding:9px 10px;
}

#browse-btn a:hover {
	background-color: #001a49;
	background: -moz-linear-gradient(
    top,
    #001a49 0%,
    #002464);
 	background: -webkit-gradient(
    linear, left top, left bottom, 
    from(#001a49),
    to(#002464));	
}


#home-package-listing {
	width:90%;
	border-top:1px dashed #FFF;
	position:relative;
	margin:0 auto;
	padding-top:30px;	
}



#latest-packages {
	width:45%;
	position:relative;
	float:left;	
}
#latest-packages ul li {
	background: #EFEFEF;
	padding:10px;	
}
#latest-packages ul li.alt {
	background: #E6E6E6;	
}
#latest-packages ul li:hover, #latest-packages ul li.alt:hover {
	background:#CCCCCC;	
}


#latest-packages ul li:first-child {                                
    -moz-border-radius-topleft: 5px;
    -moz-border-radius-topright: 5px;                
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;                 
}

#latest-packages ul li:last-child {                                
    -moz-border-radius-bottomleft: 5px;
    -moz-border-radius-bottomright: 5px;                
    border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px;                 
}
span.latest-package-title a {
	position:relative;
	display:block;
	font-family: 'Bree Serif', serif;
	line-height:1.4em;
}
#most-popular {
	width:50%;
	position:relative;
	float:left;
	margin-left:5%;
}
#depothelper {
	width:90%;
	margin:30px auto 0;
	border-top:1px dashed #FFF;
	padding:20px 0;
}
#depothelper h2 {
	font-family: 'Bree Serif', serif;
	font-size:1.4em;
	line-height:1.4em;	
	color:#FFF;
	margin:0 20px 10px 0;
	background:url(/images/depothelper-icon.png) no-repeat;
	text-indent:45px;
	height:40px;
	width:15%;
	min-width:200px;
	float:left;
}

#depothelper p {
	color:#FFF;
	width:100%;
	float:left;		
}

#depothelper .button {
	width:auto;
	float:left;
	clear:both;
	position:relative;
}







/* ------------------------------------
	8. FOOTER 
------------------------------------ */
#footer {
	width:100%;
	height:150px;
	position:relative;
	float:left;
	border-top:10px solid #001a49;
	background-color:#CCC;
	background: -moz-linear-gradient(
    top,
    #ccc 0%,
    #fff);
 	background: -webkit-gradient(
    linear, left top, left bottom, 
    from(#ccc),
    to(#fff));		
}

#footer-nav {
	padding-left:5%;
	padding-top:30px;
	position:relative;
	float:left;
	font-size:0.8em;
	color:#666;
	
}

#footer-logos {
	float:right;
	position:relative;
	padding-top:10px;
	padding-right:5%;
}
#footer-logos img {
	margin:0 30px 0 0;	
}

/* ------------------------------------
	9. MISC 
------------------------------------ */

hr {
	border-top:1px dashed #FFF;
	border-bottom:none;	
}