/* 
Main Styling
Author: M Wells
Date: 30/05/05
 */

body {
	font-family:"Lucida Grande", Verdana, sans-serif;
	font-size:0.78em;
	color:#333;
    line-height:1.4em;
	margin:0px;
	padding:0px;
	text-align:center;
	background-color:#636958;
}

body a {
	color:#FF9900;
	text-decoration:none;
	font-weight:normal;
	font-size:100%;
}

body a:hover {
	border-bottom: 1px solid #FF9900;
}

body p {
	margin:0 auto;
	border:0px;
	text-align:center;
}

h1 {
	text-align:left;
	font-size:130%;
	color:#3399E5;
	margin:10px auto 15px auto;
	background: url(../images/h1-side.gif) no-repeat left 50%;		
	width:77%;	
	padding-left:19px;
	font-weight:normal;
}

#container {
	position: relative;
	margin: 0 auto;
	padding: 0;
	font-size: 95%;
	text-align: left;
  	width: 760px;
  	border-left: 4px solid #53584A;
  	border-right: 4px solid #53584A;
	background:#FFFFFF url(../images/bg-tile.gif) repeat-y; /* Faux Column */
}

#content h2{
	width:80%;
	font-family:Geneva, Arial, Helvetica, sans-serif;
	text-align:left;
	margin:20px auto 15px auto;
	font-size:110%;
	text-indent:30px;
	color:#3399E5;
	text-decoration:none;
	font-weight:normal;
	border-bottom:1px dotted #FF9900;
}

#content h2.port {
	width:80%;
	text-align:left;
	margin:10px auto -8px auto;
	font-size:110%;
	color:#3399E5;
	text-decoration:none;
	border:0;
	text-indent:0;
}

acronym {
	cursor:help;
	border-bottom:1px dotted #999999;
	}
	
ul#inline_list {
	width:60%;
	margin:0 auto;
	padding:0;
	list-style:none;
	text-align:left;	
}

ul#inline_list li {
	margin:5px auto;
	padding:0;
	background:url(../images/news-arrow.gif) no-repeat 0 50%;
	padding-left:14px;
}

ul#inline_list li a {
	color:#666666;
	font-weight:normal;
}

/* -------------------------------------------------- Header ----------------------------------- --> */

#header {
	border-bottom:1px solid black;
	width:100%;
	background:url(../images/banner.gif) no-repeat 50% 50%;
	height:125px;
	text-align:right;
	vertical-align:bottom;
}

#header p {
	text-align:right;
	font-size:90%;
	white-space:nowrap;
	margin:0 5px;	
	color:#FFFFFF;
}

#header p a {
	text-decoration:none;
	color:#FFFFFF;
}

#header p a:hover {
	border-bottom:2px solid #FFFFFF;
}

/* -------------------------------------------- Navigation List -------------------------------------- */
#navigation {
	font-size:100%;	
	background-color:#FFFFFF;	
	border-bottom: 1px solid black;
	height:22px;
}

#navigation ul {
	margin: 0;
	padding:0 0 0px 10px;
}

#navigation ul li {
	margin:0;
	padding:0px;
	display:inline;
	list-style: none;
}

#navigation ul a {
	float:left;
	line-height:14px;
	font-weight:bold;
	margin:2px 10px 4px 10px;
	text-decoration:none;
	color:#3399E5;
}
	
#navigation ul a.active, #navigation ul a:hover {
	border-bottom: 3px solid #FF9900;	
	padding-bottom: 2px;
	color:#FF9900;
	margin:2px 10px 0px 10px;
}

#navigation ul span img {
	padding-top:1px;
	padding-right:4px;
	display:inline;
	margin:0;
	cursor:pointer;
}

/* ------------------------------------------ Navigation List Ends ----------------------------------- */

/* ------------------------------------------     Content     -------------------------------------*/
#content {
	width:534px;
	text-align:center;	
	float:left;
}

#content p {
	width:80%;
	text-align:left;
	margin:10px auto;
	font-weight:normal;
}

