/* CSS for the Comic Art Workshop website 
	
	COLOUR REFERENCES
	2017 site
		Light Blue BG #a7b5c0
		Grey Blue BG - Medium #67747d
		Dark Blue Lines #2c3339
		Yellow #d4cd7c
		Pale yellow Approaching white #e2e7d1
		Brown skin #80685b
		Dark Hair #e2e7d1
		Grey blue - Dark #4c565f
				Green - dark #727a6d
		Green - Medium #99a695
		Green - Light #bccab3



	2015 Site
		Cram background #fff4d6
		Dark Orange #c04d01
		Orange #ea5812
		light orange #ee7f25
		Dark Green #58a878
		Middle Green #97bc86
		peppermint #bedfb3
		Linework Brown #4b2d21
		Book Brown	#815437	
		Skin Brown #b1815d	
		Whitie Skin Tone #deb18a	
		Grey Brown #b59c82
		
*/




/* GENERAL LAYOUT */

body {
	margin: 0px;
	font-size: 1.1em;
	max-width: 1300px;
	font-family: Helvetica, arial, sans-serif;	
	color: #2c3339;
	background-color: #67747d;
	 
	
}
.break {
    clear: both;
}

p{
	margin: 0;
}

a {
	text-decoration: none;
	font-weight: bold;
	color: #4b2d21;
}
a:hover {
	text-decoration: none;
	color: #983D01;
	font-weight: bold;
}

a img {
	border:medium none;
}
ul{
	padding: 0px;
	margin: 0px;
    list-style-type: none;
}
table {
display: table;
border-collapse: separate;
border-spacing: 0px;
border-color: #FFFFFF;
}
td, th {
display: table-cell;
vertical-align: inherit;
padding: 0px;
margin: 0px;
border-spacing: 0px;
}
#bigcontainer {
	margin-left: auto;
    margin-right: auto;
    width: 760px;

}
#container {
	width: 648px;
	background-color: #a7b5c0;	
	height: 2980px;
    margin-top: 50px;
    margin-bottom: 100px;
    padding: 20px 24px 0px 25px;
    border-radius: 6px;
}

/* ====== BOX DIVS ======= */


.box {
	width: 108px;
	height: 108px;
	background-color: none;
	float: left;
	margin: 0px;
	
}
.phonebox {
	width: 108px;
	height: 108px;
	background-color: none;
	float: left;
	margin: 0px;
	
}
.twobytwo {
	width: 216px;
	height: 216px;
	background-color: none;
	float: left;
	margin: 0px;

}
.twobytwophone {
	width: 0px;
	height: 0px;
	background-color: none;
	float: left;
	margin: 0px;
	display: none;

}
.twobyonephone {
	width: 0px;
	height: 0px;
	background-color: none;
	float: left;
	margin: 0px;
	display: none;

}

.halfbyhalf {
	width: 46px;
	height: 46px;
	background-color: none;
	float: left;
	margin: 4px;
}
.halfbytwo {
	width: 216px;
	height: 57px;
	background-color: none;
	float: left;
	margin: 0px 0px 0px 0px;
}
.onebytwo {
	width: 216px;
	height: 108px;
	background-color: none;
	float: left;
	margin: 0px 0px 0px 0px;
}
.tworec {
	width: 208px;
	height: 100px;
	background-color: none;
	float: left;
	margin: 4px;
}
.threerec {
	width: 324px;
	height: 100px;
	background-color: none;
	float: left;
	margin: 0px;
}
.fourrec {
	width: 424px;
	height: 100px;
	background-color: none;
	float: left;
	margin: 4px;
}
.fourrec {
	width: 540px;
	height: 108px;
	background-color: none;
	float: left;
	margin: 4px;
}
.fullwidth {
	width: 648px;
	height: auto;
	background-color: none;
	float: left;
	margin: 0px;
}
.fullwidthnophone {
	width: 648px;
	height: auto;
	background-color: none;
	float: left;
	margin: 0px;
}

