/*                                                CSS - Template           */


/*                                                  site-html              */


* {
  margin:0;
  padding:0;
}



body {
  font-family: 'Open Sans', sans-serif;
  color: #dddddd;
  margin:0;
  padding:0;
  border:0;			/* This removes the border around the viewport in old versions of IE */
  width:100%;
  background: #21367D;
  background: #333333;
  font-size: 1.6rem;

}



html {
  width:100%;
  font-size:62.5%;
  margin: auto;

  xbackground-image: url("http://devel3.webme.com.au/images/BlackPepperBand.jpg");
  xbackground-size: 100% 100%;
  xbackground-position: 50% 50%;
  xbackground-repeat: no-repeat;




}


p {
	margin:.4em 0 .8em 0;
	padding:0;
}

img {


}


h1, h2, h3, h4 {
	margin:.8rem 0 .2rem 0;
	padding:0;
        text-align: center;
}



h1 {
  font-size: 3.2rem;
  font-family: inthent;
  color: white;
  margin: .2em .5em;
  display: inline-block;       

}


h2 {
  font-size: 3.0rem;
  letter-spacing: 2px;
  color: #4f87cb;
  color: #c3c163;

  font-family: inthent, arial;
}

h3 {
  font-size: 1.8rem;
  text-align: center;

}

h4 {
  font-size: 1.6rem;
  text-align: center;

}

h5 {
  font-size: 1.6rem;
}

a {
	color:#d6d5a7;
        font-size: 1.6rem;
	text-decoration:none;

}
a:hover {
	color: grey;
	text-decoration:none;
}

@media only screen and (min-width: 601px) {
  body {
    font-size: 1.6rem;
 
  xbackground-attachment: fixed;
  background-image: url("http://devel3.webme.com.au/images/BlackPepperBand-BW-BG.jpg");
  background-size: 100% 100%;
  background-position: 50% 50%;
  background-repeat: no-repeat;

  }
  html {
    width:80%;

  }
}

@media only screen and (max-width: 600px) {
    body {
        font-size: 1.6rem;
    }

    h1 {
      font-size: 2.6rem;
      color: white;
   }
    h2 {
      font-size: 2.0rem;
   }
    h3 {
      font-size: 1.8rem;
   }
    h4 {
      font-size: 1.6rem;

   }


   .occasion-inner-text {
    font-size: 1.6rem;
   } 

}

@media only screen and (max-width: 500px) {
    body {
        font-size: 1.4rem;
    }

    h1 {
      font-size: 2.1rem;
      color: white;
   }
   .occasion-inner-text {
    font-size: 1.4rem;
   } 
}

@font-face {
    font-family: inthentbold;
    src: url('/fonts/inthentbold.ttf');
}

@font-face {
    font-family: inthent;
    src: url('/fonts/inthent.ttf');
}

.background-cover {
  display: inline-block;
  z-index: -1;
  xbackground: red;
  width: 400px;
  height: 400px;
  background-image: url("https://charliepowling.com.au/images/MovinOnCover-400.jpg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}



/*                                               structure-style           */

/* Header styles */
#header {
  clear:both;
  width:100%;
  background: #eeeeee;
  line-height: 100px;
  border-bottom:2px solid #700EAC;
  border-top:1px solid white;
}

#header ul li a:hover {
  background:#369;
  color:#fff;
}

#header ul li a.active,
#header ul li a.active:hover {
  color:#fff;
  background:#000;
  xxxxbackground:#182663;
  font-weight:bold;
}

/* 'widths' sub menu */
#layoutdims {
  clear:both;
  margin:0;
  padding:6px 15px !important;
  text-align:center;
  background: #666666;
  xbackground: #D68F81;
}


/* column container */
.colmask {
  position:relative;	/* This fixes the IE7 overflow hidden bug */
  clear:both;
  float:left;
  width:100%;			/* width of whole page */
  overflow:hidden;		/* This chops off any overhanging divs */
  background: #faf2e5;
  xbackground: yellow;
  background: #934C3C;
  xbackground: #D68F81;
  background: #333333;	
}

/* common column settings */
.colright,
.colmid,
.colleft {
  float:left;
  width:100%;
  position:relative;
}

