/* pink ff0099 ec008c blue 709dc8 dark blue 181870 */

/* ---------- Main defaults ---------- */

body {
	background-color: #f5f8f8;
	color: #000000;
	font-size: 14px;
	line-height: 125%;
	font-family: "Helvetica Neue", Arial, sans-serif;
}

div.global {
	width: 100%;
	margin: 0 auto;
	padding: 0;
}

div#searchSite {
	margin: 0;
	float: right;
	top: 20px;
	position: relative;
}

/* ---------- Top layout ---------- */ 

#headercontainer {
	background-color: white;
}

#logindetails {
	padding: 5px 0;
	color: #666666;
	font-size: 80%;
	margin: 0 auto;
	z-index: 100;
	width: 960px;
}

#sectioncontainer, #menucontainer, #submenucontainer, #bannercontainer {
	margin: 0 auto;
	width: 960px;
}

#sectioncontainer {
	margin-bottom: 10px;
	min-height: 475px;
}

img#logo {
	margin: 10px 0;
	padding: 0;
	background-color: white;
}

#menucontainer, #submenucontainer {
	border-radius: 0;
}

#menucontainer {
	padding-bottom: 5px;
}

#bannercontainer {
	border-radius: 0;
}

span.advice {
	color: #4478aa;
}

span.solutions {
	color: #ec008c;
}

span.thinking {
	color: #757575;
}

/* ---------- Greeting page formatting ---------- */

.welcomeText, .welcomeText p {
	line-height: 150%;
}

/* ---------- Home Workshop Product Projects pages ---------- */

.homeQuotes {
	width: 48%;
	padding: 0 1% 0 0;
	float: left;
	position: relative;
	min-height: 280px;
}

.homeQuotes2 {
	float: right;
}

.home-work {
	width: 27%;
	float: left;
	position: relative;
	min-height: 240px;
	border-radius: 10px;
	margin: 20px 0;
	border: 1px gray solid;
	background-color: #f9fbff;
	opacity: 0.9;
	padding: 10px;
}

.home-work h2 {
	line-height: 125%;
}

.home-work2 {
	margin: 20px 6%;
}

.home-work3 {
	float: right;
}

.welcomeText p {
	text-align: left;
	margin: 15px;
	font-size: 115%;
}

div.quote, div.mainText {
	font-size: 90%;
	background-color: white;
	border-radius: 20px;
	min-height: 160px;
	padding: 20px;
	margin: 30px auto;
	border: 1px solid #dfdfdf;
	box-shadow: 5px 5px 5px #dfdfdf;
}

div.quoteShort {
	min-height: 100px;
}

div.mainText {
	width: 94%;
}

div.mainTextGroup {
	margin: 10px;
}

img.home-client, img.projects-client { 
	float: left;
	border-radius: 20px;
	margin: 10px;
}

img.feature {
	border-radius: 20px;
	margin: 5px 30px;
	width: 75%;
}

p.point {
	text-align: center;
	margin-top: 0;
}

img.sites {
	border-radius: 5px;
	padding: 20px;
}

div.clientSites {
	text-align: center;
}

img.left {
	padding: 15px 15px 15px 0;
	float: left;
}

img.right {
	padding: 15px 0 15px 15px;
	float: right;
}

/* ---------- Social network icons ---------- */

.contacts {
	background-color: white;
	margin: 0 auto;
	padding: 0 5px;
	min-width: 40px;
	text-align: center;
	position: fixed!important;
	right: 0;
	top: 160px;
	box-shadow: -5px 5px 10px rgba(0,0,0,0.3);
	border-top-left-radius: 20px;
	border-bottom-left-radius: 20px;
	z-index: 100;
}

.contacts img {
	padding: 10px 5px;
}

/* ---------- Figure border ---------- */

figure {
	border: 0;
}

aside.marginNarrowRight figure {
	padding: 5px 10px;
}