.copyboxright {
	margin: 4px;
	height: 208px;
	width: 424px;
	float: right;
	background-color: none;

}
.copyboxleft {
	margin: 4px;
	height: 208px;
	width: 424px;
	float: left;
	background-color: none;

}
.copyboxwhere {
	height: 208px;
	width: 424px;
	float: right;
	background-color: none;
	margin: 4px;

}
.copyboxwho {
	margin: 4px;
	height: 262px;
	width: 424px;
	float: left;
	background-color: none;

}
.copyboxwhy {
	margin: 4px;
	height: 368px;
	width: 424px;
	float: right;
	background-color: none	;
}
.leftcomic {
	float:left;
	width: 432px;
	height: 216px;
	margin-top: 0px;
}
.rightcomic {
	float:right;
	width: 216px;
	height: 216px;
}
.twobytwoleft{
	float: left;
	width: 216px;
	
}
.whereslab {
	float:left;
	width: 216px;
	height: 278px;
}
.orangetag {
	height: auto;
	margin-top: 0px;
	margin-bottom: 0px;
	margin-left: 0px;
	
}
.orangetagright {
	height: auto;
	margin-top: 0px;
	margin-bottom: 0px;
	margin-left: 0px;
	margin-right: 0px;	
}
.guestslab {
	float:right;
	width: 216px;
	height: 276px;
}
.whyslab {
	float:left;
	width: 216px;
	height: 438px;	
}

#links {

}
#links li {

	
}
#links a {
	font-weight: bold;
	text-decoration: none;
	color: black;
}
#links a:hover{
	font-weight: bold;
	text-decoration: none;
	color: #a9221b;
}
.linkbox {
	float: left;
	background-color: #cb717a;
	width: 121.2px;
	height: 100px;
	font-size: 1em;
	margin: 4px;

}
.linkbox:hover {
	background-color: #fcda97;
}
.linkbox p {
	padding: 20px 5px;
	text-align: center;
}
.leftcopy {
	background-color: none;
	width: 245px;
	float: left;
	color: #4b2d21;
}
.rightcopy {
	background-color: none;
	width: 400px;
	float: right;
	padding-bottom: 10px;	
}
.rightcopy ul{
	padding: 0px 30px 20px 45px;
	text-align: left;
	font-size: 0.9em;	
	text-indent: 0px; 
}
.rightcopy ul li:before{ 
	content:"-"; 	
	position:relative; 
	left:-5px;
}
.rightcopy ul li{ 
	text-indent:-5px; 
	padding: 3px 20px;
}


.illo {
	background-color: none; 
	border-radius: 5px;
	margin: 0px;
	width: 648px;
	height: auto;
	margin-bottom: 50px;
	color: #9f6807;
	text-align: center;
	
	
}
.illo img {
	border-radius: 5px;
	
}
.portrait {
	background-color:#67747d; 
	border-radius: 5px;
	margin: 0px 0px 0px 20px;
	width: 210px;
	height: 320px;
	color: #9f6807;
	position: relative;
	float: left;	
}
.portrait img {
	width: 210px;
	height: 320px;
	border-radius: 5px;
}
.left-column {
	width: 108px;
	height: 216px;
	float: left;
	
}
.rightblock {
	width: 540px;
	height: 216px;
	float: right;
	
}
.phonehalf {
	display: none;

}
.email {
	margin-left: auto;
	margin-right: auto;
	width: 400px;
	margin-top: 0px;
}
.email img {
	margin-left: auto;
	margin-right: auto;
	
}
#lost {
	margin-left: auto;
	margin-right: auto;
	margin-top: 100px;
	text-align: center;
	font-weight: bold;
	
}
.fullwidthpens {
	margin: 40px 0 10px 0; 

}
.smallpens {
	width: 400px;
	margin-left: auto;
	margin-right: auto;
	margin-bottom: 30px;
}
.smallpens img {
	width: 400px;

}



/* ====== TITLE HEADERS for content pages ======= */



.titlebox {
	width: 66px;
	height: 66px;
	background-color: red;
	float: left;
	border: black solid; 
}
.copytitle{
	width: 648px;
	height: 132px;
	background-color: yellow;	
	padding: 0px;
	
}



/* ====== TEXT FORMATTING ======= */


