/* =============================================================================   
	Website Harry Gijsbers Grafisch ontwerper BNO
	Auteur; Hans Gijsbers  HG Webdesign
	Datum: 30-03-2009 
	Screen. projection CSS 
   =============================================================================   */

body {
	margin: 0px;
	padding: 0px;
	background: #666666;
	font: 85% Verdana, Arial, Helvetica, sans-serif;
	color: #5b5b5b;
	text-align: center; /* ivm IE 5 - 6 */
}

#Wrapper {
	height: 770px;
	margin: 0 auto 0 auto;
	width: 1000px;
	text-align: left;  /* ivm IE 5 - 6 */
}
#header {
	background: url(../plaatjes/harry-web-header.jpg) no-repeat;
	height: 95px;
	width: 1000px;
	border-style: none;
}
#header h1 {
	display: none;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	color: #5b5b5b;
}

/*  ======================= opmaak van de header ==========================*/
#header ul {
	margin: 0px;
	list-style: none;
	height: 41px;
	padding-top: 62px;
	padding-left: 748px;
}

#header ul li {
	float: left;
}
#header ul li a {
	display: block;
	text-decoration: none;
	color: #d8d9da;
	margin: 0px;
	border-right: thin solid #d57e1c;
	padding-right: 5px;
	padding-left: 5px;
	font-size: 100%;
}
#header ul li a:hover {
	color: #d57e1c;
}

/*  -----------------------------------------------------------------------------  */ 

div#page-background {
	background: url(../plaatjes/web-body-background.jpg) no-repeat;
	height: 675px;
	width: 1000px;
}

/* =========== opmaak van de breadcrumbs  =======================================  */
#breadcrumbs {
	height: 12px;
	margin: 0px;
	padding: 0px 0px 0px 78px;
	font-size: 11px;
}
#breadcrumbs p {
	margin: 0px;
	padding: 0px;
}
#breadcrumbs a {
	text-decoration: none;
	color: #5b5b5b;
}
#breadcrumbs a:hover {
	color: #d57e1c;
}
#breadcrumbs a.current-breadcrumb {
	color: #d57e1c;
}
/*  ---------------------------------------------------------------------------  */

/*  ====================== opmaak van de tabs  ================================  */
#tabs {
	height: 141px;
	width: 1000px;
}
#tabs ul {
	margin: 0px;
	padding: 124px 0px 0px 374px;
	list-style-type: none;
}
#tabs li {
	float: left;
}
#tabs a {
	float: left;
	color: #5b5b5b;
	text-decoration: none;
	display: block;
	width: 82px;
	margin-right: 2px;
	text-align: center;
	font-size: 12px;
	line-height: normal;
}
#tabs #tab-left {
	background: url(../plaatjes/tab-up-left.jpg) no-repeat;
	height: 17px;
}
#tabs #tab-left a:hover {
	background: url(../plaatjes/tab-dwn-left.jpg) no-repeat;
	height: 17px;
}
#tabs #tab-mid {
	background: url(../plaatjes/tab-up-mid.jpg) no-repeat;
	height: 17px;
}
#tabs #tab-mid a:hover {
	background: url(../plaatjes/tab-dwn-mid.jpg) no-repeat;
	height: 17px;
}
#tabs #tab-right {
	background: url(../plaatjes/tab-up-right.jpg) no-repeat;
	height: 17px;
}
#tabs #tab-right a:hover {
	background: url(../plaatjes/tab-dwn-right.jpg) no-repeat;
	height: 17px;
}
/*  -----  current class voor de tabs ---- */

.tab-mid-current {
	background: url(../plaatjes/tab-dwn-mid.jpg) no-repeat;
	height: 17px;
}
.tab-left-current {
	background: url(../plaatjes/tab-dwn-left.jpg) no-repeat;
	height: 17px;
}
.tab-right-current {
	background: url(../plaatjes/tab-dwn-right.jpg) no-repeat;
	height: 17px;
}

/* -----------------------------------------------------------------------------------  */

/* == opmaak van de content in de diverse sites ======================================  */

#content-home {
	margin: 0px auto;
	height: 344px;
	width: 558px;
	background: #FFFFFF;
	color: #FFFFFF;
	font: 11px Verdana, Arial, Helvetica, sans-serif;
}
#java-panel #harry-web {
	background: url(../plaatjes/content-contect.jpg) no-repeat;
	height: 344px;
	width: 558px;
}