figcaption {
	font-size: 80%;
}

/* ---------- Menu stuff ---------- */

button#responsiveMenu {
	display: none;
	margin: 0 auto 10px auto;
	padding: 5px 10px;
	width: 98%;
	border: 0;
	text-align: center;
	position: fixed!important;
	top: 0;
	z-index: 100;
    background: #143d8d;
	color: white;
	font-size: 150%;
	font-family: "Helvetica Neue", Arial, sans-serif;
}

#menucontainer {
	background-color: white;
}

#menuitems, #subMenuitems {
	text-align: right;
	background-color: white;	
	line-height: 100%;
}

#submenucontainer, nav#submenucontainer.private {
	background-color: white;
}

.activeMenu, .inactiveMenu {
	font-size: 115%;
}

.activeMenu a, .inactiveMenu a {
	padding: 4px 0 4px 25px;
}

.inactiveMenu a, .inactiveMenu a:link, .inactiveMenu a:visited {
	color: #181870;
	background-color: white;
}

.activeMenu a, .activeMenu a:link, .activeMenu a:visited, .inactiveMenu a, .inactiveMenu a:hover {
	color: #ec008c;
	background-color: white;
}

.inactiveMenu a:hover {
	color: #4478aa;
}

#subMenuitems div.activeMenu, #subMenuitems div.inactiveMenu {
	padding: 0 1px 0 0;
}

#subMenuitems div.activeMenu a, #subMenuitems div.inactiveMenu a:hover {
	color: #ec008c;
	background-color: white;
	font-size: 90%;
}

#subMenuitems div.inactiveMenu a {
	color: #181870;
	background-color: white;
	font-size: 90%;
}

#subMenuitems div.inactiveMenu a:hover {
	color: #4478aa;
}

.activeMenu a.private, .activeMenu a.private:link, .activeMenu a.private:visited, .inactiveMenu a.private:hover {
	color: black;
	background-color: white;
}

.activeOptionsMenu, .inactiveOptionsMenu  {
	font-size: 115%;
}

.inactiveOptionsMenu a, .inactiveOptionsMenu a:link, .inactiveOptionsMenu a:visited {
	color: gray;
	border: 1px solid gray;
	background-color: white;
}

.activeOptionsMenu a, .activeOptionsMenu a:link, .activeOptionsMenu a:visited, .inactiveOptionsMenu a, .inactiveOptionsMenu a:hover {
	color: white;
	border: 1px solid gray;
	background-color: gray;
}

#subMenuitems div.activeMenu a.private, #subMenuitems div.inactiveMenu a.private:hover {
	background-color: white;
}

#subMenuitems div.inactiveMenu a.private {
	background-color: white;
}

/* ---------- General links ---------- */

a {
	color: #ec008c;
	text-decoration: none;
}

a.private {
	font-style: italic;
}

a:hover {
	color: #4478aa;
}

div#tagCloudControl span a {
	font-size: 140%;
}

/* ---------- Commonly used classes for layout ---------- */

.subtitle {
	margin: 10px 0;
	display: block;
	clear: left;
	color: #909090;
	overflow-x: hidden;
	color: #000000;
	font-size: 80%;
	font-weight: normal;
	line-height: 150%;
}

/* ---------- Defining common elements ---------- */

p {
	line-height: 150%;
	font-size: 115%;
}

li {
	line-height: 150%;
}

i {
	color: #707070;
}

ul, ol {
	font-size: 115%;
}

h1 {
	font-weight: normal;
	color: #666666;
	font-size: 250%;
	font-family: "HelveticaNeue-Light", "Helvetica Neue Light", Arial, sans-serif;
}

.greeting h1, .generic3 h1, .generic12 h1, .generic2 h1 {
	display: none;
}
	
div.banner {
	top: 40px;
	position: inherit;
}