.copybox {
	padding: 35px 40px 20px 45px;
	text-align: left;
	font-size: 0.9em;	
	text-indent: 0px;
		
}
.copybox a {
	color: #2c3339;
	font-weight: bold;
}
.copybox a:hover {
	color: #4c565f;
	font-weight: bold;
}
.more {
	font-size: 0.6em;
	color: #878585;
	font-weight: bold;
}
.more a {
	text-decoration: none;
	color: #878585;
}
.more a:hover {
	text-decoration: none;
	color: #a9221b
}
h3 { 
	text-align: center;
	padding: 8px;
	margin: 0;
}
h1 {
	text-align: center;
	padding: 10px;
	margin: 0;
	font-size: 1.7em;
	color: #4b2d21;
}
h2 {
	text-align: center;
	padding: 20px;
	margin: 0;
	font-size: 2em;
}
.portraithead {
	font-size: 1.3em;
	color: #4b2d21;
	font-weight: bold;
	padding: 0px 0px 10px 30px;

}
.frontformat {
	font-weight: bold;
	font-size: 1.3em;
	padding-bottom: 5px;
}
.leftcopy p {
	font-weight: bold;
	font-size: 1.3em;
	text-align: right;
}
.rightcopy p {
	padding: 0px 30px 20px 30px;
	text-align: left;
	font-size: 0.9em;	
	text-indent: 0px;	
}
.ital {
	font-style: italic;
}
.bold {
	font-weight: bold;
}
.copywide p {
	padding: 0px 50px 20px 50px;
	text-align: justify;
	font-size: 0.9em;	
	text-indent: 0px;	
}
.addressbox {
	font-weight: bold;
	padding: 0 0 0 10px;
	margin-top: -10px;
	
}



/* ======= FAQ PAGE ======*/


.leftcopyfaq p {
	font-weight: bold;
	font-size: 0.85em;
	text-align: left;
	text-transform: uppercase;
	color: #4b2d21;
}
.rightcopyfaq p {
	padding: 0px 40px 20px 30px;
	text-align: left;
	font-size: 0.85em;	
	text-indent: 0px;	
	
}
.leftcopyfaq {
	background-color: none;
	width: 200px;
	float: left;
	padding: 5px 0px 10px 45px;
}
.rightcopyfaq {
	background-color: none;
	width: 400px;
	float: right;
		
}
.rightcopyfaq ul{
	padding: 0px 30px 20px 45px;
	text-align: left;
	font-size: 0.9em;	
	text-indent: 0px; 
}
.rightcopyfaq ul li:before{ 
	content:"-"; 	
	position:relative; 
	left:-5px;
}
.rightcopyfaq ul li{ 
	text-indent:-5px; 
	padding: 3px 20px;
}



/* ====== LINKS BAR ======= */

#linksbarcontainer {
	background-color: none;
	width: auto;
	height: auto;
	margin-left: none;
	margin right: none;
	display:block;

}
#linksbarphone {
	display: none;
}

#linksbar {
	position: fixed;
	right: -25px;
	top: 60px;
	width: 160px;
	height: auto;
	background-color: #2c3339;
	border-radius: 8px;
	font-size: 0.7em;
	padding: none;
}
#linksbar ul {
	margin-left: 10px;
	margin-top: 10px;
	margin-right: 10px;
	padding-bottom: 10px
}
#linksbar li {
	color: rgb(255, 240, 216);
	font-weight: normal;
	padding: 2px 0 2px 5px;
	border-radius: 4px; 
}
#linksbar a {
	color: #40260e;
	text-decoration: none;
}
#linksbar a:hover {
	text-decoration: none;
	font-weight: bolder;
	
}
#linksbar li:hover {
	color: #2c3339;
	background-color: #a7b5c0;
	font-weight: bold;
}
#menubutton {
	display: none;
}
#menubutton img {
	padding-left: 2px;
	padding-top: 2px;
}


.linksbarbutton {

}
#linksphone {
	display: none;
}

#social {
    position: fixed;
    right: -34px;
    top: 195px;
    width: 160px;
    left: auto
}