.col1,
.col2,
.col3 {
  float:left;
  position:relative;
  padding:0 0 1em 0;
  overflow:hidden;
}

/* 2 Column (right menu) settings */

.rightmenu {
  background: #666666x;		/* right column background colour */
}

.rightmenu .colleft {
  right:50%;			/* right column width */
  xbackground:  #dddddd;
  background: #333333;
  xbackground: #D68F81;		/* left column background colour */
  xbackground: #934C3C;
  xbackground: #c36365;
}

.rightmenu .col1 {
  width:46%;			/* left column content width (left column width minus left and right padding) */
  left:52%;			/* (right column width) plus (left column left padding) */
}

.rightmenu .col2 {
  width:46%;			/* right column content width (right column width minus left and right padding) */
  left:56%;			/* (right column width) plus (left column left and right padding) plus (right column left padding) */
}


/* Footer styles */
#footer {
  background: #a0d038;
  background: #333333;
;
  padding-top:15px;
  clear:both;
  float:left;
  width:100%;
  border-top:2px solid #c3c163;
  xbackground : linear-gradient(#e7981a,#C75B12);
  xbackground : linear-gradient(#325DAB, #6ACBDE);
  xbackground : linear-gradient(#6ACBDE, #325DAB);
}


/*            site-style              */

.siteheading {
  color: #4f87cb;
  color: #c3c163;
  font-size: 2.0rem;
  font-family: inthent;
}

.centresiteheading {
  color: #7da527;
  font-family: inthent;
  Font-size: 2.0rem;
  margin: auto;
  text-align: center;
}

ul.services {
  list-style-type: circle;
  color: #333333;
  padding-left:20px;
}


figure {
  font-size: 3.2rem;
  text-align: center;
  text-indent: 0;
}


figcaption { 
  width: 100%;
  height: 50px;
  line-height: 50px;
  margin: auto;
}

.paddedcell {
  width: 100%;
  left: 20px;
  padding-left: 50px; 
  top: 0px;
}

.panelbg {
  display: block;
  xxxbackground:#ebf5d6 !important;
}

.paneltop {
  border-top:1px solid #ccc;
  xbackground: red;
  height:8px; 
  display: inline-block; 
  width:100%;
  overflow : hidden;
}

.rangepanel {
  width: 100%;
  text-align: center;
  vertical-align: middle;
  line-height: 25px;
}

.rangepanel a:link, .rangepanel a:visited {
  color : #666666;
  font-size: 1.8rem;
  display : inline-block;
  text-align : center;
  text-decoration : none;
  text-transform : none;
}

.rangepanel a:hover {
  color : limegreen;
  display:inline-block;
  font-size: 1.8rem;
}

.smallimage {
  text-align: center;
  vertical-align: middle;
  width: 60%;
  margin: auto;
  line-height: 25px;
}

.panelimage {
  width: 70%;
  text-align: center;
  vertical-align: middle;
  margin: auto;
  line-height: 25px;
 
}

.right-header {
  text-align: center;
}

#right-inner {
  background: #ebf2f9;
  padding : 15px;
  margin : auto;
  width : 80%;
  border : #4f87cb solid 2px;
  border : #c3c163 solid 2px;
  font-size : 1.6rem;
  justify-content : center;
  align-items : center;
  overflow : hidden;
  border-radius: 15px;
}

#right-inner li {
  list-style-type:none;
}

#right-inner a:link, #right-inner a:visited {
  color: #222222;
  display : inline-block;
  text-align : center;
  text-decoration : none;
  text-transform : none;
  font-size: 1.6rem;
}

#right-inner a:hover {
  color: #888888;
  display:inline-block;
}

#right-inner-text {
  padding : 10px;
  margin : auto;
  width : 80%;
  font-size : 1.6rem;
  justify-content : center;
  align-items : center;
  overflow : hidden;
}

.occasion-inner-text {
  padding : 10px;
  margin : auto;
  width : 80%;
  font-size : 1.6rem;
  justify-content : center;
  align-items : center;
  overflow : hidden;
}

.single-pics-ipad {
  height : auto;
  width : auto;
  justify-content : center;
  align-items : center;
  overflow : hidden;
  color : #666666;
}

