@charset "UTF-8";

body, wrapper, div, img, id, ul, li, a, h1  {behavior: url(iepngfix.htc) }
div, #text p {behavior: url(iepngfix.htc)}

a img {
  border: none;
}
a {text-decoration:none}
span.contact a:link {
	text-decoration: none;
	color: #000;
}
span.contact a:visited {
	text-decoration: none;
	outline: none;
	color: #000;
}
a:link {
	text-decoration: none;
	color: #FF3;
}
a:visited {
	text-decoration: none;
	outline: none;
	color: #FF0;
}
a:hover {
	color: #FF0;
	behavior: url(iepngfix.htc)
}
a:active {
	text-decoration: none;
}
/*** LOGO ***/

#headlogo {
	width: 273px;
	height: 200px;
	background-image:url(Images/wor_logo_trans4.png);
	background-repeat: no-repeat;
	background-position: top left;
	display: block;
	text-indent: -9999px;
	cursor:pointer;
}

#saverlogo {
	width: 273px;
	height: 200px;
	background-image:url(Images/wor_logo_trans4.png);
	background-repeat: no-repeat;
	text-indent: -9999px;
	cursor:pointer;
	margin-right: auto;
	margin-left: auto;
	display: block;
}


span.todaysdate{
	/*background-color: #000;*/
	color: #000;
	font-size:100%;
	letter-spacing:normal;
	font-family: Verdana, Geneva, sans-serif;
	line-height: 1.2em;
	font-size: 0.9em;
	word-spacing: normal;
	float: left;
}
h1 {
	font-family: Verdana, Geneva, sans-serif;
	color: #FF0;
	font-size: large;
}
h2 {
	font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
	color: #FF3;
	text-align: left;
}
h3 {
	font-family: Verdana, Geneva, sans-serif;
	text-align: left;
	color: #FF0;
	text-decoration: none;
	font-size: 14px;
}
p {
	font-family: Verdana, Geneva, sans-serif;
	text-align: justify;
	color: #FFF;
	list-style-type: none;
	font-size: 12px;
}
#text p {
	font-size:100%;
	letter-spacing:normal;
	font-family: "Comic Sans MS", cursive;
	line-height: 1.25em;
	font-size: 1em;
	word-spacing: normal;
	text-align: justify;
	color: #FF6;
	vertical-align: middle;
}
span.textb{
	color: #FF0;
}
#footer p {
	font-size:100%;
	letter-spacing:0px;
	font-size: 0.9em;
	font-family: Verdana, Geneva, sans-serif;
	word-spacing: -1px;
	text-align: left;
	vertical-align: bottom;
	color: #000;
}
.portfolioitemtekst {
}

body {
	background-attachment: fixed;
	margin: 0px;
	background-repeat: no-repeat;
	background-position: center top;
	text-align: center;
	position: relative;
	background-image: url(Images/WOR-Background-Final2.jpg);
	behavior: url("csshover3.htc");
}

#wrapper {
	height: 865px;
	width: 964px;
	margin-left: auto;
	background-repeat: no-repeat;
	margin-right: auto;
	background-position: center top;
}
#textwrap{
	height: 350px;
	width: 200px;
	position: relative;
	top: 10px;
	margin-top: 20px;
	left: 10px;
	overflow: auto;
}
#textwrap2{
	height: auto;
	width: 320px;
	position: relative;
	top: 10px;
	margin-top: 20px;
}
#arrow{
	position: relative;
	float: right;
	margin-right: 35px;
}
#arrow2{
	position: relative;
	float: right;
	margin-right: 10px;
}
#sidebar {
	float: left;
	height: auto;
	width: 285px;
	padding:0;
	margin:0;
	list-style-type:none;
	position: relative;
}
span.contact{
	font-size:100%;
	letter-spacing:0px;
	font-size: 0.9em;
	font-family: Verdana, Geneva, sans-serif;
	word-spacing: -1px;
	text-align: right;
	vertical-align: baseline;
	color: #000;
	float: right;
	position: relative;
	line-height: normal;
}
span.picnotes{
	font-size:100%;
	letter-spacing:0px;
	font-size: 0.9em;
	font-family: Verdana, Geneva, sans-serif;
	word-spacing: -1px;
	vertical-align: middle;
	color: #000;
	float: right;
	text-align: center;
}
#text {
	height: 245px;
	width: 41.246em;
	background-repeat: no-repeat;
	background-position: center center;
	float: right;
	position: relative;
}
#text_inner {
	height: 160px;
	width: 38em;
	margin-top: 58px;
	margin-left: 30px;
	position: relative;
}
width {
	height: 500px;
	width: 659.935px;
	float: right;
	position: relative;
	}
	#mainwrapper {
	height: 500px;
	width: 659.935px;
	float: right;
	position: relative;
	margin-top: 25px;
	background-image: url(Images/main_banner_rpt.png);
	}