#socbutton {
  	float: left;
	 width: 30px; 
	 height: 30px;
     background: url(images/social1.gif) no-repeat;
     padding: 0;
     position: relative;
     z-index: 0;
    }
   
  
  #socbutton li {
    margin: 0; 
    padding: 0; 
    list-style: none;
    position: relative;
    z-index: -1; 
    top: 0;}

  #socbutton li, #socbutton a {
    height: 30px; display: block; }  
    
   #socbutton2 {
  	float: left;
	 width: 30px; 
	 height: 30px;
     background: url(images/social2.gif) no-repeat;
     padding: 0;
     position: relative;
     z-index: 0;
    }
   
  #socbutton2 li {
    margin: 0; 
    padding: 0; 
    list-style: none;
    position: relative;
    z-index: -1; 
    top: 0;}

  #socbutton2 li, #socbutton2 a {
    height: 30px; display: block; }  




 #socbutton3 {
  	float: left;
	 width: 30px; 
	 height: 30px;
     background: url(images/social3.gif) no-repeat;
     padding: 0;
     position: relative;
     z-index: 0;
    }
   
  #socbutton3 li {
    margin: 0; 
    padding: 0; 
    list-style: none;
    position: relative;
    z-index: -1; 
    top: 0;}

  #socbutton3 li, #socbutton3 a {
    height: 30px; display: block; }  
    
  #socbutton4 {
  	float: left;
	 width: 30px; 
	 height: 30px;
     background: url(images/social4.gif) no-repeat;
     padding: 0;
     position: relative;
     z-index: 0;
    }
   
  #socbutton4 li {
    margin: 0; 
    padding: 0; 
    list-style: none;
    position: relative;
    z-index: -1; 
    top: 0;}

  #socbutton4 li, #socbutton4 a {
    height: 30px; display: block; }  



/* positioning the background for each link in the menu */
    
  #socbut { left: 0; width: 30px; } 
  #socbut2 { left: 0; width: 30px; }
  #socbut3 { left: 0; width: 30px; }
  #socbut4 { left: 0; width: 30px; }  
   
/* positioning for rollovers */

 #socbut a:hover {
   background: transparent url(images/social1.gif) no-repeat -30px 0px;  } 
#socbut2 a:hover {
   background: transparent url(images/social2.gif) no-repeat -30px 0px;  } 
#socbut3 a:hover {
   background: transparent url(images/social3.gif) no-repeat -30px 0px;  } 
#socbut4 a:hover {
   background: transparent url(images/social4.gif) no-repeat -30px 0px;  } 









/* rightbutton = socbutton
	rightbut = socbut
*/
/* ====== FOOTER and LOGO BAR ======= */

#footer {
	margin-top: 100px;
	width: 648px;

}

#logobar {
	
	position: relative;
	top: 10px;
	width: 648px;
	height: auto;
	background-color: none;
	margin-left: 25px;


}
.logo {
	float: left;
	margin: 20px, 30px;
	width: 60px;
	height: 60px;
	background-color: #b0713b;
	
	margin: 30px;
}
#footer p {
	font-size: 0.6em;
	color: #2c3339;
	padding: 40px;
	padding-top: 20px;
	text-align: center;
	margin-left: 20px;
}
#footer a {
	text-decoration: none;
	color: #2c3339;
	font-weight: bold;
}
#footer a:hover {
	color: #e2e7d1;
}


/* ======= LOGO BAR BORDERS ========== */

#logoborderleft {
	width: 8px;
	background: url(images/borderleft.gif) repeat;
	height: 138px;
	position: relative;	
	float: left;
}


 #logoborderright {
	width: 8px;
	background: url(images/borderright.gif) repeat;
	height: 138px;
	position: relative;	
	float: right;
}
#logobordertop	{
	width: 644px;
	background: url(images/bordertop.gif) repeat;
	height: 8px;
	margin: 0 2px 0 2px;
}	
#logoborderbottom	{
	width: 644px;
	background: url(images/borderbottom.gif) repeat;
	height: 8px;
	margin: 0 2px 0 2px;
}	
#logocontainer img {
	width: 632px;
	position: relative;
	float: left;
}



/* ======= FANCY BUTTONS ========== */

  #bigbutton {
  	float: left;
	 width: 216px; 
	 height: 216px;
     background: url(images/61.gif) no-repeat;
     padding: 0;
     position: relative;
    }
  
  #bigbutton li {
    margin: 0; padding: 0; list-style: none;
    position: relative; top: 0;}

  #bigbutton li, #bigbutton a {
    height: 216px; display: block; }  

/* positioning the background for each link in the menu */
    
  #bigbut { left: 0; width: 216px; } 
     
   