div.banner h1, div.banner p {
	font-family: "HelveticaNeue-Light", "Helvetica Neue Light", Arial, sans-serif;
	text-align: center;
	color:  #19194b;
	font-size: 320%;
}

div.banner p {
	font-size: 120%;
	line-height: 80%;
	letter-spacing: 2px;
}

h2 {
	font-weight: normal;
	text-align: center;
	color: #181870;
	font-size: 205%;
	line-height: 150%;
	font-family: "HelveticaNeue-Light", "Helvetica Neue Light", Arial, sans-serif;
}

h3 {
	font-weight: normal;
	color: #181870;
	font-size: 130%;
	line-height: 130%;
	font-family: "HelveticaNeue-Light", "Helvetica Neue Light", Arial, sans-serif;
}

h4 {
	font-weight: normal;
	color: #181870;
	font-size: 110%;
	line-height: 100%;
	font-family: "HelveticaNeue-Light", "Helvetica Neue Light", Arial, sans-serif;
}

p.center {
	text-align: center;
}

/* ---------- Main sidebar formatting ---------- */

#sidebar {
	border: 0;
	background-color: transparent;
	font-size: 80%;
	line-height: 140%;
}

/* ---------- Classes used with divs for screen layout ---------- */

.form {
	border: 1px solid gray;
	background-color: #fffffa;
	border-radius: 5px;
}

#support1 .form {
	margin: 0 auto;
}

/* ---------- Highlight news, main newsitem module, blog ---------- */

.mainNews {
	max-width: 960px;
}

.newsDate {
	font-style: italic;
	font-size: 80%;
}

.newsTitle {
	font-weight: normal;
	font-size: 115%;
}

.item {
	border-bottom: 1px #e8e8e8 solid;
}

.newsitems p {
	line-height: 150%;
}

.newsContent {
	line-height: 150%;
    font-size: 115%;
}

.blogArticle {
	margin-bottom: 25px;
}

.blogArticle h2, .mainNews h2 {
	font-size: 165%;
	text-align: left;
}

.blogArticle h2 a {
	color: #181870;
}

.blogArticle h2 a:hover {
	color: #ec008c;
}

.smallType {
	font-size: 95%;
}

div.blogMonthSummary {
	font-size: 90%;
}

div.blogHeadings p {
	font-size: 90%;
}

.blogArticle section p, .blogArticle ol, .blogArticle ul {
	font-size: 110%;
	line-height: 130%;
}

.blogContent {
	height: 200px;
}

.blogContent:after {
	height: 150px;
	top: 70px;
}

div#blogControl {
	height: 230px;
    overflow-y: scroll;
}
    
/* ---------- Used at top of listings ---------- */

.headerRecord, .headerRecord a {
	font-weight: bold;
	color: gray;
}

/* ---------- Paypal payment page ---------- */

body#donate div#freestyle div.blockCenter.form.columnsWide2, body#pay div#freestyle div.blockCenter.form.columnsWide2 {
	border-radius: 20px;
}

/* ---------- Billboard ---------- */

.billboard {
	border-radius: 0;
	margin-top: 0;
	z-index: 0;
}

.control {
	border-bottom-left-radius: 0;
	z-index: 50;
}

div.visualPoster {
	border-bottom-left-radius: 0;
}

.poster {
	border-bottom-left-radius: 0;
	border: 0;
}

/* ---------- Footer text ---------- */

.footerContent p {
	font-size: 100%;
}

/* ---------- Sidebars ---------- */

#sidebar h3 {
	margin-left: 15px;
}

/* ---------- Workshop resources ---------- */

#resourcesOptionsHeader {
	background-color: #f5f8f8;
	color: black;
}

#resourcesOptionsContent {
	background-color: white;
	font-size: 90%;
}

div#resourcesOptionsContent form {
	width: auto;
}

/* --------- floating startpod ---------- */

