Difference between revisions of "Bordeaux/CSS"

Latest revision as of 16:07, 14 July 2016

/* Wrapper for the menu */

* { margin: 0; padding: 0; } body { padding: 50px 75px; background: #FFF 0 0 no-repeat; color: #000; font: 14px/normal Tahoma, Arial, Helvetica, sans-serif; } h1 { margin-bottom: .5em; border-bottom: solid 1px #fff; font-family: Arial, Helvetica, sans-serif; font-weight: normal; font-size: 180%; text-indent: 5px; letter-spacing: -1px; } cite { float: right; } ul.classic { list-style: disc; margin-bottom: 1em; padding-left: 2em; } div.section { clear: both; padding-top: 50px; } fieldset { border: none; }

/*

* Drop-Down Menu 
* Inspired by
* Vimeo.com CSS Drop-Down Menu Theme
* @link		http://www.lwis.net/
* @copyright	2009 Live Web Institute. All Rights Reserved.
*/

ul.dropdown { background: transparent url(../images/box1-bottom-left.png) 0 100% no-repeat; font: normal 14px/normal Tahoma, Verdana, Arial, Helvetica, sans-serif;} ul.dropdown li { padding: 5px 10px; background-color: #172322; color: #fff; line-height: 22px; white-space: nowrap; } ul.dropdown li.first { padding-left: 15px; background: transparent url(../images/box1-bottom2.png) 0 100% no-repeat;} ul.dropdown li.last { padding-right: 15px; background: transparent url(../images/box1-bottom2.png) 100% 100% no-repeat; } ul.dropdown li.hover,ul.dropdown li:hover { color: #b0d730; } ul.dropdown a:link, ul.dropdown a:visited { color: #fff; text-decoration: none; } ul.dropdown a:hover { color: #b0d730; } ul.dropdown a:active { color: #0395cc; } ul.dropdown ul { left: -21px; width: 150px; padding: 0 16px; background: url(../images/box1-top.png) 50% 0 no-repeat;} ul.dropdown li.last ul { left: auto; right: 16px;} ul.dropdown ul li { height: auto; padding: 5px 15px; line-height: 1.3em; white-space: normal;} ul.dropdown ul li.first { padding-left: 0; background: #172322; } ul.dropdown ul li.last { padding-bottom: 10px;background: transparent url(../images/box1-bottom.png) 50% 100% no-repeat;} ul.dropdown ul li.first ul {top: 0; padding: 0 16px 0 0; background-image: url(../images/box1-outwards-top-right.png);} ul.dropdown ul li.first li.first { background-image: none;} ul.dropdown ul li.last {padding-right: 0;} ul.dropdown ul li.last ul { left: 100%; right: auto; top: -16px;}

ul.dropdown ul ul { top: -12px; left: 100%; padding: 16px 0 0; background: transparent url(../images/box1-top-left.png) 0 0 no-repeat;} ul.dropdown ul ul li.first { padding-top: 10px; background: #172322 url(../images/box1-top-right.png) 100% 0 no-repeat;}

ul.dropdown form * {display: inline;float: left;} ul.dropdown form label {display: none;}

ul.dropdown form input.text {

		width: 143px;
		height: 18px;
		padding: 2px 25px 2px 5px;
		border-width: 0;
		background: transparent url(../images/bg_search-field.png) 0 0 no-repeat;
		color: #969696;
		font: normal 14px/17px Tahoma, Verdana, Arial, Helvetica, sans-serif;
		vertical-align: middle;
	}

ul.dropdown form input.text:focus {outline: none;} ul.dropdown form input.button { position: relative; margin: 4px 0 0 -20px;} ul.dropdown *.dir { padding-right: 20px; background-image: url(../images/nav-arrow-down.png); background-position: 100% 50%; background-repeat: no-repeat;} ul.dropdown-horizontal ul *.dir { padding-right: 15px; background-image: url(../images/nav-arrow-right.png); background-position: 95% 50%; background-repeat: no-repeat;}

ul.dropdown li a { display: block; padding: 5px 10px;} ul.dropdown li, ul.dropdown ul li { padding: 0;} ul.dropdown li.dir { padding: 5px 20px 5px 10px;} ul.dropdown ul li.dir { padding: 5px 15px;} ul.dropdown ul a { padding-left: 15px;} ul.dropdown li.hover *.open { color: #b0d730;} ul.dropdown li:hover > *.dir { color: #b0d730;}

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

/* Wrapper for the content */

.content_wrapper { width: 85%; margin-left:150px; padding:10px 0px; float:left; background-color:white; }

/*LAYOUT */ .column { padding: 10px 0px; float:left; background-color:white; }

.full_size { width:100%; }

.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; }

/*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;} }