.single-pics-ipad img {
  width : 100%;
  display : inline;
  margin : 0px;
  max-width: 200%;
  height: auto;
}

.wmfooter-container{
  border-top : white solid 1px;
  border-bottom : white solid 1px;
  xbackground: linear-gradient(#b2226a, #541220);
  xbackground: linear-gradient(#ffffff, #000000);
  background: #c3c163;
  xbackground : linear-gradient(#6ACBDE, #325DAB);
  color: #333333;
}

.wmcolumn-left{ 
  float: left; 
  width: 20%;
}

.wmcolumn-left2{ 
  float: left; 
  width: 13%;
  padding-top: 26px;

}

.wmcolumn-right{
  float: right; 
  width: 33%; 

}

.wmcolumn-center{
  display: inline-block;
  text-align: center;
  width: 33%;
  height: auto;
 
}

.webme {
  color : purple;
  float : right;
  margin-right : 20px;
}

.webme a:link, .webme a:visited {
  color: #333333;
  display : inline-block;
  text-decoration : none;
  text-transform : none;
  font-size: 1.0rem;
}

.webme a:hover {
  color: #dddddd;
  display:inline-block;
}

.copyright {
  text-align : center;
  color: #333333;
  float : right;
  margin-right : 20px;
}

.copyright a:link, .copyright a:visited {
  color: #333333;
  display : inline-block;
  text-align : center;
  text-decoration : none;
  text-transform : none;
  font-size: 1.0rem;
}

.copyright a:hover {
  color: #eeeeee;
  display:inline-block;
}

.single-pics-ipad {
  color: #444444;
}

.single-pics-ipad figure {
  font-size: 1.5rem;
  text-align: center;
  text-indent: 0;
}


.single-pics-ipad figcaption { 
  width: 100%;
  height: 30px;
  line-height: 30px;
  margin: auto;
}


#blockbutton {
  margin-top: 12px;
  float: right;
  width: 100%;
  padding:0px 0px 0px 0px;
  text-align: center;
  margin: auto;
  color: #c75b12;
  font-weight: bold;
}


.blockbuttontext {
  display: inline-block;
  overflow : hidden;  
  text-decoration: none;
  font-weight: bold;
  font-size: 1.1rem;
  border : #c3c163 solid 2px;
  width: 20%;
  border-radius: 15px;
  height: 25px;
  line-height: 25px;
  color: #c75b12;
  color: #dddddd;
  font-weight: bold;

}

A.blockbuttontext {
  text-decoration: none;
  font-weight: bold;
  font-size: 1.0rem;
}

  A.blockbuttontext:hover {
  color: #666666;
  text-decoration: none;
  font-weight: bold;
  background-color: #e2e2b6;
  font-size: 1.0rem;
}

#albumblockbutton {
  margin-top: 12px;
  float: center;
  width: 100%;
  padding:0px 0px 0px 0px;
  text-align: center;
  margin: auto;
  color: #c75b12;
  font-weight: bold;
}

.albumblockbuttontext {
  display: inline-block;
  overflow : hidden;  
  text-decoration: none;
  font-weight: bold;
  font-size: 1.1rem;
  border : #c3c163 solid 2px;
  width: 30%;
  border-radius: 15px;
  height: 25px;
  line-height: 25px;
  color: #c75b12;
  color: #dddddd;
  font-weight: bold;

}

A.albumblockbuttontext {
  text-decoration: none;
  xfont-weight: bold;
  font-size: 1.0rem;
}

  A.albumblockbuttontext:hover {
  color: #666666;
  text-decoration: none;
  font-weight: bold;
  background-color: #e2e2b6;
  font-size: 1.0rem;
}




/*                                                 F-Single-mobile         */
       /* 'widths' sub menu */
#mlayoutdims {
  clear:both;
  xbackground: #faf2e5;
  xborder-top:4px solid #000;
  margin:0;
  padding:6px 15px !important;
  xtext-align:right;
}
	/* column container */
.mcolmask {
  position:relative;	/* This fixes the IE7 overflow hidden bug */
  clear:both;
  float:left;
  width:100%;			/* width of whole page */
  overflow:hidden;		/* This chops off any overhanging divs */
}
	/* common column settings */