div#resourcesOptions.startpod {
	width: 60%;
	border: 1px solid gray;
	border-radius: 8px;
	border-bottom-right-radius: 0;
	border-bottom-left-radius: 0;
	position: fixed;
	top: 35%;
	left: 20%;
	margin: 0 auto;
	display: none;
	box-shadow: 3px 3px 3px #DFDFDF;
}

span.resourceCategory {
	font-size: 80%;
	padding-left: 10px;
}

div.resourceSummary div.lineItem p:nth-child(2) {
	display: none;
}

div.resourceSummary, div.resourcesReference {
	margin: 5px;
	padding: 0;
	border: 1px gray solid;
	border-radius: 8px;
	overflow: auto;
	background-color: white;
	box-shadow: 3px 3px 3px #dfdfdf;	
}

div.resourcesReference {
	height: 125px;
}

div.resourceSummary {
	font-size: 80%;
}

div#resourcelist div.blockCenter {
	clear: none;
}

div.resourceSummary h2, div.resourceSummary p, div.resourcesReference h2, div.resourcesReference p {
	padding: 5px;
	margin: 0;
	line-height: 130%;
}

div.resourcesReference h2 {
	background-color: #eff5ff;
}

div.resourceSummary h2 {
	font-size: 165%;
}

div.resourcesReference h2 {
	font-size: 125%;
}

div.resourceSummary img {
	padding: 15px 10px;
	float: left;
}

div.resourceSummary .lineItem {
    max-width: 74%;
}

div.resourceSummary div.firstLineItem {
	width: 170px;
}

div.resourceSummary div.lineItem p:nth-child(2),
div.resourceSummary div.lineItem p:nth-child(3) {
	display: none;
}

div.resourceSummary .lineItem h2 a {
	font-size: 125%;
}

/* ---------- Additional styles ---------- */

li {
	padding: 2px;
}

/* ---------- Generic pages with quotes ---------- */

div.welcomeText {
	margin: 0;
	padding: 0;
}

div#workcontainer {
	margin: 35px auto 0;
	min-height: 400px;
}

.greeting div#workcontainer a {
	color: black;
}

div#workcontainer a:hover {
	color: #181870;
}

.generic2 div#workcontainer,
.generic3 div#workcontainer,
.generic12 div#workcontainer {
	margin-top: 55px;
}

section#sectioncontainer.generic3 div#quotescontainer,
section#sectioncontainer.generic12 div#quotescontainer,
section#sectioncontainer.generic2 div#quotescontainer {
	margin: 50px auto 15px auto;
}

#generic3 div#workshops.home-work p a:hover,
#generic12 div#projects.home-work p a:hover,
#generic2 div#product.home-work p a:hover {
	color: #4478aa;
}

div.quote img {
	margin-right: 20px;
}

h2#quotesHeading, div.homeQuotes {
	opacity: 1;
}
	
body#greeting1 div {
	-webkit-transition-timing-function: ease-in-out;
	-moz-transition-timing-function: ease-in-out;
	-o-transition-timing-function: ease-in-out;
	-ms-transition-timing-function: ease-in-out;
	transition-timing-function: ease-in-out;
	-webkit-transition-delay: 0;
	-moz-transition-delay: 0;
	-o-transition-delay: 0;
	-ms-transition-delay: 0;
	transition-delay: 0;
	-webkit-transition: all 2.5s;
	-moz-transition: all 2.5s;
	-o-transition: all 2.5s;
	-ms-transition: all 2.5s;
	transition: all 2.5s;
}

div#graphicArea.starter {
	opacity: 0.8;
}

div#graphicArea {
	position: absolute;
	top: 260px;
	height: 425px; 
	width: 100%; 
	margin: 0; 
	padding: 0; 
	background-image: url('/platypusconsultancy/pictures/large/005338.jpg');
	background-repeat: no-repeat;
	background-position: top, center;
	background-size: 100% auto;
	opacity: 0.8;
	z-index: -10;
	left: 0;
}

