body {
background-image: url(../images/backgroung_2.png);  background-position:top center; 
     background-repeat:no-repeat;  background-attachment:fixed; 
     -webkit-background-size:cover;
      -moz-background-size:cover;
       -0-background-size:cover;
        background-size:cover; 

}
h1,h2,h3,h4,h5,h6 {
 font-family: 'Kranky', cursive;
}
p {
 font-family: 'Loved by the King', cursive;
 font-size: 1.75em;
 color: #000;
 font-weight: 600;
}
.text_half {
  font-size: 1.2em;
}
.web_development {
  font-size: 0.9em;
  color: orange;
  text-decoration: underline;
}
.rotate {

/* Safari */
-webkit-transform: rotate(-6deg);

/* Firefox */
-moz-transform: rotate(-6deg);

/* IE */
-ms-transform: rotate(-6deg);

/* Opera */
-o-transform: rotate(-6deg);
}

.rotate_other {

/* Safari */
-webkit-transform: rotate(6deg);

/* Firefox */
-moz-transform: rotate(6deg);

/* IE */
-ms-transform: rotate(6deg);

/* Opera */
-o-transform: rotate(6deg);
}
.border-1 {
  border: solid #000 1px;
}
/*^^^^^^^^^^^^^^^^^^^^^^^^^^ RSS FEDDER STYLING ^^^^^^^^^^^^^^^^^ */
  marquee { 
      height: 240px;
      padding: 2px;
     }
     marquee h3 {
      font-size: 1.2em;
     }
     marquee p {
      font-size: 1.2em;
     }
     .space {
      height: 80px;
     }

     .current_rate {
      font-size: 1.8em;
      color: blue;
     }
/*^^^^^^^^^^^^^^^^^^^^^^^^^^ RSS FEDDER STYLING ^^^^^^^^^^^^^^^^^ */





/*  ^^^^^^^^^^^^^^^^^^^^^^^^^^^ Slider Styling  ^^^^^^^^^^^^^^^^^ */

#slider {
  width: 260px;
  height: auto;
  overflow: hidden;
  border-bottom: 1px solid rgba(51,51,51,1);
}

#slider .slides {
  display: block;
  width: 6000px;
  height: auto;
  margin: 0;
  padding: 0;
}

#slider .slide {
  float: left;
  list-style-type: none;
  width: 260px;
  height: auto;
}
.wrapper {
  width: 260px;
  height: 100%;
}
.effect2
{
  position: relative;
}
.effect2:before, .effect2:after
{
  z-index: -1;
  position: absolute;
  content: "";
  bottom: 15px;
  left: 10px;
  width: 50%;
  top: 80%;
  max-width:100%;
  background: #777;
  -webkit-box-shadow: 0 15px 10px #777;
  -moz-box-shadow: 0 15px 10px #777;
  box-shadow: 0 15px 10px #777;
  -webkit-transform: rotate(-3deg);
  -moz-transform: rotate(-3deg);
  -o-transform: rotate(-3deg);
  -ms-transform: rotate(-3deg);
  transform: rotate(-3deg);
}
.effect2:after
{
  -webkit-transform: rotate(3deg);
  -moz-transform: rotate(3deg);
  -o-transform: rotate(3deg);
  -ms-transform: rotate(3deg);
  transform: rotate(3deg);
  right: 10px;
  left: auto;
}

/*  ^^^^^^^^^^^^^^^^^^^^^^^^^^^ END  Slider Styling  ^^^^^^^^^^^^^^^^^ */

#login {
	border: 1px solid #AEAEAE;
	margin: 100px auto 0;
	padding: 0;
	width: 300px;
}

#adminmenu {
	padding: 20px 0 20px 26px;
}

#adminmenu li {
	float: left;
	list-style: none;
	margin-right: 20px;
}

.clear {
	clear: both;
}

