/* 
http://www.madeinmanc.com
-----------------------------------------------
Name:     style.css
Media:    Screen
Version:  5.0 - 24.02.2007
Author:   Shiraz Anwar MD @ www.madeinmanc.com
          Web Developer @ The University of Manchester
Notes:    ...
----------------------------------------------- 
*/

/* general styles */
html { width: 100%; height: 100%; background: #fff;  margin: 0; padding: 0; font-size: 100%; /* reset */}
body { width: 100%; height: 100%; background: #fff /*url(/images/layout/grid/grid-14-units.gif)*/; margin: 0; padding: 0; color: #000;	font: 0.8em/1.4em Ariel, Helvetica, sans-serif;}

h1,h2,h3,h4,h5,h6 { margin: 0 0 0.5em 0; padding: 0; font-size: 120%; }
h3 { margin: 0; padding: 0; }

blockquote { margin:0.2em; padding: 0 0.2em 0.2em 20px; background: /*url(/images/icons/quote.png)*/ no-repeat top left; }

acronym[title], abbr { border-bottom:1px dotted #CCCCCC; /*cursor:default;*/ }

a, a:link { color: #333; text-decoration: underline; }
a:visited { color: #666;}
a:focus, a:hover, a:active { color: #fff; background: #000; text-decoration: underline; }

a img, a img:focus { border: none; outline:none; }

ul { list-style: none; padding: 0; margin: 0 0 2em 0; }
li { padding: 0 0 0 20px; list-style:none; list-style-image:url(../images/icons/circle.gif); }

.kungfu { border: 20px solid #000000; padding: 0.2em; width: 500px; }
.screensaver { border: 1px #000 solid; padding:0.6em; }

/* general page elements */
#logo { margin:0.6em 0 0 0; }
#logo h1 { font-size:2em; color:#000;  margin:0 0 0 0.3em; line-height:1.1em; }
#logo a, #logo a:focus, #logo a:hover, #logo a:active { text-decoration:none; border: none; background:#fff; outline:none; }
#logo .highlight { background-color:#000; color:#fff; padding:0 1px 0 1px; }


#promo { border: 1px #000 solid; }


#container {
	width: 100%;
	height: 100%;
	position: relative;
	margin: 0;
	padding: 0;
}

#siteframework { 
	position: absolute;
	top: 90px; 
	left: 0;
	width: 262px;
	margin: 0;
	padding: 0;
	text-align: right;
}

#navigation {
	top:500px;
	background: url(/images/layout/20.png) no-repeat top left;
	padding: 5px 20px 0 10px;
	margin: 60px 0 0 0;
}

#navigation dl { padding: 0; margin: 0 0 15px 0; }
#navigation dt { text-align:left; font-weight: bold; }
/*#navigation dt { text-align:left; font-weight: bold; border-top: 1px #000 solid; border-bottom: 1px #000 solid; }*/
#navigation dd { margin: 0 0 2px 0; }

#navigation a {
	color:#000;
	display: block;
	width: 100%;
	text-decoration: none;
	border-bottom: 1px dashed #EBEBEB;
}

#content {
	position: absolute;
	top: 260px;
	left: 280px; 
	width: 500px;
	margin: 0;
	padding: 0;
	line-height: 1.3;
}

#content li { margin: 0 0 0 1.4em; padding: 0 0 0 0; }
#content img { border: 1px #333 solid; }

#who-we-are, #what-we-do { width:33%; float:left; margin-right:2em;}
#contact { width:28%; float:right; }

#who-we-are h2, #what-we-do h2, #contact h2 { font-size:2em; font-weight:100; color:#000; border-bottom:1px #000 dashed;  border-top:1px #000 dashed; background-color:#FBFBFB;}
#who-we-are p, #what-we-do p, #contact p { padding-bottom:2em; border-bottom:1px #000 dashed; }
#who-we-are p .intro, #what-we-do p .intro, #contact p .intro { color:#000; font-size:1em; }
#who-we-are strong, #what-we-do em, #contact em { font-weight:normal; }

.smallText { font-size:78%; color: black; margin:0; padding:0; }

.bottomArrow {background: url(../images/icons/arrow_bottom.gif) no-repeat bottom left; padding: 0 10px 6px 16px; }

#footer { margin: 3em 0 0 0; font-size: 90%; color: #666; clear: both; }
#footer p { margin: 0; }
#footer img { margin: -0.5em; padding-left: 0.5em;; border:none; }
#footer dl { color: #333; font-size: 85%; margin: 0; padding: 0;}
#footer dt, #footer dd { display: inline; margin: 0; padding: 0; }
#footer dt { margin-right: 0.25em; }

/* some navigation highlighting styles */
/* holding page */
body#holdingpage a, body#holdingpage a:link { color: #fff; text-decoration:none; }
body#holdingpage a:visited { color: #fff; outline:none;}
body#holdingpage a:focus, body#holdingpage a:hover, body#holdingpage a:active { border-top: 1px #000 solid; border-bottom: 1px #000 solid; color: #fff; background: #000; text-decoration:none; outline:none; }

body#holdingpage strong { background: #000; color:#fff; font-weight:normal; padding: 1px 2px 1px 2px;}
body#holdingpage strong em { font-style:normal; font-weight:normal; background: #000; color:#f00; padding: 1px 2px 1px 2px; }
body#holdingpage em, body#holdingpage em.mim { font-style:normal; font-weight:bold; padding: 1px;}
body#holdingpage em { color:#494949; }
body#holdingpage em.mim { color:#000; font-size:1.2em; }

body#holdingpage #content {
	position: absolute;
	top:480px;
	left: 10px; 
	width: 960px;
	margin: 0;
	padding: 0;
	line-height: 1.4;
}

body#holdingpage #content li { margin: 0 0 0 1.4em; padding: 0 0 0 0; }
body#holdingpage #whatwedo { margin: 0em 0 0 0; }
body#holdingpage #whatwedo img { border: none; }
body#holdingpage #whatwedo h1 { margin:0; padding:0; }
body#holdingpage #screensaver-preview img{ margin:0; padding:0; border: 1px #fff solid; }

#navigation a:focus, #navigation a:hover, #navigation a:active { background-color: #666; color:#FFF; border-bottom: 1px solid #fff; }

#latest-campaign { border-bottom:1px dashed #000; width:960px; }
#latest-campaign h2 { font-size:6em; font-weight:100; margin:-4px 0 0 -14px; padding:6px; color: #DDDDDD; display:block;}
#latest-campaign h3 { font-size:2em; margin: 0 0 0 0em; padding:0 0 2px 0; color:#000; line-height:1em;	 }


#latest-campaign a, #latest-campaign a:link { color: #999; background: #000; text-decoration:none; }
#latest-campaign a:visited { color:#000; outline:none;}
#latest-campaign a:focus, #latest-campaign a:hover, #latest-campaign a:active { border-top: 1px #000 solid; border-bottom: 1px #000 solid; color: #fff; background: #000; text-decoration:none; outline:none; }

#twitter_div {clear:both; margin-bottom:2em;}
#twitter_div h3 {font-size:2em; font-weight:100; margin: 1em 0 0.1em 0; color: #EBEBEB; }
#twitter_div  h3#twitter_header a { color:#fff; background-color:#000; border:none; padding:0.1em 0.6em 0 0.6em;}
#twitter_div  h3#twitter_header a:hover, #twitter_div  h3#twitter_header a:focus { color:#fff; background-color:#000; border:none; padding:0.1em 0.6em 0.1em 0.6em; text-decoration:underline; }
#twitter_div ul#twitter_update_list { margin:-9px 0 30px 0; border-top:1px #000 dashed; border-bottom:1px #000 dashed; width:auto; background-color: #000; padding:1em; color:#fff; }
#twitter_div ul#twitter_update_list a { border:none; background-color:#fff; color:#000; padding: 1px 2px 1px 2px; }
#twitter_div ul#twitter_update_list a:hover, #twitter_div ul#twitter_update_list a:focus { border:none; background-color:#fff; color:#000; padding: 2px 2px 2px 2px; }


/* some navigation experimental highlighting styles */
/* holding page */
/*
body#holdingpage a, body#holdingpage a:link { color: #fff; text-decoration:none; }
body#holdingpage a:visited { color: #fff;}
body#holdingpage a:focus, body#holdingpage a:hover, body#holdingpage a:active { 
border-top: 1px #000 solid;
border-bottom: 1px #000 solid;
color: #fff;
background: #000;
text-decoration:underline;
padding:0 0 6em; 0 }
*/


/* email us on holding page */
/*#emailUs { 
	position: absolute;
	top: 147px; 
	left: 0;
	width: 190px;
	height:300px;
	margin: 0 0 0 1em;
	padding: 1em 1em 0 1em;

}
*/

#emailUs { 
	position: absolute;
	top: 20px; 
	left: 0;
	width: 190px;
	height:300px;
	margin: 0 0 0 1em;
	padding: 1em 1em 0 1em;

}


/* screensaver */
#screensaverTips { 
	position: absolute;
	top: 260px; 
	left: 0;
	width: 240px;
	height:400px;
	margin: 0 0 0 0.2em;
	padding: 1em 2em 0 0.3em;
	/*background: url(../images/screensavers/extras/bg_pad_cuts_logo.gif) no-repeat top;*/	
/*	background: url(../images/screensavers/extras/bg_pad_cuts_logo_lblack.gif) no-repeat top;*/
	background: url(../images/screensavers/extras/ss_bg.gif) no-repeat top left;
	/*background: url(../images/screensavers/extras/bg_pad_cuts_logo_lblack2.gif) no-repeat top;*/
	/*background: url(../images/screensavers/extras/bg_pad_cuts_logo_lgrey.gif) no-repeat top;*/
}


