@charset "utf-8";



body {

  font-family:Verdana, Arial, Helvetica, sans-serif;

  background: #666666;

  margin: 0; /* it's good practice to zero the margin and padding of the body element to account for differing browser defaults */

  padding: 0;

  text-align: center; /* this centers the container in IE 5* browsers. The text is then set to the left aligned default in the #container selector */

  color: #000000;

}



#container {

  width: 90%;  /* this will create a container 80% of the browser width */

  background: #FFFFFF;

  padding:0;

  margin: 0 auto; /* the auto margins (in conjunction with a width) center the page */

  border: 1px solid #000000;

  text-align: left; /* this overrides the text-align: center on the body element. */

}



.header {

	width:100%;

	background-color:#000040;

	float:left;

	height:120px;

	background-image:url(../images/SDprHeader.png);

	background-repeat: no-repeat;

	background-position: center center;

}



.menuContainer {

width:100%;

background-color:#9F0000;

float:left;

height:30px;

display:table;

}



.menu {

margin:0 auto;

text-align: center;

width:80%;

height:30px;

clear:both;

}





.menu li {

float:left;

list-style-type:none;

color:#FFF;

padding: 0px 20px 0px 20px;

}





.menu li a{

	font-size: 12px;

	font-weight: bold;

	font-variant: small-caps;

	color:#fff;

	text-decoration:none;

}





.menu li a:hover{

	text-decoration:underline;

}





.mainContent {

	width:100%;

	background-color:#fff;

	float:left;

	background-image:url(../images/SDprMainBodyBckg.png);

	background-repeat: repeat-x;

	text-align:center;

	color:#FFFF00;

	text-shadow: 0px 2px 0px rgba(100, 100, 100, 2); 

}



.centerDiv {

margin:0 auto;

text-align: center;

width:90%;

clear:both;

}



.centerBot {

	background-color:#9F0000;

	text-align: center;

	width:100%;

	clear:both;

	height:60px;

}



.phoneTbl {

align:center;

}



.phoneTbl th{

text-align: center;

color:#FFFF00;

font-size:14px;

font-weight:bold;



}



.directory{

margin:0 auto;

float:none;

width:80%;

height:90px;

}



.directoryContent {

float:left;

width:20%;

color:#FFFF00;

font-size:14px;

font-weight:bold;

text-align:center;

}





.ani {

	width:130px;

	z-index:3;

	position:absolute;

	left:100px;

	top: 120px;

	}

	

.ani p {

visibility:visible;

display:block;

}



.aniLogo{

float:left;



}

.media {

background-color:#fff;

margin:0 auto;

width:80%;

text-shadow:none;

-webkit-box-shadow: 0px 4px 2px 0px rgba(50, 50, 50, 0.75);

-moz-box-shadow:    0px 4px 2px 0px rgba(50, 50, 50, 0.75);

box-shadow:         0px 4px 2px 0px rgba(50, 50, 50, 0.75);

clear:both;

}





.footer { 

width:100%;

/*background-color:#9F0000;*/

float:left;

height:40px;

text-align:center;

}



.menu2 {

background-color:#9F0000;

display:table;

margin:0 auto;

width:55%;

text-align: center;

height:40px;

clear:both;

}



.menu2 li {

float:left;

list-style-type:none;

color:#FFF;

padding: 0px 25px 0px 25px;

}





.menu2 li a{

	font-size: 12px;

	font-weight: bold;

	font-variant: small-caps;

	color:#fff;

	text-decoration:none;

}





.menu2 li a:hover{

	text-decoration:underline;

}





.bottom {

background-color:#fff;

float:left;

}







/* Miscellaneous classes for reuse */

.fltrt { /* this class can be used to float an element right in your page. The floated element must precede the element it should be next to on the page. */

  float: right;

  margin-left: 8px;

}

.fltlft { /* this class can be used to float an element left in your page The floated element must precede the element it should be next to on the page. */

  float: left;

  margin-right: 8px;

}

.clearfloat { /* this class should be placed on a div or break element and should be the final element before the close of a container that should fully contain its child floats */

  clear: both;

  height: 0;

  font-size: 1px;

  line-height: 0px;

}



.clearfix:after {

     visibility: hidden;

     display: block;

     font-size: 0;

     content: " ";

     clear: both;

     height: 0;

     }

.clearfix { display: inline-block; }

/* start commented backslash hack \*/

* html .clearfix { height: 1%; }

.clearfix { display: block; }

/* close commented backslash hack */





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



.ani{

	width:130px;

	z-index:3;

	position:absolute;

	left:5px;

	top: 120px;

}



#container {

  width: 100%;  /* this will create a container 80% of the browser width */

  background: #FFFFFF;

  padding:0;

  margin: 0 auto; /* the auto margins (in conjunction with a width) center the page */

  border: 1px solid #000000;

  text-align: left; /* this overrides the text-align: center on the body element. */

}



}





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



