<!DOCTYPE html>

<html>

<head>

<title>Search doctor</title>

<link rel="stylesheet" type="text/css" href="css/bootstrap.css">

  <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">

  <link rel="stylesheet" type="text/css" href="css/bootstrap-responsive.css">

  <link rel="stylesheet" type="text/css" href="css/prettify.css">

  <link rel="stylesheet" type="text/css" href="css/style.css">

  <link rel="stylesheet" type="text/css" href="css/tablecloth.css">

  <link href='http://fonts.googleapis.com/css?family=Roboto' rel='stylesheet' type='text/css'>

  <link href='http://fonts.googleapis.com/css?family=Arimo' rel='stylesheet' type='text/css'>

  

  <!--[if !IE]><!-->

	<style>

	

	/* 

	Max width before this PARTICULAR table gets nasty

	This query will take effect for any screen smaller than 760px

	and also iPads specifically.

	*/

	@media 

	only screen and (max-width: 760px),

	(min-device-width: 768px) and (max-device-width: 1024px)  {

	

	   #searchtext{width:60%;}

	#searchdiv{height:66px;padding-top:20px;}

	#clearingdiv{height:66px;}

	   #searchdoc {width:100%; }

	   #searchtext{width:60%;}

	

		/* Force table to not be like tables anymore */

		table, thead, tbody, th, td, tr { 

			display: block; 

		}

		

		/* Hide table headers (but not display: none;, for accessibility) */

		thead tr { 

			position: absolute;

			top: -9999px;

			left: -9999px;

		}

		

		tr { border: 1px solid #ccc; }

		

		td { 

			/* Behave  like a "row" */

			border: none;

			border-bottom: 1px solid #eee; 

			position: relative;

			padding-left: 50%; 

		}

		

		td:before { 

			/* Now like a table header */

			position: absolute;

			/* Top/left values mimic padding */

			top: 6px;

			left: 6px;

			width: 45%; 

			padding-right: 10px; 

			white-space: nowrap;

		}

		

		/*

		Label the data

		*/

		td:nth-of-type(1):before { content: "Name"; }

		td:nth-of-type(2):before { content: "Reg. no"; }

		td:nth-of-type(3):before { content: "Address"; }

		td:nth-of-type(4):before { content: "Qualifications"; }

		td:nth-of-type(5):before { content: "Specialty"; }

		td:nth-of-type(6):before { content: "Sub-specialty"; }

	}

	

	/* Smartphones (portrait and landscape) ----------- */

	@media only screen

	and (min-device-width : 320px)

	and (max-device-width : 480px) {

		body { 

			padding: 0; 

			margin: 0; 

			width: 320px; }

		}

	

	/* iPads (portrait and landscape) ----------- */

	@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) {

		body { 

			width: 495px; 

		}

	}

	

	</style>

	<!--<![endif]-->

  

</head>

<body>

<div id="searchdiv"><div id="searchtext">Click on the search icon to search for a doctor &raquo;</div><div id="searchicon"><a href="searchdoc.php"><img src="images/searchicon.png" alt="search"/></a></div></div>

<div id="clearingdiv"></div>

<div id="searchdoc">

<span class="searchheader">Search for :</span> 

<span class="searchbydate">Hint: Name like Daniel, Paul e.t.c</span>

 <form name="search" method="post" action="retained_searchresults.php">

 <input type="text" name="searchfor" id="searchfor" /> 

 <p><span class="bigtext">Search by doctor's name, registration number, qualifications, specialty or registration date by selecting in the dropdown below</span></p>

 <Select NAME="field">

  <Option VALUE="name">Name</option>

 <Option VALUE="regno">Registration no</option>

<Option VALUE="qualific">Qualifications</option>

 <Option VALUE="specialty">Specialty</option>

 <Option VALUE="regdate">Registration date</option>

 </Select>

 <p>

 <input type="hidden" name="searching" value="yes" />

 <input type="submit" name="search" value="Search &raquo;" />

 </p>

 </form>

 </div>

 </body>

 <html>