﻿/* Displaying data

2020-01-03 08:26

Index:
01	general items
03	simple text panel			wto_detail_inc_05.php		wpoint_detail_inc_07.php
05	message panel				wmessage_detail_inc_06.php
13	panels: WT, WP, WU, WL		wto_detail_inc_02.php		wpoint_detail_inc_02.php 	wuser_detail_inc_02.php	wlocate_detail_inc_02.php
15	linked WT panel				wto_detail_inc_04.php
16	icons - waving etc.			wto_detail_inc_03.php		wpoint_detail_inc_03.php	wuser_detail_inc_07.php
17	panels: Wweb				wweb_detail_inc_02.php
18	panels: Wimage				wimage_detail_inc_06.php
19	linked WP panel				wpoint_detail_inc_10.php
*/

/*	panels
	wto_detail_inc_02.php
	wpoint_detail_inc_02.php*/
.content01 {	/*	box shadow	*/
 	/*box-shadow: 8px 8px 4px grey; /*This is used for box-shadow*/
}

/*
.content01 {	/*	box shadow	
	position: relative;
	width: 999px;
	left: 0px;
	border: 0px solid #73AD21;
	margin-top: 16px;
	/*border-top: 1px solid grey;
	border-left: 1px solid grey;
	border-right: 1px solid white;
	border-bottom: 1px solid white;
 	box-shadow: 8px 8px 4px grey; /*This is used for box-shadow
	overflow: visible;
	/*border: 2px solid red;			/* temp guide to see borders 
}
*/

/* displaying large icons - image: */
.content0101 {	/*large data container*/
	position: relative;
    top: 0px;
    left: 0px;
    width: 995px;
	padding-left: 4px;
    border: 0px solid #73AD21;
	overflow: visible;		/*---------------------------------------------changed from 'hidden' to 'visible' to allow drop-downs to be visible*/
}
/*	panels
	wto_detail_inc_02.php
	wpoint_detail_inc_02.php*/
.content0102 {
    /*position: absolute;*/
    top: 0px;
    left: 0px;
    width: 965px;
    /*height: 650px;*/
	padding: 8px;
	padding-left: 16px;
	margin-top: 24px;
    border: 0px solid #73AD21;
	border-right: 1px solid white;
	border-bottom: 1px solid white;
	overflow: visible;
	box-shadow: 8px 8px 4px grey; /*This is used for box-shadow*/
}
/*
.content0102a {	/*big image and video*/
    /*position: absolute;*/
	/*margin-top: 16px;
	margin-left: 12px;*/
/*	padding: 20px;
    border: 0px solid #73AD21;
	/*border-right: 1px solid white;*/
/*	overflow: visible;
/*}
*/
.content0102aa {	/*this nudges/ shunts the first wp detail up so it touches the large image*/
	margin-top: -30px;
}

.content0102ab {	/*this nudges/ shunts the text detail up so it touches the wt information*/
	margin-top: -5px;
}

.content0102ac {	/*this nudges/ shunts the text detail up so it touches the wt information*/
	margin-top: -20px;
}

.content0102ad {	/*this nudges/ shunts the first wp detail up so it touches the large image*/
	margin-top: -40px;
}

.content0102b {	/*small data container - this allows drop-down lists (of wto) to be displayed when icon is clicked*/
    /*position: absolute;*/
    top: 0px;
    left: 0px;
    width: 975px;
    /*height: 650px;*/
	padding: 8px;
	padding-left: 16px;
	margin-top: 24px;
    border: 0px solid #73AD21;
}

.content0102c {	/*Linked WT data container*/
    border: 0px solid #73AD21
}

/* displaying small icons - waving icon: */
.content0103 {
    position: absolute;
    top: 665px;
    left: 315px;
    width: 64px;
    height: 64px;
    border: 0px solid #73AD21;
}

/* displaying small icons - follow icon: */
.content0103b {
    position: absolute;
    top: 745px;
    left: 315px;
    width: 64px;
    height: 64px;
    border: 0px solid #73AD21;
}

/* displaying small icons - waylink icon: */
.content0103c {
    position: absolute;
    top: 817px;
    left: 315px;
    width: 64px;
    height: 60px;
    border: 0px solid #73AD21;
}

/* displaying large icons - Author icon: */
.content0104 {
    position: absolute;
    top: 665px;
    left: 390px;
    width: 100px;
    height: 100px;
    border: 0px solid #73AD21;
}
/* displaying large icons - Author name: */
.content0105 {
    position: absolute;
    top: 665px;
	left: 500px;
	width: 410px;
    height: 42px;
    border: 0px solid #73AD21;
	overflow: hidden;
}
/* displaying large icons - Title: */
.content0106 {
    position: absolute;
    top: 730px;
	left: 500px;
	width: 420px;
	height: 43px;
	padding-left: 5px;
    border: 0px solid #73AD21;
	overflow: hidden;
}
/* displaying large icons - Description: */
.content0107 {
    position: absolute;
    top: 780px;
    left: 390px;
    width: 550px;
    height: 90px;
    border: 0px solid #73AD21;
	overflow: hidden;
}
/* displaying large icons - alert: */
.content0108 {
    position: absolute;
    top: 665px;
    right: 5px;
    width: 64px;
    height: 64px;
    border: 0px solid #73AD21;
}
/* displaying large icons - Text: */
.content0109 {
    position: absolute;
    top: 880px;
    left: 75px;
    width: 900px;
    height: 90px;
    border: 0px solid #73AD21;
}
/* displaying large icons - mini alert: */
.content0110 {
    position: absolute;
    top: 745px;
    right: 5px;
    width: 32px;
    height: 128px;
    border: 0px solid #73AD21;
}

/* displaying large icons - mini alert: */
.content0111 {
    position: absolute;
    top: 750px;
    right: 5px;
    width: 32px;
    height: 128px;
    border: 0px solid #73AD21;
}

/* displaying data - small icons: */
#content02 {
    position: relative;
    top: 0px;
	width: 995px;
    height: 222px;
	left: 0px;
    border: 0px solid #73AD21;
