/* - - - - - - - - - This is a handwriting font with a license - - - - - - - -*/
@font-face { 
  font-family: Jenna Sue; 
    src: url('best2be-sellpg_files/fonts/JennaSue-webfont.eot'); 
    src: local("Jenna Sue"), url('best2be-sellpg_files/fonts/JennaSue-webfont.ttf'); 
} 
/* - - - - - - - - - End Fonts - - - - - - - - - - - - - - - - - */
body {
	width: 98%;
	max-width: 100%;
	min-height: 100%;
	margin: 0 auto;
	color: #ffffff;
	background-possition: no-repeat: center;
	background: url(../images/clouds.jpg) #006F90;	
	font-family: Arial, Helvetica, sans-serif;
	font-size: 16px;
	font-style: normal;
	font-weight: normal;
}

/*-------- tell the browser to render HTML 5 elements as block--------- */

article, aside, figure, figcaption, footer, header, hgroup, nav, menu, section { 
  display:block;
}

header {
width: 98%;
margin: 0 auto;
}

div.header {
max-width: 40%;
float: left;
}

header image  {
max-width: 100%;
height:auto ;
float: left;
padding: 2% 2%;
box-shadow:none;
z-index: 2;

}

div.main-photo {
width:100%;
float: left;
background: #000000;
background-image: url(best2be-sellpg_files/images);
}
/*---------------------- for responsive images to scale--------------*/
img {
	max-width: 100%;
height:auto;
overflow: hidden
}

div.main-photo img {
display: block;
max-width: 100%;
margin: 0 auto;
z-index:-1;
padding: 0 0;
}

 form input, form textarea {
max-width: 96%;
}
/*-----------------------------Header tags h1, h2, h3, h4------------------ */
h1, h2, h3, h4, h5 {
	text-align: center;
	vertical-align: top;
	font-weight: bold;
	line-height:.5em;
	font-family: "lucinda sans unicode, sans-serif";
	color:#Ffffff;
}
h1 { font-size: 48px: }
h2 { font-size: 3rem; }
h3 { font-size: 2rem; }
	
h4 { font-size: 1.5rem; }

h5 {  font-size: 1rem;  }

/*-------------------normal links---------------------------*/
a:link { color: #63cde6; text-decoration: none; }

a:active { color:  #99cc99; }

a:hover { color: #d6f7d4;  }

a:visited { color: #ffe99f; }


/* - - - - - - - - -q befor q after quotes around words - - - - - - - - - - */
q:before, q:after
{
  font-size:2em;
}
	

/*paragraph tags regular, link, hover  clear for links inside paragraphs*/

p {
	text-align : left;
	font-size:1.4em;
	line-height: 1.5em;
	text-indent: 0;
	padding: .5% 4%;
	vertical-align: top;
	
	font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;

 }
 
 p.padding {
	text-align : left;
	text-indent :0;
	padding: 1% 0%;
	vertical-align: top;
 } 
 
p a {
color: #b3cde6;
}

p a:hover  {
color:#9FF;
}

p a:visited {
color: #ffe99f;
}

p.clear {
clear:both;
}

.clear {
	clear: both;
}


.transparentext {
		font-weight:bold;
}

.largertext {
	font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
	font-size:17px;
	line-height: 1.5em;
}

.lftColIndent {
	margin: 15px;
}



/*line height less than half of fontsize fits space better*/
.initialCap {
	font-family:"Palatino Linotype", "Book Antiqua", Palatino, serif;
	font-size : 3em;
	font-weight : bold;
	float : left;
	line-height: .1em;
	color : #ebac00;
	
 }
 
 .initialCap_sml {
	font-family:"Palatino Linotype", "Book Antiqua", Palatino, serif;
	font-size : 2.4em;
	font-weight : bold;
	float : left;
	line-height: .5em;
	color : #ebac00;
	padding-right: .1em;
 }
 
 
 blockquote { 
  margin: 20px 0; 
  padding: 10px 20px 0 20px;
  border: 1px solid #E6AC00;
  background: #365B7D;
  color: #ffc266;
}


hr{
	height:1px;
	width:80%;
	background-color:#2d2d2d;
	margin:3% 0;
}

/*----------------------NAV Menu bar starts here-----------------------*/
/* Starter CSS for Flyout Menu */
#cssmenu, #cssmenu ul, #cssmenu li #cssmenu a {
  list-style: none;
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 16px;
  font-family: Helvetica, Arial, Verdana, sans-serif ;
  line-height: 1;
  font-variant: small-caps;
}
#cssmenu {
  width: 100%;
 }
#cssmenu ul {
  zoom: 1;
  background: #3e688f url(best2be-sellpg_files/pattern.png) top left repeat;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  border-radius: 1px;
  border: 1px solid #032022;
  -moz-box-shadow: 0 3px 3px rgba(0, 0, 0, 0.3);
  -webkit-box-shadow: 0 3px 3px rgba(0, 0, 0, 0.3);
  box-shadow: 0 3px 3px rgba(0, 0, 0, 0.3);
}
#cssmenu ul:before {
  content: '';
  display: block;
}
#cssmenu ul:after {
  content: '';
  display: table;
  clear: both;
}
#cssmenu a,
#cssmenu a:link,
#cssmenu a:visited {
  padding: 5px 20px;
  display: block;
  text-decoration: none;
  color: #ffffff;
  text-shadow: 0 -1px 1px #000000;
  border-right: 1px solid #032022;
}
#cssmenu a:hover {
  color: #000000;
  text-shadow: 0 1px 1px #0c9098;
}
#cssmenu li {
  float: left;
  border-right: 1px solid #0a7981;
}
#cssmenu li:hover {
  background: #f1f7d5 url(best2be-sellpg_files/pattern.png) top left repeat;
}
#cssmenu li:first-child {
  border-left: none;
  -webkit-border-radius: 4px 0  0 4px;
  -moz-border-radius: 4px 0 0 4px;
  border-radius: 4px 0 0 4px;
}