.mcolright,
.mcolmid,
.mcolleft {
  float:left;
  width:100%;
  position:relative;
}

.mcol1,
.mcol2,
.mcol3 {
  float:left;
  position:relative;
  padding:0 0 1em 0;
  overflow:hidden;
}

	/* Full page settings */
.mfullpage {
  background:#fef2e5;		/* page background colour */
  background: #333333;
}

.mfullpage .col1 {
  width:96%;			/* page width minus left and right padding */
  left:52%;			/* page left padding */
}

mobpage {
  Padding-left: 10px;
  display: inline-block;
}


/*                                                  site-spec              */
#footprints {
  display: inline-block;
  z-index: -1;
  background-image: url("https://ntdating.com/images/footprints-400.jpg");
  background-size: 100% 100%;
  background-position: 50% 50%;
  background-repeat: no-repeat;
/*  xbackground-attachment: fixed; */
  border-radius: 12px;
  width: 100%;
  margin: auto;
}

#footprints-text {
  z-index: 10;
  font-weight: bold;
  padding: 0px;
  margin-top: 0px;
  margin-left: 10px;
  margin-right: 10px;
  width=100%;
  xfloat: right;
  color: #000000;
  border-radius: 10px;
  font-size: 1.4rem;
}

.home-single {
  xbackground:red; 
  xbackground:#182663;
  xdisplay: inline-block; 
  width:100%;
  margin: auto;
  xheight : 400px;
}

.home-single-pics-ipad {
  height : auto;
  width : auto;
  justify-content : center;
  align-items : center;
  overflow : hidden;
  color : #666666;
  xbackground: yellow;
  xbackground: #182663;
}

.home-single-pics-ipad img {
  width : 100%;
  xdisplay : inline;
  margin : 0px;
  max-width: 200%;
  height: auto;
}

#right {
  padding: 10px;
  width: 90%;
  background-color: #ebf2f9;
  background-color: #f1f0da;

  color: #666666;
  border:solid 2px #c3c163;
  xborder:solid 2px green;

  border-radius: 12px;
  font-size: 1.4rem;
  display: inline-block;
  margin: auto;
}

.home-right-inner {
  xxxbackground: #ebf5d6;
  xpadding : 15px;
  margin : auto;
  width : 90%;
  xxfont-size : 1.6rem;
  justify-content : center;
  align-items : center;
  overflow : hidden;
}


#home-right-inner {
  xxxbackground: #ebf5d6;
  xpadding : 15px;
  margin : auto;
  width : 50%;
  xxfont-size : 1.6rem;
  justify-content : center;
  align-items : center;
  overflow : hidden;
}

@media only screen and (max-width: 600px) {
  #home-right-inner {
    width: 100%;
  }
}

#home-right-inner li {
  list-style-type:none;
}

#home-right-inner a:link, #right-inner a:visited {
  color: #222222;
  display : inline-block;
  text-align : center;
  text-decoration : none;
  text-transform : none;
  font-size: 1.6rem;
}

#home-right-inner a:hover {
  color: #888888;
  display:inline-block;
}

#home-right-inner-text {
  padding : 10px;
  margin : auto;
  width : 80%;
  font-size : 1.6rem;
  justify-content : center;
  align-items : center;
  overflow : hidden;
}


#Little-Menu {
  width: 100%;
  font-size: 15px;
  list-style:none;
  margin:0;
  padding:0;
  text-align:center;
  margin-top: -0px;
  background : linear-gradient(#000000, #E7981A);
  background : linear-gradient(#373715, #C3C163);
  border-radius: 12px;


}


#Little-Menu ul
{
  margin: 0;
  list-style-type: none;
  text-align: center;
  list-style-type: none;
  padding: 0;
  overflow: hidden;
  margin-right: auto;
  margin-left: auto;
  xbackground : linear-gradient(purple, #E7981A);

}

#Little-Menu ul li {
  display: inline; 
}

#Little-Menu ul li a
{
  padding: 4px;
  font-weight: bold;
  width: 90%;
  text-decoration: none;
  color: #eeeeee;
  display: inline-block;
}

#Little-Menu ul li a:hover
{
  color: #333333;
}

#upload {
  margin-top: 10px;
  margin-left: auto;
  margin-right: auto;
  width: 100%;
  float: right;
  background-color: #f3b451;
  color: black;
  border-radius: 12px;
  font-size: 100%;
  font-size: 15px;
  xborder:solid 2px #ebf2f9;

}

