@charset "utf-8";

/* 
   A BASIC INTRODUCTION WITH SOME INSTRUCTION	
   This is a generic stylesheet which can be added to in any way. Please keep the current structure of this document the same. When adding new style please 
   group specific sections together. For example, all HTML tags should be found at the beginning of the document and below the opening body tag. All IDs 
   should be formatted together and all classes should be formatted together. Formatted styling allows other developers to pick up your work and continue
   should there be a need. Formatted styling also allows you to find your classes and ids quicker and creates a logical flow of information. 
   
   You will notice that this text is greyed out, this is because of the comment formatting which has been used. CSS comment formatting in tags are (/* to 
   open    the comment tag and then the converse to close tag as below. This is also known as documenting code which is another tool which developers use 
   to help others and themselves make sense of code which has been written as well as highlight areas which need to be worked on. Please take documenting 
   seriously as this is a considerate method of coding.  
*/   

/* 
   START HTML TAGS
   HTML tags including the body which is the overarching tag which affects the entire page, when using development software and selecting page properties  
   it is the body tag which is affected when changing properties. 
*/

body {
	font-family:Arial;
	font-size: 12px;
	margin-left: auto;
	margin-right: auto;
	background-color: #ffffff;
	overflow-x: hidden;
	height: 100%;
}

/*SCROLLBAR STYLING*/

html {scrollbar-face-color: #cccccc;
	  scrollbar-shadow-color: #ffffff;
	  scrollbar-highlight-color: #ffffff;
	  scrollbar-2dlight-color: #cccccc;
	  scrollbar-darkshadow-color: #cccccc;
	  scrollbar-track-color: #ffffff;
	  scrollbar-arrow-color: #ffffff;
	  overflow-x: hidden; 
	  }

/*START LINK CLASSES*/

/*This is an example of an active link*/

a.linktype_products {
	font-family:Arial;
	font-weight:bold;
	font-size: 12px;
	color:#ffffff;
	text-decoration:none;

}

/*This is an example of the hover state of a link*/

a:hover.linktype_products {
	font-family:Arial;
	font-weight:bold;
	font-size: 12px;
	color:#ffffff;
	text-decoration:underline;

}

a.linktype_nav {
	font-family:Arial;
	font-weight:bold;
	font-size: 12px;
	line-height: 52px;
	background-color:#313191;
	color:#ffffff;
	padding: 8px;
	text-decoration:none;
	margin-left: 1px;
}

/*This is an example of the hover state of a link*/

a:hover.linktype_nav {
	font-family:Arial;
	font-weight:bold;
	font-size: 12px;
	color:#90aec3;
	text-decoration:none;

}

a.linktype_two {
	font-family:Arial, Helvetica, sans-serif;
	font-weight:bold;
	text-align: right;
	color:#063559;
	vertical-align: middle;
	text-decoration:none;
}

a:hover.linktype_two {
	font-family:Arial, Helvetica, sans-serif;
	font-weight:bold;
	text-align: right;
	color:#90aec3;
	vertical-align: middle;
	text-decoration:none;
}

/*END LINK CLASSES*/

/*END HTML TAGS*/   

/*START HEADER STYLE, this is where you will add in your imagery using different styling techniques

IMPORTANT NOTE: You will notice I have used a # before the word header. By doing so I have created a new ID.
*/

#container {
	font-family:Arial;
	font-size: 12px;
	width: 1024px;
	height: 100%;
	margin-left: auto;
	margin-right: auto;	
	overflow-x: hidden;
}

#navigation_header {
	background-image:url('../images/navigation_bar.jpg');
	height: 52px;
	text-align: center;
	width: 100%;
}

#navigation_header_containing_links {
	background-image:url('../images/navigation_bar.jpg');
	margin-left: auto;
	margin-right: auto;
	width: 100%;
}

#header {
	height: 204px;
	width: 100%;
	}

#left_header {
	color: #000000;
	background-image: url('../images/seremed_header_left.jpg');
	background-repeat:no-repeat;
	float: left;
	height: 204px;
	width: 80%
}

#form_header {
	width: 300px;
	margin-left: 450px;
	margin-top: 30px;
}