#mainwrapperbouter{
	height: auto;
	width: 41.6em;
	position: relative;
	background-image: url(Images/main_banner_rpt.png);
	background-repeat: repeat-y;
	background-position: center center;
	float: right;
	text-align: center;
	padding-bottom: 30px;
	margin: 0px;
	padding-top: 0px;
	padding-right: 0px;
	padding-left: 0px;
	}
	#outerbanner{
	float: right;
	background-image: url(Images/main_banner_top.png);
	background-position: center bottom;
	height: 20px;
	width: 666px;
	background-repeat: no-repeat;
}
	#outerbanner2{
	background-image: url(Images/main_banner_bottom.png);
	background-position: center bottom;
	height: 20px;
	width: 664px;
	background-repeat: no-repeat;
	float: right;
}
#mainwrapperb {
	height: auto;
	width: 37.5em;
	border: medium none #000;
	text-align: left;
	background-repeat: no-repeat;
	left: 20px;
	padding-bottom: 5px;
	top: 15px;
	text-decoration: none;
	padding-right: 15px;
	position: relative;
	overflow: visible;
	padding-left: 15px;
	}
	span.ItemDescription {
	font-family: Verdana, Geneva, sans-serif;
	text-align: justify;
	color: #FFF;
	font-size: 12px;
	}
	#mainwrapperc {
	height: auto;
	width: 580px;
	border: medium none #000;
	text-align: left;
	background-repeat: no-repeat;
	left: 20px;
	padding-bottom: 5px;
	top: 50px;
	text-decoration: none;
	padding-right: 18px;
	position: relative;
	padding-left: 30px;
	background-position: center center;
	}
	#mainwrapperd {
	height: auto;
	width: 36.5em;
	border: medium none #000;
	text-align: left;
	background-repeat: no-repeat;
	text-decoration: none;
	position: relative;
	padding-top: 15px;
	top: 25px;
	padding-right: 15px;
	margin: 0px;
	padding-left: 25px;
	left: 20px;
	}
.border {
	top: 10px;
	position: absolute;
	left: 30px;
}
.border2 {
	top: 10px;
	left: 30px;
	position: absolute;
	z-index: 0;
}
.pic {
	float: left;
	margin-right: 20px;
}
.pic2 {
	position: relative;
	margin-right: 40px;
}
#main {
	height: 460px;
	width: 100px;
	margin-right: 1.875em;
	float: right;
	position: relative;
	}
#main a.gallery {
	height: 120px;
	width: 100px;
	background-image: url(Images/White_Border_thumb.png);
	background-repeat: no-repeat;
	margin-bottom: 46px;
	border-top-width: 5px;
	text-align: center;
}
#main a.gallery:hover{
	background-image: url(Images/White_Border_thumb_hover.png);
}

#mainpic {
	height: 365px;
	position: relative;
	display: block;
	width: 300px;
	float: left;
	padding-top: 57px;
	padding-left: 92px;
}
#mainpic2 {
	height: 350px;
	width: 355px;
	background-image: url(Images/Yellow_border_smll.png);
	background-position: center center;
	background-repeat: no-repeat;
	text-align: center;
	padding-top: 25px;
	float: left;
	margin-top: 20px;
	display: block;
	margin-right: 0px;
	margin-bottom: 0px;
	margin-left: 0px;
	padding-right: 0px;
	padding-bottom: 0px;
	padding-left: 0px;
}
	
	#main ul {
	list-style-type:none;
	height:auto;
	margin-top: 10px;
	margin-left: 10px;
	padding: 0;
	width: 80px;
}/*In its current form, the page displays all the images and text. The reason for this is that the images need to be displayed to allow them to preload. However, they need to be invisible on the page so they only appear on rollover. This is done by placing them in a container that is 1 x 1 pixels. This has the effect of only displaying the top left pixel of each image. Add the following code:*/


#main a.gallery span {
	width:0px;
	height:0px;
	overflow:hidden;
	background:#fff;
	top: 0em;
	left: 0em;
	position: absolute;

}

/*	background-image: url (images/white_border.png)*/


#main a.gallery, #main a.gallery:visited {
	display:block;
	text-decoration:none;
	cursor:default;
	font-size: 0.9em;
	font-family: Verdana, Geneva, sans-serif;
	word-spacing: -1px;
	color: #000;
	text-align: center;
	margin-top: 0px;
	margin-right: 7px;
}