#lyrics-inner {
  position: relative;
  margin-top: 10px;
  margin-left: auto;
  margin-right: auto;
  width: 100%;
  float: right;
  color: #666666;
  color: black;
  font-size: 90%;
  xbackground: red;
}




/*                                                  F-Banner               */
.bss-slides{
  position: relative;
  display: block; 
  line-height: 0;/*removes the gap if you put a border on the slideshow div*/   
}

figcaption {
  line-height: 1.5; /* restores line-height to the child element*/
}

.bss-slides:focus{
 outline: 0;
}

.bss-slides figure{
  position: absolute;
  top: 0;
  width: 100%;
}

.bss-slides figure:first-child{
  position: relative;
}

.bss-slides figure img{
  opacity: 0;
  -webkit-transition: opacity 1.2s;
  transition: opacity 1.2s;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

.bss-slides .bss-show{
  z-index: 2;
}

.bss-slides .bss-show img{
  opacity: 1;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  position: relative; 
}

.bss-slides figcaption{
  position: absolute;
  font-family: sans-serif;
  font-size: .8em;
  bottom: .75em;
  xright: .35em;
  xpadding: .25em;
  color: #fff;
  xbackground: #000;
  background: rgba(0,0,0, .25);
  xbackground:#182663;
  border-radius: 2px;
  opacity: 0;
  -webkit-transition: opacity 1.2s;
  transition: opacity 1.2s;
width: 100%;
}

.bss-slides .bss-show figcaption{
  z-index: 3;
  opacity: 1;
}

.bss-slides figcaption a{
  color: #fff;    
}

.bss-next, .bss-prev{
  color: #fff;
  position: absolute;
  background: #000;
  background: rgba(0,0,0, .6);
  xbackground:#182663;
  top: 50%;
  z-index: 4;
  font-size: 2em;
  margin-top: -1.2em;
  opacity: .3;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.bss-next:hover, .bss-prev:hover{
  cursor: pointer;
  opacity: 1;
}

.bss-next{
  right: -1px;
  padding: 10px 5px 15px 10px;
  border-top-left-radius: 3px;
  border-bottom-left-radius: 3px;
}

.bss-prev{
  left: 0;
  padding: 10px 10px 15px 5px;
  border-top-right-radius: 3px;
  border-bottom-right-radius: 3px;
}

.bss-fullscreen{
  display: block;
  width: 32px;
  height: 32px;    
  background: rgba(0,0,0,.4) url(../img/arrows-alt_ffffff_64.png); 
  -webkit-background-size: contain; 
  background-size: contain;
  position: absolute;
  top: 5px;
  left: 5px;   
  cursor: pointer;    
  opacity: .3;
} 

.bss-fullscreen:hover{
  opacity: .8;   
}

:-webkit-full-screen .bss-fullscreen{
    background: rgba(0,0,0,.4) url(../img/compress_ffffff_64.png);
    -webkit-background-size: contain;
    background-size: contain;
}

:-moz-full-screen .bss-fullscreen{
    xbackground: rgba(0,0,0,.4) url(../img/compress_ffffff_64.png);
    background-size: contain;
}
:-ms-fullscreen .bss-fullscreen{
    background: rgba(0,0,0,.4) url(../img/compress_ffffff_64.png);
    background-size: contain;
}
/*
:full-screen .bss-fullscreen{
    background: rgba(0,0,0,.4) url(../img/compress_ffffff_64.png);
    -webkit-background-size: contain;
    background-size: contain;
}
*/

:-webkit-full-screen .bss-fullscreen{
    background: rgba(0,0,0,.4) url(../img/compress_ffffff_64.png);
    -webkit-background-size: contain;
    background-size: contain;
}

:-moz-full-screen .bss-fullscreen{
    background: rgba(0,0,0,.4) url(../img/compress_ffffff_64.png);
    background-size: contain;
}

:-ms-fullscreen .bss-fullscreen{
    background: rgba(0,0,0,.4) url(../img/compress_ffffff_64.png);
    background-size: contain;
}

:fullscreen .bss-fullscreen{
    background: rgba(0,0,0,.4) url(../img/compress_ffffff_64.png);
    -webkit-background-size: contain;
    background-size: contain;
}

/*                                                   F-Menu                */



#nav-wrap{
  margin: auto;
  width: 100%;
  overflow: hidden;
  xbackground : linear-gradient(silver, blue);
  border-bottom: 2px solid #ffffff;
}

#logo-wrap{
  width: 1%;
  float: left;
  height: 90px;
  line-height: 90px;
  padding-left: 10px;
  padding-top: 0px;
  background: purple;
}