/* 	box-shadow: 8px 8px 4px grey; This can be used for box-shadow*/
}
/* displaying small icons - the indivudal point background: */
.content0201 {
    position: absolute;
    width: 985px;
    height: 204px;
	left: -10px;
	border: 0px solid #73AD21;
 	/*box-shadow: 8px 8px 4px grey; /*This can be used for box-shadow*/
}
/* displaying small icons - image: */
.content0202 {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 300px;
    height: 200px;
    border: 0px solid black;
}
	
/* displaying small icons - waving icon: */
.content0203 {
    position: absolute;
    top: 0px;
    left: 315px;
    width: 64px;
    height: 64px;
    border: 0px solid #73AD21;
}

/* displaying small icons - follow icon: */
.content0203b {
    position: absolute;
    top: 70px;
    left: 315px;
    width: 64px;
    height: 64px;
    border: 0px solid #73AD21;
}

/* displaying small icons - waylink icon: */
.content0203c {
    position: absolute;
    top: 140px;
    left: 315px;
    width: 64px;
    height: 60px;
    border: 0px solid #73AD21;
}

/* displaying small icons - Author icon: */
.content0204 {
    position: absolute;
    top: 0px;
    left: 390px;
    width: 100px;
    height: 100px;
    border: 0px solid #73AD21;
}
/* displaying small icons - Author name: */
.content0205 {
    position: absolute;
    top: 0px;
    left: 500px;
    width: 420px;
    height: 43px;
    border: 0px solid #73AD21;
	overflow: hidden;
}
/* displaying small icons - Title: */
.content0206 {
    position: absolute;
    top: 65px;
    left: 500px;
    width: 435px;
	height: 43px;
    border: 0px solid #73AD21;
	overflow: hidden;
}
/* displaying small icons - Description: */
.content0207 {
    position: absolute;
    top: 115px;
    left: 390px;
    width: 480px;
    height: 90px;
    border: 0px solid #73AD21;
	overflow: hidden;
}
/* displaying small icons - alert: */
.content0208 {
    position: absolute;
    top: 0px;
    right: 5px;
    width: 64px;
    height: 64px;
    border: 0px solid #73AD21;
}
/* displaying small icons - Alert WP linked to other WT: */
.content0209 {
    position: absolute;
    top: 50px;
    right: -10px;
    width: 130px;
    height: 30px;
    border: 0px solid #73AD21;
}
/* displaying large icons - mini alert: */
.content0210 {
    position: absolute;
    top: 130px;
    right: -4px;
    width: 82px;
    height: 82px;
    border: 0px solid #73AD21;
}

/* displaying large icons - Text for a WP: */
#content03 {
    position: relative;
	background-color: #c5cdd3;
	padding: 8px;
	margin: 0px;
	margin-top: 0px;
	margin-left: -4px;
	margin-bottom: 0px;
	line-height:1.25em;
    border: 0px solid #73AD21;
 	/*box-shadow: 8px 8px 4px grey; /*This can be used for box-shadow*/
}

/* Text for a WT and WP: 
	wto_detail_inc_05.php 
	wpoint_detail_inc_07.php	*/
#content03b {
    /*position: relative;*/
	width: 970px;
	margin-top: 0px;
	margin-left: 0px;
	/*border: 2px solid red;			/* temp guide to see borders */
}

/* displaying large icons - Text for a WM: */
#content03c {
    position: relative;
	width: 100%;
	background-color: #3c536b;
	color:	white;
	padding: 8px;
	margin: 0px;
	margin-top: -6px;
	margin-left: -6px;
 	/*box-shadow: 8px 8px 4px grey; /*This can be used for box-shadow*/
}

/* displaying messages - (see messages page): */
#content04 {
    position: relative;
    width: 99%;
    height: 70px;
	top: -16px;
	left: 0px;
	border: 0px solid white;
	/* 	box-shadow: 8px 8px 4px grey; This can be used for box-shadow*/
}

/* displaying messages - background (see messages page): */
.content0401 {
    /*position: absolute;*/
    width: 985px;
    height: 80px;
	left: -7px;
 	/*box-shadow: 8px 8px 4px grey; /*This can be used for box-shadow*/
}
/* displaying messages - (see messages page): waving icon*/
.content0402 {
    /*position: absolute;*/
    top: -16px;
    left: 20px;
    width: 100px;
    height: 40px;
    border: 0px solid #73AD21;
}
/* displaying large icons - message sender: */
.content0403 {
    /*position: absolute;*/
    top: -16px;
    left: 85px;
    width: 850px;
    height: 40px;
    border: 0px solid #73AD21;
}

/* displaying messages - (see messages page): 
wmessage_detail_inc_06.php*/

#content05 {
	position: relative;
    width: 905px;
    height: 160px;
	left: 0px;
	/*border: 2px solid red;			/* temp guide to see panel borders */	
}

#content0501 {								/*waving icon*/
    position:		absolute;
	top:			10px;
    left:			0px;
    width:			64px;
    height:			64px;
	padding:		0px;
	/*padding-left:	16px;*/
	/*margin-top:	24px;*/
	overflow:		hidden;
	/*border:			2px solid red;		/* temp guide to see borders */
}

#content0502 {								/*sender icon*/
    position:		absolute;
	top:			10px;
    left:			80px;
    width:			100px;
    height:			100px;
	width:			100px; 
	border-radius:	50%; 
	object-fit:		cover; 
	border:			4px solid black;
	/*padding:		8px;
	padding-left:	16px;
	/*margin-top:	24px;*/
	overflow:		hidden;
	/*border:		2px solid red;			/* temp guide to see borders */
}



#content0503 {								/*sender info*/
    position:		absolute;
    top:			0px;
    left:			200px;
    width:			600px;
	overflow:		hidden;
	/*border: 		2px solid red;			/* temp guide to see borders */
}

#content0504 {								/*date info*/
    position:		absolute;
    top:			110px;
    left:			200px;
    width:			700px;
	overflow:		hidden;
	/*border: 		2px solid red;			/* temp guide to see borders */
}

