<!--
@import url("text.css");

html {
	height: 101%;
}

body {
	background:#000000;
}

div#wrapper {
	width: 850px;
	height: 520px;
	position: absolute;
	left: 50%;
	top: 50%;
	margin-left: -435px;
	margin-top:	-290px;
}

#content {
	position:relative;
	top: 0px;
	height:500px;
	background:#FFFFFF;
}

#imageContainer {
	position: relative;
	top: 0px;
	left:0px;
	height: 323px;
	overflow:hidden;
}

/* ------------------------------------------------------ copyright styles ------------------------------------------ */

#copyright {
	color: #999999;
	font: 9px Verdana, Arial, Helvetica, sans-serif;
	margin-top: 10px;
	height:10px;
}

#copyright a:link, #copyright a:visited {
	color: #999999;
}

#copyright a:hover {
	color: #FFFFFF;
}

#copyright span {
	float:right;
}

/* ------------------------------------------------------ m1 styles ------------------------------------------ */

#m1bar {
	position:absolute;
	left:0px;
	top:320px;
	width:250px;
	height:3px;
	z-index:10;
	overflow:hidden;
	background:#FF9900;
}

#m1 {
	position:absolute;
	left:250px;
	top:323px;
	width:600px;
	height:30px;
	z-index:11;
	overflow:hidden;
}

#m1 a:link, #m1 a:visited {
	float:left;
	width: 150px;
	text-align: center;
	padding: 10px 0px;
	text-transform:uppercase;
	font-weight: bold;
	color:#333333;
}

#m1 a:hover, #m1 a.thistab {
	color:#000000;
}

div.m1container {
	position:absolute;
	top: 320px;
	width: 149px;
	margin-left: 1px;
	height: 3px;
	overflow:hidden;
	z-index: 10;
	/* font: 9pt Helvetica, Arial, Verdana, sans-serif; */
}

div.m1container div {
	border-top: 3px solid #FF9900;
	color: #CCCCCC;
	width: 150px;
}

.m1container ul {
	padding: 0px;
	margin: 0px;
}

.m1container li {
	padding: 0px;
	list-style:none;
}


.m1container a:link, .m1container a:visited {
	display:block;
	padding: 4px 10px;
	color:#000000;
	background: #FFFFFF;
	opacity: .8;
	-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=85)";
	filter: alpha(opacity=85);					
	opacity: .85;
}

.m1container a:hover {
	display:block;
	padding: 4px 10px;
	color: #FF9900;
	background: #FFFFFF;
	-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=99)";
	filter: alpha(opacity=99);					
	opacity: .99;
}


div#m1_cont_graphic-design {
	left: 250px;
}

div#m1_cont_web-design {
	left: 400px;
}

div#m1_cont_publishing {
	left: 550px;
}

div#m1_cont_about-vg {
	left: 700px;
}

#m1_menus {
	position:absolute;
	left:250px;
	top:320px;
	width:600px;
	height:3px;
	z-index:10;
	overflow:hidden;
}

#copy_standard {
	position:absolute;
	left:280px;
	top:30px;
	width:540px;
	height:260px;
	z-index:10;
	overflow:hidden;
}

#copy_showcase {
	position:absolute;
	left:250px;
	top:367px;
	width:570px;
	height:109px;
	z-index:12;
	overflow:hidden;
}

#copy_showcase_text {
	padding-bottom: 100px;
}


#copy a:link, #copy a:visited, #copy a:hover {
	text-decoration:none;
	padding-bottom: 3px;
} 

#copy a:hover {
	color: #000000;
	text-decoration:none;
	border-bottom: 1px dotted #FF9900;
} 


#vgLogo {
	position:absolute;
	left:30px;
	/* top:367px; */
	top:430px;
}


#vgLogo.homeLogo {
	top:390px;
}

/* ------------------------------------------------------ m2 styles ------------------------------------------ */

#m2bg {
	position: absolute;
	top: 30px;
	left: 30px;
	width: 220px;
	height: 260px;
	z-index: 30;
	background: url(Web-Design-Sheffield-m2-bg.png) bottom right;
}

#m2 {
	position: absolute;
	top: 30px;
	left: 30px;
	width: 220px;
	height: 260px;
	z-index: 31;
	overflow:hidden;
}

#m2 div#m2_text {
	margin: 15px;
}

#m2 a:link, #m2 a:visited {
	color:#333333;
	display:block;
}


#m2 a:hover, #m2 a.thisTab {
	color:#FF9900;
}

#m2 p {
	margin: 0px 0px 15px 0px;
	text-align: left;
}
/* ------------------------------------------------------ showcase styles ------------------------------------------ */

#imageContainer {
	position:absolute;
	left:0;
	top:0;
	width: 850px;
	height: 323px;
	margin: 0px;
	overflow: visible;
}

#currentImageContainer {
	position:absolute;
	left:0;
	top:0;
	width:850px;
	height:323px;
	z-index:1;
	overflow:hidden;
}

#nextImageContainer {
	position:absolute;
	left:0px;
	top: 350px;
	width:850px;
	height:323px;
	z-index:2;
	display:none;
	overflow:hidden;
}

