/* CSS Document */

a#lovequotes {
    display: block;
    width: 141px;
    height: 67px;
    background: url("lovequotesbutton.webp") no-repeat;
}

a#lovequotes:hover {
    background: url("lovequotesbuttonhover.webp") no-repeat;
}

a#lovepoems {
    display: block;
    width: 141px;
    height: 67px;
    background: url("lovepoemsbutton.webp") no-repeat;
}

a#lovepoems:hover {
    background: url("lovepoemsbuttonhover.webp") no-repeat;
}

a#lovestories {
    display: block;
    width: 141px;
    height: 67px;
    background: url("lovestoriesbutton.webp") no-repeat;
}

a#lovestories:hover {
    background: url("lovestoriesbuttonhover.webp") no-repeat;
}

/* ie6 needs his fix*/ 
a#lovequotes:hover {zoom:1;} 
a#lovepoems:hover {zoom:1;} 
a#lovestories:hover {zoom:1;} 

/* lovefatedestiny3*/
/* CSS Document */
body {
	margin: 0px;
	font-family: Calibri;
	font-size: 14px;
	color: #000000;
}

#toprim {
	padding: 0px;
	background: #FCE9FC;
	border-top: 1px solid #F9CCE1;
	border-bottom: 1px solid #F9CCE1;
}

.other {
	font-family: Calibri;
	font-size: 14px;
	color: #000000;
}

.other2 {
	font-family: Calibri;
	font-size: 14px;
	color: #000000;
}

/* links */
.type3:link  {
	font-family: Calibri;
	font-size: 14px;
	color: #CC3366;
	text-decoration: underline;
	font-weight: bold;
	margin: 5px;
}

.type3:visited  {
	font-family: Calibri;
	font-size: 14px;
	color: #CC3366;
	text-decoration: underline;
	font-weight: bold;
	margin: 5px;
}

.type3:active  {
	font-family: Calibri;
	font-size: 14px;
	color: #CC3366;
	text-decoration: underline;
	font-weight: bold;
	margin: 5px;
}

.type3:hover {
	font-family: Calibri;
	font-size: 14px;
	color: #0000FF;
	text-decoration: none;
	font-weight: bold;
	margin: 5px;
}

.type2:link  {
	font-family: Calibri;
	font-size: 14px;
	color: #CC3366;
	text-decoration: underline;
	font-weight: bold;
	line-height: 18px;
}

.type2:visited  {
	font-family: Calibri;
	font-size: 14px;
	color: #CC3366;
	text-decoration: underline;
	font-weight: bold;
	line-height: 18px;
}

.type2:active  {
	font-family: Calibri;
	font-size: 14px;
	color: #CC3366;
	text-decoration: underline;
	font-weight: bold;
	line-height: 18px;
}

.type2:hover {
	font-family: Calibri;
	font-size: 14px;
	color: #000000;
	text-decoration: none;
	font-weight: bold;
	line-height: 18px;
}

/* Overal table */
.outline {
  border: 1px solid #F49AC1;
	font-family: Calibri;
	font-size: 14px;
}

/* For top links */
#buttons {
	float: left;
	width: 99%;
  	margin-bottom: 2px;
	margin-left: 0px;
	float: left;
	height: 25px;
}

ul#mainlevel-nav li
{
	padding-left: 0px;
	padding-right: 0px;
	float: left;
	font-size: 14px;
	font-weight: bold;
	font-family: Calibri;
	font-size: 14px;
	text-align: center;
	line-height: 25px;
	background: #FCE9FC;
	width: 130px;
}

ul#mainlevel-nav li a
{
	display: block;
	padding-left: 5px;
	padding-right: 5px;
	text-decoration: none;
	font-weight: bold;
	font-family: Calibri;
	font-size: 14px;
	text-align: center;
	color: #CC3366;
	background: #FCE9FC;
	width: 130px;
}

#buttons>ul#mainlevel-nav li a { width: auto; }

	ul#mainlevel-nav li a:hover
{
	color: #0000FF;
	background: #FCE9FC;
}

/* For nav links to have no list style */
ul
{
margin: 0;
padding: 0;
list-style: none;
}


/* For mainbody */
#body_outer {
	width: 100%;
	padding: 0px;
	margin-left: 0px;
	padding-bottom: 50px;
	font-family: Calibri;
	font-size: 14px;
	color: #000000;
}

/* Content heading */
.contentheading {
	color: #CC3366;
	font-weight: bold;
	font-size: 14px;
}

/* heading */
.heading {
	color: #CC3366;
	font-weight: bold;
	font-size: 18px;
}

.bottomheading {
	color: #000000;
	font-weight: bold;
	text-decoration: none;
	font-size: 14px;
}

.fb-comments, .fb-comments span[style], .fb-comments iframe[style] {width: 100% !important;}

#side {
	width: 335px;
	font-family: Calibri;
	font-size: 14px;
	color: #000000;
}

#side1 {
	width: 335px;
	height: 38px; 
	background: url(sidenav1.webp) no-repeat;
	background-size: 100% 100%;
}

#side2 {
	width: 335px;
	height: 37px; 
	background: url(sidenav3.webp) no-repeat;
	background-size: 100% 100%;
}

#side3 {
	width: 335px;
	background: url(sidenav2.webp) ;
	background-size: 100% 130px;
}

.social {
	display: inline-block;
	margin: 3px;
}
/* topsize*/

#tophead {
	width: 960px;
	margin-right: auto;
	margin-left: auto;
}

#cupid {
	width: 550px;
	height: 400px;
}

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

#tophead {
	width: 695px;
}