#right_header {
	color: #000000;
	background-image: url('../images/seremed_header_right.jpg');
	background-position:center;
	background-repeat:no-repeat;
	float: right;
	height: 204px;
	width: 20%
}

#products_header {
	font-family: Arial, Helvetica, sans-serif;
	color: #000000;
	font-weight:bold;
	text-indent: 10px;
	height: 15px;
	width: 100%;
	border-bottom:medium;
	border-bottom-color:black;
	border-bottom-style:solid;
	border-bottom-width:medium;
}

#products_header_right {
	background-color:#000000;
	font-family: Arial, Helvetica, sans-serif;
	color: #ffffff;
	font-weight:bold;
	line-height: 30px;
	height: 25px;
	width: 96%;
	margin-bottom: 2px;	
	padding-right: 10px;
	text-align: right;
}

#medical_header {
	background-color:#ee1c25;
	font-family: Arial, Helvetica, sans-serif;
	color: #ffffff;
	font-weight:bold;
	text-indent: 10px;
	line-height: 30px;
	height: 25px;
	width: 100%%;
}

#medical_header_right {
	background-color:#ee1c25;
	font-family: Arial, Helvetica, sans-serif;
	color: #ffffff;
	font-weight:bold;
	text-indent: 10px;
	line-height: 30px;
	height: 25px;
	width: 96%;
	margin-bottom: 2px;
	padding-right: 10px;
	text-align: right;
}

#surgical_header {
	background-color:#303192;
	font-family: Arial, Helvetica, sans-serif;
	color: #ffffff;
	font-weight:bold;
	text-indent: 10px;
	line-height: 30px;
	height: 25px;
	width: 100%;
}

#surgical_header_right {
	background-color:#303192;
	font-family: Arial, Helvetica, sans-serif;
	color: #ffffff;
	font-weight:bold;
	text-indent: 10px;
	line-height: 30px;
	height: 25px;
	width: 96%;
	margin-bottom: 2px;
	padding-right: 10px;
	text-align: right;
}

#medical_equipment_header {
	background-color:#ffcb06;
	font-family: Arial, Helvetica, sans-serif;
	color: #ffffff;
	font-weight:bold;
	text-indent: 10px;
	line-height: 30px;
	height: 25px;
	width: 100%;
}

#medical_equipment_header_right {
	background-color:#ffcb06;
	font-family: Arial, Helvetica, sans-serif;
	color: #ffffff;
	font-weight:bold;
	text-indent: 10px;
	line-height: 30px;
	height: 25px;
	width: 96%;
	margin-bottom: 2px;
	padding-right: 10px;
	text-align: right;
}

#specialized_product_header {
	background-color:#0095da;
	font-family: Arial, Helvetica, sans-serif;
	color: #ffffff;
	font-weight:bold;
	text-indent: 10px;
	line-height: 30px;
	height: 25px;
	width: 100%;
}

#specialized_product_header_right {
	background-color:#0095da;
	font-family: Arial, Helvetica, sans-serif;
	color: #ffffff;
	font-weight:bold;
	text-indent: 10px;
	line-height: 30px;
	height: 25px;
	width: 96%;
	margin-bottom: 2px;
	padding-right: 10px;
	text-align: right;
}

#spares_header {
	background-color:#a7ce39;
	font-family: Arial, Helvetica, sans-serif;
	color: #ffffff;
	font-weight:bold;
	text-indent: 10px;
	line-height: 30px;
	height: 25px;
	width: 100%;
}

#spares_header_right {
	background-color:#a7ce39;
	font-family: Arial, Helvetica, sans-serif;
	color: #ffffff;
	font-weight:bold;
	text-indent: 10px;
	line-height: 30px;
	height: 25px;
	width: 96%;
	margin-bottom: 2px;
	padding-right: 10px;
	text-align: right;
}

#furniture_header_right {
	background-color:#c7a0ca;
	font-family: Arial, Helvetica, sans-serif;
	color: #ffffff;
	font-weight:bold;
	text-indent: 10px;
	line-height: 30px;
	height: 25px;
	width: 96%;
	margin-bottom: 2px;
	padding-right: 10px;
	text-align: right;
}

#furniture_header {
	background-color:#c7a0ca;
	font-family: Arial, Helvetica, sans-serif;
	color: #ffffff;
	font-weight:bold;
	text-indent: 10px;
	line-height: 30px;
	height: 25px;
	width: 100%;
}

