Difference between revisions of "Template:OLS Canmore/CSS"

Revision as of 13:39, 3 October 2016

        #sideMenu, #top_title {display:none;} 
        #content { padding:0px; width:1000px; margin-top: 0px; margin-left:0px;}

/* body {background-color:white; } */ /* #bodyContent h1, #bodyContent h2, #bodyContent h3, #bodyContent h4, #bodyContent h5 { margin-bottom: 0px; } */

/********************************* MENU ********************************/

/* #top_menu_inside {

                 width: 1020px;

margin: 0px auto;

                }  */

.ols_accordion { list-style-type: none; position: fixed;

       overflow: visible;

margin-top: -55px; /* width: 85%; */

       background-color: #a1d6e2;

}

.ols_menubtn {

       list-style-type: none;

width: 20px; font-size: 14px; text-align: left; font-family: "Trebuchet MS", Helvetica, sans-serif;

}

/* Styling for the menu items */ .ols_menu_item {

       list-style-type: none;

float: left; width: 100px;

}

.ols_menu_item a {

       list-style-type: none;

width: 100%; margin-left: -20px; padding: 11px 90px 12px 20px; text-decoration: none; max-width: 100px;

}

.ols_submenu { list-style-type: none;

   display: block;
   position: absolute;
   background-color: rgba(172, 179, 189, 1.0);

min-width: 130px;

   box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);

}

.ols_submenu a { list-style-type: none;

   color: black;
   padding: 12px 16px;
   text-decoration: none;
   display: block;
   text-align: left;

min-width: 130px;

}

.ols_menu_item a, .ols_menubtn { list-style-type: none; display: inline-block;

   color: white;
   text-align: center;
   text-decoration: none;

}

.ols_submenu a:hover { color: #1995ad; }

/* When hovering on a menu item */ .ols_menu_item:hover .ols_submenu { color:#cccccc; background-color: rgba(241, 241, 241, 1.0); display: block; }

/* Styling for the ul that creates the buttons */ ul .ols_menu_items { width: 100%; margin-left: 0px; padding: 0px; list-style: none; }

/* When hovering on a menu item */ .ols_menu_item:hover { background-color:#1995ad; color: #ffffff; }

/* Styling for the submenus */ .ols_submenu { width:100%; display: none; font-weight:bold; cursor:pointer; max-width: 59px; font-family: "Trebuchet MS", Helvetica, sans-serif; font-size: 14px;

}

/* Moving the margin for the submenu ul list */ ul.ols_submenu { width: 100%; margin: 10px 0px -11px 0px; list-style: none; }

/* Styling for the submenu buttons */ .ols_submenu li { width: 100%; margin-left: 10px; margin-bottom: 0px; }

/* Hover state for the submenu buttons */ .ols_submenu li a { width: 100%; padding: 5px 10px; display: inline-block; border-bottom: 1px solid #d3d3d3; background-color:white; text-decoration:none; color:#000000; }

.ols_submenu li a:hover { background-color:#000000; color: #72c9b6; }

/* When the screen is smaller than 680px, the menu has the option to hide/show - this button controls that */ .collapsable_menu_control { width:100%; padding: 15px 0px; display:none;

		background-color:#000000;

text-align:center; font-weight:bold; color:#72c9b6; cursor:pointer; -webkit-transition: all 0.4s ease; -moz-transition: all 0.4s ease; -ms-transition: all 0.4s ease; -o-transition: all 0.4s ease; transition: all 0.4s ease; }

/* When hovering on that button */ .collapsable_menu_control:hover { background-color: #72c9b6; color:#000000; }

/********************************* CONTENT OF THE PAGE ********************************/

/* Wrapper for the content */ .ols_content_wrapper { width: 85%; margin: auto; background-color: transparent; }

/* Layout */ .column { width: 50%; margin: auto; color: transparent; }

.full_size { width:100%;

               color: transparent;

}

.full_size img { padding: 10px 15px; width:96.5%; }

.half_size { width: 50%; } .half_size img { padding: 10px 15px; width: 93%; }

.clear { clear:both; }

.highlight { width: 90%; margin: auto; padding: 15px 5px; background-color: #f2f2f2; }

.judges-will-not-evaluate { border: 4px solid #72c9b6; display: block; margin: 5px 15px; width: 95%; font-weight:bold; }

#ols_logo {

width:500px; height: auto; display: block;

   	        margin: auto;

margin-top: 70px;

}

       body {

               background-image: url("");
               background-size: 400px;

/* Styling */

/* Styling for the titles */ .content_wrapper h1, .content_wrapper h2 { padding:5px 15px; border-bottom:0px; color:#72c9b6;

} .content_wrapper h3, .content_wrapper h4, .content_wrapper h5, .content_wrapper h6 { padding:5px 15px; border-bottom:0px; color: #000000; }

/* Font and text */ .content_wrapper p { padding:0px 15px; font-size: 13px; font-family:Tahoma, Geneva, sans-serif; }

/* Links */ .content_wrapper a { font-weight: bold; text-decoration: underline; text-decoration-color:#72c9b6; color: #72c9b6; -webkit-transition: all 0.4s ease; -moz-transition: all 0.4s ease; -ms-transition: all 0.4s ease; -o-transition: all 0.4s ease; transition: all 0.4s ease; }

/* Hover for the links */ .content_wrapper a:hover { text-decoration:none; color:#000000; }

/* Non numbered lists */ .content_wrapper ul { padding:0px 20px; font-size: 13px; font-family:Tahoma, Geneva, sans-serif; }

/* Numbered lists */ .content_wrapper ol { padding:0px; font-size: 13px; font-family:Tahoma, Geneva, sans-serif; }

/* Table */ .content_wrapper table { width: 97%; margin:15px 10px; border: 1px solid #d3d3d3; border-collapse: collapse; }

/* Table cells */ .content_wrapper td { padding: 10px; vertical-align: text-top; border: 1px solid #d3d3d3; border-collapse: collapse; }

/* Table headers */ .content_wrapper th { padding: 10px; vertical-align: text-top; border: 1px solid #d3d3d3; border-collapse: collapse; background-color:#f2f2f2; }

/* Button class */ .button_click { margin: 10px auto; padding: 15px; width:12%; text-align:center; font-weight:bold; background-color: #72c9b6; cursor:pointer; -webkit-transition: all 0.4s ease;

		-moz-transition: all 0.4s ease;

-ms-transition: all 0.4s ease; -o-transition: all 0.4s ease; transition: all 0.4s ease; }

/* Button class on hover */ .button_click:hover { background-color:#000000; color:#72c9b6; }

/********************************* RESPONSIVE STYLING ********************************/

/* IF THE SCREEN IS LESS THAN 1000PX */

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

#content {width:100%; } .menu_wrapper {width:15%;} .content_wrapper {margin-left: 15%;} .menu_item {display:block;} .icon {display:none;} .highlight {padding:10px 0px;} }

/* IF THE SCREEN IS LESS THAN 680PX */

@media only screen and (max-width: 680px) { .collapsable_menu_control { display:block;} .menu_item {display:none;} .menu_wrapper { width:100%; height: 15%; position:relative;} .content_wrapper {width:100%; margin-left:0px;} .column.half_size {width:100%; } .column img { width: 100%; padding: 5px 0px;} .icon {display:block;} .highlight {padding:15px 5px;} }

@@ Line 16: / Line 16: @@
          overflow: visible;
 	margin-top: -55px;
-	/* width: 75%; */
+	/* width: 85%; */
          background-color: #a1d6e2;