#screensaverTips h1, #screensaverTips p { background: #000; color:#fff; display: inline;}
#screensaverTips h1 {background: #000 url(../images/icons/arrow_bottom.gif) no-repeat bottom left; padding: 2px 0 1px 18px; } 

#screensaverTips a, #screensaverTips a:link { color: #f00; text-decoration:none; }
#screensaverTips a:focus, #screensaverTips a:hover, #screensaverTips a:active { color: #fff; background: #d00; text-decoration: none; outline:none; }

#screensaver_lookin { margin:0 6px 0 0; padding:0.4em; display:block; width:300px; height:144px; background: url(../images/screensavers/xsmall/grey_xsmall_screensaver_whatyoulookat.gif) no-repeat center; float:left; border:1px #ccc solid !important; }
#screensaver_lookin img { margin: 0; padding: 0; visibility: visible; }
#screensaver_lookin:link img, #screensaver_lookin:visited img { visibility: hidden; }
#screensaver_lookin:focus, #screensaver_lookin:hover, #screensaver_lookin:active { display:block; width:300px; height:144px; background: url(../images/screensavers/xsmall/xsmall_screensaver_whatyoulookat.gif) no-repeat top; }
#screensaver_lookin:focus img, #screensaver_lookin:hover img, #screensaver_lookin:active img { visibility: visible; }