#content0505 {								/*text*/
    position:		absolute;
    top:			130px;
    left:			0px;
    width:			950px;
	border:		2px solid red;			/* temp guide to see borders */
}

#content0506 {								/*waving icon for revealing info*/
    position:		absolute;
    top:			0px;
    right:			0px;
    width:			68px;
	height:			68;
	/*border:		2px solid red;			/* temp guide to see borders */
}

#content0507 {								/*waving icon*/
    position:		absolute;
	top:			0px;
    left:			0px;
    width:			64px;
    height:			64px;
	padding:		0px;
	overflow:		hidden;
	/*border:			2px solid red;		/* temp guide to see borders */
}


#content0508 {								/*waving icon*/
    position:		absolute;
	top:			90px;
    left:			0px;
    width:			64px;
    height:			64px;
	padding:		0px;
	overflow:		hidden;
	/*border:			2px solid red;		/* temp guide to see borders */
}

/* displaying users: */
#content06 {
    position:		relative;
    width:			99%;
    height:			258px;
	left:			0px;
	border:			8px solid white;
	border:			2px solid red;			/* temp guide to see borders */
	/*sbox-shadow:	8px 8px 4px grey; This can be used for box-shadow*/
}

/* displaying small icons - the indivudal point background: */
.content0601 {
    position: absolute;
    width: 100%;
    height: 240px;
	left: -14px;
	/*	border-top: 0px;*/
	/*box-shadow: 8px 8px 4px grey; /*This can be used for box-shadow */
	/*border: 2px solid red;			/* temp guide to see borders */
} 
/* displaying small icons - waylink, waving, follow icons: */
#content0603 {
    position: absolute;
    top: 0px;
    left: 8px;
    width: 50px;
    height: 165px;
	border: 2px solid red;			/*temp guide to see borders*/
}
/* displaying small icons - Author icon: */
#content0604 {
    position: absolute;
    top: 0px;
    left: 80px;
    width: 100px;
    height: 100px;
	border: 2px solid red;			/* temp guide to see borders */
}
/* displaying small icons - Author name: */
#content0605 {
    position: absolute;
    top: 0px;
    left: 200px;
    width: 420px;
    height: 40px;
	border: 2px solid red;			/* temp guide to see borders */
}
/* displaying small icons - Description: */
#content0606 {
    position: absolute;
    top: 45px;
    left: 200px;
    width: 625px;
	height: 90px;
    border: 0px solid #73AD21;
	overflow: hidden;
	border: 2px solid red;			/* temp guide to see borders */
}

/* displaying small icons - profile results: */
#content0607 {
    position: absolute;
    top: 140px;
    left: -8px;
    width: 102%;
	height: 110px;
    border: 0px solid #73AD21;
	overflow: hidden;
	border: 2px solid red;			/* temp guide to see borders */
}

/* displaying small icons - alert: */
#content0608 {
    position: absolute;
    top: 0px;
    right: 5px;
    width: 64px;
    height: 64px;
    border: 0px solid #73AD21;
	border: 2px solid red;			/* temp guide to see borders */
}



/* displaying images: */
#content07 {
    position: relative;
    width: 99%;
    height: 212px;
	left: 0px;
	margin-top: 24px;
	/*margin-bottom: 16px;*/
	border: 8px solid white;
/* 	box-shadow: 8px 8px 4px grey; This can be used for box-shadow*/
}

/* displaying small icons - the indivudal point background: */
.content0701 {
    position: absolute;
    width: 100%;
    height: 214px;
	left: -14px;
 	box-shadow: 8px 8px 4px grey; /*This can be used for box-shadow*/
} 
/* displaying small icons - image: */
#content0702 {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 300px;
    height: 200px;
    border: 0px solid #73AD21;
}
/* displaying small icons - waylink, waving, follow icons: */
#content0703 {
    position: absolute;
    top: 0px;
    left: 315px;
    width: 50px;
    height: 205px;
    border: 0px solid #73AD21;
}
/* displaying small icons - Author icon: */
#content0704 {
    position: absolute;
    top: 0px;
    left: 375px;
    width: 100px;
    height: 100px;
    border: 0px solid #73AD21;
}
/* displaying small icons - Author name: */
#content0705 {
    position: absolute;
    top: 0px;
    left: 480px;
    width: 420px;
    height: 40px;
    border: 0px solid #73AD21;
}
/* displaying small icons - Title: */
#content0706 {
    position: absolute;
    top: 65px;
    left: 480px;
    width: 455px;
	height: 43px;
    border: 0px solid #73AD21;
	overflow: hidden;
}
/* displaying small icons - Description: */
#content0707 {
    position: absolute;
    top: 115px;
    left: 375px;
    width: 560px;
    height: 90px;
	overflow: hidden;
	/*border: 2px solid red;			/* temp guide to see borders */
}
/* displaying small icons - tick box: */
#content0707a {
    position: absolute;
    top: 115px;
    left: 375px;
	/*border: 2px solid red;			/* temp guide to see borders */
}
/* displaying small icons - alert: */
#content0708 {
    position: absolute;
    top: 0px;
    right: 5px;
    width: 64px;
    height: 64px;
    border: 0px solid #73AD21;
}
/* displaying small icons - Alert WP linked to other WT: */
#content0709 {
    position: absolute;
    top: 50px;
    right: -10px;
    width: 130px;
    height: 30px;
    border: 0px solid #73AD21;
}
/* displaying large icons - mini alert: */
#content0710 {
    position: absolute;
    top: 80px;
    right: 5px;
    width: 32px;
    height: 128px;
    border: 0px solid #73AD21;
}

/* displaying website icons: */
#content08 {
    position: relative;
    width: 99%;
    height: 150px;
	left: 0px;
	margin-top: 8px;
	border: 8px solid white;