#main li {
	float:right; /*The #container li code floats any content in a list to the left or right.*/
}
#main a.gallery:hover span {
	width:300px;
	height:365px;
	color:#000;
	background:#fff;	/*margin-left: -32.125em;*//*This code will make sure that when the mouse cursor is placed over a thumbnail, the main image will appear. However, various elements will need to modified to suit requirements. Width and height should be the same dimensions as the main image. Top and left position the main image; top defines how many pixels from the top of the window, while left determines how far from the left side of the window the main image is positioned. Adjust both until you get the desired effect.*/
	position: absolute;
	left: -444px;
	top: 57px;
}
#main a.gallery:hover {
	cursor:pointer;
	} /*To create the hover effect*/
#footer {
	height: 180px;
	width: 659px;
	margin: auto;
	text-align: left;
	float: right;
	position: relative;
}

#navlist{position:relative;
}
#navlist li{
	padding:0;
	list-style:none;
	position:absolute;
	top:0;
	margin-top: 0;
	margin-right: 0;
	margin-bottom: 0;
	margin-left: 0;
}
#navlist li, #navlist a{
	height:68px;
	display:block;
}

#facebook{
	left:0px;
	width:67px;
}
#facebook{
	background:url(Images/social-network-icons.png) 0 0;
}
#facebook a:hover{background: url(Images/social-network-icons.png) 0 -68px;}

#blogger{left:110px;width:67px;}
#blogger{background:url(Images/social-network-icons.png) -272px 0;}
#blogger a:hover{background: url(Images/social-network-icons.png) -272px -68px;}

#vimeo{left:220px;width:67px;}
#vimeo{background:url(Images/social-network-icons.png) -136px 0;}
#vimeo a:hover{background: url(Images/social-network-icons.png) -136px -68px;}

#youtube{left:330px;width:67px;}
#youtube{background:url(Images/social-network-icons.png) -340px 0;}
#youtube a:hover{background: url(Images/social-network-icons.png) -340px -68px;}

#twitter{left:440px;width:67px;}
#twitter{background:url(Images/social-network-icons.png) -68px 0;}
#twitter a:hover{background: url(Images/social-network-icons.png) -68px -68px;}

#gtalk{left:550px;width:67px;}
#gtalk{background:url(Images/social-network-icons.png) -204px 0;}
#gtalk a:hover{background: url(Images/social-network-icons.png) -204px -68px;}



#sidebars{
	position: relative;
	list-style-type: none;
}
#sidebars a:hover{
	position: relative;
	bottom: 5px;
	right: 5px;
}
#sidebars li {
	height:106px;
	display:block;
	position: relative;
}
#sidebars li a{
	height:115px;
	display:block;
	position: relative;
	width: 216px;
}
#aboutme{
	width:203px;
	background:url(Images/sidebars.png) 0 0;
	position: relative;
}
#aboutme a:hover{
	background-image: url(Images/sidebars.png);
	background-position: -203px 0px;
}

#blog{
	width:203px;
	position: relative;
	background-image: url(Images/sidebars.png);
	background-position: 0 -106px;}
#blog a:hover{background: url(Images/sidebars.png) -203px -118px;
	}


#portfolio{
	left:0px;
	width:203px;
background:url(Images/sidebars.png) 0 -212px;
}
#portfolio a:hover{background: url(Images/sidebars.png) -203px -234px;}

#contact{
	left:0px;
	width:203px;
	background:url(Images/sidebars.png) 0 -318px;
}
#contact a:hover{background: url(Images/sidebars.png) -203px -352px;}

#extra{
	left:0px;
	width:203px;
	background:url(Images/sidebars.png) 0 -424px;
}
#extra a:hover{background: url(Images/sidebars.png) -203px -470px;}


/*Next section deals with Navigation bars on portfolio page*/

#portfolionav{
	position: relative;
	left: 50px;
	float: left;
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 0px;
	margin-left: 0px;
	padding-top: 0px;
	padding-right: 0px;
	padding-bottom: 0px;
	padding-left: 0px;
}
#portfolionav li{
	list-style:none;
	top:0;
	margin-top: 0;
	margin-right: 0;
	margin-left: 0;
	position: absolute;
	padding-top: 0;
	padding-right: 0;
	padding-left: 0;
}
#portfolionav li, #portfolionav a{
	display:block;
	height: 30px;
}

#artwork{
	left:0px;
	width:122px;
	background:url(Images/portfolionav.png) 0 -32px;
}
#artwork a:hover{background: url(Images/portfolionav.png) 0 -64px;}

#artworkb{
	left:0px;
	width:122px;
	background:url(Images/portfolionav.png) 0 0px;
}
#artworkb a:hover{background: url(Images/portfolionav.png) 0 -64px;}

#webdesign{left:122.7px;width:122px;}
#webdesign{background:url(Images/portfolionav.png) -122.7px 0;}
#webdesign a:hover{background: url(Images/portfolionav.png) -122.7px -64px;}