/* ------------------------------------------    Content Ends   --------------------------------*/

/* ------------------------------------------    Right Bar    --------------------------------*/
#right-bar {
	float:right;
	width:225px;
	text-align:center;
}

#right-bar h2 {	
	text-align:left;
	font-size:100%;
	background: url(../images/h2-back.gif) repeat-x left 50%;
	padding:3px 0px 3px 15px;
	color:#FFFFFF;
	font-weight:normal;
	margin:10px 0px 10px 0px;
}

#right-bar ul {
	font-size:85%;
	margin:0;	
	padding-left:0px;
	text-align:left;
}

#right-bar ul li {
	list-style:none;
	background:url(../images/news-arrow.gif) no-repeat 0 50%;
	padding-left:14px;
	margin:10px;
}

#right-bar ul li a {
	color:#666666;
}

#right-bar ul li a:hover {
	border-bottom:#FF9900 1px dotted;
}

#right-bar ul li.even {
	margin-left:3px;
}

#right-bar ul li.odd {
	margin-left:18px;
}

#right-bar img {
	border:1px solid #FF9900;
	margin:10px auto 2px auto;
}

#right-bar p {
	font-size:80%;
	margin:2px 0 6px 0;
}

/* ------------------------------------------    Right Bar Page Ends  --------------------------------*/

/* ------------------------------------------    Footer   --------------------------------*/
#footer {
	clear:both;
	width:100%;
	height:70px;
	text-align:right;
	background:url(../images/footer.gif) no-repeat 50% 50%;
	border-top:1px solid black;
}

#footer .text {
	color:#FFFFFF;
	font-size:12px;
	text-align:right;
	margin:25px 125px 0px 0px;
}
/* ----------------------------------------------    Footer Ends   ------------------------------------*/

/* ------------------------------------------------    PAGE   --------------------------------------*/
/* ------------------------------------------------  SPECIFIC   --------------------------------------*/

/* ------------------------------------------    Portfolio   --------------------------------*/

#content p.enter {
	text-align:center;
	margin:5px auto 0px auto;
}

#content p.enter a {
	color:#FF9900;
	text-decoration:none;
	font-weight:bold;
	font-size:90%;
	font-variant:small-caps;
}

#content h2.sub {
	width:100%;
	text-align:center;
	margin:10px auto 20px auto;
	font-size:105%;
	color:#3399E5;
	text-decoration:none;
}

#content p.enter a:hover {
	border-bottom: 3px solid #FF9900;	
	padding-bottom: 2px;
}

/* --------------------------------------- Web Temps ------------------------------------------*/
#content div.desc_alt {
	clear:both;
	text-align:center;
	vertical-align:middle;
	width:80%;
	margin:20px auto;
}

#content div.desc_alt p {
	width:100%;
	text-align:center;
}

#content div.desc_alt img {
	float:left;
	vertical-align:middle;
	margin:auto 0;
}

#content div.desc_alt a {
	color:#FF9900;
	text-decoration:none;
	font-variant:small-caps;
	padding-top:25px;
}

#content div.desc_alt a:hover {
	margin-top:10px;
	color:#FF9900;
	border-bottom: 2px solid #FF9900;
}

/* --------------------------------------- Web Temps ------------------------------------------*/

/* --------------------------------------- Artwork ------------------------------------------*/
#content div.desc_art {
	clear:both;
	width:80%;
	margin-top:20px;
	margin-bottom:20px;
	margin-left:55px;
	padding:0px;
	float:left;
	display:inline; /* IE double float margins work around */
}

#content div.desc_art h2 {	
	margin:0px;
	padding:0px;
	float:right;
	width:312px;
	text-align:center;
	text-indent:0px;
}

#content div.desc_art p {
	width:312px;
	text-align:center;
	margin-top:35px;
	float:right;
}

#content div.desc_art img {
	float:left;
}

#content div.desc_art a {
	font-variant:small-caps;
	font-size:130%;	
}

