/* CSS Document */

/* Basics */
html, body {margin: 0px; font-family: 'CG Omega', sans-serif; font-size: 14px; }
.clearfloat {clear:both; float:none;}
.aligncenter {text-align: center;}
.alignright {text-align: right;}
.alignleft {text-align: left;}
.aligntop {vertical-align: top;}
.alignbottom {vertical-align: bottom;}
.alignmiddle {vertical-align: middle;}
.marginleft10 {margin-left: 10px;}
.marginleft20 {margin-left: 20px;}
.marginright10 {margin-right: 10px;}
.marginright10 {margin-right: 20px;}
.margintop10 {margin-top: 10px;}
.margintop20 {margin-top: 20px;}
.margintop40 {margin-top: 40px;}
.marginbottom10 {margin-bottom: 10px;}
.marginbottom20 {margin-bottom: 20px;}
.marginbottom40 {margin-bottom: 40px;}
.padding10 {padding: 10px;}
.padding20 {padding: 20px;}
.padding40 {padding: 40px;}
.nomargin {margin: 0px;}
.widthhalf {width: 50%;}
.widthquarter {width: 25%;}
.widthfull {width: 100%;}
.roundcorners12 {-webkit-border-radius: 12px; -moz-border-radius: 12px; border-radius: 12px;}
.roundcorners {-webkit-border-radius: 6px; -moz-border-radius: 6px; border-radius: 6px;}
.hidecontainer {display: none;}
.showinline {display: inline;}
.showinlineblock {display: inline-block;}
.formfield { color: #000; padding: 5px;}
#submitbutton {padding: 20px; background-color: #333; color: #fff; border: thin #333 solid;}
#submitbutton:hover {padding: 20px; background-color: #f5f5f5; border: thin solid #999; color: #333;}
#servicesbutton {padding: 20px; background-color: #333; color: #fff; border: thin #333 solid; font-family: 'CG Omega', sans-serif; font-size: 26px; font-weight: 300; max-width: 100%; }
#servicesbutton:hover {padding: 20px; background-color: #f5f5f5; border: thin solid #999; color: #333; font-family: 'CG Omega', sans-serif; font-size: 26px; font-weight: 300;}

#buttonservicespage {padding-top: 6px; padding-bottom: 6px; padding-left: 10px; padding-right: 10px; background-color: #333; color: #fff; border: thin #333 solid; font-family: 'CG Omega', sans-serif; font-size: 26px; font-weight: 300; min-width: 200px; max-width: 100%; }
#buttonservicespage:hover {padding-top: 6px; padding-bottom: 6px; padding-left: 10px; padding-right: 10px; background-color: #f5f5f5; border: thin solid #999; color: #333; font-family: 'CG Omega', sans-serif; font-size: 26px; font-weight: 300; min-width: 200px; max-width: 100%;}

#servicesbuttondark {padding: 20px; background-color: #f5f5f5; color: #333; border: thin #999 solid; font-family: 'CG Omega', sans-serif; font-size: 26px; font-weight: 300; max-width: 100%; }
#servicesbuttondark:hover {padding: 20px; background-color: #333; border: thin solid #333; color: #fff; font-family: 'CG Omega', sans-serif; font-size: 26px; font-weight: 300;}
#thankdiv { display: none; }
#formvalidation { display: none; color: #fff; }


@media (min-width: 250px) and (max-width: 480px) {
	
#contactsent {display:none;}
#formvalidation {width: 100%; border: 1px solid #C00; background-color: #900; text-align: left; padding-left: 15px; padding-right: 5px; padding-top: 5px; padding-bottom: 5px; margin-top: 0px; margin-bottom: 20px; color: #fff; font-size: 14px; display: none;}

.headerbar { width: 100%; margin-bottom: 10px; }
.headerbarinner { width: 90%; padding-top: 0px; margin-top: 20px; margin-left: auto; margin-right: auto; }
.headerbarlogo { width: 100%; height: 89px; background: url(/img/coastal-dermatology-brick-nj-logo-small.jpg) center no-repeat; }
.headerbusinessname { width: 100%; margin-top: 0px; margin-bottom: 0px; text-align: center; }
.headerphone { width: 100%; margin-top: 0px; margin-bottom: 20px; text-align: center; }
.headerins { display:none; }

.navcontainer { width: 100%; margin: 0; padding: 0; background-color: #222; }
.navinnercontainer { width: 95%; margin-left: auto; margin-right: auto; padding: 0; }
.navinnercontainersub { width: 95%; margin-left: auto; margin-right: auto; padding: 0; min-height: 900px; }

.aboutheader { width: 100%; margin-left: auto; margin-right: auto; margin-bottom: 20px; margin-top: 20px; padding: 0; text-align: center; }
.aboutcontainer { width: 100%; margin-left: auto; margin-right: auto; margin-bottom: 20px; margin-top: 20px; padding: 0; text-align: left; }
.aboutlogos { display: inline-block; text-align: center; margin-left:auto; margin-right:auto; margin-bottom: 20px; }
.aboutimage { display: block; margin-left:auto; margin-right:auto; margin-bottom: 40px; text-align: center; }

.pagecontainer { width: 100%; margin: 0; }
.pageinnercontainer { max-width: 90%; margin-left: auto; margin-right: auto; padding-top: 20px; padding-bottom: 20px; }
.pageinnercontainersub { max-width: 90%; margin-left: auto; margin-right: auto; padding-top: 30px; padding-bottom: 30px; min-height: 600px; }

.pagecontainercolored { width: 100%; margin: 0; background: rgb(87,167,229); background: -moz-linear-gradient(top,  rgba(87,167,229,1) 17%, rgba(74,137,220,1) 99%); background: -webkit-linear-gradient(top,  rgba(87,167,229,1) 17%,rgba(74,137,220,1) 99%); background: linear-gradient(to bottom,  rgba(87,167,229,1) 17%,rgba(74,137,220,1) 99%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#57a7e5', endColorstr='#4a89dc',GradientType=0 ); padding-top: 40px; padding-bottom: 40px; }

.pagecontainerservices { width: 100%; margin: 0; background: rgb(87,167,229); background: -moz-linear-gradient(top,  rgba(87,167,229,1) 17%, rgba(74,137,220,1) 99%); background: -webkit-linear-gradient(top,  rgba(87,167,229,1) 17%,rgba(74,137,220,1) 99%); background: linear-gradient(to bottom,  rgba(87,167,229,1) 17%,rgba(74,137,220,1) 99%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#57a7e5', endColorstr='#4a89dc',GradientType=0 ); padding-top: 40px; padding-bottom: 40px; }

.pagecontainerintro { width: 100%; margin: 0; padding-top: 20px; padding-bottom: 20px; }



.footerbar { width: 100%; margin-top: 0px; border-top: 3px #222 solid; background: #4A89DC; }

.footerbarinner { width: 90%; padding-top: 20px; padding-bottom: 20px; margin-left: auto; margin-right: auto; text-align: center; }

#quotescontainer > div {
    width: 100%;
	margin-top: 20px;
	margin-bottom: 20px;
	padding: 20px;
	vertical-align: top;
}

#homead { display: none; }
#homeadm { display: block; margin-bottom: 20px; border-bottom: medium #DC6D00 solid; }

#servicesad { display: none; }
#servicesadm { display: block; margin-bottom: 20px; border-bottom: medium #DC6D00 solid; }

.mapsize { width: 100%; height: 200px; margin-bottom: 20px; border: solid thin #A8C7E0; }
.scrolltotop { position: fixed; bottom: 0; width: 100%; height: 30px; background-image:url(/img/topm1.png); background-repeat: no-repeat; background-position: center; position:fixed; display:none; cursor: pointer;}

.contactformcontainer { width: 100%; text-align: center; }
.contactfield { width: 100%; padding: 6px 10px; margin-bottom: 20px; text-align: left; }
.contactformbutton { width: 100%; padding: 6px 10px; background-color: #333; color: #fff; }
.contactformbutton:hover { width: 100%; padding: 6px 10px; background-color: #f5f5f5; color: #333; }

.instructions { width: 100%; margin-top: 20px; margin-bottom: 20px; background-color: #BCD4E5; padding: 15px; text-align: left; }

}

@media (min-width: 481px) and (max-width: 767px) {
	
#contactsent {display:none;}
#formvalidation {width: 100%; border: 1px solid #C00; background-color: #900; text-align: left; padding-left: 15px; padding-right: 5px; padding-top: 5px; padding-bottom: 5px; margin-top: 0px; margin-bottom: 20px; color: #fff; font-size: 14px; display: none;}

.headerbar { width: 100%; margin-bottom: 10px; }
.headerbarinner { width: 100%; padding-top: 0px; margin-top: 20px; margin-left: auto; margin-right: auto; }
.headerbarlogo { width: 100%; height: 89px; background: url(/img/coastal-dermatology-brick-nj-logo-small.jpg) center no-repeat; }
.headerbusinessname { width: 100%; margin-top: 0px; margin-bottom: 20px; text-align: center; }
.headerphone { width: 100%; margin-top: 0px; margin-bottom: 20px; text-align: center; }
.headerins { display:none; }

.navcontainer { width: 100%; margin: 0; padding: 0; background-color: #222; }
.navinnercontainer { width: 95%; margin-left: auto; margin-right: auto; padding: 0; }

.aboutheader { width: 100%; margin-left: auto; margin-right: auto; margin-bottom: 30px; margin-top: 20px; padding: 0; text-align: center; }
.aboutcontainer { width: 100%; margin-left: auto; margin-right: auto; margin-bottom: 20px; margin-top: 20px; padding: 0; text-align: left; }
.aboutlogos { display: inline-block; text-align: center; margin-left:auto; margin-right:auto; margin-bottom: 20px; }
.aboutimage { display: block; margin-left:auto; margin-right:auto; margin-bottom: 40px; text-align:center; }

.pagecontainer { width: 100%; margin: 0; }
.pageinnercontainer { max-width: 90%; margin-left: auto; margin-right: auto; padding-top: 20px; padding-bottom: 20px; }
.pageinnercontainersub { max-width: 90%; margin-left: auto; margin-right: auto; padding-top: 40px; padding-bottom: 40px; min-height: 600px; }

.pagecontainercolored { width: 100%; margin: 0; background: rgb(87,167,229); background: -moz-linear-gradient(top,  rgba(87,167,229,1) 17%, rgba(74,137,220,1) 99%); background: -webkit-linear-gradient(top,  rgba(87,167,229,1) 17%,rgba(74,137,220,1) 99%); background: linear-gradient(to bottom,  rgba(87,167,229,1) 17%,rgba(74,137,220,1) 99%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#57a7e5', endColorstr='#4a89dc',GradientType=0 ); padding-top: 40px; padding-bottom: 40px; }

.pagecontainerservices { width: 100%; margin: 0; background: rgb(87,167,229); background: -moz-linear-gradient(top,  rgba(87,167,229,1) 17%, rgba(74,137,220,1) 99%); background: -webkit-linear-gradient(top,  rgba(87,167,229,1) 17%,rgba(74,137,220,1) 99%); background: linear-gradient(to bottom,  rgba(87,167,229,1) 17%,rgba(74,137,220,1) 99%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#57a7e5', endColorstr='#4a89dc',GradientType=0 ); padding-top: 40px; padding-bottom: 40px;}

.pagecontainerintro { width: 100%; margin: 0; padding-top: 20px; padding-bottom: 20px; }

.footerbar { width: 100%; margin-top: 0px; border-top: 3px #222 solid; background: #4A89DC; }

.footerbarinner { width: 95%; padding-top: 20px; padding-bottom: 20px; margin-left: auto; margin-right: auto; text-align: center; }

#quotescontainer > div {
    width: 100%;
	margin-top: 20px;
	margin-bottom: 20px;
	padding: 20px;
	vertical-align: top;
}
#homead { display: none; }
#homeadm { display: block; margin-bottom: 20px; border-bottom: medium #DC6D00 solid; }

#servicesad { display: none; }
#servicesadm { display: block; margin-bottom: 20px; border-bottom: medium #DC6D00 solid; }

.mapsize { width: 100%; height: 300px; margin-bottom: 20px; border: solid thin #A8C7E0; }
.scrolltotop { position: fixed; bottom: 0; width: 760px; height: 48pxpx; background-image:url(/img/topm1.png); background-repeat: no-repeat; background-position: center; position:fixed; display:none; cursor: pointer;}

.contactformcontainer { width: 100%; text-align: center; }
.contactfield { width: 100%; padding: 6px 10px; margin-bottom: 20px; text-align: left; }
.contactformbutton { width: 100%; padding: 6px 10px; background-color: #333; color: #fff; }
.contactformbutton:hover { width: 100%; padding: 6px 10px; background-color: #f5f5f5; color: #333; }

.instructions { width: 100%; margin-top: 20px; margin-bottom: 20px; background-color: #BCD4E5; padding: 15px; text-align: left; }
}

@media (min-width: 768px) and (max-width: 1200px) {
	
#contactsent {display:none;}
#formvalidation {width: 100%; border: 1px solid #C00; background-color: #900; text-align: left; padding-left: 15px; padding-right: 5px; padding-top: 5px; padding-bottom: 5px; margin-top: 0px; margin-bottom: 20px; color: #fff; font-size: 14px; display: none;}
	
.headerbar { width: 100%; margin-bottom: 20px; }
.headerbarinner { width: 100%; padding-top: 20px; padding-bottom: 20px; margin-left: auto; margin-right: auto; }
.headerbarlogo { margin-left: 40px; width: 90px; height: 89px; background: url(/img/coastal-dermatology-brick-nj-logo-small.jpg) center no-repeat; float:left;}
.headerbusinessname { text-align: left; float:left; line-height: 89px; margin-left: 10px; }
.headerphone { text-align: right; float:right; line-height: 89px; margin-right: 40px; }
.headerins { display: none; }

.navcontainer { width: 100%; margin: 0; padding: 0; background-color: #222; }
.navinnercontainer { width: 95%; margin-left: auto; margin-right: auto; padding: 0; }

.aboutheader { width: 100%; margin-left: auto; margin-right: auto; margin-bottom: 40px; margin-top: 20px; padding: 0; text-align: center; }
.aboutcontainer { width: 100%; margin-left: auto; margin-right: auto; margin-bottom: 20px; margin-top: 20px; padding: 0; text-align: left; }
.aboutlogos { display: inline-block; text-align: center; margin-left:auto; margin-right:auto; margin-bottom: 20px; }
.aboutimage { float: left; margin-right: 30px; margin-bottom: 20px; }

.pagecontainer { width: 100%; margin: 0; }
.pageinnercontainer { width: 90%; margin-left: auto; margin-right: auto; padding-top: 40px; padding-bottom: 40px; }
.pageinnercontainersub { width: 90%; margin-left: auto; margin-right: auto; padding-top: 40px; padding-bottom: 40px; min-height: 600px; }

.pagecontainercolored { width: 100%; margin: 0; background: rgb(87,167,229); background: -moz-linear-gradient(top,  rgba(87,167,229,1) 17%, rgba(74,137,220,1) 99%); background: -webkit-linear-gradient(top,  rgba(87,167,229,1) 17%,rgba(74,137,220,1) 99%); background: linear-gradient(to bottom,  rgba(87,167,229,1) 17%,rgba(74,137,220,1) 99%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#57a7e5', endColorstr='#4a89dc',GradientType=0 ); }

.pagecontainerservices { width: 100%; margin: 0; background-image: url(../img/ourserviceshomebg.jpg); background-position: center; background-size: cover; }

.pagecontainerintro { width: 100%; margin: 0; padding-top: 20px; padding-bottom: 20px; min-height: 500px; background-repeat: no-repeat; }

.footerbar { width: 100%; margin-top: 0px; border-top: 3px #222 solid; background: #4A89DC; }

.footerbarinner { width: 95%; padding-top: 20px; padding-bottom: 20px; margin-left: auto; margin-right: auto; text-align: center; }

#quotescontainer > div {
    float: left; 
    width: 33%;
	padding: 20px;
	vertical-align: top;
}
#homead { display: block; border-bottom: medium #DC6D00 solid; }
#homeadm { display: none; }

#servicead { display: block; border-bottom: medium #DC6D00 solid; }
#serviceadm { display: none; }

.mapsize { width: 100%; height: 400px; margin-bottom: 40px; border: solid thin #A8C7E0; }
.scrolltotop {width: 100px; height: 46px;background-image:url(/img/top.png); background-repeat: no-repeat; background-position: center; position:fixed; bottom: 40px; right: 0px; display:none; cursor: pointer;}

.contactformcontainer { width: 600px; margin-left: auto; margin-right: auto; }
.contactfield { width: 600px; padding: 6px 10px; margin-bottom: 20px; text-align: left; }
.contactformbutton { width: 600px; padding: 6px 10px; background-color: #333; color: #fff; }
.contactformbutton:hover { width: 600px; padding: 6px 10px; background-color: #f5f5f5; color: #333; }

.instructions { width: 100%; margin-top: 20px; margin-bottom: 20px; background-color: #BCD4E5; padding: 15px; text-align: left; }
}

@media (min-device-width: 1201px) {
	
#contactsent {display:none;}
#formvalidation {width: 100%; border: 1px solid #C00; background-color: #900; text-align: left; padding-left: 15px; padding-right: 5px; padding-top: 5px; padding-bottom: 5px; margin-top: 0px; margin-bottom: 20px; color: #fff; font-size: 14px; display: none;}
	
.headerbar { width: 100%; margin-bottom: 20px; }
.headerbarinner { width: 100%; padding-top: 20px; padding-bottom: 20px; margin-left: auto; margin-right: auto; }
.headerbarlogo { margin-left: 40px; width: 90px; height: 89px; background: url(/img/coastal-dermatology-brick-nj-logo-small.jpg) center no-repeat; float:left;}
.headerbusinessname { text-align: left; float:left; line-height: 89px; margin-left: 10px; }
.headerphone { text-align: right; float:right; line-height: 89px; margin-right: 40px; }
.headerins { text-align: right; float:right; line-height: 89px; margin-right: 40px; }

.navcontainer { width: 100%; margin: 0; padding: 0; background-color: #222; }
.navinnercontainer { width: 1080px; margin-left: auto; margin-right: auto; }

.aboutheader { max-width: 1080px; margin-left: auto; margin-right: auto; margin-bottom: 40px; margin-top: 20px; padding: 0; text-align: center; }
.aboutcontainer { max-width: 1080px; margin-left: auto; margin-right: auto; margin-bottom: 20px; margin-top: 20px; padding: 0; text-align: left; }
.aboutlogos { display: inline-block; text-align: center; margin-left:auto; margin-right:auto; margin-bottom: 20px; }
.aboutimage { float: left; margin-right: 30px; margin-bottom: 20px; }

.pagecontainer { width: 100%; margin: 0; }
.pageinnercontainer { width: 80%; margin-left: auto; margin-right: auto; padding-top: 60px; padding-bottom: 60px;}
.pageinnercontainersub { width: 80%; margin-left: auto; margin-right: auto; padding-top: 60px; padding-bottom: 60px; min-height: 900px;}

.pagecontainercolored { width: 100%; margin: 0; background: rgb(87,167,229); background: -moz-linear-gradient(top,  rgba(87,167,229,1) 17%, rgba(74,137,220,1) 99%); background: -webkit-linear-gradient(top,  rgba(87,167,229,1) 17%,rgba(74,137,220,1) 99%); background: linear-gradient(to bottom,  rgba(87,167,229,1) 17%,rgba(74,137,220,1) 99%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#57a7e5', endColorstr='#4a89dc',GradientType=0 ); padding-top: 40px; padding-bottom: 40px; }

.pagecontainerservices { width: 100%; margin: 0; background-image: url(../img/ourserviceshomebg.jpg); background-position: center; background-size: cover; padding-top: 40px; padding-bottom: 40px; }

.pagecontainerintro { width: 100%; margin: 0; min-height: 500px; background-repeat:no-repeat; padding-top: 20px; padding-bottom: 20px; }

.footerbar { width: 100%; margin: 0; border-top: 3px #333 solid; background: #4A89DC; }

.footerbarinner { width: 1080px; padding-top: 20px; padding-bottom: 20px; margin-left: auto; margin-right: auto; text-align: center; }

#quotescontainer {
    width: 100%;
    overflow: hidden; /* contain floated elements */
}
#quotescontainer > div {
    float: left; 
    width: 33%;
	padding: 20px;
	vertical-align: top;
}
#homead { display: block; border-bottom: medium #DC6D00 solid; }
#homeadm { display: none; }

#servicead { display: block; border-bottom: medium #DC6D00 solid; }
#serviceadm { display: none; }

.mapsize { width: 100%; height: 600px; margin-bottom: 40px; border: solid thin #A8C7E0;}
.scrolltotop {width: 100px; height: 46px;background-image:url(/img/top.png); background-repeat: no-repeat; background-position: center; position:fixed; bottom: 40px; right: 0px; display:none; cursor: pointer;}

.contactformcontainer { width: 600px; margin-left: auto; margin-right: auto; }
.contactfield { width: 600px; padding: 6px 10px; margin-bottom: 20px; text-align: left; }
.contactformbutton { width: 600px; padding: 6px 10px; background-color: #333; color: #fff; }
.contactformbutton:hover { width: 600px; padding: 6px 10px; background-color: #f5f5f5; color: #333; }

.instructions { max-width: 1080px; margin-left: auto; margin-right: auto; margin-top: 20px; margin-bottom: 20px; border: #333 1px solid; background-color: #BCD4E5; padding: 15px; text-align: left; }
}