/* 	box-shadow: 8px 8px 4px grey; This can be used for box-shadow*/
}
/* displaying small icons - the indivudal point background: */
.content0801 {
    position: absolute;
    width: 100%;
    height: 140px;
	left: -14px;
//	border-top: 0px;
 	box-shadow: 8px 8px 4px grey; /*This can be used for box-shadow*/
	/* box-shadow: 6px 6px 4px grey; This can be used for box-shadow */
} 
/* displaying small icons - waylink, waving, follow icons: */
.content0803 {
    position: absolute;
    top: 0px;
    left: 8px;
    width: 50px;
    height: 155px;
    border: 0px solid #73AD21;
}
/* displaying small icons - icon: */
.content0804 {
    position: absolute;
    top: 0px;
    left: 80px;
    border: 0px solid #73AD21;
}
/* displaying small icons - Title: */
.content0806 {
    position: absolute;
    top: 0px;
    left: 270px;
    width: 600px;
	height: 90px;
    border: 0px solid #73AD21;
	overflow: hidden;
}
/* displaying small icons - alert: */
.content0808 {
    position: absolute;
    top: 0px;
    right: 5px;
    width: 64px;
    height: 64px;
    border: 0px solid #73AD21;
}

/* displaying data - wt linked to wp: */
#content09 {
    position: relative;
    width: 99%;
    height: 212px;
	left: 0px;
	border: 8px solid white;
/* 	box-shadow: 8px 8px 4px grey; This can be used for box-shadow*/
}
/* displaying small icons - the indivudal point background: */
.content0901 {
    position: absolute;
    width: 100%;
    height: 214px;
	left: -14px;
 	box-shadow: 8px 8px 4px grey; /*This can be used for box-shadow*/
} 
/* displaying small icons - image: */
.content0902 {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 300px;
    height: 200px;
    border: 0px solid #73AD21;
}
/* displaying small icons - waylink, waving, follow icons: */
.content0903 {
    position: absolute;
    top: 0px;
    left: 315px;
    width: 50px;
    height: 205px;
    border: 2px solid #73AD21;
}
/* displaying small icons - Author icon: */
.content0904 {
    position: absolute;
    top: 0px;
    left: 375px;
    width: 100px;
    height: 100px;
    border: 2px solid #73AD21;
}
/* displaying small icons - Author name: */
.content0905 {
    position: absolute;
    top: 0px;
    left: 480px;
    width: 420px;
    height: 40px;
    border: 2px solid #73AD21;
}
/* displaying small icons - Title: */
.content0906 {
    position: absolute;
    top: 65px;
    left: 480px;
    width: 455px;
	height: 43px;
    border: 2px solid #73AD21;
	overflow: hidden;
}
/* displaying small icons - Description: */
.content0907 {
    position: absolute;
    top: 115px;
    left: 375px;
    width: 560px;
    height: 90px;
    border: 2px solid #73AD21;
	overflow: hidden;
}

/* displaying data - small wayto mini-linked to a Waypoint: */
#content10 {
    position: relative;
    width: 99%;
    height: 162px;
	left: 0px;
	border: 0px solid white;
	margin-top: -8px;
	margin-bottom: 64px;
/* 	box-shadow: 8px 8px 4px grey; This can be used for box-shadow*/
}
/* displaying small icons - the indivudal point background: */
.content1001 {
    position: absolute;
	top: 8px;
    width: 930px;
    height: 184px;
	left: 50px;
	border-bottom: 1px solid white;
	border-right: 1px solid white;
 	box-shadow: 8px 8px 4px grey; /*This can be used for box-shadow*/
} 
/* displaying small icons - image: */
.content1002 {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 150px;
    height: 100px;
    border: 0px solid #73AD21;
}
/* displaying small icons - waylink, waving, follow icons: */
.content1003 {
    position: absolute;
    top: 0px;
    left: 240px;
    width: 50px;
    height: 155px;
    border: 0px solid #73AD21;
}
/* displaying small icons - Author icon: */
.content1004 {
    position: absolute;
    top: 0px;
    left: 305px;
    width: 100px;
    height: 100px;
    border: 0px solid #73AD21;
}
/* displaying small icons - Author name: */
.content1005 {
    position: absolute;
    top: 0px;
    left: 415px;
    width: 420px;
    height: 40px;
    border: 0px solid #73AD21;
}
/* displaying small icons - Title: */
.content1006 {
    position: absolute;
    top: 65px;
    left: 415px;
    width: 455px;
	height: 43px;
    border: 0px solid #73AD21;
	overflow: hidden;
}
/* displaying small icons - Description: */
.content1007 {
    position: absolute;
    top: 115px;
    left: 305px;
    width: 600px;
    height: 50px;
    border: 0px solid #73AD21;
	overflow: hidden;
}
/* displaying large icons - alert: */
.content1008 {
    position: absolute;
    top: 0px;
    right: 16px;
    width: 64px;
    height: 64px;
    border: 0px solid #73AD21;
}

/* displaying data - Locate: */
#content11 {
    position: relative;
    width: 99%;
    height: 760px; /*adjust this*/
	left: 0px;
	border-top: 8px solid white;
	border-left: 4px solid white;
	overflow: visible;
}
/* displaying large icons - the first point background: */
.content1101 {
    position: absolute;
    width: 1000px;
    height: 750px;
	left: -10px;
	border: 0px solid #73AD21;
 	box-shadow: 8px 8px 4px grey; /*This can be used for box-shadow*/
}
/* displaying large icons - map: */
.content1102 {
    position: absolute;
    top: 12px;
    left: 12px;
    width: 980px;
    height: 640px;
    border: 0px solid #73AD21;
	overflow: hidden;
}
/* displaying large icons - Locate title: */
.content1103 {
    position: absolute;
    top: 665px;
    left: 8px;
    width: 900px;
    height: 60px;
    border: 0px solid #73AD21;
}