#content div.desc_art a:hover {
	border-bottom:1px dotted;
}

/* --------------------------------------- Artwork Ends ------------------------------------------*/
#content div.desc {
	clear:both;
	text-align:center;
	vertical-align:middle;
	width:80%;
	margin:20px auto;
	background-image:url(../images/bg-lgrey.gif);
	padding-bottom:15px;
	padding-top:5px;
}

#content div.desc h2 {
	margin-top:0px;
	text-align:center;
	text-indent:0px;
}

#content div.desc p {
	width:100%;
	text-align:center;
}

#content div.desc a {
	color:#FF9900;
	text-decoration:none;
	font-variant:small-caps;
	padding-top:25px;
}

#content div.desc a:hover {
	margin-top:10px;
	color:#FF9900;
	border-bottom: 2px solid #FF9900;
}

#content div.desc ul {
	margin-top:15px;
	text-align:left;
	font-size:90%;
	width:85%;
}

#content div.desc li {
	margin-top:8px;
}

/* ------------------------------------------    Portfolio Ends   --------------------------------*/	

/* ------------------------------------------    Services   --------------------------------*/


/* ------------------------------------------    Services Ends   --------------------------------*/

/* ------------------------------------------    News   --------------------------------*/

#content h2.news {
	border-bottom:2px dotted #CCCCCC;	
	color:#999999;
	margin-top: 25px;
	padding-left:15px;
	background-image: url(../images/excl.gif);
	background-repeat: no-repeat;
	background-position: 50% left;
}

#content p.news_sub {
	display:block;
	font-style:italic;
	margin:15px auto 0px auto;
	padding-left:25px;
}

h2.news span.date {
	float:right;
 	font-size:10px;
	display:inline; 
	margin-top:-14px;
}

/* ------------------------------------------    News Ends  --------------------------------*/
/* ------------------------------------------    Contact Page  --------------------------------*/

#content form.contact p {
	width:300px;	
	clear:both;
	margin:0px auto;
}

#content form.contact label {
	float:left;
}

#content form.contact input, #content form.contact textarea {
	float:right;
	border:1px solid #CCCCCC;
	font-colour:#CCCCCC;
	margin-bottom:5px;
}

#content form.contact textarea {
	width:300px;
	height:70px;
	margin-bottom:5px;
}

p.submit {
	text-align:center;
	clear:both;
}

#content form.contact p.submit input {
	float:none;
	margin:0 0 0 100px;
	text-align:center;
	border:1px solid #999999;
	background-color:#FFFFFF;
	color:#999999;
	cursor:pointer;
}

#content p.comments {
	font-style:italic;
	padding-left:10px;
	padding-right:10px;
	width:290px;
	text-align:center;
}

#content p.warning {
	font-size: 12px;
	color:#FF0000;
}

#content span.address {
	float:right;
	margin-right:50px;
}

#content span.email {
	float:right;
	margin-right:50px;
}

/* ---------------------------------------------------------------------------------------- [ Box Experiment ] ------------------ */ 

.box {
	width: 400px;
	margin: 10px auto 20px auto;
	background:#fdf2e2 url(../images/box-back.gif) repeat-y top left;
}

.box-inner {
	background:url(../images/box-bottom.gif) no-repeat bottom left;
	padding-bottom:12px;
	text-align:center;
}

.box-inner h3 {
	margin: 0;
	padding: 15px 18px 0 18px;
	font-family: Verdana, sans-serif;
	font-size: 110%;
	color: #3399E5;
	background:url(../images/box-top.gif) no-repeat top left;
	font-weight:normal;
}

#content .box .box-inner p {
	width:90%;
}

table {
	text-align:center;
	margin:10px auto;
}

table td {
	text-align:left;
}

table caption {
	font-style:italic;
	text-decoration:underline;
	margin:0px auto;
	border-bottom:1px solid #666666;
	padding-bottom:3px;
	margin-top:10px;
	margin-bottom:-5px;
}