/* positioning for rollovers */

 #bigbut a:hover {
   background: transparent url(images/61.gif) no-repeat -216px 0px;  } 
  

 #rightbutton {
  	float: left;
	 width: 216px; 
	 height: 216px;
     background: url(images/62.gif) no-repeat;
     padding: 0;
     position: relative;
     z-index: 0;
    }
  
  #rightbutton li {
    margin: 0; 
    padding: 0; 
    list-style: none;
    position: relative;
    z-index: -1; 
    top: 0;}

  #rightbutton li, #rightbutton a {
    height: 216px; display: block; }  

/* positioning the background for each link in the menu */
    
  #rightbut { left: 0; width: 216px; }    
   
/* positioning for rollovers */

 #rightbut a:hover {
   background: transparent url(images/62.gif) no-repeat -216px 0px;  } 



	
	
	
	
	
	
	  #topbutton {
	display: block;  	
  	float: left;
	 width: 216px; 
	 height: 216px;
     background: url(images/136.gif) no-repeat;
     padding: 0;
     position: relative;
    }
  
  #topbutton li {
    margin: 0; padding: 0; list-style: none;
    position: relative; top: 0;}

  #topbutton li, #topbutton a {
    height: 216px; display: block; }  

/* positioning the background for each link in the menu */
    
  #topbut { left: 0; width: 216px; } 
     
   
/* positioning for rollovers */

 #topbut a:hover {
   background: transparent url(images/136.gif) no-repeat -216px 0px;  } 
  






/*  SLIDSHOW PLUGIN   */

    



    #slides {
      display: none
    }

    #slides .slidesjs-navigation {
      margin-top:3px;
    }

    #slides .slidesjs-previous {
      margin-right: 5px;
      float: left;
    }

    #slides .slidesjs-next {
      margin-right: 5px;
      float: left;
    }

    .slidesjs-pagination {
      margin: 6px auto 22px auto;
      width: 154px;
      list-style: none;
    }

    .slidesjs-pagination li {
      float: left;
      margin: 0 1px;
    }

    .slidesjs-pagination li a {
      display: block;
      width: 13px;
      height: 0;
      padding-top: 13px;
      background-image: url(images/pagination.png);
      background-position: 0 0;
      float: left;
      overflow: hidden;
    }

    .slidesjs-pagination li a.active,
    .slidesjs-pagination li a:hover.active {
      background-position: 0 -13px
    }

    .slidesjs-pagination li a:hover {
      background-position: 0 -26px
    }

    #slides a:link,
    #slides a:visited {
      color: #333
    }

    #slides a:hover,
    #slides a:active {
      color: #9e2020
    }

    .navbar {
      overflow: hidden
    }

    #slides {
      display: none
    }

    .container {
      margin: 0 auto
    }

    /* For tablets & smart phones */
    @media (max-width: 767px) {
      body {
      
      }
      .container {
        width: auto
      }
    }

    /* For smartphones */
    @media (max-width: 480px) {
      .container {
        width: auto
      }
    }

    /* For smaller displays like laptops */
    @media (min-width: 768px) and (max-width: 979px) {
      .container {
        width: 724px
      }
    }

    /* For larger displays */
    @media (min-width: 1200px) {
      .container {
        width: 1170px
      }
    }
  




/* ----- TESTIMONIALS ------ */

/*	COLOUR REFERENCES
		Cram background #fff4d6
		Dark Orange #c04d01
		Orange #ea5812
		light orange #ee7f25
		Dark Green #58a878
		Middle Green #97bc86
		peppermint #bedfb3
		Linework Brown #4b2d21
		Book Brown	#815437	
		Skin Brown #b1815d	
		Whitie Skin Tone #deb18a	
		Grey Brown #b59c82

*/

.testimonial {
	width: 560px;	
	margin: 0px auto 40px auto;
	min-height: 150px;
	
}
.testimonial-copy {
	width: 380px;
	float: left;
	margin-left: 0px;
}
.testimonial-copy p {
	color: #815437;
	padding: 0px 0px;
	font-size: 0.8em;
	font-weight: bold;
	font-style: italic;	
	text-align: center;


}
.testimonial-credit {
	font-style: none;
	padding: 25px 0px 30px 0px;

}
.testimonial-credit p {
	color: #4b2d21;
	font-style: normal;
	font-size: 0.9em;
	text-align: center;
	font-weight: bold;
}

.testimonial-buffer {
	width: 30px;
	float: left;
	height: 150px;
	
}