/* This is form the Homepage.  Not developed yet: */
#content12 {
    position: relative;
    width: 99%;
    height: 895px; /*adjust this*/
	left: 0px;
	border-top: 8px solid white;
	border-left: 4px solid white;
	overflow: visible;
}
/* displaying large icons - the first point background: */
.content1201 {
    position: absolute;
    width: 100%;
    height: 885px;
	left: -10px;
 	box-shadow: 8px 8px 4px grey; /*This can be used for box-shadow*/
} 
/* displaying large icons - image: */
.content1202 {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 995px;
    height: 650px;
    border: 0px solid #73AD21;
	overflow: hidden;
}
/* displaying large icons - waylink, waving, follow icons: */
.content1203 {
    position: absolute;
    top: 665px;
    left: 315px;
    width: 50px;
    height: 205px;
    border: 0px solid #73AD21;
}
/* displaying large icons - Author icon: */
.content1204 {
    position: absolute;
    top: 665px;
    left: 375px;
    width: 100px;
    height: 100px;
    border: 0px solid #73AD21;
}
/* displaying large icons - Author name: */
.content1205 {
    position: absolute;
    top: 665px;
    left: 480px;
    width: 420px;
    height: 40px;
    border: 0px solid #73AD21;
}
/* displaying large icons - Title: */
.content1206 {
    position: absolute;
    top: 730px;
    left: 480px;
    width: 450px;
	height: 43px;
	padding-left: 5px;
    border: 0px solid #73AD21;
	overflow: hidden;
}
/* displaying large icons - Description: */
.content1207 {
    position: absolute;
    top: 780px;
    left: 375px;
    width: 560px;
    height: 90px;
    border: 0px solid #73AD21;
	overflow: hidden;
}
/* displaying large icons - alert: */
.content1208 {
    position: absolute;
    top: 665px;
    right: 5px;
    width: 64px;
    height: 64px;
    border: 0px solid #73AD21;
}
/* displaying large icons - Text: */
.content1209 {
    position: absolute;
    top: 880px;
    left: 75px;
    width: 900px;
    height: 90px;
    border: 0px solid #73AD21;
}
/* displaying large icons - mini alert: */
.content1210 {
    position: absolute;
    top: 745px;
    right: 5px;
    width: 32px;
    height: 128px;
    border: 0px solid #73AD21;
}

/* displaying data - panel container: 
	wto_detail_inc_02.php
	wpoint_detail_inc_02.php*/

#content1301 {
    position: relative;
    width: 955px;
    height: 222px;
	left: 0px;
	/*border: 8px solid white;*/
	/*border: 2px solid red;			/* temp guide to see borders */
}

/* displaying small icons - WT image: */
#content1302 {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 300px;
    height: 200px;
    border: 2px solid black;
}

/* displaying small icons - WL: */
#content1302a {
    position: relative;
    width: 945px;
    height: 100px;
	left: 0px;
	/*border: 2px solid red;			/* temp guide to see borders */
}

/* displaying small icons - Wweb image: */
#content1302b {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 300px;
    height: 200px;
    /*border: 2px solid black;*/
}

/* displaying small icons - panel data icon: */
#content1303a {
    position: absolute;
    top: 120px;
    left: 270px;
    width: 82px;
    height: 82px;
	/*border: 2px solid red;			/* temp guide to see borders*/
}

/* displaying small icons - wusr data icon: */
#content1303b {
    position: absolute;
    top: 125px;
    left: 235px;
    width: 64px;
    height: 60px;
	/*border: 2px solid red;			/* temp guide to see borders*/
}

/* displaying small icons - panel data icon: */
#content1303c {
    position: absolute;
    top: 0px;
    left: 325px;
    width: 82px;
    height: 82px;
	/*border: 2px solid red;			/* temp guide to see borders*/
}

/* displaying small icons - panel data icon - WP: */
#content1303d {
    position: absolute;
    top: 125px;
    left: 235px;
    width: 82px;
    height: 82px;
	/*border: 2px solid red;			/* temp guide to see borders*/
}

/* displaying small icons - panel data icon: */
#content1303e {
    position: absolute;
    top: 0px;
    right: 8px;
    width: 64px;
    height: 64px;
	/*border: 2px solid red;			/* temp guide to see borders*/
}

/* displaying small icons - panel data icon: */
#content1303f {
    position: absolute;
    top: 0px;
    left: 310px;
    width: 64px;
    height: 64px;
	/*border: 2px solid red;			/* temp guide to see borders*/
}

/* displaying small icons - panel data icon: */
#content1303g {
    position: absolute;
    top: 120px;
    left: 325px;
    width: 82px;
    height: 82px;
	/*border: 2px solid red;			/* temp guide to see borders*/
}

/* displaying small icons - panel data icon: */
#content1303h {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 82px;
    height: 82px;
	/*border: 2px solid red;			/* temp guide to see borders*/
}

/* displaying small icons - Author icon for WT: */
#content1304a {
    position: absolute;
    top: 0px;
    left: 330px;
    width: 110px;
    height: 110px;
	/*border: 2px solid red;			/* temp guide to see borders*/
}

/* displaying small icons - Author icon for WP: */
#content1304b {
    position: absolute;
    top: 0px;
    left: 225px;
    width: 100px;
    height: 100px;
	/*border: 2px solid red;			/* temp guide to see borders*/
}

/* displaying small icons - Author icon for WU: */
#content1304c {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 200px;
    height: 200px;
	/*border: 2px solid red;			/* temp guide to see borders*/
}

/* displaying small icons - Author icon for WP: */
#content1304d {
    position: absolute;
    top: 0px;
    left: 270px;
    width: 100px;
    height: 100px;
	/*border: 2px solid red;			/* temp guide to see borders*/
}

/* displaying small icons - Author name: */
/*#content1305 {
    position: absolute;
    top: 0px;
    left: 500px;
    width: 420px;
    height: 43px;
	overflow: hidden;
	/*border: 2px solid red;			/* temp guide to see borders*/
/*}*/

/* displaying small icons - Author name - WT: */
#content1305a {
    position: absolute;
    top: 0px;
    left: 270px;
    width: 420px;
    height: 50px;
	overflow: hidden;
	/*border: 2px solid red;			/* temp guide to see borders*/
}

/* displaying small icons - Author name - WP: */
#content1305b {
    position: absolute;
    top: 0px;
    left: 355px;
    width: 500px;
    height: 50px;
    border: 0px solid #73AD21;
	overflow: hidden;
	/*border: 2px solid red;			/* temp guide to see borders*/
}