#webdesignb{left:122.7px;width:122px;}
#webdesignb{background:url(Images/portfolionav.png) -122.7px -32px;}
#webdesignb a:hover{background: url(Images/portfolionav.png) -122.7px -64px;}

#animation{left:245.4px;width:122px;}
#animation{background:url(Images/portfolionav.png) -245.4px 0;}
#animation a:hover{background: url(Images/portfolionav.png) -245.4px -64px;}

#animationb{left:245.4px;width:122px;}
#animationb{background:url(Images/portfolionav.png) -245.4px -32px;}
#animationb a:hover{background: url(Images/portfolionav.png) -245.4px -64px;}

#designbrand{left:368.1px;width:122px;}
#designbrand{background:url(Images/portfolionav.png) -368.1px 0;}
#designbrand a:hover{background: url(Images/portfolionav.png) -368.1px -63.6px;}

#designbrandb{left:368.1px;width:122px;}
#designbrandb{background:url(Images/portfolionav.png) -368.1px -32px;}
#designbrandb a:hover{background: url(Images/portfolionav.png) -368.1px -63.6px;}


/*Next part to deal with Gallery in Illustration page*/


#picthumbs {
	width:570px;
	height:auto;
	position: relative;
	display: block;
	clear: left;
	float: left;
	margin-bottom: 20px;
	}

#mainwrapperd a.gallery {
	height: 120px;
	width: 100px;
	background-image: url(Images/White_Border_thumb2.png);
	background-repeat: no-repeat;
	/*	margin-bottom: 46px;*/
	border-top-width: 5px;
	text-align: center;
}
#mainwrapperd a.gallery:hover{
	background-image: url(Images/White_Border_thumb_hover.png);
	float: left;
}
	
	#mainwrapperd ul {
	list-style-type:none;
	height:auto;
	margin-top: 10px;
	margin-left: 10px;
	padding: 0;
	width: 80px;
}/*In its current form, the page displays all the images and text. The reason for this is that the images need to be displayed to allow them to preload. However, they need to be invisible on the page so they only appear on rollover. This is done by placing them in a container that is 1 x 1 pixels. This has the effect of only displaying the top left pixel of each image. Add the following code:*/


#mainwrapperd a.gallery span {
	width:0px;
	height:0px;
	overflow:hidden;
	top: 0em;
	left: 0em;
	position: absolute;
	float: left;
	background-color: #000;
	z-index: 1;
}

/*	background-image: url (images/white_border.png)*/


#mainwrapperd a.gallery, #mainwrapperd a.gallery:visited {
	display:block;
	text-decoration:none;
	cursor:default;
	word-spacing: -1px;
	color: #000;
	font-weight: bold;
	float: left;
	text-align: center;
	position: relative;
	padding-right: 16px;
}
#photothumb {
	height:89px;
	width:85px;
	position: relative;
	float: left;
	padding-top: 11px;
	padding-left: 8px;
} /*Each image defined in the HTML unordered list needs to be defined in the style tags.*/
#photothumb2 {
	height:auto;
	width:auto;
	clear: left;
	float: left;
	margin-right: 20px;
	margin-top: 26px;
}
#mainwrapperd ul {
}

#mainwrapperd li {
	float:left; /*The #container li code floats any content in a list to the left or right.*/
}
#mainwrapperd a.gallery:hover span {
	width:300px;
	height:365px;
	color:#000;
	background:#fff;	/*margin-left: -32.125em;*//*This code will make sure that when the mouse cursor is placed over a thumbnail, the main image will appear. However, various elements will need to modified to suit requirements. Width and height should be the same dimensions as the main image. Top and left position the main image; top defines how many pixels from the top of the window, while left determines how far from the left side of the window the main image is positioned. Adjust both until you get the desired effect.*/
	position: absolute;
	left: 180px;
	top: 5px;
}
#mainwrapperd a.gallery:hover {
	cursor:pointer;
	} /*To create the hover effect*/


/*#contacts{
	position: relative;
	left: 50px;
	top: 10px;
}
#contacts li{
	list-style:none;
	position:relative;
	top:0;
	height:27.583px;
	display:block;
	float: left;
	padding-top: 0;
	padding-right: 0;
	padding-bottom: 0;
	padding-left: 0;
	margin-top: 0;
	margin-right: 0;
	margin-bottom: 0;
	margin-left: 0;
}*/
#contacts ul{
	list-style-type: none;
}
#contacts p{
	font-family: Verdana, Geneva, sans-serif;
	font-size: 12px;
	color: #FFF;
}
#Extra ul{
	list-style-type: none;
}


#Extra p a:link{
	color: #FFF;
}

#Extra p a:hover{
	color: #FF3;
	text-decoration: underline;
}

#Extra p a:visited{
	color: #FFF;
}