#content-web {
	background: url(../plaatjes/content-web.jpg) no-repeat;
	height: 344px;
	width: 558px;
	margin: 0px;
	padding: 0px;
}


#content-portfolio {
	background: url(../plaatjes/content-portfolio.jpg) no-repeat;
	height: 344px;
	width: 558px;
	margin-left: 224px;
}

#content-cv {
	background: url(../plaatjes/content-cv.jpg) no-repeat;
	height: 344px;
	width: 558px;
	margin: 0px;
	padding: 0px;
}
#content-port-start {
	background: url(../plaatjes/content-backgrnd.jpg) no-repeat;
	height: 344px;
	width: 558px;
	margin-left: 224px;
}
#content-port-start #row-one #box1 {
	background: url(../plaatjes/pict-box1.jpg) no-repeat;
	height: 139px;
	width: 138px;
}
#content-port-start #row-one #box2 {
	background: url(../plaatjes/pict-box2.jpg) no-repeat;
	height: 139px;
	width: 138px;
}
#content-port-start #row-one #box3 {
	background: url(../plaatjes/pict-box4.jpg) no-repeat;
	height: 139px;
	width: 138px;
}
#content-port-start #row-two #box4 a {
	color: #5b5b5b;
	font-size: 11px;
	margin: 0px;
	padding: 0px;
	height: 139px;
	width: 138px;
}
#content-port-start #row-two #box5 a {
	color: #5b5b5b;
	font-size: 11px;
	margin: 0px;
	padding: 0px;
	height: 139px;
	width: 138px;
}
#content-port-start #row-two #box6 a {
	color: #5b5b5b;
	font-size: 11px;
	margin: 0px;
	padding: 0px;
	height: 139px;
	width: 138px;
}

/* ----------------------------------------------------------------------------------- */

/*  ========================== opmaak van de plaatjes + links voor de homepage =======  */

#content-home  a,
#content-port-start a  {       /*  opmaak van alle <a> binnen deze div */
	display: block;
	height: 129px;
	width: 128px;
	text-decoration: none;
	color: #FFFFFF;
	padding: 5px;
}
/* == ====================== opmaak de de bovenste rij op de home-page  ================== */

#content-home ul#row-one,
#content-port-start ul#row-one  {
	margin: 0px 0px 0px 45px;
	padding: 0px;
	list-style: none;
}
#content-home #row-one li,
#content-port-start #row-one li {
	float: left;
	height: 139px;
	width: 138px;
	margin-right: 26px;
	margin-top: 16px;
}

#content-home #row-one #box1 {
	background: url(../plaatjes/pict-box1.jpg) no-repeat;
}

#content-home  #row-one a:hover,     /* voor beide rijen de a:hover 138/139 - 10 - 6 + oranje rand  */
#content-home  #row-two a:hover,
#content-port-start #row-one a:hover {
	border: 3px solid #d57e1c;
	height: 126px;
	width: 125px;
	margin-top: -3px;
	margin-left: -3px;
}
#content-home #row-one #box2 {
	background: url(../plaatjes/pict-box2.jpg) no-repeat;
}
#content-home #row-one #box3 {
	background: url(../plaatjes/pict-box3.jpg) no-repeat;
}
/*  -------------------------------------------------------------------------------- */

/*  ================ opmaak van de onderste rij op de homepage ===================== */

#content-home ul#row-two,
#content-port-start ul#row-two {
	margin: 0px 0px 0px 45px;
	padding: 0px;
	list-style: none;
	clear: left;         /* clear float om de tweede rij onder de eerste te krijgen  */
	line-height: 13px;
}
#content-home #row-two li, 
#content-port-start #row-two li{
	float: left;
	height: 139px;
	width: 138px;
	margin-top: 16px;
	margin-right: 26px;
}
#content-home #row-two #box4 {
	background: url(../plaatjes/pict-box4.jpg) no-repeat;
}
#content-home #row-two #box5 {
	background: url(../plaatjes/pict-box5.jpg) no-repeat;
}
#content-home #row-two #box6 {
	background: url(../plaatjes/pict-box6.jpg) no-repeat;
}
/*  ----------------------------------------------------------------------------- */

/*  ================= class voor de tekst op de home page  ======================*/
.small-text {
	font-size: 9px;
	line-height: 9px;
	display: block;
	margin-top: 81px;   /* voor de Mac - <br/ > in tekst werkt namelijk niet goed */
}