#container {

  width: 100%;  /* this will create a container 80% of the browser width */

  background: #FFFFFF;

  padding:0;

  margin: 0 auto; /* the auto margins (in conjunction with a width) center the page */

  border: 1px solid #000000;

  text-align: left; /* this overrides the text-align: center on the body element. */

}



.header {

	width:100%;

	background-color:#000040;

	float:left;

	height:120px;

	background-image:url(../images/SDprHeaderMini.png);

}

/*

.header img {

height:60%;

width:60%

}

*/



.menuContainer {

width:100%;

background-color:#9F0000;

float:left;

height:30px;

display:table;

}



.menu {

margin:0 auto;

text-align: center;

width:80%;

height:30px;

clear:both;

}





.menu li {

float:left;

list-style-type:none;

color:#FFF;

padding: 0px 20px 0px 20px;

}





.menu li a{

	font-size: 12px;

	font-weight: bold;

	font-variant: small-caps;

	color:#fff;

	text-decoration:none;

}





.menu li a:hover{

	text-decoration:underline;

}





.mainContent {

	width:100%;

	background-color:#fff;

	float:left;

	background-image:url(../images/SDprMainBodyBckg.png);

	background-repeat: repeat-x;

	text-align:center;

	color:#000;

	/*text-shadow: 0px 2px 0px rgba(100, 100, 100, 2); */

}



.centerDiv {

margin:0 auto;

text-align: center;

width:90%;

clear:both;

}



.centerBot {

background-color:#9F0000;

text-align: center;

text-shadow:none;

width:100%;

clear:both;

height:auto;

}



.phoneTbl {

align:center;

}



.phoneTbl th{

text-align: center;

color:#FFFF00;

font-size:14px;

font-weight:bold;



}



.directory{

margin:0 auto;

padding-left:30%;

float:none;

width:80%;

height:90px;

}



.directoryContent {

float:left;

width:20%;

/*color:#FFFF00;*/

font-size:14px;

font-weight:bold;

text-align:center;

color:#000;

clear:both;

text-shadow:none;

  white-space: pre;

}



/*

.ani{

	width:130px;

	z-index:3;

	position:absolute;

	left:50px;

	top: 120px;

}

*/



.ani p {

visibility:hidden;

display:none;

}



.aniLogo{

float:left;

}





.media {

background-color:#fff;

margin:0 auto;

width:80%;

text-shadow:none;

/*

-webkit-box-shadow: 0px 4px 2px 0px rgba(50, 50, 50, 0.75);

-moz-box-shadow:    0px 4px 2px 0px rgba(50, 50, 50, 0.75);

box-shadow:         0px 4px 2px 0px rgba(50, 50, 50, 0.75);

*/



clear:both;

}





.footer { 

width:100%;

/*background-color:#9F0000;*/

float:left;

height:40px;

text-align:center;

}



.menu2 {

background-color:#9F0000;

display:table;

margin:0 auto;

width:55%;

text-align: center;

height:40px;

clear:both;

}



.menu2 li {

float:left;

list-style-type:none;

color:#FFF;

padding: 0px 25px 0px 25px;

}





.menu2 li a{

	font-size: 12px;

	font-weight: bold;

	font-variant: small-caps;

	color:#fff;

	text-decoration:none;

}





.menu2 li a:hover{

	text-decoration:underline;

}





.bottom {

background-color:#fff;

float:left;

}







/* Miscellaneous classes for reuse */

.fltrt { /* this class can be used to float an element right in your page. The floated element must precede the element it should be next to on the page. */

  float: right;

  margin-left: 8px;

}

.fltlft { /* this class can be used to float an element left in your page The floated element must precede the element it should be next to on the page. */

  float: left;

  margin-right: 8px;

}

.clearfloat { /* this class should be placed on a div or break element and should be the final element before the close of a container that should fully contain its child floats */

  clear: both;

  height: 0;

  font-size: 1px;

  line-height: 0px;

}



.clearfix:after {

     visibility: hidden;

     display: block;

     font-size: 0;

     content: " ";

     clear: both;

     height: 0;

     }

.clearfix { display: inline-block; }

/* start commented backslash hack \*/

* html .clearfix { height: 1%; }

.clearfix { display: block; }

/* close commented backslash hack */



}





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





.header {

	width:100%;

	background-color:#000040;

	float:left;

	height:120px;

	background-image:url(../images/SDprHeaderTiny.png);

}



.directoryContent {

float:left;

width:20%;

color:#000;

/*font-size:12px;

font-weight:bold;*/

text-align:center;

    /* added so phone number wont wrap*/

	/*font-family: monospace;*/

    white-space: pre;

}







}