#logo-wrap img {
  display: block;
  margin-top: 0px;
  margin-bottom: auto;
  margin-left: auto;
  margin-right: auto;
}


#menu-wrap{
  width: 100%;
  xheight: 50px;
  xline-height: 50px;
  float: left;
}




.navouter {
  top: 0px;
  width: 100%;
  overflow: hidden;
  background: orange;
}




.logo {
  top: 0px;
  width: 29%;
  overflow: hidden;
  xbackground: green;
  xbackground: red;
  xbackground: purple;

}

.logocenter {
  margin: auto;
  width: 100%;
  border: 3px solid green;
  padding: 10px;
}

.navscheme {
  top: 0px;
  width: 70%;
  overflow: hidden;
  background: green;
}

.navbar {
  top: 0px;
  width: 100%;
  xoverflow: hidden;
  background: #c3c163;
}


.nav{
 list-style:none;
  margin:0;
  padding:0;
  width: 100%;
  overflow: hidden;
  font-size : 18px;
  list-style : none;
  margin-top:0px;
  color: black;
  xheight: 30px;
  xborder: 2px solid #fffff;

}


.nav ul{
  border:1px solid #ccc;
  border-width:1px 0;
  list-style:none;
  margin:0;
  padding:0;
  text-align:center;
  background: tomato;
  font-size : 18px;
  list-style : none;
  margin-top:0px;
  color: black;
  background : linear-gradient(#C75B12, #E7981A);
  zbackground : linear-gradient(#000000, #6ACBDE);
}

.nav li{
    display:inline;
    width: 10%;

}
.nav a{
  display:inline-block;
  padding:10px;
  height: 50px;
  padding-top:30px;
  background: green;
  color: white;
  font-weight: 900;
  text-decoration : none;
  text-transform : none;
  background : linear-gradient(#C75B12, #E7981A);
  background : linear-gradient(#325DAB, #6ACBDE);
}

.nav a:hover{
  display:inline-block;
  color: gold;
  background : linear-gradient(#C75B12, #E7981A);
  background : linear-gradient(#325DAB, #6ACBDE);
}

#Phone-Menu {
  background-color: #65b9dd;
  color: white;
  width: 100%;
  margin: 0px;
  margin-left: auto;
  margin-right: auto;
  border-radius: 0 0 15px 15px;
  overflow: hidden;
}
	
#Phone-Menu li a {
  color: white;
  height: 25px;
  border-style: solid solid none solid;
  border-color: white;
  border-width: 1px;
  text-decoration: none;
}	
	
#Phone-Menu li a:link, #menu li a:visited {
  color: white;
  display: block;
  padding: 15px 0 0 0;
  text-align: center;
}
	
#Phone-Menu li a:hover {
  background-color: #0397d6;
  background-color: #73182c;
  xbackground-color: #611fbd;
  color: white;
  padding: 15px 0 0 0;
  text-align: center;
}
	
#Phone-Menu li a:active {
  color: white;
  padding: 15px 0 0 0;
  text-align: center;
}

#Phone-Menu ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.head-insert {
  display : block;
  min-width : 90px;
  width : 98%;
  margin-top : 0;
  overflow : hidden;
  font-weight : bold;
  font-size : 110%;
  text-decoration : none;
  margin-left : auto;
  margin-right : auto;
  margin-bottom : 0;
  height : auto;
}