/* displaying small icons - Author name - WU: */
#content1305c {
    position: absolute;
    top: 0px;
    left: 235px;
    width: 500px;
    height: 50px;
    border: 0px solid #73AD21;
	overflow: hidden;
	/*border: 2px solid red;			/* temp guide to see borders*/
}

/* displaying small icons - Author name - Wcom: */
#content1305d {
    position: absolute;
    top: 0px;
    left: 390px;
    width: 500px;
    height: 50px;
    border: 0px solid #73AD21;
	overflow: hidden;
	/*border: 2px solid red;			/* temp guide to see borders*/
}

/* displaying small icons - Author name - WT: */
#content1305e {
    position: absolute;
    top: 0px;
    left: 325px;
    width: 420px;
    height: 50px;
	overflow: hidden;
	/*border: 2px solid red;			/* temp guide to see borders*/
}

/* displaying small icons - Author name - WT: */
#content1305f {
    position: absolute;
    top: 0px;
    left: 460px;
    width: 420px;
    height: 50px;
	overflow: hidden;
	/*border: 2px solid red;			/* temp guide to see borders*/
}

/* displaying small icons - Title - WT: */
#content1306a {
    position: absolute;
    top: 65px;
    left: 460px;
    width: 470px;
	height: 50px;
	overflow: hidden;
	/*border: 2px solid red;			/* temp guide to see borders*/
}

/* displaying small icons - Title - WP: */
#content1306b {
    position: absolute;
    top: 65px;
    left: 355px;
    width: 515px;
	height: 50px;
	overflow: hidden;
	/*border: 2px solid red;			/* temp guide to see borders*/
}

/* displaying small icons - Description - WSc: */
#content1306c {
    position: absolute;
    top: 55px;
	left: 375px;
    width: 500px;
	height: 143px;
	overflow: hidden;
	/*border: 2px solid red;			/* temp guide to see borders*/
}

/* displaying small icons - Title - Wweb: */
#content1306d {
    position: absolute;
    top: 0px;
    left: 435px;
    width: 430px;
	height: 143px;
	overflow: hidden;
	/*border: 2px solid red;			/* temp guide to see borders*/
}

/* displaying small icons - Title - WT: */
#content1306e {
    position: absolute;
    top: 65px;
    left: 390px;
    width: 470px;
	height: 50px;
	overflow: hidden;
	/*border: 2px solid red;			/* temp guide to see borders*/
}

/* displaying small icons - Description - WSc: */
#content1306f {
    position: absolute;
    top: 55px;
	left: 425px;
    width: 500px;
	height: 143px;
	overflow: hidden;
	/*border: 2px solid red;			/* temp guide to see borders*/
}

/* displaying small icons - Description - WT: */
#content1307a {
    position: absolute;
    top: 115px;
    left: 460px;
    width: 435px;
    height: 90px;
	overflow: hidden;
	/*border: 2px solid red;			/* temp guide to see borders*/
}

/* displaying small icons - Description - WP: */
#content1307b {
    position: absolute;
    top: 125px;
    left: 355px;
    width: 515px;
    height: 90px;
	overflow: hidden;
	/*border: 2px solid red;			/* temp guide to see borders*/
}

/* displaying small icons - Description - WU: */
#content1307c {
    position: absolute;
    top: 115px;
    left: 355px;
    width: 515px;
    height: 90px;
	overflow: hidden;
	/*border: 2px solid red;			/* temp guide to see borders*/
}

/* displaying small icons - Description - WU: */
#content1307d {
    position: absolute;
    top: 115px;
    left: 390px;
    width: 470px;
    height: 90px;
	overflow: hidden;
	/*border: 2px solid red;			/* temp guide to see borders*/
}

/* displaying small icons - alert: */
/*.content1308 {
    position: absolute;
    top: 0px;
    right: 5px;
    width: 64px;
    height: 64px;
    border: 0px solid #73AD21;
}*/
/* displaying small icons - Alert WP linked to other WT: */
/*.content1309 {
    position: absolute;
    top: 50px;
    right: -10px;
    width: 130px;
    height: 30px;
    border: 0px solid #73AD21;
}*/

/* displaying large icons - mini alert: */
#content1310 {
    position: absolute;
    top: 130px;
    right: 8px;
    width: 82px;
    height: 82px;
	/*border: 2px solid red;			/* temp guide to see borders*/
}


/* displaying large icons - mini alert: */
#content1311 {
    position: absolute;
    top: 0px;
    right: 8px;
    width: 82px;
    height: 82px;
	/*border: 2px solid red;			/* temp guide to see borders*/
}

/* displaying large icons - mini alert: */
#content1311 {
    position: absolute;
    top: 0px;
    right: 8px;
    width: 82px;
    height: 82px;
	/*border: 2px solid red;			/* temp guide to see borders*/
}
/* displaying users sharing notice: */

#content14 {
    position: relative;
    width: 99%;
    height: 60px;
	top: -20px;
	left: 0px;
	border: 8px solid white;
	border-top: grey;
	/* 	box-shadow: 8px 8px 4px grey; This can be used for box-shadow*/
}

/* displaying users sharing notice - the indivudal point background: */
.content1401 {
    position: absolute;
    width: 100%;
    height: 50px;
	top: 0px;
	left: -14px;
//	border-top: 0px;
	box-shadow: 6px 6px 4px grey; /*This can be used for box-shadow */
} 
/* displaying small icons - Sharing notice: */
.content1402 {
    position: relative;
    top: 0px;
    left: 200px;
    width: 655px;
	height: 50px;
    border: 0px solid #73AD21;
	overflow: hidden;
}

/* displaying data - linked WT */
/*#content15 {
    position: relative;
    width: 905px;
    height: 185px;
	border-right: 1px solid white;
	border-bottom: 1px solid white;
	/*border: 2px solid #73AD21;*/
/*	box-shadow: 8px 8px 4px grey; /*This can be used for box-shadow*/
/*}*/
/* displaying data - large icons: */
/* displaying data - small icons: */