#screensaver_er { margin:0 6px 0 0; padding:0.4em; display:block; width:300px; height:144px; background: url(../images/screensavers/xsmall/grey_xsmall_screensaver_eeeeerrrrrrrrr.gif) no-repeat center; float:left; border:1px #ccc solid !important; }
#screensaver_er img { margin: 0; padding: 0; visibility: visible; }
#screensaver_er:link img, #screensaver_er:visited img { visibility: hidden; }
#screensaver_er:focus, #screensaver_er:hover, #screensaver_er:active { display:block; width:300px; height:144px; background: url(../images/screensavers/xsmall/xsmall_screensaver_eeeeerrrrrrrrr.gif) no-repeat center; }
#screensaver_er:focus img, #screensaver_er:hover img, #screensaver_er:active img { visibility: visible; }

#screensaver_manc { margin:0 6px 12px 0; padding:0.4em; display:block; width:300px; height:144px; background: url(../images/screensavers/xsmall/grey_xsmall_screensaver_manchestaaahhh.gif) no-repeat center; float:left; border:1px #ccc solid !important; }
#screensaver_manc img { margin: 0; padding: 0; visibility: visible; }
#screensaver_manc:link img, #screensaver_manc:visited img { visibility: hidden; }
#screensaver_manc:focus, #screensaver_manc:hover, #screensaver_manc:active { display:block; width:300px; height:144px; background: url(../images/screensavers/xsmall/xsmall_screensaver_manchestaaahhh.gif) no-repeat center; }
#screensaver_manc:focus img, #screensaver_manc:hover img, #screensaver_manc:active img { visibility: visible; }



/* porfolio section */
body#portfolio #navigation a#navportfolio,
body#aboutme #navigation a#navaboutme {
	background: #000; color: #fff;
	border-bottom: none;
}

body#portfolio h1 {background: url(../images/icons/arrow_bottom.gif) no-repeat bottom left; padding: 2px 0 5px 18px; }

body#portfolio .portfolioList li { list-style-image:none; list-style: none; margin:0; padding: 0 0 4px 20px; background: url(../images/icons/page.gif) no-repeat center left; }
body#portfolio .portfolioList li a { color: #000; display: block; text-decoration: none; }
body#portfolio .portfolioList li a:focus, body#portfolio .portfolioList li a:hover, body#portfolio .portfolioList li a:active { color: #fff; background: #868686; }

body#portfolio .portfolioArrowList li { list-style-image:none; list-style: none; margin:0;  padding: 2px 0 2px 18px; background: url(../images/icons/arrow.gif) no-repeat center left; clear:both; border-bottom: 1px #f3f3f3 solid; /*border-top: 1px #f3f3f3 solid;*/}
body#portfolio .portfolioArrowList li a { color: #000; text-decoration: none; }
body#portfolio .portfolioArrowList li a:focus, body#portfolio .portfolioArrowList li a:hover, body#portfolio .portfolioArrowList li a:active { color: #fff; background: #000; }