.header-pics-ipad {
  display : flex;
  height : auto;
  justify-content : center;
  overflow : hidden;
}

.header-pics-ipad img {
  display : inline;
  width : 100%;
  height : auto;
}



/*                                                   F-Phone               */



.PhoneBG {
  background-color: #931F38;
  xbackground-color: red;
  display: block;
}

.PhoneButton {
  xbackground-color: Red;
  color: #333333;
  width: 100%;
  margin-top: 10px;
  margin-left: auto;
  margin-right: auto;
  overflow: hidden;
  text-align: center;
  background : linear-gradient(#C3C163, #e2e2b6);
  border-radius: 12px;
  border-color: white;
  border-width: 1px;

}
	
.PhoneButton a {
  color: #333333;
  height: 25px;
  xborder-style: solid solid solid solid;
  xborder-color: white;
  xborder-width: 1px;
  text-decoration: none;
  border-radius: 12px;
  border : #333333 solid 2px;


}	
	
.PhoneButton a:link, .PhoneButton li a:visited {
  color: #333333;
  display: block;
  padding: 2px 0 0 0;
  text-align: center;
}
	
.PhoneButton a:hover {
  background-color: #73182c;
  color: #dddddd;
  padding: 2px 0 0 0;
  text-align: center;
  background : linear-gradient(#C75B12,  #8c400d);
  background : linear-gradient(#373715, #C3C163);
}
	
.PhoneButton a:active {
  color: white;
  padding: 2px 0 0 0;
  text-align: center;
}
.PhoneButton ul {
  list-style: none;
  margin: 0;
  padding: 0;
}







	#Playoutdims {
		clear:both;
		background:#eee;
		border-top:4px solid #000;
		margin:0;
		padding:6px 15px !important;
		text-align:right;
	}
	/* column container */
	.Pcolmask {
		position:relative;	
		clear:both;
		float:left;
		width:100%;			
		xoverflow:hidden;		/* This chops off any overhanging divs */
	}
	/* common column settings */
	.Pcolright,
	.Pcolmid,
	.Pcolleft {
		float:left;
		width:100%;			/* width of page */
		position:relative;
  
	}
	.Pcol1,
	.Pcol2,
	.Pcol3 {
		float:left;
		position:relative;
		padding:0 0 1em 0;	/* no left and right padding on columns, we just make them narrower instead 
						only padding top and bottom is included here, make it whatever value you need */
		overflow:hidden;
	}
	/* 3 Column settings */
	.Pthreecol {
/* Phone Menu Back Ground */
		background:#faf2e5;		/* right column background colour */
  background : linear-gradient(#c3c163, #e2e2b6);
  xbackground : linear-gradient(#325DAB, #6ACBDE);

	}
	.Pthreecol .Pcolmid {
		right:33%;			/* width of the right column */
				/* center column background colour */
	}
	.Pthreecol .Pcolleft {
		right:33%;			/* width of the middle column */
			/* left column background colour */
	}
	.Pthreecol .Pcol1 {
		width:29%;			/* width of center column content (column width minus padding on either side) */
		left:102%;			/* 100% plus left padding of center column */
	}
	.Pthreecol .Pcol2 {
		width:29%;			/* Width of left column content (column width minus padding on either side) */
		left:39%;			/* width of (right column) plus (center column left and right padding) plus (left column left padding) */
	}
	.Pthreecol .Pcol3 {
		width:29%;			/* Width of right column content (column width minus padding on either side) */
		left:77%;			/* Please make note of the brackets here:
						(100% - left column width) plus (center column left and right padding) plus (left column left and right padding) plus (right column left padding) */
	}

/*                                                 inner-style             */


/* column container */
.I-colmask {
  position:relative;	/* This fixes the IE7 overflow hidden bug */
  clear:both;
  float:left;
  width:100%;			/* width of whole page */
  overflow:hidden;		/* This chops off any overhanging divs */
}

/* common column settings */
.I-colright,
.I-colmid,
.I-colleft {
  float:left;
  width:100%;
  position:relative;
}

.I-col1,
.I-col2,
.I-col3 {
  float:left;
  position:relative;
  padding:0 0 1em 0;
  overflow:hidden;
}

/* 2 Column (right menu) settings */
.I-rightmenu {
  background:#eeeeee;		/* right column background colour */
}

.I-rightmenu .I-colleft {
  right:50%;			/* right column width */
  background: #eeeeee;		/* left column background colour */
}

.I-rightmenu .I-col1 {
  width:46%;			/* left column content width (left column width minus left and right padding) */
  left:52%;			/* (right column width) plus (left column left padding) */
}

.I-rightmenu .I-col2 {
  width:46%;			/* right column content width (right column width minus left and right padding) */
  left:56%;			/* (right column width) plus (left column left and right padding) plus (right column left padding) */
}


/*                                                   F-Page                */
header{
  position: absolute;
  z-index: 9999;
  width: 100%;    
  background: rgba(0,0,0,.5);    
  background: rgba(0,0,0,.2);
  background: rgba(0,0,0,.0); 
}

header p{
  display: inline-block; 
  font-size: .9em;    
}




/*                   not used
.num2{
    width: 85%;
    margin: 2em auto;
    
}

*/

/*

@media screen and (max-width: 830px){
    h1{
     font-size: 1.3em;   
    }
    .desc{
        display: none;   
    }
}

@media screen and (max-width: 400px){
    h1{
     font-size: 1.1em;   
    }
    header span{
        display: none;   
    }
    .gist{
        width: 100%;
    }
}
*/

/*                                                   F-Form                */


/*                                                  F-Footer               */
/* 'widths' sub menu */
/* column container */
.Fcolmask {
  position:relative;
  clear:both;
  float:left;
  width:100%;
  overflow:hidden;	
}

/* common column settings */
.Fcolright,
.Fcolmid,
.Fcolleft {
  float:left;
  width:100%;
  position:relative;
}

.Fcol1,
.Fcol2,
.Fcol3 {
  float:left;
  position:relative;
  overflow:hidden;
}


.Fcol1 a,
.Fcol2 a,
.Fcol3 a {
  color: #ffffff;
  font-weight: bold;
}

.Fcol1 a:hover,
.Fcol2 a:hover,
.Fcol3 a:hover {
  color: #666666;
  font-weight: bold;
}

/* 3 Column settings */
.Fthreecol {
}

.Fthreecol .Fcolmid {
	right:25%;
}
.Fthreecol .Fcolleft {
	right:50%;
}

.Fthreecol .Fcol1 {
	width:46%;
	left:102%;
}

.Fthreecol .Fcol2 {
	width:21%;
	left:31%;
}

.Fthreecol .Fcol3 {
	width:21%;
	left:85%;
}

/* Footer styles */




/*                       Not Used

.payment_options {
  float: left;
  width: 100%;
}

.payment_options h5 {

}

.payment_options ul {
    padding: 0;
    margin: 0;
}

.payment_options ul li {
  display: inline-block;
  width: 31.8%;
}

.payment_options ul li a {
    display: block;
}

.payment_options ul li a img {
    margin: 0 auto;
    display: block;
}

*/



/* column container */
.FI-colmask {
  position:relative;	/* This fixes the IE7 overflow hidden bug */
  clear:both;
  float:left;
  width:100%;			/* width of whole page */
  overflow:hidden;		/* This chops off any overhanging divs */
}

/* common column settings */
.FI-colright,
.FI-colmid,
.FI-colleft {
  float:left;
  width:100%;
  position:relative;
}

.FI-col1,
.FI-col2,
.FI-col3 {
  float:left;
  position:relative;
  padding:0 0 1em 0;
  overflow:hidden;
}

/* 2 Column (right menu) settings */
.FI-rightmenu {

}

.FI-rightmenu .FI-colleft {
  right:50%;			/* right column width */
}

.FI-rightmenu .FI-col1 {
  width:46%;			/* left column content width (left column width minus left and right padding) */
  left:52%;			/* (right column width) plus (left column left padding) */
}

.FI-rightmenu .FI-col2 {
  width:46%;			/* right column content width (right column width minus left and right padding) */
  left:56%;			/* (right column width) plus (left column left and right padding) plus (right column left padding) */
}








/*                                                 securimage              */

/*                                                  The End                */