/* displaying data - linked WT panels positions, colours, borders, box-shadow: 
	wto_detail_inc_04.php*/

.content15 {
	margin-top: 16px;				/* spaces-out the WT panels*/
	margin-left: 70px;				/* sets-out left side of panels*/
	background: #7a8a9a;			/* colour of the panel background-attachment*/
	color: white;					/* text color*/
	border-right: 1px solid white;	/* white right edge*/
	border-bottom: 1px solid white;	/* white bottom edge*/
 	box-shadow: 8px 8px 4px grey; 	/* box-shadow of the panels*/
	/*border: 2px solid red;			/* htemp guide to see panel borders */
}

/* data inside the panels*/
#content1501 {
    position: relative;
    height: 185px;					/* height of panels*/
	/*border: 2px solid red;			/* temp guide to see panel borders */
}

/* displaying small icons - image: */
#content1502 {
    position: absolute;
    top: 10px;
    left: 10px;
    width: 240px;
    height: 160px;
    border: 2px solid black;
}

/* displaying small icons - Author icon: */
#content1504 {
    position: absolute;
    top: 10px;
    left: 265px;
    width: 100px;
    height: 100px;
	/*border: 2px solid red;			/* temp guide to see borders */
}
/* displaying small icons - Author name: */
#content1505 {
    position: absolute;
    top: 0px;
    left: 380px;
    width: 525px;
    height: 43px;
	overflow: hidden;
	/*border: 2px solid red;			/* temp guide to see borders */
}
/* displaying small icons - Title: */
#content1506 {
    position: absolute;
    top: 65px;
    left: 380px;
    width: 525px;
	height: 43px;
	overflow: hidden;
	/*border: 2px solid red;			/* temp guide to see borders */
}
/* displaying small icons - Description: */
#content1507 {
    position: absolute;
    top: 135px;
    left: 265px;
    width: 640px;
    height: 50px;
	overflow: hidden;
	/*border: 2px solid red;			/* temp guide to see borders */
}


/* displaying data - icons - waving, following, waylinking: 	
	wto_detail_inc_03.php
	wpoint_detail_inc_03.php
	wuser_detail_inc_07.php	*/

#content1601 {
    position: relative;
    width: 900px;
    height: 70px;
	margin-top:	20px;
	left: 20px;
    border: 0px solid #73AD21;
	/*border: 8px solid white;*/
	/*box-shadow: 8px 8px 4px grey; This can be used for box-shadow*/
	/*border: 2px solid red;			/* temp guide to see borders */
}

/* displaying small icons - waving icon: */
#content1602 {
    position: absolute;
    top: 0px;
    left: 0px;
	/*border: 2px solid red;			/* temp guide to see borders */
}

/* displaying small icons - follow icon: */
#content1603 {
    position: absolute;
    top: 0px;
    left: 100px;
	/*border: 2px solid red;			/* temp guide to see borders */
}

/* displaying small icons - waylink icon: */
#content1604 {
    position: absolute;
    top: 0px;
    left: 200px;
	/*border: 2px solid red;			/* temp guide to see borders */
}

/* displaying small icons - clipboard icon: */
#content1605 {
    position: absolute;
    top: 0px;
    left: 300px;
	/*border: 2px solid red;			/* temp guide to see borders */
}

/* displaying small icons - connection icon: */
#content1606 {
    position: absolute;
    top: 0px;
    left: 400px;
	/*border: 2px solid red;			/* temp guide to see borders */
}

/* displaying small icons - common icon: */
#content1607 {
    position: absolute;
    top: 0px;
    left: 500px;
	/*border: 2px solid red;			/* temp guide to see borders */
}

/* Wweb panel */

.wweb_content_1701 {
    /*position: absolute;*/
    top: 				0px;
    left: 				0px;
    width: 				950px;
	padding: 			16px;
	margin-top: 		24px;
	border-right: 		2px solid #a8b4bd;
	border-bottom:		2px solid #a8b4bd;
	overflow: 			visible;
	box-shadow: 		8px 8px 4px grey; /*This is used for box-shadow*/
	/*border: 2px solid red;*/
}

#content1701 {
    position: relative;
    width: 975px;
    height: 160px;
	left: 0px;
	/*border: 2px solid red;			/* temp guide to see borders */
}

/* displaying small icons - Wweb image: */
#content1702 {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 160px;
    height: 160px;
	/*border: 2px solid red;			/* temp guide to see borders */
}

/* displaying small icons - Title - Wweb: */
#content1703 {
    position: absolute;
    top: 0px;
    left: 355px;
    width: 430px;
	height: 143px;
	overflow: hidden;
	/*border: 2px solid red;			/* temp guide to see borders*/
}

/* displaying small icons - panel data icon: */
#content1704 {
    position: absolute;
    top: 70px;
    left: 235px;
    width: 82px;
    height: 82px;
	/*border: 2px solid red;			/* temp guide to see borders*/
}

/* displaying large icons - mini alert: */
#content1705 {
    position: absolute;
    top: 70px;
    right: 8px;
    width: 82px;
    height: 82px;
	/*border: 2px solid red;			/* temp guide to see borders*/
}

/* displaying data - wimage small panel (to be used with displaying large image): 
	wimage_detail_inc_06.php*/

#content1801 {
    position: relative;
	margin-top:			16px;
    width: 955px;
    height: 115px;
	left: 0px;
	/*border: 2px solid red;			/* temp guide to see borders */
}

/* displaying small icons - WL: 
#content1802 {
    position: relative;
    width: 975px;
    height: 100px;
	left: 0px;
	border: 2px solid red;			/* temp guide to see borders 
}*/

/* displaying small icons - panel data icon: */
#content1803 {
    position: absolute;
    top: 0px;
    left: 120px;
    width: 82px;
    height: 82px;
	/*border: 2px solid red;			/* temp guide to see borders*/
}

/* displaying small icons - Author icon for WT: */
#content1804 {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100px;
    height: 100px;
	/*border: 2px solid red;			/* temp guide to see borders*/
}