.testimonial-portrait {
	width: 150px;
	float: left;
	

}
.testimonial-portrait img {
	width: 150px;
	height: 150px;
	border-radius: 75px;

}

#residency-2015-topbuffer {
	width: 0px;
	height: 0px;	
	background-color: none;
	display: none;
}







/* ====== PRACTICE DIVS ======= */

#practice1 {
	float:left;
	width: 200px;
	height: 200px;
	background-color: green;
	
}
#practice2 {
	float:left;
	width: 200px;
	height: 200px;
	background-color: green;

}






/* ====== greater than 1300px ======= */

@media screen and (min-width: 1300px) {

		#practice2 {


}
#linksbarcontainer {
	display:block;
}

	#linksbar {
	position:fixed;
	left: 1000px;
	
	
}
#social {
    position: fixed;
    right: auto;
    top: 195px;
    width: 160px;
    left: 1020px;
}

	#linksbar ul {
	
}
#linksbar li {


}
.linksbarbutton {


}
#container {
	
}
}


 /* ===== END MEDIA QUERY ===== */




/* ====== less than 900px ======= */

@media screen and (max-width: 900px) {

		#practice2 {
	float:left;
	width: 200px;
	height: 200px;
	background-color: red;

}
#linksbarcontainer {
	position: fixed;
	top: -10px;
	background-color: #2c3339;
	width: 100%;
	height: 35px;
	margin-left: none;
	margin right: none;
	padding-bottom: 4px;
	z-index: 1;
	display:block;

}

	#linksbar {
		right: 0px;
		width: 648px;
		top: 0px;
		position: relative;
		font-weight: bold;
		height: 35px;
		background-color: #2c3339;
		border-radius: 0px;
		font-size: 0.6em;
		padding: none;
		margin-left: auto;
		margin-right: auto;

	
}
	#linksbar ul {
		margin-left: auto;
		margin-top: auto;
		padding-bottom: 0px;
}
#linksbar li {
	padding: 0px;
	float: left;
	background-color: none;
	width: auto;
	min-width: 53px;
	height: 32px;
	padding: 0px 10px 0px 10px;
	margin-left: auto;
	margin-right: auto;
	border-radius: 8px;
	font-size: 1.2em;
	font-weight: bold;
	margin: 4px;
	text-align: center;


}
.linksbardouble {
	padding: 0px;
	float: left;
	background-color: #cb717a;
	width: 200px;
	height: 55px;
	padding: 0px;
	border-radius: 8px;
	font-size: 1em;
	margin: 4px;
	text-align: center;

}
.linksbarbutton {
	position: relative;
	top: 12px;

}

#linksbar a {
	color: none;
	text-decoration: none;
}
#linksbar a:hover {
	text-decoration: none;
	font-weight: bolder;
	
}
#linksbar li:hover {
	color: #4b2d21;
	background-color: #d4cd7c;
	font-weight: bold;
}

#container {
	width: 648px;
	background-color: #a7b5c0;	
	height: 2800px;
    margin-top: 120px;
    margin-bottom: 100px;
    padding: 4px;
    margin-left: auto;
    margin-right: auto;
}
body {
	background-color: #a7b5c0;
}
#bigcontainer {
	width: 100%;
}
#footer {
	margin-top: 100px; 
	margin-left: auto;
	margin-right: auto;
	
}

#footer p {
	margin-left: 0px;
	padding-bottom: 100px;
}
#logobar {
	margin-left: auto;
	margin-right: auto;
}
#social {
    position: fixed;
    width: 100%;
    bottom: 0px;
    background-color: #67747d;
    height: 40px;
    right: 0px; 
    top: auto;
    z-index: 1; 

}

#logoborderleft, #logoborderright, #logobordertop, #logoborderbottom {
	display: none;
}
#socialcontainer {
	margin-left: auto;
    margin-right: auto;
    width: 120px;
    padding-top: 5px;
}




 /* ===== END MEDIA QUERY =====



	COLOUR REFERENCES
	2017 site
		Light Blue BG #a7b5c0
		Grey Blue BG - Medium #67747d
		Dark Blue Lines #2c3339
		Yellow #d4cd7c
		Pale yellow Approaching white #e2e7d1
		Brown skin #80685b
		Dark Hair #e2e7d1
		Grey blue - Dark #4c565f
				Green - dark #727a6d
		Green - Medium #99a695
		Green - Light #bccab3












/* ====== less than 600px ======= */