.generic3 div#graphicArea {
	background-image: url('/platypusconsultancy/pictures/large/005409.jpg');
}

.generic12 div#graphicArea {
	background-image: url('/platypusconsultancy/pictures/large/005782.jpg');
}

.generic2 div#graphicArea {
	background-image: url('/platypusconsultancy/pictures/large/005412.jpg');
}

#generic3 div#workshops.home-work, 
#generic12 div#projects.home-work,
#generic2 div#product.home-work {
	margin: 0 auto;
	float: none;
	width: 600px;	
	min-height: 180px;
	padding: 10px 20px;
}

#generic3 div#workshops.home-work p, 
#generic12 div#projects.home-work p,
#generic2 div#product.home-work p {
	text-align: center;
	font-size: 110%;
}

#generic3 div#workshops.home-work a:hover, 
#generic12 div#projects.home-work a:hover,
#generic2 div#product.home-work a:hover {
	color: #ec008c;
}

div.greeting div.starter, div.greeting h2#quotesHeading.starter, 
div.generic3 div.starter, div.generic3 h2#quotesHeading.starter, 
div.generic12 div.starter, div.generic12 h2#quotesHeading.starter,
div.generic2 div.starter, div.generic2 h2#quotesHeading.starter {
	opacity: 0;
}

.greeting div.home-work.starter {
	-webkit-transform: scale(0.2);
	-moz-transform: scale(0.2);
	-o-transform: scale(0.2);
	-ms-transform: scale(0.2);
	transform: scale(0.2);
}

div.generic2 .project-sites {
	width: 950px;
	min-height: 250px;
}

div#quotes01.starter, div#quotes02.starter {
	margin-top: -2000px;
}

.generic1 div#quotescontainer {
	margin: 20px auto 15px auto;
}

.generic1 div#quotes01.starter, .generic1 div#quotes02.starter {
	margin-top: 10px;
}

/* ---------- Prices ---------- */

#prices {
	min-height: 150px;
}

#prices a {
	text-decoration: none;
	color: black;
}

.prices {
	width: 250px;
	padding: 10px;
	float: left;
	position: relative;
	border-radius: 10px;
	border: 1px solid #cccccc;
	margin: 20px;
}

.prices h3 {
	text-align: center;
	font-size: 160%;
}

/* ---------- Responsive styles ----------- */

@media only screen and (min-width: 0px) and (max-width: 768px) {
	.homeQuotes {width: 96%; padding: 0; float: none; margin: 0 auto;}
	.homeQuotes p {font-size: 110%;}
	div.quote {min-height: 140px; padding: 10px;}
	div.endQuote {margin-bottom: 0;}
	div.mainText {width: 92%;}
	#resources1 div#resourcesOptions.startpod {width: 95%; position: relative; left: unset; margin: 0 auto; border: 1px solid gray; border-radius: 8px; border-bottom-right-radius: 10px; border-bottom-left-radius: 10px; box-shadow: 3px 3px 3px #DFDFDF;}
	#resources1 div.resourceSummary .lineItem {max-width: none;}
	#resources1 div#resourcesOptionsContent .firstLineItem {text-align: right;}
	#resources1 div.resourceSummary img {float: none; margin: 10px auto; text-align: center;	display: block;}
	#resources1 div#resourcelist div.firstLineItem {float: none; width: unset;}
	.blog1 input.submit {float: inherit;}
	.blog1 div#blogControl {width: 100%; height: 50px; text-align: center;}
	.blog1 div#tagCloudControl, .blog1 #sidebar {width: unset;}
	.blog1 div#tagCloudControl {text-align: center;}
	.blog1 #sidebar {min-height: unset; padding: 0; margin: 10px auto;}
	.newsitems1 #sidebar {width: 60%; margin: 10px auto; float: none;}
}

/* ---------- Smartphones (portrait and landscape) 0-319px ----------- */