/*------------------------  NAV Menu Bar ends here ---------------------*/

/* *********************************************************************************************************************
	99% CSS Grid - 6 Columns Fluid CSS Grid
	
		for 6 columns we need 5 margins or gutters for 1000px

		so if we count gutter as 3% or 30px, then 3% * 5 margins = 15% or 150px

		and if we count width of 1 column or box 14% or 140px, than 14% * 6 columns = 84% or 840px

		we end we with 15% + 84% = 99% with 1% free - leeway 1% = 10px

		

	2 options ? ...
		1200px - fits 1280 screens
			6 columns
			gutter 3% / 36px  x 5 gutters = 15% or 180px
			box 14% / 168px  x 6 boxes   = 84% or 1008px
			1008+180=1188+12px=1200 1% free - leeway or 12px

		1000px - perfectly fits 1024 screens
			6 columns
			gutters 3% / 30px =  15% 150px
			box 14% /140px  = 84%  840px
*/


/* *********************************************************************************************************************
 * Main wrapper  1% left margin - box sizing are % of wrapper width % of container width
 */

* {
-moz-box-sizing: border-box; /* Firefox 1-3*/
-webkit-box-sizing: border-box; /*Safari/Chrome */
box-sizing: border-box; /* Opera/IE8+ */
}

.wrapper-1200 {
	width:98%;
	height:auto;
	overflow: hidden;
	margin: 0 auto;
	padding: 1% 0% 1% 0%;
	background-color: #2e4e6b;
	color: #fff;
	transparent: zoom: 0;
	filter: alpha(opacity=80);
	opacity: 0.8;
	 border-radius: 8px ;
  -moz-border-radius: 8px;
  -webkit-border: 8px ;
    -o-border-radius: 8px ;
}


.wrapper-1000 {
	width:98%;
	max-width: 100%;
	height:auto;
	overflow: hidden;
	margin: 0 auto;
	padding: .75% 1%;
	background-color: #126EFF;
	color: #fff;
	transparent: zoom: 0;
	filter: alpha(opacity=80);
	opacity: 0.8;
	 border-radius: 8px ;
  -moz-border-radius: 8px;
  -webkit-border: 8px ;
    -o-border-radius: 8px ;
}


.newrow {
	width: 100%
	clear: both;
	margin: 1% 0%;
	padding: 20px 10px 20px 10px;
	}


/* *********************************************************************************************************************
 * Common box definitions
 */
.box1,  .box23, .box34, .box56, .box2, .box3, .box4, .box5, .box6 {
	display: block;
	float: left;
	margin: 0% 3% 1.5% 0%;
}

.last {         /* use in last box of row after box code */
	margin-right: 0;
}
.box1 { width: 99% }      /* 1 column or box across page=94 +3% margin lr wrapper */
.box56 { width: 82%  }    /* 5 of 6 boxes  82+14+1gutter==99 per row */
.box34 { width: 73.5% }    /* 3 of 4 boxesbox1+box4+1gutter=99%  73.5+22.5+1gutter=99 per row */
.box23 { width: 65%  }     /*  2 of 3 boxes box1+box3+1gutter=99%  65+31=96+3=99 per row */
.box2 { width: 48% }       /* 2boxes per row 1gutter */
.box3 { width: 31% }       /*  3 boxes per row 2 gutters */
.box4 { width: 22.5% }      /*  4 boxes per row 3 gutters */
.box5 { width: 17.5% }     /*  5 boxes per row  4 gutters */
.box6 { width: 14% }        /*  6 boxes per row 5 gutters */


.box1, .box23, .box34, .box56, .box2, .box3, .box4, .box5, .box6  {
padding: .5% .5%; 
background-color: #2c7EFF;
border-radius: 8px ;
  -moz-border-radius: 8px;
  -webkit-border: 8px ;
    -o-border-radius: 8px ;
}


.box1 img,  .box23 img, .box34 img, .box56, img, .box2 img, .box3 img, .box4 img, .box5 img, .box6 img {
	width: 100%;
	height: auto;
	display: block;
}

/*--------------------------  Boxes end here -----------------------------*/

/*-----------------------css for  upward scroller for  one column quote link home page----------------*/

.scroller_small {
	height: 250px;
	width:95%;
	padding: 0 8 0 10px;
	background-color:365b7d;
	background-image:url(http://);
	font-family: "Comic Sans MS" cursive, Arial, sans-serif;
	font-size:18px;
	line-height: 1.5rem;
	color:ffffff; border-width:	0;
	border-style:dotted;
	border-color:ff0000;
	}
	
/*-----------------------------END OF SCROLLER-------------------*/










/* *********************************************************************************************************************
 * subtract padding left/right 10px if 1024 
 */
@media all and (min-width: 1024px) {
	.wrapper-1000 {
		max-width: 1000px;
	}

	.wrapper-1000 .row {
		padding: 0;
	}
}




/* *********************************************************************************************************************
 * Small devices
 */
  @media (min-width: 320px) and (max-width: 768px) {
    h1 { font-size: 32px: }
h2 { font-size: 1.5em; }
h3 { font-size: 1.3em; }
h4 { font-size: 1em; }
    }

 
@media all and (max-width: 400px) {
	.row {
	}
	.box1, .box23, .box34, .box56, .box2, .box3, .box4, .box5, .box6, .box1_3, .box1_4, .box1_6 {
		float: none;
		width: 99%;
	}
}