img#photo {margin: 3em}



html, body {background-color: rgb(95%,95%,100%); margin: 0; padding: 0; font-family: Verdana, Arial, sans-serif;}



#wrap {background-color: rgb(95%,95%,100%); margin: 4%; border: 4px solid; border-color: rgb(0,82,136);}



h1 {font-style: italic; font-size: 2em; font-family: tahoma; color:rgb(0,82,136); text-align: left}



h2 {font font-size: 2em; font-family: tahoma; color:rgb(0,82,136); text-align: left}



h3 {font font-size: 1.6em; font-family: tahoma; color:rgb(0,82,136); text-align: left}



h4 {font font-size:1.5em; margin: 0; padding: 0.33em 0 0 1em; border-bottom: 2px solid rgb(113,191,210);}



h4i {font font-size: 1.6em; font-family: tahoma; color:rgb(0,82,136); text-align:left; margin: 0;} 



h5 {font font-size: 1.3em; font-family: tahoma; color:rgb(0,82,136); text-align: left}


h6 {font font-size: 1.2em; font-family: tahoma; color: rgb(0,82,136); text-align: left}



ul {margin-top:0px; margin-bottom:5px;}

li {margin-top:0px; margin-bottom:5px;}

yg1 {font font-size: 2em; font-family: tahoma; color: #FFE428; font-weight: bolder;} 

USP-b {font font-size: 1.1em; font-family: tahoma; color: #005288; font-weight: bolder;} 

#intro {font font-size:1.3em; font-family:tahoma; COLOR=rgb(0,82,136); text-align: left; line-height:1} 



.masthead {line-height: 1em; padding: 1em 1em 1em 1em; }



#main {font-size: medium; margin: 2em; padding: 1em 2em 1em 0; clear: left;}

#upcomingevents {float: left;  padding: 0 3em 0 2em; width: 60%;}

#eventscontent {clear: left; padding: 0 3em 0 2em;}

#leanexintro {float: left; padding: 0 3em 0 2em; margin: 0 0 0 0; width:70%;}

#leanexcontent {clear: left; padding: 0 3em 0 2em;}

#maincontent {font-size: small; margin: 1em; padding: 0 2em 1em 0;}



#bio {margin: 1em; padding: 1em 3em 1em 1em;}



#topnav {float: right; clear: left; margin: 0; padding: 0; width: 40%; text-align: right; }

#topnav li {list-style: none; float: right; margin-left: 1px; padding-left: 5px; font-size: .8em; font-weight: bold; line-height: 2em; white-space: nowrap; font-color:rgb(0,82,136);  border-radius: 20px;}

#topnav #current, #topnav #current a {font-color:rgb(201,48,146); font-weight: bolder;}



#footnav {float: center; clear: all; margin: 0; padding: 0; width: 40%; text-align: center; }

#footnav li {list-style: none; float: left; margin-left: 1px; padding-left: 5px; font-size: .8em; font-weight: bold; line-height: 2em; white-space: nowrap; font-color:rgb(0,82,136); }

#footnav #current, #footnav #current a {font-color:rgb(201,48,146); font-weight: bolder;}

#nav {margin: 10em 0em; padding: 0; background-color: rgb(0,82,136); }

#nav li {list-style: none; float: left; margin-left: 1px; padding-left: 16px; ; font-size: .7em; line-height: 2em; white-space: nowrap; color:rgb(0,82,136); border-radius: 30px;}

#nav a {display: block; float: left; padding: 4px 4px 4px 4px ; text-decoration: none; font-weight: bold; border: 3px solid;  border-radius: 20px; border-color: rgb(0,82,136); background-color: rgb(0,82,136); color: rgb(255,228,40); width: .1em; }


html>body #nav a {width: auto;} /*fixes IE6 hack*/

/* Commented Backslash Hack hides rule from IE5-Mac \*/

#nav a {float: none}   /* END IE5-Mac hack */

#nav a:hover {background-color: rgb(198,18,134); color: #ffffff;}

#nav #current, #nav #current a {background-color: rgb(90%,90%,100%); color: rgb(28,84,163); font-weight: bolder;}



#sidemenucol {float: left; clear: left; }

#sidemenu {float: right; clear: left; min-width: 20em; width: 15%; margin: 2em 2em 0 1em; border: outset 3px rgb(177,135,244); border-bottom: outset 3px rgb(177,135,244); background-color: rgb(90%,90%,100%)}

#sidemenu ul {list-style: none; text-align: left; background-color: rgb(90%,90%,100%);}

#sidemenu li {padding: 0 1em 0.25em 0; border-bottom: 1px solid rgb(113,191,210); line-height: 2em; font-size: .7em; white-space: nowrap; text-align: left;}

#sidemenu a {text-decoration: none; color: rgb(28,84,163); font-weight: bold;}

#sidemenu a:hover {background-color: rgb(95%,95%,100%); color: rgb(198,18,134); font-weight: bolder;}

#sidemenu #current, #sidemenu #current a {font-weight: bolder;}



#sideimagecol {float: right; clear: left; }

#sideimage {float: right; clear: left; min-width: 20em; width: 35%;  margin: 2em 2em 0 1em; padding: 0.5em 1em 0.5em 1em; font-size: x-small}

#sideimage a:hover


#topmenu {float: right; clear: left; min-width: 20em; width: 20%; margin: 2em 2em 0 1em; }

#topmenu #current, #topmenu #current a { color: rgb(201,48,146); font-weight: bolder;}


p#copyright {font-size: .8em; color: #6666ff; padding: 0 0 2em 0; clear: left; clear: right;}

#certification {font-size: .7em; float: right; clear: left; margin: 2em 2em; border: 2px solid; border-color: rgb(28,84,163); padding: 1em;}
 
#usp {float: right; clear: left; width: 15%; margin: 0.5em 0.5em 0.5em 0.5em; padding: 0.5em 0.5em 0.5em 0.5em; background-color: rgb(0,82,136);  border: outset 3px rgb(255,228,40); border-bottom: outset 3px rgb(255,228,40);  border-radius: 20px;}

#usp-l {float: left; clear: right; width: 15%; margin: 1.5em 1.5em 1.5em 1.5em; padding: 0.5em 0.5em 0.5em 0.5em; background-color: rgb(0,82,136);  border: outset 3px rgb(255,228,40); border-bottom: outset 3px rgb(255,228,40);  border-radius: 20px;}

#testimonial {float: right; clear: right; width: 20%; margin: 1em 1em 1em 2em; padding: 0.5em 1em 0.5em 1em; font-size: x-small; background-color:rgb(90%,90%,100%); Border: 2px solid; border-color: rgb(113,191,210);}

p#testimonial {font-size: x-small; background-color:rgb(90%,90%,100%);}



#testimonial-bottom {float: bottom; align: left; clear: left; width: 80%; margin: 1em 1em 1em 2em; padding: 0.5em 1em 0.5em 1em; font-size: x-small; background-color:rgb(90%,90%,100%); Border: 2px solid; border-color: rgb(113,191,210);}

p#testimonial {font-size: x-small; background-color:rgb(90%,90%,100%);}



p#news {font-size: x-small; background-color:rgb(90%,90%,100%);}



#news {float: right; clear: both; align: right; width: 20%; margin: 1em 1em 1em 2em; padding: 0.5em 1em 0.5em 1em; font-size: small; background-color:rgb(90%,90%,100%); Border: 2px solid; border-color: rgb(113,191,210);}



  Design Notes: 

	- This site is designed to be dynamic to allow the users to be able to adjust the site to their needs, improving usability, accessibility, and page sizing across different browsers. Part of the intentional design is to avoid the use of tables whereever possible since there tends to be problems with table display as well as how tables work with screen readers.  Much of the display properties are set with the CSS and we should leverage the CSS styles when possible rather than coding the formatting.



    - When adding or editing this site, no one should change any elements of the design foundation without checking with the webmaster first to understand the implications and make a joint/mutual decision about the desired way to address the need.

    - Such elements of the design include:

    	-- the banner/title

        -- body

        -- Top and side Navigations

        -- divisions (including but not limited to masthead & sidemenu  

    - When adding content, try to add alt tags where appropriate to support screen readers.  Standard alt tag formats:

        -- for images: alt="image:Image Description"  where 'Image Description' is specific to actual image and should be a clear written description of the image.

        -- 





 Standard e-mail link with content is:  <a href="mailto:&#105;&#110;&#102;&#111;&#064;&#115;&#117;&#116;&#116;&#111;&#110;&#101;&#110;&#116;&#101;&#114;&#112;&#114;&#105;&#115;&#101;&#115;&#046;&#099;&#111;&#109;?subject=Request for further information &body=I would like to explore how SUTTON can help. %0a%0a Name:          %0a Organization:          %0a Phone:          %0a "><font color=#ce0078>E-mail</font></a>