@media only screen and (min-width: 0px) and (max-width: 319px) {
	body {font-size: 11px;}
	#sectioncontainer, #bannercontainer, #footercontainer, #menucontainer, #submenucontainer {width: 98%;}
	div.global {width: 100%; padding: 30px 0 0 0;}
	div#graphicArea {display: none;}
	button#responsiveMenu {display: block;}
	div.banner {position: initial;}
	#menucontainer, #submenucontainer {display: none;}
	#generic3 div#workshops.home-work, #generic12 div#projects.home-work, #generic2 div#product.home-work {width: 80%; min-height: 160px;}
	img#logo {margin: 10px auto; display: block; float: none;}
	#greeting1 .activeMenu:nth-child(1) {display: none;}
	.home-work {width: 85%; min-height: 60px; margin: 20px auto; float: none; padding: 0;}
	.home-work h2 {line-height: 90%; font-size: 180%;}
	.activeMenu a, .inactiveMenu a {padding: 8px 0;}
	#logindetails {font-size: 90%;}
	.generic2 div#workcontainer, .generic3 div#workcontainer, .generic12 div#workcontainer {margin-top: 35px; min-height: 180px;}
	div.mainText {width: 80%;}
	img.sites {width: 90%; padding: 10px 1%;}
	div.quote img {width: 30%;}
	ul {padding-left: 20px;}
	div.quoteShort {min-height: 40px;}
	div.quote {width: 85%;}
	.newsitems1 #sidebar {width: 80%; margin: 10px auto; float: none;}
	div.quote img {margin-right: 10px; width: 25%;}
}

/* ---------- min-width: 320px through to max-width: 480px ----------- */

@media only screen and (min-width: 320px) and (max-width: 480px) {
	body {font-size: 11px;}
	#sectioncontainer, #bannercontainer, #footercontainer, #menucontainer, #submenucontainer {width: 98%;}
	div.global {width: 100%; padding: 30px 0 0 0;}
	div#graphicArea {display: none;}
	button#responsiveMenu {display: block;}
	div.banner {position: initial;}
	#menucontainer, #submenucontainer {display: none;}
	img#logo {margin: 10px auto; display: block; float: none;}
	#greeting1 .activeMenu:nth-child(1) {display: none;}
	.home-work {width: 70%; min-height: 60px; margin: 20px auto; float: none; padding: 10px; text-align: center;}
	#generic3 div#workshops.home-work, #generic12 div#projects.home-work, #generic2 div#product.home-work {width: 85%; min-height: 140px;}
	.home-work h2 {line-height: 90%; font-size: 180%;}
	.activeMenu a, .inactiveMenu a {padding: 8px 0;}
	#logindetails {font-size: 90%;}
	.generic2 div#workcontainer, .generic3 div#workcontainer, .generic12 div#workcontainer {min-height: 180px;}
	div.mainText {width: 86%;}
	img.sites {padding: 10px 1%;}
	ul {padding-left: 20px;}
	div.quoteShort {min-height: 55px;}
	div.quote {width: 85%;}
	.generic12 div.homeQuotes {min-height: 225px;}
	.newsitems1 #sidebar {width: 80%; margin: 10px auto; float: none;}
	div.quote img {margin-right: 10px; width: 25%;}
}

/* ---------- min-width: 0px through to max-width: 350px ----------- */

@media only screen and (min-width: 0px) and (max-width: 350px) {
	div.banner h1 {line-height: 125%;}
	div.banner p {line-height: 160%;}
	.activeMenu, .inactiveMenu {font-size: 140%;}
}
    
/* ---------- min-width: 481px through to max-width: 659px ----------- */