.error {
	padding: 0.75em;
	margin: 0.75em;
	border: 1px solid #990000;
	max-width: 400px;
	color: #990000;
	background-color: #FDF0EB;
	-moz-border-radius: 0.5em;
	-webkit-border-radius: 0.5em;
}


a {
	color: #EF1F2F;
	text-decoration: none;
}

form input {
	border: 1px solid #999999;
	border-bottom-color: #cccccc;
	border-right-color: #cccccc;
	padding: 5px;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 1.0em;
	margin: 2px;
}

table {width:98%; text-align:left; border:1px solid #DDDDDD; font-size:12px; color:#000;background:#fff; margin-bottom:10px;}
table th {background-color:#E5E5E5; border:1px solid #BBBBBB; padding:3px 6px; font-weight:normal; color:#000;}
table tr td {border:1px solid #DDDDDD; padding:5px 6px;}
table tr.alt td {background-color:#E2E2E2;}
table tr:hover {background-color:#F0F0F0; color:#000;}

/* $$$$$$$$$$$$$$$$  NB This is the CSS for the UPLOADING FORM $$$$$$$$$$$$$$ */

#preview{
    height:180px; 
    width:180px; 
    text-align:center;
    margin: 20px;
    display:none;
}
.pre{
    margin-right: 20px;
    font-size: 13px;
}
#previewimg{
    height:140px; 
    width:140px; 
    float:left; 
    padding:8px;
    border:1px solid rgb(228,211,195);
    margin-bottom: 5px;
}
#message{
    width:100%; 
    font-size:14px; 
    color:#123456;
    margin-top:-90px;
    float:left;
    margin: 15px;
}
#message span{
    color:red;
    font-size:15px;
}

ul{
    margin-left: -25px;
}

#textmessage{ 
    float:right; 
    width:50%; 
    margin:15px 85px 0 0; 
}
div#img{ 
    width:200px; 
    height:200px;
}
#imageupload{
    width:150px; 
    height:150px; 
}
#deleteimg{ 
    cursor:pointer; 
    float: right;
    margin-top: -175px;
    margin-right: 10px;
}

/*  $$$$$$$$$$$$$$$$$$$$$$$$$ END OF UPLOADING IMAGE $$$$$$$$$ */

/* GA Personal Mods */
.border {
  border: 1px solid #555;
}
.date_text {
  font-size: 0.85em;
}
.equal_div_height {
  max-height: 1200px;
  overflow: auto;
}
.four_height {
  height: 400px;
  overflow: auto;
}
.transparency {
  background:#7f7f7f;
  background:rgba(255,255,255,0.8)
}
.visitorcounter {
width:;
background:rgba(51,51,51,0.2);
font-size:110%;
padding:2px;
}

/* $$$$$$$$$$$$$$$$$$$$$$$$$$$*/
/* %%%%%%%%%%%%%%%%%% header styling %%%%%%%%%%%%%%%%%*/
.wrapper {
  text-align: center;
  margin:;
  width:;
  padding:;

}
.h3_margin {
  margin: 0;
}
.box {
  position: relative;
  width: 16px;
  display:inline-block;
  vertical-align: bottom;
  box-shadow: 0 1px  10px
}