@media screen and (max-width: 650px) {

		#practice2 {
	float:left;
	width: 200px;
	height: 200px;
	background-color: red;

}
#linksbarcontainer {
	max-width: 650px;
	position: fixed;
	top: 29px;
	background-color: #a7b5c0;
	width: 100%;
	height: 216px;
	margin-left: none;
	margin right: none;
	padding-bottom: 4px;
	z-index: 1;
	display: none;
	
	

}
#linksbarphone {
	display: block;
	max-width: 650px;
	position: fixed;
	top: -10px;
	background-color: #2c3339;
	width: 100%;
	height: 35px;
	margin-left: none;
	margin right: none;
	padding-bottom: 4px;
	z-index: 1;

}

#linksbar {
		display: block;
		max-width: 650px;
		right: 0px;
		width: auto;
		top: 0px;
		position: relative;
		font-weight: bold;
		height: 216px;
		background-color: transparent;
		border-radius: 0px;
		font-size: 0.6em;
		padding: none;
		margin-left: auto;
		margin-right: auto;
		margin-top: none;
		
}

	#linksbar ul {
		margin-left: auto;
		margin-right: auto;
		margin-top: auto;
		padding-bottom: 0px;
}
#linksbar li {
	padding: 0px 0px 0px 0px;
	float: none;
	background-color: #4c565f;
	width: auto;
	min-width: 53px;
	height: 32px;
	padding: 0px 10px 0px 35px;
	margin-left: auto;
	margin-right: auto;
	border-radius: 8px;
	font-size: 1.5em;
	font-weight: normal;
	margin: 4px;
	text-align: left;


}
.linksbardouble {
	padding: 0px;
	float: left;
	background-color: #cb717a;
	width: 200px;
	height: 55px;
	padding: 0px;
	border-radius: 8px;
	font-size: 1em;
	margin: 4px;
	text-align: center;

}
.linksbarbutton {
	position: relative;
	top: 8px;
	margin-bottom: 15px;
	

}

#linksbar a {
	color: none;
	text-decoration: none;
}
#linksbar a:hover {
	text-decoration: none;
	font-weight: bolder;
	
}
#linksbar li:hover {
	color: #4b2d21;
	background-color: #d4cd7c;
	font-weight: bold;
}

#container {
	width: 310px;
	background-color: #a7b5c0;	
	height: auto !important;
    margin-top: 30px;
    margin-bottom: 0px;
    padding: 4px;
    margin-left: auto;
    margin-right: auto;
}
body {
	background-color: #orange;
}
#bigcontainer {
	width: 100%;
	max-width: 600px;
	background-color: #a7b5c0; 
}
.box {
	display: none;
}
.phonebox {
	display: block;
	width: 103px;
	margin-bottom: 5px;
}
.phonebox img {
	width: 103px;
}
.twobytwo {
	display: none;
}
.twobytwophone {
	width: 310px;
	height: 310px;
	background-color: none;
	float: left;
	margin: 0px;
	display: inherit;
	position: relative;
}
.twobytwophone img {
	width: 310px;
}
.twobyonephone {
	width: 310px;
	height: 85px;
	background-color: none;
	float: left;
	margin: 0px;
	display: block;

}
.twobyonephone img {
	width: 310px;
}
.halfbytwo {
	display: none;
}
.leftcomic {
	width: 310px;
	height: auto;
}
.rightcomic{
	display: none;
}
.left-column {
	display: none;
}
.rightblock {
	height: auto;
}
.fullwidth {
	width: 310px;
	
}
.fullwidth img {
	width: 310px;
}
.fullwidthnophone {
	display: none;
}

.copybox {
	padding: 20px 5px 20px 5px;
	text-align: center;
	font-size: 0.9em;	
	text-indent: 0px;
	
}