@media only screen and (min-width: 481px) and (max-width: 659px) {
	body {font-size: 12px;}
	#sectioncontainer, #bannercontainer, #footercontainer, #menucontainer, #submenucontainer, section#logindetails {width: 96%;}
	.greeting1#sectioncontainer {width: 98%;}
	div#graphicArea {top: 245px;}
	div#global {width: 100%; padding: 0;} 
	.home-work {width: 25%;}
	.home-work2 {margin: 20px 7%; padding: 6px;}
	#generic3 div#workshops.home-work, #generic12 div#projects.home-work, #generic2 div#product.home-work {width: 80%; min-height: 160px;}
	.generic2 div#workcontainer, .generic3 div#workcontainer, .generic12 div#workcontainer {min-height: 245px; margin-top: 30px;}
	div.banner p {line-height: 120%;}
}

/* ---------- min-width: 481px through to max-width: 560px ----------- */

@media only screen and (min-width: 481px) and (max-width: 560px) {
	body {font-size: 13px;}
	div#workcontainer {margin-top: 10px;}
	img#logo {margin: 20px auto; display: block; float: none;}
	div.banner {position: initial;}
	div#graphicArea {display: none;}
	.home-work {width: 60%; min-height: 60px; margin: 20px auto; float: none; padding: 10px; text-align: center;}
	.home-work h2 {line-height: 90%; font-size: 180%;}
	#generic3 div#workshops.home-work p, #generic12 div#projects.home-work p, #generic2 div#product.home-work p {font-size: 100%;}
	.welcomeText p {margin: 10px;}
	.generic2 div#workcontainer, .generic3 div#workcontainer, .generic12 div#workcontainer {min-height: 180px;}
	div.mainText {width: 90%;}
	#resources1 #resourcesOptionsContent .lineItem input[id$="earchPhrase"] {width: 180px;}
	div.presentation iframe {width: 164px; height: 250px;}
}

/* ---------- min-width: 660px through to max-width: 768px ----------- */

@media only screen and (min-width: 660px) and (max-width: 768px) {
	#sectioncontainer, #bannercontainer, #footercontainer, #menucontainer, #submenucontainer, section#logindetails {width: 95%;}
	div#global {width: 100%; padding: 0;} 
	#generic3 div#workshops.home-work, #generic12 div#projects.home-work, #generic2 div#product.home-work {width: 80%;}
	div#graphicArea {top: 250px;}
	.generic3 div#graphicArea {top: 220px;}
	.home-work2 {margin: 20px 8%;}
    .home-work {width: 25%; padding: 8px;}
	.generic2 div#workcontainer, .generic3 div#workcontainer, .generic12 div#workcontainer {min-height: 290px;}
}

/* ---------- min-width: 769px through to max-width: 960px ----------- */

@media only screen and (min-width: 769px) and (max-width: 960px) {
	#sectioncontainer, #bannercontainer, #footercontainer, #menucontainer, #submenucontainer, section#logindetails {width: 96%;}
	div#global {width: 100%; padding: 0;} 
	.home-work2 {margin: 20px 7%;}
    .home-work {width: 26%; padding: 8px;}
	.generic2 div#workcontainer, .generic3 div#workcontainer, .generic12 div#workcontainer {min-height: 375px;}
	#resources1 div#resourcesOptions.startpod {width: 80%; left: 11%;}
}

/* ---------- min-width: 769px through to max-width: 850px ----------- */

@media only screen and (min-width: 769px) and (max-width: 850px) {
    .home-work {min-height: 290px;}
	.generic2 div#workcontainer, .generic3 div#workcontainer, .generic12 div#workcontainer {min-height: 320px;}
}

/* ---------- min-width: 961px through to max-width: 1024px ----------- */

@media only screen and (min-width: 961px) and (max-width: 1024px) {
	#sectioncontainer, #bannercontainer, #footercontainer, #menucontainer, #submenucontainer, section#logindetails {width: 96%;}
	div.global {padding: 0;} 
	.home-work2 {margin: 20px 7%;}
    .home-work {width: 26%;}
	div.mainText {width: 92%;}
	#resources1 div#resourcesOptionsContent .firstLineItem {width: 270px;}
}

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