.one {
  -webkit-animation: b 4s linear infinite;
  animation: b 4s linear infinite;
}
.two {
  -webkit-animation: b 4s 0.4s linear infinite;
  animation: b 4s 0.4s linear infinite;
}
.three {
  -webkit-animation: b 4s 0.8s linear infinite;
  animation: b 4s 0.8s linear infinite;
}
.four {
  -webkit-animation: b 4s 1.2s linear infinite;
  animation: b 4s 1.2s linear infinite;
}
.five {
  -webkit-animation: b 4s 1.6s linear infinite;
  animation: b 4s 1.6s linear infinite;
}
.six {
  -webkit-animation: b 4s 2s linear infinite;
  animation: b 4s 2s linear infinite;
}
.seven {
  -webkit-animation: b 4s 2.4s linear infinite;
  animation: b 4s 2.4s linear infinite;
}
.eight {
  -webkit-animation: b 4s 2.8s linear infinite;
  animation: b 4s 2.8s linear infinite;
}
.nine {
  -webkit-animation: b 4s 3.2s linear infinite;
  animation: b 4s 3.2s linear infinite;
}
.ten {
  -webkit-animation: b 4s 3.6s linear infinite;
  animation: b 4s 3.6s linear infinite;
}
.margin {
  background:none;
  box-shadow:none;
  height:60px;
}
@-webkit-keyframes b {
    0%     {height: 0px; background-color: rgba(255,0,0,0.4)}
    50%    {height: 60px; background-color: rgba(0,255,0,0.4)}
    100%   {height: 0px; background-color: rgba(0,0,255,0.4)}  
}
  
  @keyframes b {
    0%     {height: 0px; background-color: rgba(255,0,0,0.4)}
    50%    {height: 60px; background-color: rgba(0,255,0,0.4)}
    100%   {height: 0px; background-color: rgba(0,0,255,0.4)} 
  }

/* %%%%%%%%%%%%%%%%%% END header styling %%%%%%%%%%%%%%%%%*/

/*########### MEDIA QUERy ###############*/


/* Smartphones (landscape) ----------- */
@media only screen 
and (min-width : 321px) {
#marquee h1 {
        font-size: 12px;
        background:;
    }
          
}

/* Smartphones (portrait) ----------- */
@media only screen 
and (max-width : 320px) {
h1 {
        font-size: 12px;
        background:;
    }
 
 }
/* Smartphones (portrait and landscape) ----------- */
@media only screen 
and (min-device-width : 320px) 
and (max-device-width : 480px) {
 h1 {
        font-size: 19px;
        background:;
        margin-top: 18px;
    }
    
 }


/* iPhone 4 ----------- */
@media
only screen and (-webkit-min-device-pixel-ratio : 1.5),
only screen and (min-device-pixel-ratio : 1.5) {
h1 {
        font-size: 24px;
        background: ;
        margin-top: 12px;
    }
     
}

/* iPads (portrait and landscape) ----------- */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) {
h1 {
        font-size: 24px;
        background: ;
        margin-top: 12px;
    }
    
}

/* iPads (landscape) ----------- */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : landscape) {
h1 {
        font-size: 24px;
        background: ;
        margin-top: 12px;
    }
}

/* iPads (portrait) ----------- */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : portrait) {
h1 {
        font-size: 24px;
        background: ;
        margin-top: 12px;
    }
  
}

/* Desktops and laptops ----------- */
@media only screen 
and (min-width : 1224px) {
h1 {
        font-size: 24px;
        background: ;
        margin-top: 12px;
    }
   
}

/* Large screens ----------- */
@media only screen 
and (min-width : 1824px) {
h1 {
        font-size: 28px;
        background:;
    }
}

/* ###########################End media queries  #################### */

.border-temp {
border: solid 2px green;
}

.bg-grey {
    background: grey;
}

.bg-green {
    background: green;
}

.bg-yellow {
    background: yellow;
}
.bg-black {
    background: black;
}
.bg-blue {
    background: blue;
}
.bg-pink {
    background: pink;
}
.bg-orange {
    background: orange;
}


/*################### Tnted Backgrounds #######################*/
.color-a {
  background-color: red;
}

.color-b {
  background-color: green;
}

.color-c {
  background-image: repeating-linear-gradient(45deg, yellow, yellow 10px, blue 10px, blue 20px);
}

.tint1 {
  box-shadow: inset 10000px 0 0 rgba(255, 255, 255, 0.1);
}

.tint2 {
  box-shadow: inset 10000px 0 0 rgba(255, 255, 255, 0.2);
}

.tint3 {
  box-shadow: inset 10000px 0 0 rgba(255, 255, 255, 0.3);
}

.tint4 {
  box-shadow: inset 10000px 0 0 rgba(255, 255, 255, 0.4);
}