/* displaying small icons - Author name - WT: */
#content1805 {
    position: absolute;
    top: 0px;
    left: 220px;
    width: 420px;
    height: 50px;
	overflow: hidden;
	/*border: 2px solid red;			/* temp guide to see borders*/
}

/* displaying small icons - Title - WT: */
#content1806 {
    position: absolute;
    top: 55px;
    left: 220px;
    width: 530px;
	height: 50px;
	overflow: hidden;
	/*border: 2px solid red;			/* temp guide to see borders*/
}

/* displaying small icons - Description - WT: */
#content1807 {
    position: absolute;
    top: 115px;
    left: 435px;
    width: 435px;
    height: 90px;
	overflow: hidden;
	/*border: 2px solid red;			/* temp guide to see borders*/
}

/* displaying large icons - mini alert: */
#content1810 {
    position: absolute;
    top: 0px;
    right: 8px;
    width: 82px;
    height: 82px;
	/*border: 2px solid red;			/* temp guide to see borders*/
}



/*19	linked WP panel				wpoint_detail_inc_10.php*/

.content19 {
	margin-top:			16px;				/* spaces-out the WT panels*/
	margin-left:		70px;				/* sets-out left side of panels*/
	background-color:	#c5cdd3;			/* colour of the panel background-attachment*/
	color:				black;					/* text color*/
	border-right:		1px solid white;	/* white right edge*/
	border-bottom:		1px solid white;	/* white bottom edge*/
 	box-shadow:			8px 8px 4px grey; 	/* box-shadow of the panels*/
	/*border: 2px solid red;			/* htemp guide to see panel borders */
}

#content1901 {
    position:	relative;
    height:		185px;					/* height of panels*/
	/*border: 2px solid red;			/* temp guide to see panel borders */
}

/* displaying small icons - image: */
#content1902 {
    position:	absolute;
    top:		10px;
    left:		10px;
    width:		240px;
    height:		160px;
}

/* displaying small icons - Author icon: */
#content1904 {
    position:	absolute;
    top:		10px;
    left:		265px;
    width:		100px;
    height:		100px;
	/*border: 2px solid red;			/* temp guide to see borders */
}
/* displaying small icons - Author name: */
#content1905 {
    position: absolute;
    top:		0px;
    left:		380px;
    width:		525px;
    height:		43px;
	overflow:	hidden;
	/*border: 2px solid red;			/* temp guide to see borders */
}
/* displaying small icons - Title: */
#content1906 {
    position:	absolute;
    top:		65px;
    left:		380px;
    width:		525px;
	height:		43px;
	overflow:	hidden;
	/*border: 2px solid red;			/* temp guide to see borders */
}
/* displaying small icons - Description: */
#content1907 {
    position:	absolute;
    top:		135px;
    left:		265px;
    width:		640px;
    height:		50px;
	overflow:	hidden;
	/*border: 2px solid red;			/* temp guide to see borders */
}


/*20	market data							wofr_01.php ('balance' section) */

.content20 {
	margin-top:			32px;				/* spaces-out the WT panels*/
	margin-left:		0px;				/* sets-out left side of panels*/
	background-color:	white;				/* colour of the panel background-attachment*/
	color:				black;				/* text color*/
	padding:			16px;				
	border-right:		1px solid white;	/* white right edge*/
	border-bottom:		1px solid white;	/* white bottom edge*/
 	box-shadow: 		8px 8px 4px grey; 	/* box-shadow of the panels*/
	border: 			2px solid black;		/* temp guide to see panel borders */
}

#content2001 {
	margin-top:			16px;				/* spaces-out the WT panels*/
	margin-left:		24px;				/* sets-out left side of panels*/
    position:			relative;
    height:				180px;					/* height of panels*/
	border: 			2px solid black;			/* temp guide to see panel borders */
}

#content2002 {							/* displaying small icons - title: */
    position:	absolute;
    top:		0px;
    left:		10px;
    width:		900px;
    height:		50px;
	font-weight: bold;
	/*border: 	2px solid red;			/* temp guide to see panel borders */
}

#content2003 {							/* displaying small icons - description: */
    position:	absolute;
    top:		60px;
    left:		10px;
    width:		900px;
    height:		50px;
	/*border: 	2px solid red;			/* temp guide to see panel borders */
}

#content2004 {							/* displaying small icons - item price: */
    position:	absolute;
    top:		120px;
    left:		10px;
    width:		350px;
    height:		50px;
	/*border: 	2px solid red;			/* temp guide to see panel borders */
}

#content2005 {							/* displaying small icons - no. of items: */
    position:	absolute;
    top:		120px;
    left:		400px;
    width:		200px;
    height:		50px;
	/*border: 	2px solid red;			/* temp guide to see panel borders */
}

#content2006 {							/* displaying small icons - total price: */
    position:	absolute;
    top:		120px;
    right:		80px;
    width:		150px;
    height:		50px;
	text-align:	right;
	/*border: 	2px solid red;			/* temp guide to see panel borders */
}

#content2007 {
	margin-top:			16px;				/* spaces-out the WT panels*/
	margin-left:		32px;				/* sets-out left side of panels*/
    position:			relative;
    height:				60px;					/* height of panels*/
	/*border: 			2px solid red;			/* temp guide to see panel borders */
}

#content2008 {							/* displaying small icons - total price: */
    position:	absolute;
    top:		0px;
    right:		10px;
    width:		150px;
    height:		50px;
	text-align:	right;
	/*border: 	2px solid red;			/* temp guide to see panel borders */
}

#content2009 {
	margin-top:			16px;				/* spaces-out the WT panels*/
	margin-left:		0px;				/* sets-out left side of panels*/
    position:			relative;
    height:				60px;					/* height of panels*/
	/*border: 			2px solid red;			/* temp guide to see panel borders */
}

#content2010 {							/* displaying small icons - grand total price: */
    position:	absolute;
    top:		0px;
    right:		0px;
    width:		150px;
    height:		50px;
	text-align:	right;
	/*border: 	2px solid red;			/* temp guide to see panel borders */
}