.small-text-black {     /* - voor kleine zwarte tekst - */
	font-size: 9px;
	color: #333333;
	line-height: 9px;
	display: block;
	margin-top: 81px;   /* voor de Mac - <br/ > in tekst werkt namelijk niet goed */
}
.small-text-project {   /* voor de tekst op de ontwerp-start pagina */
	font-size: 9px;
	line-height: 9px;
	color: #5b5b5b;
	display: block;
	margin-top: 6px;   /* voor de Mac - <br/ > in tekst werkt namelijk niet goed */
}


/* ------------------------------------------------------------------------------ */

/* ============= opmaak van de footer ==========================================  */
#footer {
	padding-top: 142px;
	margin-right: 78px;
	margin-left: 78px;
}

#footer p {
	font-size: 11px;
	border-top: thin solid #5b5b5b;
	padding-top: 3px;
	word-spacing: 0.1em;
}

/* -------------------------------------------------------------------------------  */

/*  ================= opmaak van de tabs in de portfolio  ========================  */

ul#port-tabs-nav {
	margin: 0px;
	list-style-type: none;
	width: 550px;
	text-align: center;
	padding: 295px 0px 0px 41px;
}
#footer #link-reclame a {
	color: #333333;
	text-decoration: none;
	float: right;
	font-size: x-small;
	border-style: none;
}
#footer p#link-reclame {
	border-style: none;
}


ul#port-tabs-nav li {
	float: left;
}

ul#port-tabs-nav li a {
	display: block;
	font: 16px/36px Verdana, Arial, Helvetica, sans-serif;
	color: #FFFFFF;
	width: 136px;
	text-decoration: none;
	height: 40px;
	margin-right: 30px;  /* om de tabs rechts ruimte te geven */
}

ul#port-tabs-nav li a:hover {
	border-top: 3px solid #d57e1c;
	border-right: 3px solid #d57e1c;
	border-bottom: 2px solid #d57e1c;
	border-left: 3px solid #d57e1c;
	height: 37px;
	width: 132px;
	display: block;
	margin-right: 29px;
	line-height: 29px;  /* om de tekst te centreren tijdens de hover - gaat niet met padding */
	margin-left: -1px;
}
noscript {
	color: #333333;
	display: block;
	width: 558px;
	margin-left: 224px;
}
/*  ===================== opmaak van de contact pagina - het formulier zelf ==================  */

#contact-harry {
	height: 344px;
	width: 504px;
	margin: 0px;
	padding: 0px 0px 0px 54px;
	color: #5b5b5b;
	font: 11px Verdana, Arial, Helvetica, sans-serif;
	position: relative;
}
#contact-harry p {
	margin: 0px;
	padding: 0px;
}
#contact-harry .header-contact {
	margin-top: 15px;
	margin-bottom: 15px;
}
#contact-harry #harry-form-button {
	background: url(none) no-repeat;
	width: 139px;
	position: absolute;
	left: 357px;
	top: 288px;
	border-style: none;
	text-align: center;
	height: 32px;
	font: 18px Verdana, Arial, Helvetica, sans-serif;
	color: #FFFFFF;
}
#contact-harry input {
	height: 18px;
	width: 450px;
	margin-bottom: 15px;
}
#contact-harry textarea {
	width: 450px;
	height: 70px;
}
#harry-web #links-harryweb {
	background: url(../plaatjes/content-links.jpg) no-repeat;
}
#links-harryweb img {
	border-style: none;
}
#harry-web img {
	border-style: none;
}


/*  ---------------------------------------------------------------------------------  */

/*  ============== opmaak van de links  =============================================  */

#links-harryweb ul {
	margin: 36px 0px 0px;
	padding: 0px;
	list-style: none;
}
#links-harryweb ul a {
	height: 54px;
	width: 190px;
	display: block;
	color: #5b5b5b;
	text-decoration: none;
	margin-bottom: 11px;
	padding: 5px;
}
#links-harryweb ul a:hover {
	border-top: 3px solid #d57e1c;
	border-right: 3px solid #d57e1c;
	border-bottom: 2px solid #d57e1c;
	border-left: 3px solid #d57e1c;
	width: 183px;
	height: 52px;
	margin-left: -3px;
	margin-top: -3px;
}
#links-harryweb ul#links-right {
	float: left;
	margin-left: 44px;
}
#links-harryweb ul#links-left {
	float: left;
	margin-left: 56px;
}
/*  -------------------------------------------------------------------------------  */
p.SlidingPanelsCurrentPanel {
	padding-top: 10px;
	padding-left: 15px;
	margin-bottom: 0px;
}