.copyboxright {
	height: auto;
	margin: 0px;
	float: none;
	width: 310px;
}
.copyboxleft {
	height: auto;
	margin: 0px;
	float: none;
	width: 310px;
}
.copyboxwhere {
	height: auto;
	margin: 0px;
	float: none;
	width: 310px;
}
.copyboxwho {
	height: auto;
	margin: 0px;
	float: none;
	width: 310px;
}
.copyboxwhy {
	height: auto;
	margin: 0px;
	float: none;
	width: 310px;
}
.whereslab {
	display: none;
}
.guestslab {
	display: none;
}
.whyslab {
	display: none;
}
.onebytwo {
	display: none;
}
#bigbutton {
	display: none;
}
#rightbutton {
	display: none;
}
.phonehalf img{
	width: 152px;

}
#footer {
	width: 310px;
	margin-right: auto;
	margin-left: auto;
	margin-top: 0px;
}
#footer p {
	font-size: 0.4em;
}
#logobar {
	margin-left: 0px;
}
img {
	max-width: inherit;
}
div {
	max-width: 310px;
}
#linksphone {
	display: block;
}
#menubutton {
	display: block;
	width: 25px;
	height: 22px;
	background-color: #2c3339; 
	float: right;
	margin: 13px 8px 0px 0px;
	border-radius: 3px;
	z-index: 3;
	
}
.phonehalf {
	display: block;

}
.illo {
	width: 310px;
	max-width: 600px;
	margin-bottom: 20px;
}
.illo img {
	width: 310px;
	height: auto;
}
.copytitle {
	font-size: 1em;
	padding: 0px;
}
.leftcopy {
	width: 310px;
}
.leftcopy p {
	text-align: left;
	font-size: 1em;
}
.rightcopy {
	width: 310px;
}
.rightcopy p {
	padding: 15px 0px 10px 0px;
	text-align: left;
	font-size: 0.9em;
}
.rightcopy li {
	width: 230px;
	font-size: 0.9em;
	
}
.rightcopy ul {
	width: 230px;
	font-size: 0.9em;
	padding-left: 20px;
}
.addressbox p {
	text-align: left;
}
.portrait {
	margin-top: 40px;
	margin-bottom: 10px;
	margin-left: auto;
	margin-right: auto;
	height: auto;
	width: 310px;
	background-color: transparent;

}
.portrait img {
	width: 310px;
	height: auto;
}
.portraithead {
	padding-left: 0px;
}
.rightcopyfaq {
	
}
.rightcopyfaq p {
	padding: 0px;
	font-size: 0.8em;
}
.leftcopyfaq {
	padding: 25px 0px 10px 0px;
}
.copywide {
	
}
.copywide p {
	padding: 10px 0px 10px 0px;
	font-size: 0.8em;
	
}
.fullwidthpens {
	margin: 20px 0 10px 0; 
	padding-left: 0px;
	width: 270px;
	margin-left: auto;
	margin-right: auto;
}
.fullwidthpens img {
	width: 270px;
}
.portrait
{

}
.testimonial {
	width: 310px;	
	margin: 0px auto 40px auto;
	min-height: 150px;
	
}
.testimonial-copy {
	width: 380px;
	float: left;
	margin-left: 0px;
}
.testimonial-copy p {
	color: #815437;
	padding: 0px 0px;
	font-size: 0.8em;
	font-weight: bold;
	font-style: italic;	
	text-align: center;


}
.testimonial-credit {
	font-style: none;
	padding: 25px 0px 30px 0px;

}
.testimonial-credit p {
	color: #4b2d21;
	font-style: normal;
	font-size: 0.9em;
	text-align: center;
	font-weight: bold;
}

.testimonial-buffer {
	width: 0px;
	float: none;
	height: 0px;
	display: none;
	
}

.testimonial-portrait {
	width: 150px;
	float: none;	
	margin: 0px auto 0px auto;
	

}
.testimonial-portrait img {
	width: 150px;
	height: 150px;
	border-radius: 75px;

}
#residency-2015-topbuffer {
	width: 310px;
	height: 137px;	
	background-color: none;
	display: block;
}
	  #topbutton {
	display: none;  	
  	float: left;
	 width: 216px; 
	 height: 216px;
     background: url(images/136.gif) no-repeat;
     padding: 0;
     position: relative;
    }
    
#social {
    position: fixed;
    max-width: 600px;
    width: 100%;
    bottom: 0px;
    background-color: #67747d;
    height: 40px;
    right: 0px; 
    top: auto; 
    z-index: 1;

}    


} 

/* ===== END LESS than 600px MEDIA QUERY ===== */






/* ====== greater than 1300px ======= */










 /* ===== END MEDIA QUERY ===== */