#cupid {
	width: 550px;
	height: 400px;
}

#toprim {
	padding-bottom: 25px;
}

}

@media only screen and (min-width: 550px) and (max-width: 699px){

#tophead {
	width: 545px;
}

#cupid {
	width: 500px;
	height: 360px;
}

#toprim {
	padding-bottom: 25px;
}

}

@media only screen and (min-width: 470px) and (max-width: 549px){

#tophead {
	width: 468px;
}

#cupid {
	width: 450px;
	height: 320px;
}

#toprim {
	padding-bottom: 50px;
}

#homeintro {display: none;}

.topad td { display:block; }

}

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

#tophead {
	width: 320px;
}

#cupid {
	width: 300px;
	height: 210px;
}

#toprim {
	padding-bottom: 75px;
}

#homeintro {display: none;}

.topad td { display:block; }

}

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

#side
{display: none;}

}
/* banner*/
/* CSS Document */

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

#widebanner {
	width: 730px;
	height: 95px;
	margin-right: auto;
	margin-left: auto;
}

}

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

#widebanner {
	width: 468px;
	height: 65px;
}

}

@media only screen and (min-width: 550px) and (max-width: 699px){

#widebanner {
	width: 320px;
	height: 105px;
}

}

@media only screen and (min-width: 470px) and (max-width: 549px){

#widebanner {
	width: 468px;
	height: 65px;
}

}

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

#widebanner {
	width: 320px;
	height: 105px;
}

}

/* ------------------------------------------
  NAVIGATION STYLES
--------------------------------------------- */

.fixed {
  position: fixed;
  width: 100%;
  left: 0;
  top: 0;
}

.nav-collapse,
.nav-collapse * {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

.nav-collapse,
.nav-collapse ul {
  list-style: none;
  width: 100%;
  float: left;
}

@media screen and (min-width: 40em) {
  .nav-collapse {
    float: left;
    width: auto;
  }
}

.nav-collapse li {
  float: left;
  width: 100%;
}

@media screen and (min-width: 40em) {
  .nav-collapse li {
    width: auto;
  }
}

/* Minimised Navi */
.nav-collapse a {
  -webkit-tap-highlight-color: rgba(0,0,0,0);
  border-top: 1px solid white;
  border-left: 1px solid white;
  text-decoration: none;
  background: #BFC8DA;
  padding: 0.4em 0.7em;
  color: #002162;
  width: 100%;
  float: left;
  font-size: 12px;
  font-weight: bold;
}

.nav-collapse a:hover {
color: #0000FF;
background: #EAF0F7;
}

.nav-collapse a:active,
.nav-collapse .active a {
  background: #90A0C1;
}

/* Navi */
@media screen and (min-width: 40em) {
  .nav-collapse a {
  	border-left: 0px;
    padding: 0.3em 2.5em;
	border-top: 0px;
    text-align: center;
    float: left;
    margin: 0;
	background: #BFC8DA;
	font-size: 12px;
  	font-weight: bold;
  }
}

.nav-collapse ul ul a {
  background: #90A0C1;
  padding-left: 2em;
}

/* applies only if the screen is bigger than 480px */
@media screen and (min-width: 40em) {
  .nav-collapse ul ul a {
    display: none;
  }

/* ------------------------------------------
  NAV TOGGLE STYLES
--------------------------------------------- */

@font-face {
  font-family: "responsivenav";
  src:url("icons/responsivenav.eot");
  src:url("icons/responsivenav.eot?#iefix") format("embedded-opentype"),
    url("icons/responsivenav.ttf") format("truetype"),
    url("icons/responsivenav.woff") format("woff"),
    url("icons/responsivenav.svg#responsivenav") format("svg");
  font-weight: normal;
  font-style: normal;
}

.nav-toggle {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-decoration: none;
  text-indent: -300px;
  position: relative;
  overflow: hidden;
  width: 60px;
  height: 55px;
  float: right;
}

.nav-toggle:before {
  color: #fff; /* Edit this to change the icon color */
  font: normal 20px/55px "responsivenav"; /* Edit font-size (28px) to change the icon size */
  text-transform: none;
  text-align: center;
  position: absolute;
  content: "\2261"; /* Hamburger icon */
  text-indent: 0;
  speak: none;
  width: 100%;
  left: 0;
  top: 0;
}

.nav-toggle.active:before {
  font-size: 24px;
  content: "\78"; /* Close icon */
}

/* Tab navigation for Genies */

ul.tab {
    width: 99%;
	list-style-type: none;
    margin: auto;
    padding: 0;
    overflow: hidden;
    border: 1px solid #BFC8DA;
    background-color: #f1f1f1;
}

/* Float the list items side by side */
ul.tab li {float: left;}

/* Style the links inside the list items */
ul.tab li a {
    display: inline-block;
    color: black;
	font-weight: bold;
    text-align: center;
    padding: 5px 20px;
    text-decoration: none;
    transition: 0.3s;
    font-size: 14px;
}

/* Change background color of links on hover */
ul.tab li a:hover {
    background-color: #BFC8DA;
}

/* Create an active/current tablink class */
ul.tab li a:focus, .active {
    background-color: #BFC8DA;
}

/* Style the tab content */
.tabcontent {
    display: none;
    padding: 3px 12px;
    -webkit-animation: fadeEffect 1s;
    animation: fadeEffect 1s;
}

@-webkit-keyframes fadeEffect {
    from {opacity: 0;}
    to {opacity: 1;}
}

@keyframes fadeEffect {
    from {opacity: 0;}
    to {opacity: 1;}
}