/* ------------------------------------------------------ scrollbar styles ------------------------------------------ */

.Container {
  position: absolute;
  top: 30px; 
  left: 30px;
  width: 510px;
  height: 340px;
}

#Scroller { 
  position: absolute; 
  overflow: hidden;
  width: 510px;
  height: 340px;
}

.Scroller-Container {
  position: absolute;
  top: 0px;
  left: 0px;
  width: 100%;
}

.scrollbarSet {
	position: absolute;
	top: 0px; 
	right: 30px;
}

.Scrollbar-Up {
  cursor: pointer;
  position: absolute;
}


.Scrollbar-Track {
  width: 10px; 
  height: 180px;
  position: absolute;
  top: 33px; 
  left: 0px;
  background: #FFFFFF;
  border:1px solid #999999;
}


#copy_showcase .Scrollbar-Track {
  top: 17px; 
  height: 50px;
}

.Scrollbar-Handle {
  position: absolute;
  width: 10px; height: 20px;
  background: #999999;
}

.Scrollbar-Handle:hover, .Scrollbar-Handle:active {
  background: #FF9900;
}

.Scrollbar-Up {
	cursor: pointer;
	position: absolute;
	top: 15px;
	background: url(scroll/up.png) top left no-repeat;
}
#copy_showcase .Scrollbar-Up {
	top: 0px;
}
.Scrollbar-Down {
	background: url(scroll/down.png) top left no-repeat;
	cursor: pointer;
	position: absolute;
	top: 222px; 
}

#copy_showcase .Scrollbar-Down {
	top: 77px; 
}

.Scrollbar-Up:hover {
	background: url(scroll/up-over.png) top left no-repeat;
}
.Scrollbar-Down:hover {
	background: url(scroll/down-over.png) top left no-repeat;
}


#baseBar {
	background:#FF9900;
	color:#FFFFFF;
	padding: 2px 30px;
	clear:both;
}


#baseBar a:link, #baseBar a:visited {
	color:#FFFFFF;
}
#baseBar a:hover {
	color:#000000;
}

/* ------------------------------------------------------ item details ------------------------------------------ */

div.item_details {
	font: 8.5pt/normal Helvetica, Arial, sans-serif;
	color: #333333;
}

div.item_details p {
	width: auto;
	overflow: visible;
}
div.item_details span {
	overflow: visible;
}
div.item_details p, div.item_details ul {	
	margin: 0px 0px 8px 0px;
}
div.item_details li {	
	margin: 2px 0px 0px 0px;
}

div.item_details h1, div.item_details h2, div.item_details h3, div.item_details h4 {
	font-weight: normal;
	margin: 0px 0px 8px 0px;
}

div.item_details h1, div.item_details h2, div.item_details h3 {
	color: #FF9900;
}

div.item_details h1  {
	font-size: 12pt
}

div.item_details h2  {
	font-size: 10pt
}

div.item_details h3  {
	font-size: 10pt
}

div.item_details h4  {
	font-size: 19pt
}

div.item_details a:link {
	color: #000000;
	border-bottom: 1px dotted #FF9900;
} 

div.item_details a:visited {
	color: #222222;
	border-bottom: 1px dotted #666666;
} 

div.item_details a:hover, div.item_details a.thisTab {
	color: #FF9900;
	border-bottom: none;
} 

div#m2.item_details a:link, div#m2.item_details a:visited, div#m2.item_details a:hover {
	border: none;
}

/* ------------------------------------------------------ form styles ------------------------------------------ */

div.itemRow {
	padding: 3px;
	width: auto;
	overflow:auto;
	clear:both;
}
.required {
	font-weight: bold;
	color:#FF9900;
}

div.itemRow label {
	float:left;
	text-align:right;
	font-weight:bold;
	width: 35%;
	padding-top: 3px;
}

div.itemRow span.cssInput {
	float:left;
	width: 60%;
	margin-left: 3%; 
}

div.itemRow input {
	border: 1px solid #999999;
	width: 50%;
}

div.buttonSet {
	padding: 3px;
	text-align:centerleft;
	margin-left: 38%;
}

div.buttonSet input {
	text-align:center;
	background: url(button.gif) top left no-repeat;
	width: 70px;
	height: 20px;
	font: 9pt/150% Helvetica, Arial, sans-serif;
	font-weight: bold;
	color:#FFFFFF;
	text-transform:uppercase;
	border: none;
}

div.buttonSet input:hover {
	background: url(button-over.gif) top left no-repeat;
}

/* ------------------------------------------------------ additions ------------------------------------------------ */

a.twitterlink, a.twitterlink:visited {
	left: 714px;
	text-align: right;
	top: 530px;
	position: absolute;
	color: #999;
	padding-left: 23px;
	display: block;
	padding-top: 3px;
	background: url('/siteinfo/twitterorange.png') top left no-repeat;
}

a.twitterlink:hover {
	background: url('/siteinfo/twitter.png') top left no-repeat;
	color: #ddd;
}