body#portfolio .portfolioTop li { text-align:right; list-style-image:none; list-style: none; background: url(../images/icons/arrow_top.gif) no-repeat center right; padding: 2px 18px 2px 0; clear:both; border-bottom: 1px #f3f3f3 solid; /*border-top: 1px #f3f3f3 solid;*/}
body#portfolio .portfolioTop li a { color: #000; text-decoration: none; }
body#portfolio .portfolioTop li a:focus, body#portfolio .portfolioTop li a:hover, body#portfolio .portfolioTop li a:active { color: #fff; background: #000; }

body#portfolio .portfolioArrowRefreshList li { list-style-image:none; list-style: none; margin:2px 0 0 0;  padding: 2px 0 2px 18px; background: url(../images/icons/arrow_refresh.gif) no-repeat center left; clear:both; border-bottom: 1px #f3f3f3 solid; /*border-top: 1px #f3f3f3 solid;*/}
body#portfolio .portfolioArrowRefreshList li a { color: #000; text-decoration: none; }
body#portfolio .portfolioArrowRefreshList li a:focus, body#portfolio .portfolioArrowRefreshList li a:hover, body#portfolio .portfolioArrowRefreshList li a:active { color: #fff; background: #000; }

.colounm1 { float:left; width: 48%; clear:both; }
.coloumn2 { width: 48%; float: right;  }

.clearColumns { clear:both; margin: 0; padding: 0 0 2em 0; }
.clear { clear:both; }

/*.borderTB { border-bottom: 1px #000 solid; border-top: 1px #000 solid;}*/
.borderTB { margin:0; padding:0; background: #000; color: #fff; font-weight:bold; border-bottom: 1px #000 solid; border-top: 1px #000 solid; clear:both; }

#badges li { list-style:none; list-style-image:none; clear: both; margin: 0; padding: 0 20px 3px 0; }

#badge_validate_doc { display: block; float: right; padding: 0 0 3px 0; background: url(/images/badges/validate_doc_mono.gif) no-repeat top right; }
#badge_validate_doc img { margin: 0; padding: 0; visibility: visible; }
#badge_validate_doc:link img, #badge_validate_doc:visited img { visibility: hidden; }
#badge_validate_doc:focus, #badge_validate_doc:hover, #badge_validate_doc:active { padding: 0 0 3px 0; background: url(/images/badges/validate_doc.gif) no-repeat top right; }
#badge_validate_doc:focus img, #badge_validate_doc:hover img, #badge_validate_doc:active img { visibility: visible; }

#badge_validate_css { display: block; float: right; padding: 0 0 3px 0; background: url(/images/badges/validate_css_mono.gif) no-repeat top right; }
#badge_validate_css img { margin: 0; padding: 0; visibility: visible; }
#badge_validate_css:link img, #badge_validate_css:visited img { visibility: hidden; }
#badge_validate_css:focus, #badge_validate_css:hover, #badge_validate_css:active { padding: 0 0 3px 0; background: url(/images/badges/validate_css.gif) no-repeat top right; }
#badge_validate_css:focus img, #badge_validate_css:hover img, #badge_validate_css:active img { visibility: visible; }

#badge_rss { display: block; float: right; padding: 0 0 3px 0; background: url(/images/badges/rss_mono.gif) no-repeat top right; }
#badge_validate_css img { margin: 0; padding: 0; visibility: visible; }
#badge_rss:link img, #badge_rss:visited img { visibility: hidden; }
#badge_rss:focus, #badge_rss:hover, #badge_rss:active { padding: 0 0 3px 0; background: url(/images/badges/rss.gif) no-repeat top right; }
#badge_rss:focus img, #badge_rss:hover img, #badge_rss:active img { visibility: visible; }

/* expandable sections */
div.expandable { }
div.expandableHide div.extra { display: none; }
div.expandableShow div.extra { display: block; }


/* form elements styling */
input, textarea, select, fieldset { background: #fff; border: 1px #666 solid; font:1em Verdana, Helvetica, sans-serif; }
input:hover, textarea:hover, select:hover, fieldset:hover { border: 1px #000 solid; }
input:focus, textarea:focus, select:focus, fieldset:focus { border-top: 1px #000 solid; border-right: 2px #000 solid; border-bottom: 1px #000 solid; border-left: 1px #000 solid; }

.buttons input { background: #000; color: #fff; border: 1px #000 solid; }
.buttons input:hover, .buttons input:focus { background: #000; color: #fff; }

.styleError {background: #CA0000; color:#fff;}

.styleError input, .styleError textarea, .styleError select, .styleError fieldset { background: #fff; border: 1px #666 solid; font:1em Verdana, Helvetica, sans-serif; }
.styleError input:hover, .styleError textarea:hover, .styleError select:hover, .styleError fieldset:hover { border: 1px #000 solid; }
.styleError input:focus, .styleError textarea:focus, .styleError select:focus, .styleError fieldset:focus { border-top: 1px #000 solid; border-right: 2px #000 solid; border-bottom: 1px #000 solid; border-left: 1px #000 solid; }