/* this is changed in the @ 540 res not here */
.table_font_mobile {
font-size: auto;
}
/* custom cell padding for table on orderform NOTE: this is not a class and is set for ALL TABLE VALUES and would need to be stylized - there is only 1 table on this website so it's okay to do this in main CSS code for now... using old code*/
table , td , th {
padding: 5px;
/* border: 1px solid black; */
color: #000099;
}
th {
}
/* phone number area main page custom padding */
.left_padding {
margin-left: 30px;
}
/* custom font size for nav menu class */
.nav_font_size {
font-size: 15px;
}
/* center image block */
.center_image_block {
display: block;
margin-left: auto;
margin-right: auto
}
/* collapsible clicking mobile hamburger button - for mobile big help from: http://jsbin.com/zukujifiqe/edit?html,css,output*/
.bar-menu-hide-show {
display:none;
}
.collapse + input{
display:none;
}
.collapse + input + *{
display:block; /* using this to show menu at higher resolution */
}
.collapse+ input:checked + *{
display:block;
}
/* Testing custom button */
.verticalCenter {
position: relative;
top: 50%;
transform: translateY(-50%);
}
.button_custom {
display: inline-block;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
padding: 10px;
border: none;
font: normal 24px/normal "Arial", Helvetica, sans-serif;
color: rgba(255,255,255,1);
text-decoration: normal;
-o-text-overflow: clip;
text-overflow: clip;
text-shadow: 0 0 10px rgba(255,255,255,1) , 0 0 20px rgba(255,255,255,1) , 0 0 30px rgba(255,255,255,1) , 0 0 40px #ffaa00 , 0 0 70px #1975FF , 0 0 80px #fff600 , 0 0 100px #CC0000 ;
-webkit-transition: all 200ms cubic-bezier(0.42, 0, 0.58, 1);
-moz-transition: all 200ms cubic-bezier(0.42, 0, 0.58, 1);
-o-transition: all 200ms cubic-bezier(0.42, 0, 0.58, 1);
transition: all 200ms cubic-bezier(0.42, 0, 0.58, 1);
}
.button_custom:hover {
text-shadow: 0 0 10px rgba(255,255,255,1) , 0 0 20px rgba(255,255,255,1) , 0 0 30px rgba(255,255,255,1) , 0 0 40px #0cff00 , 0 0 70px #1975FF , 0 0 80px #1975FF , 0 0 100px #00ff37 ;
}
/* TESTING CSS CODE ABOVE */
* {
-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
-moz-box-sizing: border-box; /* Firefox, other Gecko */
box-sizing: border-box;
}
.margin_top {
padding-top: 8px;
font-size: 18px;
margin-left: 2px;
}
body {
background-color: #ffffff;
color: #000000;
font-family: Arial, Helvetica, sans-serif;
line-height: 1.5em;
margin:0;padding:0; /* gets rid of the Diarrhea side space I don't like! */
}
h1 {
font-size: 1.75em;
margin: 1em 0;
line-height: 1.15em;
}
h2 {
font-size: 2.0em;
margin: 0.5em 0;
line-height: 1.15em;
}
h3 { /* putting a margin left since these are title words for Tweet Woof ... menu */
padding-left: 1.0em;
font-size: 1.6em;
font-family: Arial;
margin: 1em 0;
line-height: 1.15em;
text-decoration: none;
}
h4 { /* Using h4 for top menu */
font-size: 0.9em;
font-family: Arial;
}
h5 { /* humunga dunga text for top */
font-size: 2.5em;
margin: 0.5em 0;
line-height: 1.1em;
font-family: Arial;
}
h5.Over_Item {
position: absolute;
bottom: 6.5px;
left: 0;
width: 100%;
opacity: 0.75;
font-size: 2.5em;
margin: 0em 0;
line-height: 1.1em;
font-family: Arial;
}
h6 {
font-size: 72px;
margin: 1em 0;
line-height: 1.15em;
}
p {
margin: 0.5em 0;
font-size: 1.09em;
line-height: 1.5em;
}
p {
margin: 0.5em 0;
font-size: 1.09em;
line-height: 1.5em;
}
p.none {
margin: 0;
font-size: 1em;
line-height: 1.5em;
}
.center_text { /* added to center text */
text-align: center;
}
.container {
margin: 0 auto;
max-width: 1040px; /* testing max width, this can vary to change formats */
}
.blue_background_divider {
background: #336699;
height: 20px;
}
.red_background_divider {
background: #900000;
height: 10px;
}
.white_background_divider {
background: #ffffff;
height: 2px;
}
.banner_blue_background { /* adding banner to the top of the website */
background: #336699;
min-height: 90px;
min-width: 700px;
max-width: 700px;
background-size: 100% 100%;
}
.banner_red2_background { /* adding banner to the top of the website */
background-color: #900000 ;
height: 439px;
position: relative;
margin-bottom: -439px;
z-index: -1;
}
.banner_red_blue { /* adding banner to the top of the website */
display: block;
margin-right: auto;
background: #4a6384;
min-height: 50px;
max-height: 100px;
min-width: 300px;
background-size: 100% 100%;
}
.banner_black { /* adding banner to the top of the website */
background: #000000;
/* was Plant_Banner? */
min-height:80px;
; /* fallback */
}
.banner_top_two { /* adding banner to the top of the website */
background: linear-gradient(to right, rgb(173, 214, 255), rgba(102, 255, 255,0.25), rgba(255,255,255,0.5), rgba(255,255,255,0)); /* works for now ... should be a better way to do this banner */
/* was Plant_Banner? */
position: relative;
min-height:400px;
}
.banner_plant{ /* adding banner to the top of the website */
/* background: linear-gradient(to left, rgb(173, 214, 255), rgba(102, 255, 255,0.5), rgba(102, 255, 255,0.5), rgba(255,255,255,0)); */
background: linear-gradient(to right, rgb(0, 0, 0), rgba(102, 255, 255,0), rgba(102, 255, 255,0), rgba(0,0,0, 0));
position: absolute;
top: 130px;
/* was Plant_Banner? */
z-index: 1;
width:100%;
height: 270px;
position: absolute;
}
.banner_top_four { /* adding banner to the top of the website */
background: #336699;
/* Blue Border? */
background-size:contain;
min-height:20px;
max-width:100%;
}
.banner_second {
background: linear-gradient(to right, rgba(255,255,255,0), rgba(255,255,255,0.5), rgba(102, 255, 255,0.25), rgba(51, 51, 255, 0.4)); /* works for now ... should be a better way to do this banner */
/* was Plant_Banner? */
background-size:cover;
min-height:40px;
max-width:100%;
}
.footer, .post {
padding: 0.5em;
}
.inner_space {
padding: 0.5em;
font-size: 1em;
}
.inner_space_leftandright {
padding-left: 1.0em;
padding-right: 1.0em;
}
.footer {
color: #000000;
}
.header {
background: #fff;
/* background: linear-gradient(to left, rgba(102, 255, 255,0.5), rgba(255,255,255,1), rgba(102, 255, 255,0.5)); */
/* background: linear-gradient(to left, rgba(0,0,0,1), rgba(102, 255, 255,0.2), rgba(255,255,255,0.5), rgba(0,0,0,0.3)); */
/* background: linear-gradient(to left, rgba(250,240,200,1), rgba(255,255,255,1)); orange and white */
height: 20px;
}
.logo, .tagline {
float: left;
}
.tagline {
text-align: right;
}
.content {
/* same as header */
background: #fff;
height: 40px;
/* background: linear-gradient(to left, rgba(102, 255, 255,0.5), rgba(255,255,255,1), rgba(102, 255, 255,0.5)); */ /* Red, green, blue, opacity with gradient and from to left ! */
}
.content-second {
/* background-image: url("http://upload.wikimedia.org/wikipedia/commons/thumb/4/49/Morning_Sun_Rays_%285077976668%29.jpg/1280px-Morning_Sun_Rays_%285077976668%29.jpg"); */
/* Backround Image: Harald Hoyer from Schwerin, Germany (Morning Sun Rays Uploaded by russavia)[CC BY-SA 2.0], via Wikimedia Commons Image used freely under CC 2.0, author of image has no relation to website */
/* background: linear-gradient(to right, rgba(250,240,200,1), rgba(255,255,255,1),rgba(250,240,200,1), rgba(255,255,255,1), rgba(250,240,200,1)); works for now ... should be a better way to do this banner */
/* background: linear-gradient(to right, rgba(255,255,255,0), rgba(224,224,224,0.8), rgba(255,255,255,0.5), rgba(255,255,255,0))
background: #ffffff; */
background: #336699;
}
/* testing colums */
.column {
float: left;
position: relative;
width: 33.33%; /* remove width to make them stack vertically as rows!! awesome */
/*for demo purposes only */
background: #FFFFFF;
border: 1px solid #E0E0E0;
box-sizing: border-box;
}
.content-third {
background: #FFFFFF;
}
/* TEST End */
.content-fourth {
background: #000000;
}
.content-fifth {
background: #ffffff;
}
.empty_space {
background: #ffffff;
height: 500px;
}
.top-website {
float: left; /* new box above pictures on site */
/* sets maximum width of top bar area */
width: 425px; /* keeps width fluid */
background: #FFFFFF;
box-shadow: 0px 3px 5px #ccc; /* -0px 2px 2px #ccc, 0px 2px 2px #ccc; */
border-style: solid; border-top: none; border-color: #D0D0D0; /* custom border around videos and text of main area */
border-width: 1px;
padding: 0em;
margin-top: 1em;
}
.top-bar {
float: left; /* new box above pictures on site */
/* sets maximum width of top bar area */
width: 100%; /* keeps width fluid */
background: #FFFFFF;
/*
box-shadow: 2px 2px 4px 0 #ccc;
border-style: solid; border-color: #D0D0D0;
border-width: 1px;
*/
padding: 1em;
margin-top: 0em;
}
.top-bar-border {
float: left; /* new box above pictures on site */
/* sets maximum width of top bar area */
width: 100%; /* keeps width fluid */
background: #FFFFFF;
/* box-shadow: 2px 2px 4px 0 #ccc; */
border-style: solid; border-color: #D0D0D0;
border-width: 1px;
/* custom border around videos and text of main area */
margin-top: 0.5em;
}
.top-bar-text {
float: left; /* new box above pictures on site */
/* sets maximum width of top bar area */
width: 100%; /* keeps width fluid */
background: #ffffff;
border-style: solid; border-color: #E0E0E0; /* custom border around videos and text of main area */
border-width: 1px;
}
.post-sidebar {
float: right;
width: 70%; /* testing this number */
}
.sidebar-right {
float: left; /* changed to float left from float right */
width: 30%; /* customized widths of 300 px */
/* was padding 1 em not left */
padding-right: 0.5em;
padding-left: 0.5em;
}
.low_res_sidebar-right {
float: left; /* changed to float left from float right */
width: 30%; /* customized widths of 300 px */
/* was padding 1 em not left */
padding-right: 0.5em;
padding-left: 0.5em;
}
.low_resolution_column_left {
float: left; /* changed to float left from float right */
width: 320px; /* customized widths of 300 px */
/* was padding 1 em not left */
padding-right: 0.5em;
padding-left: 0.5em;
}
.low_resolution_column_right {
float: left;
width: 100%; /* testing this number */
}
.align_top_rect {
margin-left: 0px;
}
/* making new method of resizing images in a row */
#partners {
background-color: #ffffff;
white-space: nowrap;
width: 100%;
display: table;
}
.logo-image {
vertical-align: middle;
padding: 3px;
display: table-cell;
}
.logo-image img {
max-width: 100%;
}
/* add borders to dropdown menu top part */
/*
.border_class {
border-top: 1px solid #000000;
border-right: 1px solid #000000;
border-left: 1px solid #000000;
}
*/
.border_bottom {
border-bottom: 1px solid #000000;
}
.box-area-top { /* individual box area on the right side of the website. */
padding: 1em;
background: #ffffff;
/* background: linear-gradient(to right, rgba(250,240,200,1), rgba(255,255,255,1), rgba(250,240,200,1)); */
/* background: linear-gradient(to left, rgba(184, 147, 0, 0.3), rgba(255,255,255,1),rgba(250,240,200,1)); */ /* change background color of boxes on the right */
color: #000000;
}
.box-area { /* individual box area on the right side of the website. */
padding: 1em;
background: #ffffff;
/* background: linear-gradient(to right, rgba(250,240,200,1), rgba(255,255,255,1), rgba(250,240,200,1)); */
/* background: linear-gradient(to left, rgba(184, 147, 0, 0.3), rgba(255,255,255,1),rgba(250,240,200,1)); */ /* change background color of boxes on the right */
color: #000000;
margin-top: 0.5em;
box-shadow: 2px 2px 4px 0 #ccc;
border-style: solid; border-color: #D0D0D0; /* custom border around videos and text of main area */
border-width: 1px;
}
.box-area-lower { /* individual box area on the right side of the website. */
padding: 1em;
background: #C5B99F;
/* background: linear-gradient(to right, rgba(250,240,200,1), rgba(255,255,255,1), rgba(250,240,200,1)); */
/* background: linear-gradient(to left, rgba(184, 147, 0, 0.3), rgba(255,255,255,1),rgba(250,240,200,1)); */ /* change background color of boxes on the right */
color: #000000;
margin-top: 0.5em;
box-shadow: 2px 2px 4px 0 #ccc;
border-style: solid; border-color: #D0D0D0; /* custom border around videos and text of main area */
border-width: 1px;
}
.box-area-lower-main { /* individual box area on the right side of the website. */
background: #C5B99F;
/* background: linear-gradient(to right, rgba(250,240,200,1), rgba(255,255,255,1), rgba(250,240,200,1)); */
/* background: linear-gradient(to left, rgba(184, 147, 0, 0.3), rgba(255,255,255,1),rgba(250,240,200,1)); */ /* change background color of boxes on the right */
color: #000000;
margin-top: 0.5em;
box-shadow: 2px 2px 4px 0 #ccc;
border-style: solid; border-color: #D0D0D0; /* custom border around videos and text of main area */
border-width: 1px;
}
.highlight-box-area-text {
background-color: #33FF99;
height: 1.4em;
max-width: 320px; /* this must align with sub class of 'resize_side' image width */
font-size: 1.4em;
font-family: Arial;
line-height: 1.4em;
padding-left: 0.5em;
text-decoration: none;
}
.highlight-box-area-text-center {
background-color: #33FF99;
height: 1.4em;
max-width: 100%; /* this must align with sub class of 'resize_side' image width */
font-size: 1.4em;
font-family: Arial;
line-height: 1.4em;
padding-left: 0.5em;
text-decoration: none;
}
.footer {
background: #000000;
text-align: center;
color: #FFFFFF;
}
/* ADDED CODE OF NEW FUNCTIONS */
ul.rightmenu { /* Changed this class and fixed a ton of crap */
list-style-type: none;
line-height: 2.3em; /* adds space between links side menu */
margin: 0;
padding: 0;
padding: 20px; /* padding on side menu */
}
li {
font-size: 1.1em; /* adjust font on right menu */
text-decoration: none;
}
ul a {
color: black;
text-decoration: none;
}
a.o:link { /* gray */
color: #FFFFFF;
}
a.o:visited {
color: #FFFFFF;
}
a.o:hover {
color: #000000;
}
a.w:link { /* White Link */
color: #FFFFFF;
text-decoration: none;
}
a.w:hover {
color: #FFFFFF;
text-decoration: none;
}
a.w:visited {
color: #FFFFFF;
text-decoration: none;
}
a:link { /* Next four a adjust link color */
color: #1975FF;
}
/* visited link */
a:visited {
color: #1975FF;
}
/* ------------- START New classes to make 4 colors */
/* mouse over link */
a:hover {
color: #1975FF;
text-decoration: underline;
}
a.no_under {
color: #1975FF;
text-decoration: none;
}
a.no_under:hover {
color: #1975FF;
text-decoration: none;
}
a.c1:hover {
color: black; /* change link color for the c1 class link a */
text-decoration: underline;
}
a.c2:hover {
color: red;
text-decoration: underline;
}
a.c3:hover { /* starts a.c1,a.c2,a.c3,a.c4 etc. */
color: #fff; /* cool orange color #FF9933 */
text-decoration: underline;
}
a.c4:hover {
color: blue;
text-decoration: underline;
}
/* button at the top of the page next to drop down menu */
a.button_color {
color: #ffffff;
}
a.button_color:hover {
color: #FF9933;
}
a.button_color_surge {
color: #ffffff;
}
a.button_color_surge:hover {
color: #66FF33;
}
/* ------------- New classes to make 4 colors END */
/* Spacer class */
.rightmargin { /* must be adjusted at less than 800 px resolution @ media too */
margin-right:1%;
}
/* Drop down menu */
/* Drop down menu spacing test */
.Drop_Menu_Custom_Spacing {
margin-left: 100px;
}
/*Drop MENU SECTION starts below */
/* adding custom padding for the drop down menu with this webstie */
#nav{
list-style:none; /* Most of the credit to http://csswizardry.com/2011/02/creating-a-pure-css-dropdown-menu/ for the menu section to work properly*/
font-weight:normal;
margin-bottom:0px; /* no bottom margin */
margin-top:0px;
margin-left:0px; /* this number will vary a lot depending on format of website, right now had 5 px space on the left header where this menu is */
opacity: 1; /* lets make the menu transparent */
float:left; /* Clear floats */
width:100%; /* Bring the nav above everything else--uncomment if needed. */
position:relative;
z-index:50;
}
#nav li{
float:left;
left:0px; /* adjusting this number with nav ul below will fine tune drop down menu between variation in spacing */
position:relative;
}
#nav a{
display:block;
padding:8px;
padding-left:7px;
padding-right:7px;
color:#000000;
background:#FFFFFF ; /* menu color */
margin-left:0px; /* space between top menus */
text-decoration:none;
}
#nav a:hover{
color:#000000; /* top menu text color */
background:#0000FF;
text-decoration:underline;
}
/*--- DROPDOWN ---*/
#nav ul{
background:#fff; /* Adding a background makes the dropdown work properly in IE7+. Make this as close to your page's background as possible (i.e. white page == white background). */
background:rgba(255,255,255,0); /* But! Let's make the background fully transparent where we can, we don't actually want to see it if we can help it... */
list-style:none;
position:absolute;
left:-9999px; /* Hide off-screen when not needed (this is more accessible than display:none;) */
margin-left: 0px; /* needs this to line up bottom dropdown, not added in the original code */
margin-top: 0px;
}
#nav ul li{
padding-top:0px; /* Introducing a padding between the li and the a give the illusion spaced items */
float:none;
}
#nav ul a{
white-space:nowrap; /* Stop text wrapping and creating multi-line dropdown items */
}
#nav li:hover ul{ /* Display the dropdown on hover */
left:0; /* Bring back on-screen when needed */
}
#nav li:hover a{ /* These create persistent hover states, meaning the top-most link stays 'hovered' even when your cursor has moved down the list. */
background: #ffffff; /* Gray color */
text-decoration:underline;
}
#nav li:hover ul a{ /* The persistent hover state does however create a global style for links even before they're hovered. Here we undo these effects. */
text-decoration:none;
}
#nav li:hover ul li a:hover{ /* Hovering over each link*/
background:#336699; /* was #fff */
color: #FFFFFF;
/* 400 is same as normal, 700 is same as bold */
}
/* DROP MENU section ends */
.nav_adjust {
max-width: 80%;
}
/* making a custom green link */
#nav li:hover a.greenblue{ /* These create persistent hover states, meaning the top-most link stays 'hovered' even when your cursor has moved down the list. */
background: rgba(173, 214, 255, 0);
text-decoration:underline;
}
#nav li:hover a.wine_red{ /* These create persistent hover states, meaning the top-most link stays 'hovered' even when your cursor has moved down the list. */
background: rgba(102, 255, 255,0.8);
text-decoration:none;
}
/* Testing image adjustments below http://stackoverflow.com/questions/15757036/creating-a-zoom-effect-on-an-image-on-hover-using-css */
/* zoom in image testing */
#menu {
width: 100%;
}
.center_stuff {
margin-right: auto;
margin-left: auto;
}
.zoomimg {
display: inline-block;
width: 250px;
height: 375px;
margin-bottom: 5px;
background-size: 100% 100%;
background-repeat: no-repeat;
background-position: center center;
transition: all 3.0s ease; /* 2.0 s is slower than 1 s! */
/* removes text from the screen so it's not on the image */
}
.zoomimg:hover {
opacity:0.7;
background-size: 150% 150%;
}
.zoomimg_sandwich { /* code for sandwich picture */
display: inline-block;
width: 280px;
height: 160px;
margin-bottom: 5px;
background-size: 100% 100%;
background-repeat: no-repeat;
background-position: center center;
transition: all 3.0s ease; /* 2.0 s is slower than 1 s! */
/* removes text from the screen so it's not on the image */
}
.zoomimg_sandwich:hover {
background-size: 150% 150%;
}
/* Testing image adjustments END */
/* Resize videos */
.videoWrapper {
position: relative;
padding-bottom: 56.25%; /* 16:9 */
padding-top: 25px;
margin-bottom: 5px; /* Hurray, the margin works! for bottom of the video */
margin-top: 5px;
height: 0;
}
.videoWrapper iframe {
position: absolute;
top: 0;
left: 0;
width: 100%; /* makes max width 600 so it lines up with page */
height: 100%;
}
/* resize end */
/* making a button */
/* The MIT License (MIT)
Copyright (c) 2014-2015 Ian Lunn
Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in
all copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
THE SOFTWARE.
*/
.hvr-grow {
position: absolute; /* Conrad added this! Keeps the original zoom window in the same location so a button can be placed above it! */
display: inline-block;
vertical-align: middle;
-webkit-transform: translateZ(0);
transform: translateZ(0);
box-shadow: 0 0 1px rgba(0, 0, 0, 0);
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
-moz-osx-font-smoothing: grayscale;
-webkit-transition-duration: 0.3s;
transition-duration: 0.3s;
-webkit-transition-property: transform;
transition-property: transform;
}
.hvr-grow:hover, .hvr-grow:focus, .hvr-grow:active {
-webkit-transform: scale(1.1);
transform: scale(1.1);
}
/* END MIT LICENSE */
.remove_decoration {
text-decoration: none;
}
#galleryphotos {
margin: 0;
padding: 0;
}
.displayphoto {
display: inline;
position: relative;
width: 100%;
}
.photo_in_text {
width: 100%;
}
/*image compressing box for article/images */
.image_box {
display: block;
position: relative;
width:33.33%; /* 1/3rd spacing */
border: none;
float: left; /* gets rid of the space between images but obviously pushes them to the left */
}
.image_box_325 {
display: block;
position: relative;
width:32.66%; /* 32.66*3=98 then add 1% spacing to the first 2 box right margins for 100% */
border: none;
float: left; /* gets rid of the space between images but obviously pushes them to the left */
}
.image_caption_thirty_percent {
float: left;
position: relative;
width: 33.33%;
background: gray;
}
/* photo links used as images */
/* change opacity of images */
.opacity_change {
transition: all 1.0s ease;
}
.opacity_change:hover {
opacity:0.9;
}
.opacity_none {
transition: all 1.0s ease;
}
.opacity_none:hover {
opacity:1;
}
/* vertical line */
.vertical_line {
border-left: thin solid #ffffff;
}
.vertical_line_black {
border-left: thin solid #000000;
}
input.inputblur { /*change search text size */
font-size: 1.2em;
}
.title_margin {
/* margin-left:5%; */ /* move the textbox 50 pixels to the right */
padding-left: 10px; /* create 10 pixels of padding between the border and the text */
}
.Display_Nothing{
display: none;
}
.top_margin_left {
padding-left: 0.2em;
}
/* absolute position element at top of page */
.absolute {
position: absolute;
top: 190px; /*150+40+450 */
left: 0;
z-index: -1;
width: 320px;
height: 300px;
}
/* text in front of image */
.imageWrapper { position: relative;}
.imageWrapper p { position: absolute; left: 0; top: 0; padding: 10px; border: 1px solid #FFF; top: 45%; width: 85%; color: #FFF; margin: 5px; }
/* Making a custom button for LINKS */
.button {
padding:6px;
border-radius: 3px;
background-color: #008AE6;
text-decoration:none;
font-weight: bold;
background-image: -webkit-linear-gradient(top, #008AE6, #1975FF);
background-image: -moz-linear-gradient(top, #008AE6, #1975FF);
background-image: -ms-linear-gradient(top, #008AE6, #1975FF);
background-image: -o-linear-gradient(top, #008AE6, #1975FF);
background-image: linear-gradient(to bottom, #008AE6, #1975FF);
}
.button:hover {
background-color: #1975FF;
background-image: -webkit-linear-gradient(top, #3cb0fd, #3498db);
background-image: -moz-linear-gradient(top, #3cb0fd, #3498db);
background-image: -ms-linear-gradient(top, #3cb0fd, #3498db);
background-image: -o-linear-gradient(top, #3cb0fd, #3498db);
background-image: linear-gradient(to bottom, #3cb0fd, #3498db);
text-decoration:none;
}
/* END */
/* Making Image gallery of images in a horizontal row */
/*
div.img {
margin: 0px;
padding: 0px;
height: auto;
width: auto;
float: left;
text-align: center;
}
div.img img {
display: inline;
}
div.desc {
text-align: center;
font-weight: normal;
width: 123px;
margin: 0px;
}
.imgSize {
width: 242px;
height:230px;
}
.3rd_square {
}
.center_block {
margin-left: auto;
margin-right: auto;
position: relative;
text-align:center;
}
*/
/*
@media (max-width: 1058px) {
div.desc {
text-align: center;
font-weight: normal;
width: 123px;
margin: 0px;
}
.imgSize {
text-align:center;
width: 180px;
height:115px;
}
.center_block {
text-align:center;
margin-left: auto;
margin-right: auto;
position: relative;
}
*/
/* custom bottom border */
.bottom_border {
background: linear-gradient(#C8C8C8 , #ffffff); /* Standard syntax (must be last) */
height: 10px;
}
.top_border {
background: linear-gradient(#ffffff, #C8C8C8); /* Standard syntax (must be last) */
height: 10px;
}
.top_border_line {
background: #000; /* Standard syntax (must be last) */
height: 3px;
}
/* large input box */
input.large { padding: 10px; font-size: 26px; }
/* Add double border to images */
img.double_border {
padding:1px;
border:1px solid #E0E0E0;
background-color:#ffffff;
}
/* This is really nice, list of images that centers automatically */
/* This is really nice, list of images that centers automatically */
/* This is really nice, list of images that centers automatically */
/* This is really nice, list of images that centers automatically */
.white_color ul li a {
text-decoration: none;
color: #ffffff;
font-weight: thick;
}
.white_color ul li:hover a {
text-decoration: underline;
color: #ffffff;
}
#CenterImage {
margin-left: auto;
margin-right: auto;
position: relative;
z-index: 0;
text-align:center;
}
#CenterImage ul li {
display:inline-block;
margin: 1px;
font-size: 1.09em;
}
.image_width {
width: 252px;
height: 150px;
}
@media (max-width: 1059px) {
.image_width {
width: 220px;
height: 135px;
}
@media (max-width: 800px) {
.image_width {
width: 170px;
}
}
@media (max-width: 517px) {
.image_width {
width: 130px;
height: 81px;
}
}
/* captions */
/* http://cssdemos.tupence.co.uk/stepbystep/stepbystep-image-caption.htm */
li.below:after{ /* by using :after we place the caption after the image, when used with display:block this will be underneath the image*/
content: attr(title); /*places the contents of title below the image*/
display:block; /*puts the caption on its own line instead of at the side of the image*/
}
/* End - ALL THIS CODE IS AMAZING */
/*
@media (max-width: 1200px) {
.container {
margin: 0 auto;
max-width: 100%;
}
}
*/
/* Media query to make the sidebar drop and stack below the content when the screen is smaller than 800px, and giving both the sidebar and content to the left 100% width. */
@media (max-width: 955px) { /* this was 955px */
h6 {
font-size: 24px;
margin: 1em 0;
line-height: 1.15em;
}
.low_res_sidebar-right {
max-width: 320px; /* also customized to 300 px all initially float, changed it from none to "left" why change? Float left is good, lets a natural flow develop */
float: left;
width: 100%;
}
.sidebar-right { /* original side bar class */
/* also customized to 300 px all initially float, changed it from none to "left" why change? Float left is good, lets a natural flow develop */
max-width: 320px;
float: left;
width: 100%;
}
.post-sidebar {
width: 100%;
float: left;
}
.sidebar-right {
padding-top: 0;
}
.top-bar { /* this code isn't necessary but may want to be adjusted later depending.. */
float: left; /* new box above pictures on site */
width: 100%;
background: #FFFFFF;
padding-left: 0.5em;
}
.top-bar-text { /* this code isn't necessary but may want to be adjusted later depending.. */
float: left; /* new box above pictures on site */
width: 100%;
background: #FFFFFF;
}
.rightmargin_two { /* Second class for experimenting, must be adjusted at less than 800 px resolution @ media too */
margin-right:10px;
}
/*
.banner {
min-height: 200px;
}
.banner_second {
min-height: 200px;
}
*/
.column {
width:auto;
}
.container {
margin: 0 auto;
max-width: 100%; /* testing max width */
}
.resize_side {
max-width: 320px;
height: auto;
}
.banner_top_three {
display: block;
margin-left: auto;
margin-right: auto;
min-height: 166px;
min-width: 450px;
max-width: 450px;
background-size: 100% 100%;
}
/* collapsible clicking for mobile */
.collapse + input{
display:none;
}
.collapse + input + *{
display:block;
}
.collapse+ input:checked + *{
display:none;
}
.bar-menu-hide-show {
display:block;
}
}
@media (max-width: 540px) {
.low_res_sidebar-right {
max-width: 100%; /* also customized to 300 px all initially float, changed it from none to "left" why change? Float left is good, lets a natural flow develop */
float: right;
width: 100%;
}
.sidebar-right {
max-width: 1000%; /* also customized to 300 px all initially float, changed it from none to "left" why change? Float left is good, lets a natural flow develop */
float: left;
width: 100%;
}
h2 { /* custom change font at lower resolution */
font-size: 1.5em;
margin: 1em 0;
line-height: 1.15em;
}
.Remove_Content{
display: none;
}
.image_box { /* This will make the images stack vertically using this class 955/3 is 318 */
min-width: 280px;
}
/*
.image_box_325 {
min-width: 320px;
}
*/
.sidebar-right { /* center side bar for mobile */
margin-right: auto;
margin-left: auto;
}
.container {
margin: 0 auto;
max-width: 100%; /* testing max width */
}
/* make more text fit at mobile size */
.top-bar {
padding:0.25em;
}
.post {
padding:0.25em;
}
.inner_space {
padding:0.25em;
}
/* make the top width fluid */
.top-website {
width: 90%;
}
.3rd_square {
margin-left: -3px;
}
.banner_top_three {
/* center the image */
display: block;
margin-left: auto;
margin-right: auto;
min-width: 224px;
max-width: 224px;
min-height: 83px;
background-size: 100% 100%;
}
}
#partners {
text-align: center;
max-width: 320px;
margin-left: auto;
margin-right: auto;
position: relative;
z-index: 0;
white-space: normal;
}
.logo-image {
text-align: center;
padding: 3px;
display: inline-block;
}
h5.Over_Item {
font-size: 1.5em;
}
h5.Under_Item {
font-size: 1em;
}
.table_font_mobile {
font-size: 15px;
}
}