#welcome_header{
	font-family:Arial, Helvetica, sans-serif;
	font-weight:bold;
	font-size: 16px;
}

#welcome_header_txt{
	font-family:Arial, Helvetica, sans-serif;
	font-weight:bold;
	font-size: 14px;
}

/*END HEADER STYLE*/

/*START LEFT COLUMN - the left column style is a static style that houses additional information. Use this as a 'box' where you can embed further styles 
within the HTML page.*/

#left_column {
	color: #000000;
	float: left;
	width: 73%
}

#left_column_content {
	color: #000000;	
	width: 95%;
	margin-top: 10px;
	padding-left: 10px;
	height: 100%;
}

.product_backing{
	background-image:url('../images/product_backing.jpg');
	background-repeat:no-repeat;
	height: 304px;
}

.product_backing_heading{
	font-family:Arial, Helvetica, sans-serif;
	font-size: 13px;
	font-weight: bold;
	padding: 13px;
	text-indent: 5px;
}

.product_backing_txt{
	font-family:Arial, Helvetica, sans-serif;
	font-size: 12px;
	padding-left: 5px;
	height: 300px;
}

/*END LEFT COLUMN*/

/*START RIGHT COLUMN - the right column style is a static style that houses additional information. Use this as a 'box' where you can embed further styles 
within the HTML page. This style should be used for content however due to the nature of CSS you have the freedom to move elements around*/

#right_column {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	color: #000000;
	width: 250px;
	height: 1400px;
	padding-right: 10px;
}

#right_column_page {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	color: #000000;
	width: 26%;
	float:right;
}

.side_products{
	width: 100%;
	height: 180px;
	text-align: left;
}

.cico_boy {
	background-image:url('../images/side_products/cico_boy.jpg');
	background-repeat:no-repeat;
	width: 99px;
	height: 99px;	
}


.cico_boy_header{
	font-family: Arial, Helvetica, sans-serif;
	font-weight: bold;
	font-size: 12px;
	color: gray;
	width: 120px;
}

.aed_defib {
	background-image:url('../images/side_products/aed_defib.jpg');
	background-repeat:no-repeat;
	width: 99px;
	height: 99px;	
}


.aed_defib_header{
	font-family: Arial, Helvetica, sans-serif;
	font-weight: bold;
	font-size: 12px;
	color: gray;
	width: 120px;
}

.nasal {
	background-image:url('../images/side_products/nasal_washer.jpg');
	background-repeat:no-repeat;
	width: 99px;
	height: 99px;
}

.cryopen {
	background-image:url('../images/side_products/cryo_penm_icon.jpg');
	background-repeat:no-repeat;
	width: 99px;
	height: 99px;
}


.nasal_header{
	font-family: Arial, Helvetica, sans-serif;
	font-weight: bold;
	font-size: 12px;
	color: gray;
	width: 120px;
}

.de_wildt{
	clear:both;
	margin-top: 75px;
	
}

/*START RIGHT COLUMN HEADER - firstly notice that I have inserted the right_column_header within the formatting on RIGHT COLUMN, this allows me to find
all classes relating to the right column easier. Also take note of the use of a . before right_column_header, this denotes a classThe RIGHT_COLUMN_HEADER will act as an embedded class within the RIGHT COLUMN ID*/

.right_column_header {
	font-family:Arial, Helvetica, sans-serif;
	font-weight: bold;
	padding-bottom: 10px;
	font-size:medium;
	color: #000000;
}

/*END RIGHT COLUMN HEADER*/

/*END RIGHT COLUMN*/

.indiv_page_headings{
	font-family: Arial, Helvetica, sans-serif;
	font-size: 13px;
	font-weight: bold;
	color: #0066CC;
}

/*START FOOTER - the footer can either house the Nedbank logo as it curently does, contact information etc...*/
#footer {
	clear: both;
	background-color:#ee1c25;
	height: 15px;
	width: 100%;
	 
}

.sub_headings{
	font-family:Arial, Helvetica, sans-serif;
	font-weight: bold;
	font-size: 13px;
	color: #EF171F;
}

/*END FOOTER*/